Установка скрипта «Изменение внешнего вида опций для товаров»
 

Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Стандартный вид опций в модуле "Интернет-магазин" системы uCoz уже многим успел наскучить, показался недостаточно удобным или же просто не "прижился" на основном дизайне сайте, а у некоторых магазинов опции товара настолько же важны, как сам товар. Причин может быть очень много и все они нам, конечно же нам не известны, однако мы точно знаем, что каждый владелец своего интернет-магазина хочет сделать свой проект необычным. Именно с таких на первый взгляд мелочей вы сумеете создать свой собственный, неповторимый вид товаров и обратить внимание клиента на столь важную настройку, как выбор опций товара!

Стандартно опции отображаются в виде выпадающего списка. Наш скрипт полностью видоизменяет основной вариант опций и вам не будет нужно использовать дополнительные библиотеки, которые достаточно сильно нагружают проект меняя абсолютно все теги на сайте и позволит не затрудняясь поменять выпадающий список на:
  • набор кнопок;
  • набор ссылок.

Перед установкой, сделайте полный бэкап шаблонов на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в Панели управления » Управление дизайном » Backup шаблонов.

Первый шаг: установка кода


Перейдите в Панель управления » Управление дизайном » Интернет-магазин, и в шаблонах "Главная страница магазина", "Каталог товаров" и "Страница товара" перед закрывающими тегами </body></html> разместите код:
<script type="text/javascript">
/**
 * .select2Buttons - Convert standard html select into button like elements
 * Licensed under the MIT
 **/
    /* основная функция перестройки селектов */
    jQuery.fn.select2Buttons = function(options) {
	return this.each(function(){
	    var select = $(this);
	    select.hide();
	    var buttonsHtml = $('<div class="options-sh"></div>');
	    var selectIndex = 0;
	    var addOptGroup = function(optGroup){
		if (optGroup.attr('label')){
		    buttonsHtml.append('<strong>' + optGroup.attr('label') + '</strong>');
		}
		var ulHtml = $('<ul class="select-buttons">');
		optGroup.children('option').each(function(){
		    var liHtml = $('<li></li>');
		    if ($(this).attr('disabled') || select.attr('disabled')){
			liHtml.addClass('disabled');
			liHtml.append('<span>' + $(this).html() + '</span>');
		    }else{
			liHtml.append('<a href="javascript://" data-select-index="' + selectIndex + '">' + $(this).html() + '</a>');
		    }
		    if((!options || !options.noDefault) && select.attr("selectedIndex") == selectIndex){
			liHtml.children('a, span').addClass('picked');
		    }
		    ulHtml.append(liHtml);
		    selectIndex++;
		});
		buttonsHtml.append(ulHtml);
	    }
		var optGroups = select.children('optgroup');
	    if (optGroups.length == 0) {
		addOptGroup(select);
	    }else{
		optGroups.each(function(){
		    addOptGroup($(this));
		});
	    }
	    select.after(buttonsHtml);
	    buttonsHtml.find('a').click(function(e){
		e.preventDefault();
		buttonsHtml.find('a, span').removeClass('picked');
		$(this).addClass('picked');
		$(select.find('option')[$(this).attr('data-select-index')]).attr('selected', 'selected');
		select.trigger('change');
	    });
	});
    };
    /* обращаемся к классу для перестройки селектов */
    $('.shop-options select').select2Buttons();
    /* выделяем первый селект */
    $('.select-buttons li:first-child').children().addClass('picked');
</script> 
после чего сохраните изменения.
 

Второй шаг: установка стилей


Теперь нам нужно определиться с видом кнопок для опций. Всего есть два варианта.
Первый вариант (в виде кнопок):
в случае выборого этого варианта — перейдите в Панель управления » Управление дизайном » Интернет-магазин: Таблица стилей (CSS), в самый низ разместите следующий код:
.options-sh ul {
    list-style-type: none;
    clear: left;
    margin: 5px;
    padding: 0;
}
.options-sh li, .options-sh a {
    float: left;
    min-width: 37px;
}
.options-sh li { 
    margin: 0 5px 5px 0; 
}
.options-sh li a, 
.options-sh .limited a {
    border: 1px solid #4a7cd7;
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
}
.options-sh li:last-child { 
    margin-right: 0; 
}
.options-sh a {
    color: #4a7cd7;
    padding: 4px;
    text-align: center;
    text-decoration: none;
    font-size: 14px; 
    transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    -ms-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -webkit-transition: all .15s ease-out;
}
.options-sh a:hover, 
.options-sh .picked {
    background: #4a7cd7;
    border-color: #4a7cd7;
    color: #fff; 
    text-decoration: none;
}
.options-sh .limited a {
    text-align: center;
}
.shop-options li[id*="id-"] span.opt, .shop-options li[id*="last_view-"] span.opt, .shop-options li[id*="all-"] span.opt, .shop-options li[id*="top_view-"] span.opt, .shop-options li[id*="last_add-"] span.opt, .shop-options li[id*="top_sold-"] span.opt {
    display:block;
    clear:both;
    padding-top:10px;
}
.shop-options li[id*="all-"]:after, .shop-options li[id*="last_view-"]:after, .shop-options li[id*="all-"]:after, .shop-options li[id*="top_view-"]:after, .shop-options li[id*="last_add-"]:after, .shop-options li[id*="top_sold-"]:after{
    content:'';
    clear:both;
    display:block;
}
В том случае, если вы наблюдаете отображение не совсем корректным, то скорее всего у вас нестандартный шаблон, отсюда необходимо верстать индивидуально. Как вариант, рекомендуем в таком случае воспользоваться таким кодом:
.options-sh ul { 
    list-style-type: none; 
    clear: left; 
    margin: 5px !important; 
    padding: 0 !important; 
} 
.options-sh li, .options-sh a { 
    float: left; 
    min-width: 37px !important; 
} 
.options-sh li {   
    margin: 0 5px 5px 0 !important;   
} 
.options-sh li a,   
.options-sh .limited a { 
    border: 1px solid #4a7cd7; 
    -moz-border-radius: 3px;   
    -webkit-border-radius: 3px;   
} 
.options-sh li:last-child {   
    margin-right: 0;   
} 
.options-sh a { 
    color: #4a7cd7; 
    padding: 4px; 
    text-align: center; 
    text-decoration: none; 
    font-size: 14px;   
    transition: all .15s ease-out; 
    -o-transition: all .15s ease-out; 
    -ms-transition: all .15s ease-out; 
    -moz-transition: all .15s ease-out; 
    -webkit-transition: all .15s ease-out; 
} 
.options-sh a:hover,   
.options-sh .picked { 
    background: #4a7cd7; 
    border-color: #4a7cd7; 
    color: #fff;   
    text-decoration: none; 
} 
.options-sh .limited a { 
    text-align: center; 
} 
.shop-options li[id*="id-"] { 
    display:table; 
    padding-bottom:20px; 
}

Также есть вариант такого вида:
.options-sh ul { 
   list-style-type: none; 
   clear: left; 
   margin: 5px !important; 
   padding: 0 !important; 
} 
.options-sh li, .options-sh a { 
   float: left; 
   min-width: 37px !important; 
} 
.options-sh li {   
   margin: 0 5px 5px 0 !important;   
} 
.options-sh li a,   
.options-sh .limited a { 
   border: 1px solid #4a7cd7; 
   -moz-border-radius: 3px;   
   -webkit-border-radius: 3px;   
} 
.options-sh li:last-child {   
   margin-right: 0;   
} 
.options-sh a { 
   color: #4a7cd7; 
   padding: 4px; 
   text-align: center; 
   text-decoration: none; 
   font-size: 14px;   
   transition: all .15s ease-out; 
   -o-transition: all .15s ease-out; 
   -ms-transition: all .15s ease-out; 
   -moz-transition: all .15s ease-out; 
   -webkit-transition: all .15s ease-out; 
} 
.options-sh a:hover,   
.options-sh .picked { 
   background: #4a7cd7; 
   border-color: #4a7cd7; 
   color: #fff;   
   text-decoration: none; 
} 
.options-sh .limited a { 
   text-align: center; 
} 
.shop-options li[id*="id-"] { 
    display:table-cell;  
   padding-bottom:20px; 
   width:50%;
}
А также в одну линию:
.options-sh ul { 
    list-style-type: none;
    margin: 0 5px 0 5px !important; 
    padding: 0 !important;
} 
.options-sh li, .options-sh a { 
    float: left; 
    min-width: 37px !important; 
} 
.options-sh li { 
    margin: 0 5px 5px 0 !important; 
} 
.options-sh li a, 
.options-sh .limited a { 
    border: 1px solid #4a7cd7; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
} 
.options-sh li:last-child { 
    margin-right: 0; 
} 
.options-sh a { 
    color: #4a7cd7; 
    padding: 4px; 
    text-align: center; 
    text-decoration: none; 
    font-size: 14px; 
    display:inline-block;
    transition: all .15s ease-out; 
    -o-transition: all .15s ease-out; 
    -ms-transition: all .15s ease-out; 
    -moz-transition: all .15s ease-out; 
    -webkit-transition: all .15s ease-out; 
} 
.options-sh a:hover, 
.options-sh .picked { 
    background: #4a7cd7; 
    border-color: #4a7cd7; 
    color: #fff; 
    text-decoration: none; 
} 
.options-sh .limited a { 
    text-align: center; 
} 
.shop-options li[id*="id-"] { 
    display:inline-block; 
    padding-bottom:10px;
    padding-top:30px; 
}
.shop-options li[id*="id-"] span{
    float:left;
}
Второй вариант (в виде ссылок):
в случае выборого этого варианта — перейдите в Панель управления » Управление дизайном » Интернет-магазин: Таблица стилей (CSS), в самый низ разместите следующий код:
.options-sh ul {
    list-style-type: none;
    clear: left;
    margin: 5px;
    padding: 0;
}
.options-sh li, .options-sh a {
    float: left;
    min-width: 37px;
}
.options-sh a {
    color: #4a7cd7;
    padding: 4px;
    text-align: center;
    text-decoration: none;
    font-size: 14px; 
    transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    -ms-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -webkit-transition: all .15s ease-out;
}
.options-sh a:hover, 
.options-sh .picked {
    background: #4a7cd7;
    border-color: #4a7cd7;
    color: #fff; 
    text-decoration: none;
}
.shop-options li[id*="id-"] span.opt, .shop-options li[id*="last_view-"] span.opt, .shop-options li[id*="all-"] span.opt, .shop-options li[id*="top_view-"] span.opt, .shop-options li[id*="last_add-"] span.opt, .shop-options li[id*="top_sold-"] span.opt {
    display:block;
    clear:both;
    padding-top:10px;
}
.shop-options li[id*="all-"]:after, .shop-options li[id*="last_view-"]:after, .shop-options li[id*="all-"]:after, .shop-options li[id*="top_view-"]:after, .shop-options li[id*="last_add-"]:after, .shop-options li[id*="top_sold-"]:after{
    content:'';
    clear:both;
    display:block;
}
    Информация о классах:
  • options-sh ul – общий блок с опциями;
    • options-sh li, options-sh a – опция.
    • .options-sh .picked – отмеченная опция.

Установка завершена. Если у вас возникли вопросы, которые не затрагивались в документации, спрашивайте в комментариях к товару.