Does anybody know how to select an available size, and add it to cart directly from product miniature ?

[aaclemence]

Hello Prestashop users,

I’m working on an e-shop for a french clothing brand and I’m strugguling with the same problem for a couple weeks. I’m using Prestashop 1.7.

What I’m trying to do is to display the available sizes on the items in the product miniatures while hovering it. Then, when the user click on the size he wants, the item is directly added to his basket, without having to go on the product page or on the quickview.

 

There’s an exemple of what I’m trying to do on this website : https://international.victoriabeckham.com/

 

What I’ve already done is creating a radio input for each size on the item on the file located in templates>catalog>_partials>miniatures>product.tpl. But these buttons are not connected to the stock and sizes available. I’ve also added a link on these buttons « data-button-action="add-to-cart" ». The link is actually working but it’s not connected to the item and the chosen size.

        <div class="product-variants">
          <div class="clearfix product-variants-item">
      <span class="control-label"></span>
              <li class="shortsize">
                      <button value="27" title="34"id="group_1" data-product-attribute="1" name="group[1]" data-button-action="add-to-cart" type="submit">34</button>
                      <button value="28" title="36"id="group_1" data-product-attribute="1" name="group[1]" data-button-action="add-to-cart" type="submit">36</button>
                      <button value="29" title="38"id="group_1" data-product-attribute="1" name="group[1]" data-button-action="add-to-cart" type="submit">38</button>
                      <button value="30" title="40"id="group_1" data-product-attribute="1" name="group[1]" data-button-action="add-to-cart" type="submit">40</button>
                      <button value="31" title="42"id="group_1" data-product-attribute="1" name="group[1]" data-button-action="add-to-cart" type="submit">42</button>
                      <button value="32" title="44"id="group_1" data-product-attribute="1" name="group[1]" data-button-action="add-to-cart" type="submit">44</button>
                      <button value="33" title="46"id="group_1" data-product-attribute="1" name="group[1]" data-button-action="add-to-cart" type="submit">46</button>

                </li>
          </div>
      </div>

 

I’ve red this topic and tried the solution offered by Vekia but it doesn’t seem to work on Prestashop 1.7. https://www.prestashop.com/forums/topic/314731-available-product-sizes-on-product-listsolved/

 

The next thing I’ve tried is to download a free module that adds the « add to cart » link on product miniature : https://www.prestashop.com/forums/topic/661291-free-module-display-add-to-cart-button-in-product-list-pages/

But still not done with my issue..

 

That’s why I’m here, asking for advices, or any kind of help.

Thanks a lot for reading me, I hope I’ve been precise on my issue as much as I had to.

 

 

Edited August 7, 2019 by aaclemence (see edit history)

[jsballarini]

Hi, I'm trying something like that!

I want the product name to have along with the default variant.

For example:
Screw + default variant + default variant
 

{$product.name}{foreach from=$groups key=id_attribute_group item=group}{foreach from=$group.attributes key=id_attribute item=group_attribute}{if !empty($group.attributes)}{if $group_attribute.selected} - {$group_attribute.name}{/if}{/if}{/foreach}{/foreach}

I tried the code above, but I believe that in 'miniature / product.tpl' has no connection to variant, even including include, did not work.
 

I tried to add all product-variants.tpl resumed in product title name, inside miniature/product.tpl, did not work too.

<h3 class="h3 product-title" itemprop="name" style="padding: 3px"><a href="{$product.canonical_url}">{$product.name}{foreach from=$groups key=id_attribute_group item=group}{if !empty($group.attributes)}{if $group.group_type == 'radio'}{foreach from=$group.attributes key=id_attribute item=group_attribute}{if $group_attribute.selected} - {$group_attribute.name}{/if}{/foreach}{/if}{/if}{/foreach}</a></h3>

 

If you know how to retrieve the variants to product miniature, tell me... 

Thanks...