Поменять радио на селект simpla

Совсем недавно я начал изучать хороший движок для Интернет-магазина Simpla! Очень отзывчивый и гибкий движок.

Но некоторые функции еще не доработаны. Желаю ребятам-разработчикам творческих успехов и поскорее реализовать недостающий функционал.

А пока они работают, я расскажу вам как заменить radiobutton на select - если имеется несколько вариантов товара с разными ценами.

Радио буттоны выглядят громоздно, а выпадающий список, который можно еще и стилизовать - довольно культурно.

Для начала идем в шаблон product.tpl и ищем следующие строки:

<table>
			{foreach $product->variants as $v}
			<tr class="variant">
				<td>
					<input id="variants_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} {if $product->variants|count<2}style="display:none;"{/if}/>
				</td>
				<td>
					{if $v->name}<label class="variant_name" for="variants_{$v->id}">{$v->name}</label>{/if}
				</td>
				<td>
					{if $v->compare_price > 0}<span class="compare_price">{$v->compare_price|convert}</span>{/if}
					<span class="price">{$v->price|convert} <span class="currency">{$currency->sign|escape}</span></span>
				</td>
			</tr>
			{/foreach}
			</table>

И меняем на:

<form class="variants" action="/cart">
<select name="variant" {if $product->variants|count==1  && !$product->variant->name}style='display:none;'{/if}>
				{foreach $product->variants as $v}
				<option value="{$v->id}" {if $v->compare_price > 0}compare_price="{$v->compare_price|convert}"{/if} price="{$v->price|convert}">
				{$v->name}
				</option>
				{/foreach}
			</select>
			<div class="price">
				<strike>
				{if $product->variant->compare_price > 0}
				{$product->variant->compare_price|convert}
				{/if}
				</strike>
				<span>{$product->variant->price|convert}</span>
				<i>{$currency->sign|escape}</i>
			</div>
 <input type="submit" class="button" value="в корзину" data-result-text="добавлено"/>
		</form>

В конец страницы добавляем скрипт:

{literal}
<script>
$(function() {
	// Выбор вариантов
	$('select[name=variant]').change(function() {
		price = $(this).find('option:selected').attr('price');
		compare_price = '';
		if(typeof $(this).find('option:selected').attr('compare_price') == 'string')
			compare_price = $(this).find('option:selected').attr('compare_price');
		$(this).find('option:selected').attr('compare_price');
		$(this).closest('form').find('span').html(price);
		$(this).closest('form').find('strike').html(compare_price);
		return false;
	});
 
});
</script>
{/literal}

Профит...!

P.S. Эти действия надо сделать для всех страниц, где выводятся товары (products.tpl, main.tpl...). Скрипт достаточно вставлять 1 раз на страницу, даже если радиобуттоны меняете больше 1 раза. И убедитесь, что у вас подключена библиотека jQuery