Я должен разделить варианты продукта в пошаговой конфигурации.
Например,
Футболку можно настроить в правой колонке:
Шаг 1. Цвет (группа_01)
Шаг 2. Блеск приложений (группа_02)
Шаг 3. Текст (группа_03)
И добавить в корзину.
Я сделал это с аккордеоном.
Чтобы получить то, что мне нужно, я повторил все варианты кода, за исключением CSS, части, которая мне не нужна на 1-м шаге (Шаг 2 и Шаг 3) и так далее ...
{block name='product_buy'}
<form id="add-to-cart-or-refresh">
<input type="hidden" name="token" value=". {$static_token}">
<input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
<input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">
<div class="accordionform">
<fieldset class="accordionform-fieldset" id="fieldset-one">
<legend class="accordion-form-legend accordionform-legend-active">
<span>STEP1. COLOR</span>
<a class="accordionform_next-btn"><i class="fas fa-chevron-right"></i></a>
<i class="accordionform-de fas fa-chevron-left"></i>
</legend>
<div class="accordionform-wrapper accordionform-wrapper-active">
<div id="product1" class="accordionform-row">
<div class="product-actions">
{block name='product_variants'}
<div class="product-variants">
<div class="product-variants-conf">
{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}</span>
{if $group.group_type == 'select'}
<select
class="form-control form-control-select"
id="group_{$id_attribute_group}"
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 class="accordion--form__label">
<input class="input-color2" type="submit" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
<span
{if $group_attribute.html_color_code}class="color2" style="background-color: {$group_attribute.html_color_code}" {/if}
{if $group_attribute.texture}class="color2 texture" style="background-image: url({$group_attribute.texture})" {/if}
><span class="sr-only">{$group_attribute.name}</span> </span>
<div class="colors-names">{$colors.$id_attribute.name}</div>
</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 class="accordion--form__label">
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
<span class="radio-label">{$group_attribute.name}</span>
</label>
</li>
{/foreach}
</ul>
{/if}
</div>
{/if}
{/foreach}
</div>
{/block}
Проблема в том, что если я сделаю это, на Step2., В другом div аккордеона и с повторным кодированием (Step1 и Step3. Исключены CSS), продукт изменит цвет, выбранный по умолчанию.
"Добавить в корзину" тоже не работает . Я полагаю, потому что он должен оставаться в другой позиции.
Я хочу иметь пошаговую настройку только для одной категории продуктов, внутри гармошки или иным способом.
Спасибо