Доработка скрипта слайдера owl.carousel 2
 

Здравствуйте.
Установил на сайт (опенкарт 2.3) карусель owl.carousel 2

Все хорошо, все работает.

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

<div class="ss23">
<h3 class="scrollflow -slide-top">{{ heading_title }}</h3>

<div class="owl-carousel" id="latest_{{ module_id }}">
  {% for product in products %}
  <div class="product-thumb">
    <div class="product-item">
      <div class="image"><a href="{{ product.href }}" id="gl_img_{{ product.product_id }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive" /></a></div>

      <div class="ss25">
        {% if product.thumb %}
            <div>
              <img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive" id="top_img_{{ product.product_id }}" />
            </div>
            <script>
                $('#top_img_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive" id="top_img_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}

        {% if product.thumb2 %}
            <div>
                <img src="{{ product.thumb2min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img1_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img1_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb2 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img1_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}

        {% if product.thumb3 %}
            <div>
                <img src="{{ product.thumb3min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img2_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img2_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb3 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img2_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}
        {% if product.thumb4 %}
            <div>
                <img src="{{ product.thumb4min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img3_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img3_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb4 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img3_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}
        {% if product.thumb5 %}
            <div>
                <img src="{{ product.thumb5min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img4_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img4_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb5 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img4_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}
        {% if product.thumb6 %}
            <div>
                <img src="{{ product.thumb6min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img5_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img5_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb6 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img5_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}
        {% if product.thumb7 %}
            <div>
                <img src="{{ product.thumb7min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img6_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img6_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb7 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img6_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}
        {% if product.thumb8 %}
            <div>
                <img src="{{ product.thumb8min }}" alt="{{ product.name }}" class="img-responsive" id="ad_img7_{{ product.product_id }}" />
            </div>
            <script>
                $('#ad_img7_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb8 }}" alt="{{ product.name }}" class="img-responsive" id="ad_img7_{{ product.product_id }}" />');
                });
            </script>
        {% endif %}
      </div>

      <div class="caption">
        <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
        <div class="ss30">
          <div>{{ product.model }}</div>
          <div>{{ product.jan }}</div>
          <div>{{ product.ean }}</div>
        </div>
      </div>


      <div class="button-group">
      <div class="inner">
                <button type="button" class="button-cart" onclick="cart.add('{{ product.product_id }}');" title="{{ button_cart }}"><span>{{ button_cart }}</span></button>

                <button type="button"  title="{{ button_wishlist }}" class="button-wishlist" onclick="wishlist.add('{{ product.product_id }}');"><span>{{ button_wishlist }}</span></button>

                <button type="button"  title="{{ button_compare }}" class="button-compare" onclick="compare.add('{{ product.product_id }}');"><span>{{ button_compare }}</span></button>

                <button type="button" title="{{ button_quickview }}" class="button-quickview" onclick="ptquickview.ajaxView('{{ product.href }}')"><span>{{ button_quickview }}</span></button>
      </div>
      </div>


  </div>
  </div>
  {% endfor %}

</div>

<script>
$(document).ready(function() {
    $('#latest_{{ module_id }}').owlCarousel({
        loop:true, //Зацикливаем слайдер
        margin:50, //Отступ от элемента справа в 50px
        nav:true, //Отключение навигации
        dotsEach:true,
        autoplayHoverPause:true,
        autoplay:true, //Автозапуск слайдера
        smartSpeed:2000, //Время движения слайда
        autoplaySpeed:2000,
        autoplayTimeout:5000, //Время смены слайда
        responsive:{ //Адаптивность. Кол-во выводимых элементов при определенной ширине.
            0:{
                items:1
            },
            600:{
                items:2
            },
            1000:{
                items:3
            }
        }
    });
});
</script>
</div>

сам сайт для наглядного примера:
https://kulibinstudio.com/

вот этот блок: https://prnt.sc/vu6mt4

У owl.carousel 2 есть возможность зациклить прокрутку слайдов (товаров). Для этого нужно добавить в исполнительный скрипт:

loop:true,

По видимому он автоматом дублирует товары для бесконечной прокрутки, и это приводит в неработоспособность мой скрипт который меняет фото при клике на уменьшенные фото. Скорей всего потому, что я использую ID для обращения к элементам, а так как дублируется элемент самой каруселью, то уже получается ид не уникальным, и соответственно не работает смена картинок при клике. Это можно как то обойти?

Если дело в этом, то откажитесь от id
и замените элементы <script>
на такие

<script>
	document.currentScript    // текущий элеметн script
		.previousElementSibling   // предыдущий div
		.querySelector('img')      // img в предыдущем div
		.addEventListener('click', (ev) => {  // обработчик
			ev.target                       // текущий img
				.closest('.product-item')       // родительский div.product-item
				.querySelector('.image a')      // a в div.image
				.innerHTML ='<img src="https://kulibinstudio.com/image/cache/catalog/products/a999/p997/DAVID_1-480x480.jpg" alt="DAVID XXI" class="img-responsive" id="top_img_420" />'; 
		})
</script>

{% if product.thumb %}
....
{% if product.thumb8 %}

А если с десятка два, так и будет шаблонизатор десятки условий перебирать, почему не цикл?

Спасибо, но для примера вставил только для первого дополнительного изображения. Как результат, товары вообще пропали. Т.е. на странице пусто и приходится долго мотать вниз. Из кода видно что элементы есть, но они скрыты почему то.

Потому что не силен в этом. Ели это осилил) И там php, подробнее в этой теме https://opencartforum.com/topic/1707...ra-v-kataloge/

Это не РНР, это шаблонизатор twig, а на чем он написан, это не важно, оперируете вы его синтаксисом.

Почитайте документацию owl, чтобы такого <script>$('#top_img_{{ product.product_id }}').click(function()... не допускать.

Я не понял, что ваша карусель делает с кодом.
Я в отладчике посмотрел, там возникает ошибка (помимо кучи других), когда из под JQuery этот код пытается выполнится через eval.

хорошо,спасибо)

я вот тоже не понимаю)):lol:

Ладно, пока оставлю все как есть. Работает - и пусть работает без лупа) спасибо за попытку)

подскажите только пожалуйста как сделать чтобы фото менялосьпо клику или наведению?

<script>
                $('#top_img_{{ product.product_id }}').click(function() {
                    $('#gl_img_{{ product.product_id }}').html('<img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive" id="top_img_{{ product.product_id }}" />');
                });
            </script>

сейчас только по клику, а хотелось бы 2 способами, по клику или по наведению мышки)