Вот простейшая страница товара (для файла product.tpl) с выбором варианта, показом цены и артикула соответственно выбору, и возможностью положить в корзину выбранный вариант в необходимом количестве. Исходный код привожу без модификаторов |default и |escape, чтобы вам было легче разобраться.
{* курс текущей валюты *}
{$rate = $currency->rate_from / $currency->rate_to}
{* карточка товара *}
<div class="product">
Название: {$product->model} <br />
Код производителя: {$product->pcode} <br />
<hr />
Фотография: <img src="{$product->large_image}" />
<hr />
Цена: <span id="price"></span> {$currency->sign} <br />
Артикул: <span id="sku"></span> <br />
<hr />
Выберите вариант товара:
<select id="selector" onchange="selectVariant(this)">
{foreach $product->variants as $item}
<option value="{$item->variant_id}" data-sku="{$item->sku}" data-price="{($item->discount_price * $rate)|string_format:'%1.2f'}">
{$item->name}
</option>
{/foreach}
</select>
<hr />
<form action="" id="buy-form">
Количество: <input name="amount" type="text" value="1" />
<input type="submit" value="Купить" />
</form>
</div>
{* скрипт обработки выбора варианта *}
<script type="text/javascript">
function selectVariant ( el ) {
var opt = el.options[el.selectedIndex];
jQuery('#price').html(opt.getAttribute('data-price'));
jQuery('#sku').html(opt.getAttribute('data-sku'));
jQuery('#buy-form').attr('action', '{$site}cart/add/' + opt.getAttribute('value'));
}
/* имитируем начальный выбор варианта */
jQuery('#selector').change();
</script>
Принцип работы: когда выполняем перечисление вариантов товара, в соответствующий каждому товару тег option добавляем разные атрибуты с желаемыми сведениями о варианте товара. А в обработчике события onchange селектора вариантов излекаем эти атрибуты и расставляем по необходимым местам карточки товара.