Нужен подобный функционал (выбор цвета и размера)

{addcss file="jquery.jqzoom.css"}
{addjs file="jquery.changeoffer.js"}
{addjs file="jquery.jqzoom-core.js"}
{addjs file="jquery.lightbox.min.js" basepath="common"}
{addcss file="common/jquery.lightbox.packed.css" basepath="common"}
{modulegetvars name="\Colors\Controller\BlockValues" var="colors"}
{assign var=properties value=$product->fillProperty()}

{if $product->isOffersUse()}
    {addjs file="product_offer.js"}
{/if}
    
    <div class="separator-line mb10 product-right-top-margin">
        <span class="menu_gradient pink"></span>
        <span class="title">{$product.title}</span>
    </div> 
    
    <div class="product productItem" data-id="{$product.id}">      
        <div class="photoblock">
            <div class="bigpicture">
                <a href="{$product->getMainImage(1000, 1111, 'xy')}" id="big_pic" rel="gallery"><img src="{$product->getMainImage(408, 450, 'xy')}">
                    <div class="zoom"></div>
                    {if $product->inDir('newest')}<div class="newest"></div>{/if}
                </a>
            </div>
            {assign var=images value=$product->getImages()}
            {if count($images)>1}
            <div class="pictures">   
                {foreach from=$images item=img}
                <a href="{$img->getUrl(1000, 1111, 'xy')}" rel="{ gallery: 'gallery', smallimage: '{$img->getUrl(347,382, 'xy')}', largeimage: '{$img->getUrl(1000, 1111, 'xy')}'}"><img src="{$img->getUrl(102,111, 'axy')}"></a>
                {/foreach}
            </div>
            {/if}
            <div style="display:none" id="gallery-list">
                {foreach from=$images item=img}
                    <a href="{$img->getUrl(800,881, 'xy')}" data-link="{$img->getUrl(1000, 1111, 'xy')}"></a>
                {/foreach}                
            </div>
        </div>        
        
        <div class="info">
            <div class="nomarg">
                {*<span class="title">{$product.title}</span><br>*}
                <span class="brand">{$product->getPropertyValueByTitle('Бренд')}</span><br>
            </div>
            <div class="title">
                {$product.title}
            </div>
            <div class="barcode">
                <b>Артикул:</b> {$product.barcode}
            </div>
            <div class="">
                <span class="rating">
                    <b>Рейтинг:</b> <div class="stars_na" title="Средняя оценка: {$product->getRatingBall()}">
                         <div style="width:{$product->getRatingPercent()}%"></div>
                    </div>
                </span>
                <a href="#feedback" class="feedback-link">Отзывы покупателей</a>
            </div>
            
            
            <div class="description">
                {$product.description}
            </div>
            
                                   
            <div class="colors propsContainer">
                    {if $product->isOffersUse()}
                            <div class="allHiddenOffers" data-info='{literal}{"offers":["Цвет","Размер"],"names":["color","size"]}{/literal}'>
                            {if count($product.offers.items)>0}
                             
                                {foreach from=$product.offers.items key=key item=offer name=offers}
                                    <input type="hidden" class="hidden_offers" data-id="{$key}" data-num="{$offer.num}" data-size="{$offer.propsdata['Размер']}" data-color="{$offer.propsdata['Цвет']}" data-title="{$offer.title}"  data-change-cost='{ ".price .value": "{$product->getCost(null, $key)}", ".price .before-value": "{$product->getCost('Старая цена', $key)}"}'/>
                                {/foreach}                                      
                                                     
                            {/if}
                            </div>
                    {/if}
                
                    <input type="hidden" name="offer" value="0"/>
                    {foreach from=$properties item=data}
                        {foreach from=$data.properties item=property}
                    
                            {if !empty($property.value)}
                                {assign var=has_properties value=true}                        
                                {if !in_array($property.title, ['Бренд'])}
                                    <div class="props">
                                    {if $property.title == 'Цвет'}
                                        {if $product->isOffersUse()}
                                            <div class="color-select">
                                                <span class="key">ЦВЕТ:</span>
                                                <ul class="color-box">
                                                    {foreach from=$property.value key=key item=value}
                                                    <li>
                                                        <div class="box{if $value=='Разноцвет'} multicolor{/if} offer_cell" style="background-color:{$colors.colors[$value].color}" data-id="{$property.id}" data-value="{$value}" data-name="color" data-type="Цвет" title="{$value}"><i></i></div>
                                                    </li>
                                                    {/foreach}
                                                </ul>   
                                            </div>                     
                                        {/if}    
                                    {else}
                                        <div class="product_properties">
                                            <span class="key">{if $property.title=='Размер'}{if $product->isOffersUse()}РАЗМЕР:{/if}{else}{$property.title}:{/if}</span> {if $property.title!=='Размер'}{$property->textView()}{/if}
                                            {if $property.title=='Размер'}
                                                <span class="open_sizes">
                                                    <a href="/Tablica-razmerov/?ajax=1" class="inDialog">Определить свой размер</a>
                                                </span>
                                            {/if}
                                        </div>
                                        {if $property.title=='Размер'}
                                            {if $product->isOffersUse()}
                                                {static_call var=sizes callback=['NefertitiCustom\Model\Api','getSizesFromString'] params=[$property->textView()]}
                                               
                                                {if !empty($sizes)}
                                                    <ul class="sizes-box">
                                                        {foreach from=$sizes item=size}
                                                            {assign var=size value=trim($size)}
                                                            <li><a href="#size{$size}" class="offer_cell" data-id="{$property.id}"  data-value="{$size}" data-name="size" data-type="Размер">{$size}</a></li>
                                                        {/foreach}
                                                    </ul>
                                                {/if}
                                            {/if}
                                        {/if}
                                    {/if}
                                    </div>
                                {/if}
                            {/if}
                        {/foreach}
                    {/foreach}
            </div>
            
            
            <div class="bold-border " style="margin-top:0"></div>
            <div class="priceWrap">
                <div class="price">
                    {if $product->getCost('Старая цена')>0}
                        <span class="before-value">{$product->getCost('Старая цена')}</span> <span class="before-currency">{$product->getCurrency()}</span>
                    {/if}
                    <span class="value">{$product->getCost()}</span> <span class="currency">{$product->getCurrency()}</span>
                </div>
            </div>
            {if $product.num && $product->isOffersUse()}
                <div class="addToCartContainer" data-cart-url="{$router->getUrl('shop-front-cartpage')}">
                    <a href="{$router->getUrl('shop-front-cartpage', ["add" => $product.id])}" class="buyButton addToCart noShowCart" data-product-page="1">В корзину</a>
                </div>
            {else}
                <p>Нет в наличии</p>
            {/if}
        </div>
    </div> <!-- .product -->
    
    <a name="feedback"></a>
    {* Комментарии *}
    {moduleinsert name="\Comments\Controller\Block\Comments" type="Catalog\Model\CommentType\Product"}
    
    {* Последние просмотренные товары *}
    {moduleinsert name="\Catalog\Controller\Block\LastViewed" pageSize="3"}
    
    {assign var=recomended value=$product->getRecommended()}
    {if count($recomended)}    
    <div class="separator bm20">
        <span class="title">С ЭТИМ ТОВАРОМ ОБЫЧНО ПОКУПАЮТ</span>
    </div>
    
    <div class="products">
        {foreach from=$recomended item=item}
            {$item->fillProperty()}
            {include file="%catalog%/one_product.tpl" product=$item}
        {/foreach}
    </div>
    {/if}
    {literal}        
    <script type="text/javascript">
        
        $(window).load(function() {
            $('#big_pic').jqzoom({
                preloadText: 'Загрузка...',
                title: false,
                zoomWidth:322,
                zoomHeight:382,
                xOffset:10
            });                                    
            
            $('#gallery-list a').lightBox({
                imageLoading:            '/resource/img/lightbox/loading.gif',
                imageBtnPrev:            '/resource/img/lightbox/prev.gif',   
                imageBtnNext:            '/resource/img/lightbox/next.gif',   
                imageBtnClose:           '/resource/img/lightbox/close.gif', 
                imageBlank:              '/resource/img/lightbox/blank.gif',                    
            });
            
            $('#big_pic').click(function() {
                var link = $(this).attr('href');
                $('#gallery-list a[data-link="'+link+'"]').click();
            });
            
            $('#big_pic').bind('mouseenter', function() {
                $('.zoom').hide();
            });
            $('#big_pic').bind('mouseleave', function() {
                $('.zoom').show();
            });                                    
        });
    {/literal}
       {if $product->isOffersUse()} 
        {literal}
            $(function() {
                $('.propsContainer').propSelector();
            });
        {/literal}
       {/if}
    {literal}  
        </script> 
    {/literal}