Listing of sizes for proposed products

[mtdkuser]

Hi everyone,

I've been struggling with adding some functionality to my store for quite some time. Well, I would like to add the ability to add suggested products to the shopping cart directly from the page of another product.
I mean, if the proposed products are displayed on the product page then in the place marked on the screenshot below, I would like to provide the possibility to choose the size and "Add to cart" button.



 

I would like to produce a drop-down list effect with sizes just like when selecting a size in a "full-size" product page:

 

So I tried "transplanting" the part of the code responsible for selecting the size from the product-variants.tpl file to the products.tpl file.
Unfortunately, this results in loading the sizes of the product whose page we are on, and I would like to load the sizes available for the proposed product.

The code snippet I copied is:

{foreach from=$groups key=id_attribute_group item=group}
    {if !empty($group.attributes)}
    <div class="clearfix product-variants-item">
      <span class="control-label">{$group.name}{l s=': ' d='Shop.Theme.Catalog'}
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            {if $group_attribute.selected}{$group_attribute.name}{/if}
          {/foreach}
      </span>
      {if $group.group_type == 'select'}
        <select
          class="form-control form-control-select"
          id="group_{$id_attribute_group}"
          aria-label="{$group.name}"
          data-product-attribute="{$id_attribute_group}"
          name="group[{$id_attribute_group}]">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
          {/foreach}
        </select>
      {elseif $group.group_type == 'color'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="float-xs-left input-container">
              <label aria-label="{$group_attribute.name}">
                <input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
                <span
                  {if $group_attribute.texture}
                    class="color texture" style="background-image: url({$group_attribute.texture})"
                  {elseif $group_attribute.html_color_code}
                    class="color" style="background-color: {$group_attribute.html_color_code}"
                  {/if}
                ><span class="attribute-name sr-only">{$group_attribute.name}</span></span>
              </label>
            </li>
          {/foreach}
        </ul>
      {elseif $group.group_type == 'radio'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="input-container float-xs-left">
              <label>
                <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
                <span class="radio-label">{$group_attribute.name}</span>
              </label>
            </li>
          {/foreach}
        </ul>
      {/if}
    </div>
    {/if}
  {/foreach}

 

I see that the code refers to attribute groups, however, I am unable to get into the attribute group of the proposed product. I've tried referencing the $product object, but all I'm able to get out of it is one size variant (the one set as default in backoffice).

Maybe someone of you has solved a similar problem?
Thank you in advance for your help.

 

Best regards,
MTDK

[mtdkuser]

Can anyone help me?