Помогите поменять варианты товаров

[4esik]

Всем привет.
Пытаюсь изменить варианты товаров на движке OKAY_CMS

Вообщем сейчас это выглядит так:

А хочу сделать кнопками вот так:

Код который отвечает за варианты *select

<form class="fn_variants" action="/{$lang_link}cart">
                        <div class="row">
                            <div class="col-sm-6">
                                {* Product variants *}
                             
                                <select name="variant" class="fn_variant variant_select{if $product->variants|count < 2} hidden{/if}">

                                    {foreach $product->variants as $v}

                                        <option value="{$v->id}" data-price="{$v->price|convert}" data-stock="{$v->stock}"{if $v->compare_price > 0} data-cprice="{$v->compare_price|convert}"{/if}{if $v->sku} data-sku="{$v->sku|escape}"{/if} {if $v->units}data-units="{$v->units}"{/if}>{if $v->name}{$v->name|escape}{else}{$product->name|escape}{/if}</option>
                                    {/foreach}
                                </select>
                            </div>

                            <div class="col-sm-6 fn_is_stock{if $product->variant->stock < 1} hidden{/if}">
                                <span class="details_label quontity_label" data-language="product_quantity">
                                    {$lang->product_quantity}<span class="fn_units">{if $product->variant->units}, {$product->variant->units|escape}{/if}</span>:
                                </span>

                                {* Quantity *}
                                <div class="amount fn_product_amount">
                                    <span class="minus">&minus;</span>
                                    <input class="input_amount" type="text" name="amount" value="1" data-max="{$product->variant->stock}">
                                    <span class="plus">&plus;</span>
                                </div>
                            </div>
                        </div>

А как его поменять на *button ? Пока понять не могу, или это можно сделать не через button?
Подскажите как лучше решить эту проблему?

 

[mdss]

можно заменить селект на радио кнопки

<form class="fn_variants" action="/{$lang_link}cart">
						<div class="row">
							<div class="col-sm-6">
								{* Product variants *}
{foreach $product->variants as $v}
								<input type="radio" name="variant" id="pr-{$v->id}" class="pr-radio fn_variant variant_select{if $product->variants|count < 2} hidden{/if}" value="{$v->id}" data-price="{$v->price|convert}" data-stock="{$v->stock}"{if $v->compare_price > 0} data-cprice="{$v->compare_price|convert}"{/if}{if $v->sku} data-sku="{$v->sku|escape}"{/if} {if $v->units}data-units="{$v->units}"{/if}{if $v@first} checked{/if}>
								<label for="pr-{$v->id}">{if $v->name}{$v->name|escape}{else}{$product->name|escape}{/if}</label>
{/foreach}
							</div>
							<div class="col-sm-6 fn_is_stock{if $product->variant->stock < 1} hidden{/if}">
								<span class="details_label quontity_label" data-language="product_quantity">
									{$lang->product_quantity}<span class="fn_units">{if $product->variant->units}, {$product->variant->units|escape}{/if}</span>:
								</span>

								{* Quantity *}
								<div class="amount fn_product_amount">
									<span class="minus">&minus;</span>
									<input class="input_amount" type="text" name="amount" value="1" data-max="{$product->variant->stock}">
									<span class="plus">&plus;</span>
								</div>
							</div>
						</div>

Единственное я не знаю какую роль выполняют тут дата атрибуты, поэтому оставил их.
Стилизация радио кнопок уже через стили, примерно так (для этого я добавил новый класс pr-radio

.pr-radio {
	position:absolute;
	left:-9999px;
}
	.pr-radio + label {
		display:inline-block;
		color:#abb6c5;
		line-height:30px;
		background-color:#fff;
		border:1px solid #cfd7e2;
		border-left:0;
		padding:0 20px;
		margin-left:-.25em;
		transition:all .2s;
	}
	.pr-radio:checked + label {
		color:#fff;
		background-color:#abb6c5;
	}

Код я не тестировал, если что.

 

[4esik]

можно заменить селект на радио кнопки

<form class="fn_variants" action="/{$lang_link}cart">
                        <div class="row">
                            <div class="col-sm-6">
                                {* Product variants *}
{foreach $product->variants as $v}
                                <input type="radio" name="variant" id="pr-{$v->id}" class="pr-radio fn_variant variant_select{if $product->variants|count < 2} hidden{/if}" value="{$v->id}" data-price="{$v->price|convert}" data-stock="{$v->stock}"{if $v->compare_price > 0} data-cprice="{$v->compare_price|convert}"{/if}{if $v->sku} data-sku="{$v->sku|escape}"{/if} {if $v->units}data-units="{$v->units}"{/if}{if $v@first} checked{/if}>
                                <label for="pr-{$v->id}">{if $v->name}{$v->name|escape}{else}{$product->name|escape}{/if}</label>
{/foreach}
                            </div>
                            <div class="col-sm-6 fn_is_stock{if $product->variant->stock < 1} hidden{/if}">
                                <span class="details_label quontity_label" data-language="product_quantity">
                                    {$lang->product_quantity}<span class="fn_units">{if $product->variant->units}, {$product->variant->units|escape}{/if}</span>:
                                </span>

                                {* Quantity *}
                                <div class="amount fn_product_amount">
                                    <span class="minus">&minus;</span>
                                    <input class="input_amount" type="text" name="amount" value="1" data-max="{$product->variant->stock}">
                                    <span class="plus">&plus;</span>
                                </div>
                            </div>
                        </div>

Единственное я не знаю какую роль выполняют тут дата атрибуты, поэтому оставил их.
Стилизация радио кнопок уже через стили, примерно так (для этого я добавил новый класс pr-radio

.pr-radio {
    position:absolute;
    left:-9999px;
}
    .pr-radio + label {
        display:inline-block;
        color:#abb6c5;
        line-height:30px;
        background-color:#fff;
        border:1px solid #cfd7e2;
        border-left:0;
        padding:0 20px;
        margin-left:-.25em;
        transition:all .2s;
    }
    .pr-radio:checked + label {
        color:#fff;
        background-color:#abb6c5;
    }

Код я не тестировал, если что.

Спасибо что откликнулись поменял уже что-то похоже получилось то что и добиваюсь))

Но какой-то атрибут сбился, перстала пересчитываться цена, то есть в корзину добавляется с той ценой которая надо, а вот сам цена на сайте перестала менятся, может дата атрибута и считала цену?

 

[mdss]

Но какой-то атрибут сбился, перстала пересчитываться цена, то есть в корзину добавляется с той ценой которая надо, а вот сам цена на сайте перестала менятся, может дата атрибута и считала цену?

Надо смотреть js на сайте, нужна ссылка.