Как заменить radio выбор артикула в товаре на выпадающий список?

Когда много артикулов в материнском товаре было бы компактнее выбирать из выпадающего селектора. И при выборе, чтобы цена менялась и фото артикула.

Как код переписать?

Собственно исходный код radio списка (из product.cart.html ):

{* SKU selector *}


<ul class="skus">

{foreach $product.skus as $sku}

{$sku_available = $product.status && $sku.available && ($wa->shop->settings('ignore_stock_count') || $sku.count === null || $sku.count > 0)}

<li itemprop="offers" itemscope itemtype="http://schema.org/Offer">

<label{if !$sku.available} class="disabled"{/if}>

<input name="sku_id" type="radio" value="{$sku.id}"{if !$sku.available} disabled="true"{/if}{if !$sku_available}data-disabled="1"{/if}{if $sku.id == $product.sku_id} checked="checked"{/if} data-compare-price="{shop_currency($sku.compare_price, $product.currency, null, 0)}" data-price="{shop_currency($sku.price, $product.currency, null, 0)}"{if $sku.image_id} data-image-id="{$sku.image_id}"{/if}> <span itemprop="name">{$sku.name|escape}</span>

{if $sku.sku}<span class="hint" itemprop="name">{$sku.sku|escape}</span>{/if}

<meta itemprop="price" content="{shop_currency($sku.price, $product.currency)}">

<meta itemprop="priceCurrency" content="RUB" />

<span class="price tiny nowrap">{shop_currency_html($sku.price, $product.currency)}</span>

{if (!($sku.count === null) && $sku.count <= 0)}

<link itemprop="availability" href="http://schema.org/OutOfStock" />

{else}

<link itemprop="availability" href="http://schema.org/InStock" />

{/if}

</label>

</li>

{$product_available = $product_available or $sku_available}

{/foreach}

</ul>


2 ответа

  • 2

    Ответ: обратиться за платной помощью к экспертам. Не тот объем работы, чтобы делать это бесплатно. Да и при этом многие плагины, подвязанные к выборам артикулов, перестанут работать корректно. Чтобы этого избежать нужно весь день убить на реализацию связки "отображаемый селект" + "рабочие, но скрытые отрицательным отступом радио".

  • 2

    Да, только хотел сказать:

    1. скрываем радио буттоны с помощью css

    2. выводим селект с нужным перечнем

    3. пишем JS скрипт, который при смене селекта изменяет выбор радио буттона.

    Это самая простая реализация. Можно бутоны вообще убрать и выводит селект, но придется переписать все скрипты, связнные с этим. Так же могут быть проблемы с плагинами, которые используют эти буттоны

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите