Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.12.2020, 12:48
Аспирант
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 56

Доработка скрипта слайдера 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 для обращения к элементам, а так как дублируется элемент самой каруселью, то уже получается ид не уникальным, и соответственно не работает смена картинок при клике. Это можно как то обойти?

Последний раз редактировалось StartGames, 02.12.2020 в 12:53.
Ответить с цитированием
  #2 (permalink)  
Старый 02.12.2020, 13:39
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,003

Если дело в этом, то откажитесь от 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>

Последний раз редактировалось voraa, 02.12.2020 в 13:43.
Ответить с цитированием
  #3 (permalink)  
Старый 02.12.2020, 13:41
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

А если с десятка два, так и будет шаблонизатор десятки условий перебирать, почему не цикл?
Ответить с цитированием
  #4 (permalink)  
Старый 02.12.2020, 15:07
Аспирант
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 56

Сообщение от voraa Посмотреть сообщение
Если дело в этом, то откажитесь от 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>
Спасибо, но для примера вставил только для первого дополнительного изображения. Как результат, товары вообще пропали. Т.е. на странице пусто и приходится долго мотать вниз. Из кода видно что элементы есть, но они скрыты почему то.
Ответить с цитированием
  #5 (permalink)  
Старый 02.12.2020, 15:09
Аспирант
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 56

Сообщение от laimas Посмотреть сообщение
{% if product.thumb %}
....
{% if product.thumb8 %}

А если с десятка два, так и будет шаблонизатор десятки условий перебирать, почему не цикл?
Потому что не силен в этом. Ели это осилил) И там php, подробнее в этой теме https://opencartforum.com/topic/1707...ra-v-kataloge/
Ответить с цитированием
  #6 (permalink)  
Старый 02.12.2020, 15:30
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Почитайте документацию owl, чтобы такого <script>$('#top_img_{{ product.product_id }}').click(function()... не допускать.
Ответить с цитированием
  #7 (permalink)  
Старый 02.12.2020, 16:28
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,003

Я не понял, что ваша карусель делает с кодом.
Я в отладчике посмотрел, там возникает ошибка (помимо кучи других), когда из под JQuery этот код пытается выполнится через eval.
Ответить с цитированием
  #8 (permalink)  
Старый 02.12.2020, 16:45
Аспирант
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 56

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

Почитайте документацию owl, чтобы такого <script>$('#top_img_{{ product.product_id }}').click(function()... не допускать.
хорошо,спасибо)
Ответить с цитированием
  #9 (permalink)  
Старый 02.12.2020, 16:47
Аспирант
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 56

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

Ладно, пока оставлю все как есть. Работает - и пусть работает без лупа) спасибо за попытку)
Ответить с цитированием
  #10 (permalink)  
Старый 02.12.2020, 16:50
Аспирант
Отправить личное сообщение для StartGames Посмотреть профиль Найти все сообщения от StartGames
 
Регистрация: 13.06.2014
Сообщений: 56

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Доработка скрипта Alexsher Работа 2 16.08.2014 01:26
Требуется доработка скрипта. disee Firefox/Mozilla 0 17.09.2013 15:24
Доработка скрипта за плату sali007 jQuery 5 05.04.2013 09:27
Срочная доработка скрипта (слайдер) clescenco Работа 1 17.09.2012 12:32
Доработка скрипта formus Работа 2 06.07.2011 10:08