Внимание! Ищем программистов, знакомых с shopify или insales

Скрипт смены изображений при выборе модификации товара

Зачем необходим скрипт смены изображений при смене модификации товара? Он поможет посетителям вашего интернет-магазина ознакомиться с фото всех модификаций товара. И сделает это в автоматическом режиме.

Предупреждение!

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

Мы оказываем только платную техническую поддержку по данному вопросу и сможем интегрировать код в Ваш магазин только на платной основе

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


Исходные данные

Скорее всего в шаблоне страница товара в области изображений будет выглядеть примерно так:

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

<script type="text/javascript" src="{{ 'shadowbox/adapter/shadowbox-jquery.js' | global_asset_url }}"></script>
<script type="text/javascript" src="{{ 'shadowbox/shadowbox.js' | global_asset_url }}"></script> 
<script>
    $( function(){
          var Large = $(".prev_full a"), Thumbs = $(".prev_min a");
          Thumbs.hover(function(){
            Large.find("img").attr("src",$(this).attr("data-img"));
            Large.attr("href",$(this).attr("href"));
        });
     $('#thumblist').carouFredSel({
        prev: '#img_prev',
        next: '#img_next',
            pagination  : '#pagination',
        auto: false,
            swipe: {
                onMouse: true,
                onTouch: true
            }
    });         
    });  
    Shadowbox.loadSkin('classic', '/javascripts/shadowbox/skin');
    Shadowbox.loadLanguage('', '/javascripts/shadowbox/lang');
    Shadowbox.loadPlayer(['img'], '/javascripts/shadowbox/player');
    window.onload = Shadowbox.init;
</script>
<div class="grid_5">
  <div class="prev_full">
    <a href="" 
       {% if product.images.size > 1 %}
            onClick="$('.prev_min a[href$=\''+$(this).attr('href')+'\']').click(); return false;"
       {% else %}
            rel="shadowbox[images];options={continuous:true};player=img;"
       {% endif %} >
      <img class="zoomim" src="" alt="" title="">                   
    </a>
  </div>
  <div class="thumbcont">   
    <a id="img_prev" class="arows" href="#"><span>Prev</span></a>
    <a id="img_next" class="arows next" href="#"><span>Next</span></a>  
    <div id="thumblist">  
    {% for image in product.images %}            
    <div class="prev_min">
      <a href='' rel="shadowbox[images];options={continuous:true};player=img;" data-img="">
        <img src='' alt="" >
      </a>            
    </div>
    {% endfor %}  
   </div>
 </div>
</div>

Здесь мы видим определенный набор изображений со ссылками для просмотрщика. Для картинки будут переключаться в блоке .prev_full

Кода селектбоксов в шаблоне нет, так как Insales их заменяет на странице. Будем их выбирать по классу .single-option-selector


Картинки

Зайдем в бек-офис и увидим 2 модификации товара, в данном случае ‘100 ml’ и ‘200ml’.

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


Логика

Для корректной схемы картинки при выборе модификации нужно выбрать картинку с названием, соответствующим названию варианта. Данные о вариантах возьмем из JSON product. Вот как это выглядит на CoffeeScript

<script type="text/coffeescript">
imgchange = (currvar) -> 
   prod = 
   if prod.images.length > 1
      for image in prod.images
        if image.title == currvar
          Large = $(".prev_full a")
          Large.find("img").attr "src", image.large_url
          Large.attr "href", image.original_url
          return
$('.single-option-selector').change -> imgchange $(@).find(':selected').text()
</script>


Итог

Теперь все работает и картинки меняются в соответствии с модификацией товара. Осталось только скомпилировать скрипт:

Заключение

Данный мануал для InSales включает в себя только основной код. Разобраться с ним и внедрить его в магазин сможет опытный разработчик. Если Вы не готовы самостоятельно заниматься изменениями шаблонов InSales, а также хотите реализовать другие идеи как по этому модулю, так и в общем по системе InSales, мы будем готовы Вам помочь в рамках платной поддержки.

Закажи установку модуля: Скрипт смены изображений при выборе модификации товара для своего магазина

Установка модуля от разработчиков InsalesThemes!
  • Удобные настройки модуля
  • Пожизненная гарантия на работу
  • Быстро и качественно
Успейте заказать установку модуля по специальной цене. Количество ограничено!
Закрыть

Ваша заявка отправлена!

В ближайшее время Вам на почту придет уведомление, а в течении нескольких часов мы свяжемся с Вами и уточним все детали по работе. Имейте ввиду - мы работает с понедельника по пятницу с 10:00 - до 19:00 по МСК