Доработка скрипта слайдера 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 способами, по клику или по наведению мышки)

сделал так, работает. Возможно кому пригодиться:

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

Такое никуда не годится и ошибки такого подхода начинаются уже с сервера.

я понимаю, но аналогов решения нету, поэтому пользуюсь этим...

Хотя об ошибках не понял... Вроде консоль чистая https://prnt.sc/vuilev

Упаси господь от появления еще и аналогов такого решения. :) Это не решение, это банальное "скрещивание". Я позже отпишусь о том, что значит "ваши костыли уже с сервера начинаются".

Всегда забавно наблюдать за людьми которые критикуют без предоставления альтернативного решения))):lol: "Мол все фигня. А как лучше сделать? - не, все фигня. Хорошо, подскажите как правильно решить - емм... вы знаете, это все до *опы)):haha: "

Ладно, давайте прекращать оффтоп) Пишем только по теме если есть что) Благодарю):thanks:

А кроме цикла, тому, что вы монотонно в серверном коде делаете, нет никакой альтернативы. Я лишь заметил, что так делать нельзя, но и вы как было так и оставили. Но ведь twig, это по сравнению с РНР, на котором он написан, совсем чуть-чуть. А у вас появилось хотя бы желание окунуться в это чуть-чуть?

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

А почитать о owl? Я уверен, что вы это мимо ушей, а зря.

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

А здесь форум, не кафедра IT технологий, и конечно же не шкатулка, в которой можно всегда найти готовый на все 100 под лично ваш случай код.