Установка «Опции товаров для uKit»

Введение

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

Скрипт позволяет встроить виджет «Карточка» 3 типа опций:

RADIO (выбор одного пункта из нескольких представленных);
SELECT (Выбор одного пункта из нескольких представленных в выпадающем списке);
CHECKBOX (Выбор одного или нескольких элементов их представленных).

Назначать опции можно как для группы карточек, так и для каждой индивидуально.
В каждой карточке может быть не более трех опций и не более 1 типа опций.
Содержимое пунктов опций для каждой карточки может быть различным. Например, для первой карточки вы можете задать 6 пунктов RADIO, а для остальных двух - по 3 пункта.
Для каждой группы карточек или даже для каждой карточки можно настроить индивидуальный дизайн опций при помощи своего класса и присвоенных к этому классу свойств CSS.

Для настройки и редактирования скрипта необходим тариф ПРО с доступом к коду. В инструкции подробно расписано, как устанавливать и настраивать скрипт.

Требования для самостоятельной установки и редактирования:

Наличие тарифа Про
Базовые знания в jQuery, CSS, HTML
Умение работать с консолью браузера

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

Первый шаг: установка библиотек, стилей и обработчика

Для работы скрипта потребуется подключение библиотеки jQuery и двух плагинов, отвечающих за стилизацию опций. В панели управления uKit необходимо перейти к созданию виджета «Свой код».

1. Создаем первую вставку кода под названием «Библиотеки» и вставляем в нее следующий код:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//uscript.pro/arh/_files/js/icheck.min.js" type="text/javascript"></script>
<script src="//uscript.pro/arh/_files/js/jquery.nice-select.min.js"></script>

Затем установите настройки, как показано на скриншоте:

2. Создаем вторую вставку кода под названием «Опции CSS» и вставляем в нее следующий код:

<style>
  .opt-title {text-align:center;font-weight:bold;font-size:16px;margin: 10px 0;line-height:20px;}
  .opt-line {line-height:24px;margin: 0 0 6px 0;width:100%;float:left;text-align:left;}
  .opt-line .label {cursor:pointer;line-height:24px;display:inline-block;position:relative;top:2px;}
  .rbox, .cbox {margin: 0 auto; max-width:150px;}
  .sWrap {margin: 10px auto; max-width:150px;}
  
  .optSelect {background:#fff;border-radius:18px;line-height:32px;border: 2px solid #fdc52d;padding: 0 15px;max-width:150px;outline:none;}

/* iCheck plugin Flat skin ----------------------------------- */
 .iradio_flat {display: inline-block;vertical-align: middle;line-height:26px;margin: 0 10px 0 0;padding: 0;width: 22px;height: 22px;border: 1px solid #3f3f3f;background: none;cursor: pointer;border-radius:50%;}
.iradio_flat.checked:before {content:"";display:block;position:absolute;width:12px;height:12px;margin: 4px;background:#7ab017;border-radius:50%;}
 
.iradio_ok {display: inline-block;vertical-align: middle;line-height:26px;margin: 0 10px 0 0;padding: 0;width: 22px;height: 22px;border: 2px solid #3f3f3f;background: none;cursor: pointer;border-radius:50%;}
.iradio_ok.checked:before {content:"";display:block;position:absolute;width:10px;height:10px;margin: 4px;background:#3f3f3f;border-radius:50%;}
  
  
  
.icheckbox_flat {display: inline-block;vertical-align: middle;line-height:26px;margin: 0 10px 0 0;padding: 0;width: 22px;height: 22px;border: 1px solid #3f3f3f;background: none;cursor: pointer;}
.icheckbox_flat.checked:before {content:"";display:block;position:absolute;width:14px;height:14px;margin: 3px;background:#7ab017;}
  
.icheckbox_ok {display: inline-block;vertical-align: middle;line-height:26px;margin: 0 10px 0 0;padding: 0;width: 22px;height: 22px;border: 2px solid #3f3f3f;background: none;cursor: pointer;border-radius:3px;}
.icheckbox_ok.checked:before {content: "";display:block;position:absolute;width:18px;height:18px;margin: 0px;background:#3f3f3f;} 
      
  
 /* NiceSelect ----------------------------------- */ 
.nice-select {-webkit-tap-highlight-color: transparent;background-color: #fff;
  border-radius: 5px;border: solid 1px #000;box-sizing: border-box;clear: both;cursor: pointer;display: block;float: left;font-family: inherit;font-size: 14px;
  font-weight: normal;height: 42px;line-height: 40px;outline: none;padding-left: 18px;padding-right: 30px;position: relative;text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;white-space: nowrap;width: auto; }
.exm {border: solid 2px #000;}
  #main .nice-select ul li:before {display:none !important;}
.nice-select:hover {border-color: #7ab017; }
.nice-select:active, .nice-select.open, .nice-select:focus {border-color: #7ab017; }
.nice-select:after {border-bottom: 2px solid #7ab017;border-right: 2px solid #7ab017;content: '';display: block;height: 7px;margin-top: -4px;pointer-events: none;position: absolute;right: 12px;top: 50%;
    -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%;transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;width: 7px; }
.nice-select.open:after {-webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg);transform: rotate(-135deg); }
.nice-select.open .list {opacity: 1;pointer-events: auto;-webkit-transform: scale(1) translateY(0);-ms-transform: scale(1) translateY(0);transform: scale(1) translateY(0); }
.nice-select.disabled {border-color: #ededed;color: #999;pointer-events: none; }
.nice-select.disabled:after {border-color: #cccccc; }
.nice-select.wide {width: 100%; }
.nice-select.wide .list {left: 0 !important;right: 0 !important; }
.nice-select.right {float: right; }
.nice-select.right .list {left: auto;right: 0; }
.nice-select.small {font-size: 12px;height: 36px;line-height: 34px; }
.nice-select.small:after {height: 4px;width: 4px; }
.nice-select.small .option {line-height: 34px;min-height: 34px; }
.nice-select .list {background-color: #fff;border-radius: 5px;
box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);box-sizing: border-box;margin-top: 4px;opacity: 0;overflow: hidden;padding: 0;pointer-events: none;position: absolute;top: 100%;left: 0;
-webkit-transform-origin: 50% 0;-ms-transform-origin: 50% 0;transform-origin: 50% 0;-webkit-transform: scale(0.75) translateY(-21px);-ms-transform: scale(0.75) translateY(-21px);transform: scale(0.75) translateY(-21px);-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;z-index: 9; }
.nice-select .list:hover .option:not(:hover) {background-color: transparent !important; }
.nice-select .option {cursor: pointer;font-weight: 400;line-height: 40px;list-style: none;min-height: 40px;outline: none;padding-left: 18px;padding-right: 29px;text-align: left;-webkit-transition: all 0.2s;transition: all 0.2s; }
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {background-color: rgba(122, 176, 23, 0.43); }
.nice-select .option.selected {font-weight: bold; }
.nice-select .option.disabled {background-color: transparent;color: #999;cursor: default; }
.no-csspointerevents .nice-select .list {display: none; }
.no-csspointerevents .nice-select.open .list {display: block; }
</style>

Настройки аналогичный настройкам первой вставки.

3. Создаем третью вставку кода под названием «Обработчик клика» и вставляем в нее следующий код:

<script>
$('.ul-goods-view-button').on('click', function() {// начало клика
 var pClass = $(this).parent().parent().find('.ob'); 

  /////////////////////////////////////// --- RADIO --- ////////////////////////////////////////////////
  if ( pClass.hasClass('rbox') ) {
var rn = 3; // ПОРЯДКОВЫЙ НОМЕР ПОЛЯ, отсчет ведется от 0
//var rValue = $(this).parent().parent().find('input:radio:checked').val(); // значение выбранной опции value
var rFor = $(this).parent().parent().find('input:radio:checked').attr('id');  
  // тайминг окна
var rOptSave = setInterval(function() {
$('.fields').find('dl').eq(rn).find('input').val( $('label[for="' + rFor + '"]').text() );  
//$('.fields').find('dl').eq(rn).find('input').val( $('label[for="' + rFor + '"]').text() + ' - ' + rValue  ); // если необходимо передать значение value
$('.fields').find('dl').eq(rn).hide(); // скрыть поле в окошке
}, 80);
  setTimeout(function() {
  clearInterval(rOptSave);
}, 2000);
    
  } // есть опции RADIO
///////////////////////////////////////// --- RADIO --- /////////////////////////////////////////////////////  
  
///////////////////////// --- SELECT --- //////////////////////////////////////////////  
  if ( pClass.hasClass('sbox') ) {
 var sn = 4; // ПОРЯДКОВЫЙ НОМЕР ПОЛЯ, отсчет ведется от 0
    var sValue = $(this).parent().parent().find('.sbox option:selected').text();
  // тайминг окна
var sOptSave = setInterval(function() {
$('.fields').find('dl').eq(sn).find('input').val( sValue );
$('.fields').find('dl').eq(rn).hide(); // скрыть поле в окошке
}, 80);
  setTimeout(function() {
  clearInterval(sOptSave);
}, 2000);
  } // есть опции SELECT
//////////////////////// --- SELECT --- ///////////////////////////////////////  
  
  
  ///////////////////////// --- CHECKBOX --- //////////////////////////////////////////////  
  if ( pClass.hasClass('cbox') ) {
 var cn = 5; // ПОРЯДКОВЫЙ НОМЕР ПОЛЯ, отсчет ведется от 0
    var dann = $.map( $(this).parent().parent().find('.cbox input:checkbox:checked').parent().parent().find('label'), function(cl){ return $(cl).text(); });
  // тайминг окна
var cOptSave = setInterval(function() {
$('.fields').find('dl').eq(cn).find('input').val( dann.join(', ')  );
$('.fields').find('dl').eq(rn).hide(); // скрыть поле в окошке
}, 80);
  setTimeout(function() {
  clearInterval(cOptSave);
}, 2000);
  } // есть опции SELECT
//////////////////////// --- CHECKBOX --- ///////////////////////////////////////
  
  
  
}); // конец клика
</script>

Затем установите настройки, как показано на скриншоте:

В конце установки будет необходимо вернуться сюда и указать порядковый номер полей.

Второй шаг: установка наборов опций

Установка этого участка кода зависит от структуры вашего сайта и расположения карточек. Самое главное - соблюдать основное правило: скрипт располагается под карточками! Расположите виджет «Html-код» под карточками и вставьте в него следующий код:

<script>
/////////////////// --- Опции RADIO для группы карточек --- ///////////////////  
$('#ul-id-117-0 div[data-widget="goods"]').each( function(io) {
var cx = '1';
$(this).find('.ul-goods-view-button').before('<div class="opt-title">Выбор RADIO</div>'+ 
'<div class="ob rbox">'+
'<div class="opt-line"><input class="i-opt" type="radio" id="type-1-' + cx + io + '" name="opt-1-' + cx + io +'" checked="checked"><label class="label" for="type-1-' + cx + io + '">Утренняя</label></div>'+ 
'<div class="opt-line"><input type="radio" class="i-opt" id="type-2-' + cx + io + '" name="opt-1-' + cx + io +'"><label class="label" for="type-2-' + cx + io + '">Дневная</label></div>'+
'<div class="opt-line"><input type="radio" class="i-opt" id="type-3-' + cx + io + '" name="opt-1-' + cx + io +'"><label class="label" for="type-3-' + cx + io + '">Вечерняя</label></div>'+
'<div class="opt-line"><input type="radio" class="i-opt" id="type-4-' + cx + io + '" name="opt-1-' + cx + io +'"><label class="label" for="type-4-' + cx + io + '">Сутки</label></div>'+
'</div> ');      
});
/////////////////// --- Опции RADIO для группы карточек --- ///////////////////
  
   
/////////////////// --- Опции SELECT для группы карточек --- ///////////////////  
$('#ul-id-137-47 div[data-widget="goods"]').each( function(io) {
//var cx = '2'; // для этого типа опций префикс не требуется
$(this).find('.ul-goods-view-price').before('<div class="opt-title">Выбор SELECT</div>'+
'<div class="sWrap">'+
'<select class="ob sbox">'+
'<option>Красный</option>'+
'<option>Зеленый</option>'+
'<option>Голубой</option>'+
'</select>'+
'</div>');   
}); 
/////////////////// --- Опции SELECT для группы карточек --- ///////////////////  
  

/////////////////// --- Опции CHECKBOX для группы карточек --- ///////////////////
$('#ul-id-137-78 div[data-widget="goods"]').each( function(io) {
var cx = '3';
 $(this).find('.ul-goods-view-button').before('<div class="opt-title">Выбор CHECKBOX</div>'+
'<div class="ob cbox">'+
'<div class="opt-line"><input class="i-opt" type="checkbox" id="type-1c-' + cx + io + '" name="opt-1c-' + cx + io +'"><label class="label" for="type-1c-' + cx + io + '">Модерн</label></div>'+ 
'<div class="opt-line"><input type="checkbox" class="i-opt" id="type-2c-' + cx + io + '" name="opt-2c-' + cx + io +'"><label class="label" for="type-2c-' + cx + io + '">Классический</label></div>'+ 
'</div> ');      
  });
/////////////////// --- Опции CHECKBOX для группы карточек --- ///////////////////  
  
  
/////////////////// --- Набор опций --- ///////////////////
$('#ul-id-138-17 div[data-widget="goods"]').each( function(io) {
var cx = 'r';
var cid =  $(this).attr('id'); 

  if ( cid == 'ul-id-138-32' || io == 2 || io == 4) {
    
 $(this).find('.ul-goods-view-button').before('<div class="opt-title">Выбор CHECKBOX</div>'+
'<div class="ob cbox">'+
'<div class="opt-line"><input class="i-opt" type="checkbox" id="type-1c-' + cx + io + '" name="opt-1c-' + cx + io +'"><label class="label" for="type-1c-' + cx + io + '">Модерн</label></div>'+ 
'<div class="opt-line"><input type="checkbox" class="i-opt" id="type-2c-' + cx + io + '" name="opt-2c-' + cx + io +'"><label class="label" for="type-2c-' + cx + io + '">Классический</label></div>'+ 
'</div> ');
    
  } //
  
  $(this).find('.ul-goods-view-price').before('<div class="opt-title">Выбор SELECT</div>'+
'<div class="sWrap">'+
'<select class="ob sbox exm">'+
'<option>Красный</option>'+
'<option>Зеленый</option>'+
'<option>Голубой</option>'+
'</select>'+
'</div>');
  
if ( io == 1 || io == 2 || io == 3 || io == 5) {
  
$(this).find('.ul-goods-view-button').before('<div class="opt-title">Выбор RADIO</div>'+ 
'<div class="ob rbox">'+
'<div class="opt-line"><input class="i-opt" type="radio" id="type-1-' + cx + io + '" name="opt-1-' + cx + io +'" checked="checked"><label class="label" for="type-1-' + cx + io + '">Утренняя</label></div>'+ 
'<div class="opt-line"><input type="radio" class="i-opt" id="type-2-' + cx + io + '" name="opt-1-' + cx + io +'"><label class="label" for="type-2-' + cx + io + '">Дневная</label></div>'+
'<div class="opt-line"><input type="radio" class="i-opt" id="type-3-' + cx + io + '" name="opt-1-' + cx + io +'"><label class="label" for="type-3-' + cx + io + '">Вечерняя</label></div>'+
'<div class="opt-line"><input type="radio" class="i-opt" id="type-4-' + cx + io + '" name="opt-1-' + cx + io +'"><label class="label" for="type-4-' + cx + io + '">Сутки</label></div>'+
'</div> ');
  
} // 
  }); 
/////////////////// --- Набор опций--- ///////////////////   
  
  
  

/////////////////// --- Стилизация опций--- ///////////////////    
$('div[data-widget="goods"] input[type="radio"]').iCheck( {radioClass: 'iradio_flat'} ); // стилизация RADIO - iradio_flat
$('#ul-id-138-17 div[data-widget="goods"] input[type="radio"]').iCheck( {radioClass: 'iradio_ok'} ); // стилизация RADIO - iradio_ok
  
$('div[data-widget="goods"] input[type="checkbox"]').iCheck( {checkboxClass: 'icheckbox_flat'} ); // стилизация CHECKBOX - icheckbox_flat
$('#ul-id-138-17 div[data-widget="goods"] input[type="checkbox"]').iCheck( {checkboxClass: 'icheckbox_ok'} ); // стилизация CHECKBOX - icheckbox_ok
  
$('select.sbox').niceSelect();  // стилизация SELECT
/////////////////// --- Стилизация опций--- ///////////////////   
</script>

Третий шаг: настройка и использование

1. Назначение обработчика на группу карточек.

Чтобы назначить обработчик на определенный набор карточек или вообще на все карточки на странице, необходимо определить ID общего контейнера и вписать его в функцию .each(). Для этого воспользуемся консолью и найдем ID внешнего контейнера, например: ul-id-117-0.

Теперь необходимо прописать этот ID в функцию, в результате получится примерно так:

$('#ul-id-117-0 div[data-widget="goods"]').each( function(io) {
var cx = '1';
$(this).find('.ul-goods-view-button').before('<div class="opt-title">Выбор RADIO</div>'+ 
'<div class="ob rbox">'+
'<div class="opt-line"><input class="i-opt" type="radio" id="type-1-' + cx + io + '" name="opt-1-' + cx + io +'" checked="checked"><label class="label" for="type-1-' + cx + io + '">Утренняя</label></div>'+ 
'<div class="opt-line"><input type="radio" class="i-opt" id="type-2-' + cx + io + '" name="opt-1-' + cx + io +'"><label class="label" for="type-2-' + cx + io + '">Дневная</label></div>'+
'<div class="opt-line"><input type="radio" class="i-opt" id="type-3-' + cx + io + '" name="opt-1-' + cx + io +'"><label class="label" for="type-3-' + cx + io + '">Вечерняя</label></div>'+
'<div class="opt-line"><input type="radio" class="i-opt" id="type-4-' + cx + io + '" name="opt-1-' + cx + io +'"><label class="label" for="type-4-' + cx + io + '">Сутки</label></div>'+
'</div> ');      
});

Здесь div[data-widget="goods"] необходима для определения типа виджета - «Карточка».

Если набор опций используется для нескольких наборов карточек, расположенных в разных блоках (у них нет общего контейнера), можно записать ID общих блоков через запятую. Получится примерно так:

$('#ul-id-117-0 div[data-widget="goods"], #ul-id-87-2 div[data-widget="goods"]').each( function(io) {
var cx = '1';
// содержимое 
});

2. Сборка блока опций.

В шаге 2 показан пример кода для всех трех типов опций. Для RADIO и CHECKBOX код формируется практически одинаково. У каждого пункта есть ID input, name и ID label. Их значения должны быть построены по аналогии с примером. В функции запуска RADIO и CHECKBOX есть переменная var cx = '1';, которая определяет префикс. Для каждой новой функции значение префикса должно быть разным. Указывать можно цифры и латинские символы.

Для опций типа SELECT настройка намного проще, там нет необходимости указывать значения ID и прочее, просто сформируйте нужный список и встройте в функцию.

3. Создание наборов опций.

Если в общем контейнере вам необходимо назначить разные наборы опций на разные карточки, вы можете сделать это при помощи условий проверки по номеру карточки в наборе или по ее ID. Номер карточки автоматически определяется при запуске функции, а для определения по ID необходимо добавить участок кода в фцнкцию .each():

var cid =  $(this).attr('id');

Пример кода, где одновременно используется проверка по ID и по номеру карточки в наборе, можно посмотреть ниже. Также стоит помнить, что отсчет ведется от 0.

  if ( cid == 'ul-id-138-32' || io == 2 || io == 4) {
    
 $(this).find('.ul-goods-view-button').before('<div class="opt-title">Выбор CHECKBOX</div>'+
'<div class="ob cbox">'+
'<div class="opt-line"><input class="i-opt" type="checkbox" id="type-1c-' + cx + io + '" name="opt-1c-' + cx + io +'"><label class="label" for="type-1c-' + cx + io + '">Модерн</label></div>'+ 
'<div class="opt-line"><input type="checkbox" class="i-opt" id="type-2c-' + cx + io + '" name="opt-2c-' + cx + io +'"><label class="label" for="type-2c-' + cx + io + '">Классический</label></div>'+ 
'</div> ');
    
  }

4. Стилизация опций.

Есть участок кода, отвечающий за стилизацию опций всх трех типов.

/////////////////// --- Стилизация опций--- ///////////////////    
$('div[data-widget="goods"] input[type="radio"]').iCheck( {radioClass: 'iradio_flat'} ); // стилизация RADIO - iradio_flat
$('#ul-id-138-17 div[data-widget="goods"] input[type="radio"]').iCheck( {radioClass: 'iradio_ok'} ); // стилизация RADIO - iradio_ok
  
$('div[data-widget="goods"] input[type="checkbox"]').iCheck( {checkboxClass: 'icheckbox_flat'} ); // стилизация CHECKBOX - icheckbox_flat
$('#ul-id-138-17 div[data-widget="goods"] input[type="checkbox"]').iCheck( {checkboxClass: 'icheckbox_ok'} ); // стилизация CHECKBOX - icheckbox_ok
  
$('select.sbox').niceSelect();  // стилизация SELECT
/////////////////// --- Стилизация опций--- ///////////////////

Вы можете применить какой-то стиль ко всем опциям в карточках, либо к определенным блокам или даже к каждой карточке индивидуально. Для этого потребуется определить ID общего блока или самой карточки используя консоль браузера.

При вызове функции стилизации вы можете указать нужный класс и с его помощью создать нужный стиль для RADIO или CHECKBOX. Таким образом можно вызывать любое количество функций стилизации с разными классами, а затем назначать на эти классы нужные стили во вставке «Опции CSS».

Опции типа SELECT стилизуются несколько иначе. Чтобы перенастроить вид, необходимо указать при формировании самого блока опций уникальный класс. Здесь такой класс exm. Далее используя этот класс вы сможете изменить необходимые свойства SELECT во вставке «Опции CSS».

5. Настройка окна заявки.

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

В третьем пункте первого шага мы устанавливали код «Обработчик клика», в котором для каждого типа опций есть переменная, указывающая порядковый номер поля, в которое будут записываться выбранные значения. Необходимо заменить значения этих переменных на порядковые номера полей, отсчет ведется от 0.

По умолчанию эти поля будут скрыты в окне, но вы можете их отобразить, если это необходимо. За это отвечает следующий участок кода, расположенный во вставке «Обработчик клика»:

$('.fields').find('dl').eq(rn).hide(); // скрыть поле в окошке

Установка завершена!

Если у вас возникли вопросы по товару или проблема с установкой, то Вы можете связаться с нами по адресу электронной почты support@uscript.pro