Dropdown мобильная версия вариантов характеристик

[Ltim]

Всем добрый день! Пытаюсь менять отображение текстового варианта выборки характеристики типо “размер” на странице product_option_content.pre.tpl.

[Ltim]

Чтобы при нажатии выходила так, а не на саймой странице выбирать.

[Ltim]

Пока получилось как popup. Сделал вот так:

<a class="ty-dropdown-box cm-dialog-opener cm-dialog-auto-size" data-ca-target-id="sw_dropdown_{$dropdown_id}">{$feature.description}</a>

                                <div class="products_variants hidden" id="sw_dropdown_{$dropdown_id}"  title="Заголовок окна">
                                    <div class="ty-clear-both" >
                                        {foreach $feature.variants as $variant}
                                            {if $variant.product.product_id && $variant.product.status}
                                                <input type="radio" name="feature_{$feature.feature_id}" value="{$variant.variant_id}"
                                                        {if $feature.variant_id == $variant.variant_id} checked {/if}
                                                       id="feature_{$feature.feature_id}_variant_{$variant.variant_id}_{$obj_prefix}{$obj_id}"
                                                       data-ca-variant-id="{$variant.variant_id}"
                                                       data-ca-product-url="{$product_url|fn_link_attach:"product_id={$variant.product.product_id}"|fn_url}"
                                                       class="hidden ty-product-options__radio {if $feature.purpose === $purpose_create_variations || $quick_view || $ut2_select_variation}cm-ajax{/if} {if $details_page}cm-history{/if} cm-ajax-force"
                                                       data-ca-target-id="{$container}" />
                                                <label for="feature_{$feature.feature_id}_variant_{$variant.variant_id}_{$obj_prefix}{$obj_id}"
                                                       class="ty-product-options__radio--label {if !$variant.product.abt__ut2_is_in_stock}ty-product-options__radio--label--disabled{/if}">
                                                    <span class="ty-product-option-checkbox">{$feature.prefix}</span>
                                                    <bdi>{$variant.variant}</bdi>
                                                    <span class="ty-product-option-checkbox">{$feature.suffix}</span>
                                                </label>
                                            {elseif $show_all_possible_feature_variants}
                                                <label class="ty-product-options__radio--label ty-product-options__radio--label--disabled">
                                                    <span class="ty-product-option-checkbox">{$feature.prefix}</span>
                                                    <bdi>{$variant.variant}</bdi>
                                                    <span class="ty-product-option-checkbox">{$feature.suffix}</span>
                                                </label>
                                            {/if}
                                        {/foreach}
                                    </div>
                                </div>

[Ltim]

Пробовал как и у cart_content.tpl сделать, но потом осознал что у него все классы уникальные.

[Ltim]

Как сделать правильно этот dropdown или я все правильно делаю с popup?

[Ltim]

Пришел к выводу, что dropdown это popup только с отдельным шаблоном. Сделал popup и добавил анимацию и свой шаблон

[Ltim]

Получилось точь в точь