Owl Carousel 2 переключается в положение по умолчанию после вызова Ajax

Привет, гуру!

Я настоящий нуб в js, поэтому надеюсь, что найду рабочее решение моей проблемы. Я работаю над проектом Drupal 7 на основе шаблона Porto v.2.1 с использованием модуля Dupal Commerce. Я реализовал Owl Carousel 2 версии 2.1.0 с jQuery 1.12.3.
На странице отображения продукта у меня есть несколько виджетов атрибутов, которые представляют собой карусели. Все мои элементы карусели кликабельны (атрибуты продукта, которые загружают большое изображение модели со связанными атрибутами с помощью вызовов Ajax). В одном виджете более 30 элементов (моделей, которые являются терминами таксономии), сейчас в нем всего 14 элементов. Поэтому я вызываю плагин карусели виджета (div) со следующим кодом:

Код (JavaScript): И вот как это выглядит:





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

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

Есть ли возможность сделать это, изменив мой js-код? Все соответствующие примеры очень ценятся!

Кроме того, я хочу, чтобы работало то, что когда вы нажимаете на карусель среднего + 1 элемента, она должна перемещаться вперед для одного элемента, когда вы нажимаете на среднюю + 2 карусель элементов, она должна перемещаться вперед для двух элементов, то же самое для +3 и +4. И карусель должна иметь возможность двигаться назад после нажатия на элементы среднего-1, среднего элемента-2 и т. д.

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

Заранее спасибо,
Илья

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

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

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

Если вам нужно 3 карусели, выполните разные вызовы сценария карусели, поместив разные классы для каждой карусели - посмотрите, поможет ли это. Ajax должен вызывать сценарий карусели только для окон и цветов, а не для дверей.

Не могли бы вы проверить или опубликовать код, в котором вы получаете результат вызова ajax и что происходит после этого. Как вы используете результат вызова ajax и на что они влияют. Потому что похоже, что эти результаты каким-то образом влияют на код карусели.

Многие вещи в коде меняются после того, как я щелкаю дверь. Разве не должно измениться только большое изображение двери? Вызов Ajax должен изменить только большое изображение, верно?

попробуйте это и посмотрите, что произойдет:

$(#form-item-attributes-field-door-category').addClass("сова-карусель");
$('#form-item-attributes-field-door-category').addClass("сова-тема");

В противном случае вам следует поискать в коде, есть ли где-то другое: .addClass("owl-carousel") или другой способ добавления класса owl-carousel к элементу.

Возможно, эта функция позволяет менять классы элементов внутри формы. Дверцы и цвета лучше убрать из формы тележки. Форма корзины должна содержать только цену и количество товаров. Таким образом, это беспорядок.
Добавьте пользовательские события щелчка JavaScript при щелчке по двери и с его помощью выполните ajax-вызов для цветов, окон и цены текущей двери.

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

Я так это вижу. Если хотите, я посмотрю, как доработать функцию, но менять код плагинов и CMS не рекомендуется.

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

Все элементы div в виджетах атрибутов имеют класс form-item form-type-commerce-fancy-attributes form-item-attributes-field-color-category form-type-commerce-fancy-attributes-ajax, поэтому плагин корзины может повлиять на них. все.

Да, я это понимаю. Я просто пытался сказать, что реализуя инициализацию таким образом, как в моем посте выше, я применил карусель только для div с дверями. В этой ситуации на этой странице у меня есть только одна карусель, цвета и окна — это просто элементы div с элементами div внутри них. Таким образом, даже в этом случае карусель переключается в положение по умолчанию после нажатия последней двери.

Вероятно, эта функция является причиной того, что это происходит? http://www.rit.edu/drupal/api/drupal/sites!all!modules!commerce!modules!cart!commerce_cart.module/function/commerce_cart_add_to_cart_form_attributes_refresh/7.41

Привет! Спасибо за внимание к моей проблеме.

Я только что попытался применить инициализацию карусели к конкретному контейнеру с маленькими дверцами следующим образом:

$('.form-item-attributes-field-door-category .form-radios').addClass("сова-карусель");
$('.form-item-attributes-field-door-category .form-radios').addClass("сова-тема");
var owl = $('.owl-carousel');

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

Ну, на самом деле я разрабатываю этот веб-сайт, используя только Drupal 7 и модули Drupal без какого-либо специального кодирования, за исключением плагина js, который вызывает карусель совы. Я могу объяснить, как я создал эту структуру, но не знаю, знакомы ли вы с Drupal. Вы правы насчет изменения общей картинки после нажатия на любой элемент карусели, но в данном случае родительским элементом является миниатюра двери. Когда вы нажимаете на большой палец двери, Ajax загружает большое изображение этой модели и виджеты связанных с ней атрибутов, таких как цвет двери, цвет стекла и т. д.

Что ж, к этому времени будет гораздо больше вариаций цвета и стекла, чем существует. Проверьте эту страницу http://srv109687.hoster-test.ru/каталог/серия-VG на экране шириной 640 пикселей. Как вы можете видеть на маленьких экранах и гаджетах, эти карусели обязательны. Вы правы, все три карусели используют одни и те же настройки, потому что все они находятся в div 'attribute-widgets', и я применяю js следующим образом: $('.attribute-widgets > div > div ').addClass("owl-carousel" );

Я просто не знаю, как правильно применить js для них отдельно. Я пытался применить js следующим образом: $('.form-item-attributes-field-door-category > div').addClass("owl-carousel"); В этом случае класс «owl-carousel» применяется к упомянутому элементу div и к элементам div внутри элементов div «owl-item». Изображения не отображаются из-за неправильного CSS, но в любом случае, если вы нажмете на последний элемент, карусель перейдет в положение по умолчанию.

Я просто правда не знаю, что с этим делать...

Эй, ты уловил идею? Должен ли я уточнить больше?

Кроме того, вам не обязательно иметь карусели в виде корзины.





Код (разметка):
при нажатии на предмет загружается большое изображение двери, информация о товаре для корзины и карусели только для цветов и окон.
При нажатии на элемент загружается только большое изображение двери

DoorsCarousel ajax-вызов: когда пользователь нажимает на дверь, скрипт отправляет в базу данных запрос на нужную вам дверь, цвета и окна для этой двери, а также цену двери, но не дверной карусели. Затем вы получаете эти данные и передаете их в карусели, в раздел с большими изображениями и в корзину.

ajax-вызов colorCarousel: передает только большой элемент изображения.

Для этого вам нужен способ вызывать каждую карусель отдельно. Так:

(function($) { Drupal.behaviors.myBehavior = { attach: function(context) { $('#doorsCarousel').addClass("owlCarouselDoors"); $('#colorsCarousel').addClass("owlCarouselColors"); $('#windowsCarousel').addClass("owlCarouselWindows"); var owlDoors = $('.owlCarouselDoors'), owlColors = $('.owlCarouselColors'), owlWindows = $('.owlCarouselWindows'); owlDoors.owlCarousel({ settings }); owlColors.owlCarousel({ settings }); owlWindows.owlCarousel({ settings }); } }; })(jQuery);
Код (разметка): или может быть:

<div id="bigDoorImage"></div> <div id="carousels"> <div id="doorsCarousel"></div> <div id="colorCarousel"></div> <div id="windowCarousel"></div> </div> <form id="shoppingCart"></form>
Код (разметка):

Во-первых, вы можете добавить идентификаторы к элементам div, в которые хотите добавить класс:
. Таким образом вы можете просто позвонить: $('#doorsCarousel').addClass("owl-carouselDoors")

Моя идея заключалась в том, чтобы иметь три класса: .addClass("owl-carouselDoors"), .addClass("owl-carouselColors") и .addClass("owl-carouselWindows").

Так:
var owlDoors = $('.owl-carouselDoors');
var owlColors = $('.owl-carouselColors');
var owlWindows = $('.owl-carouselWindows');

Таким образом, возможно, можно будет иметь около трех объектов, которые можно вызывать отдельно в вызове Ajax, и сбрасывать только те, которые вам нужны.

Подводя итог: у вас действительно есть 3 объекта — 3 карусели, но вы вызываете их все в одном ajax-запросе. Вам придется их разделить, каждая карусель — это отдельный объект.

Хорошо, но где-то вы вызываете: form-item-attributes-field-color-category или другим способом div с цветами, чтобы он мог стать каруселью. Вероятно, в вызове ajax?

добавление .addClass("owl-carousel") к элементу превращает div с изображениями в карусель, верно? Значит, надо где-то сделать карусель цветов. Где ты это делаешь?

Глянь сюда:
$('.attribute-widgets > div > div ').addClass("owl-carousel");
var owl = $('.owl-carousel');

здесь переменная owl получает все элементы с классом «owl-carousel», и у вас есть этот класс для карусели дверей и карусели цветов, поэтому скрипт активирует оба элемента с помощью этого класса. Вам нужно иметь оба элемента с разными классами и иметь две переменные, чтобы скрипт воздействовал на них по-разному. Как я показал вам выше. Класс: owl-carousel-doors И другой класс: owl-carousel-colors, а затем создать две переменные: var owlDoors = $('.owl-carousel-doors'); И var owlColors = $('.owl-carousel-colors');

Вы получаете все элементы с классом owl-carousel и управляете ими с помощью одной переменной — owl, и когда вы меняете эту переменную, вы меняете все элементы на странице, имеющие класс owl-carousel. Поэтому вам нужно дать каждому элементу html отдельный класс и другую переменную.

Привет! Спасибо за ваш ответ! Да, ты прав. Кажется, что когда новый контент загружается вызовом Ajax, карусель возвращается в исходное состояние. Ajax-запрос не является частью кода карусели. Модуль Commerce Fancy Attribute отвечает за загрузку виджетов большого изображения и связанных с ним атрибутов.

Я не знаю, как объяснить это лучше всего.

У вас есть 3 элемента div, которые вы хотите превратить в карусели. Вы присваиваете им класс сова-карусель. Тогда все 3 карусели подчиняются правилам класса сова-карусель. Один класс, чтобы править всеми!!! ) Затем, когда вы меняете статус одной карусели, все 3 подчиняются этому изменению, и все 3 сбрасываются, когда вы хотите сбросить только один лайк для цветов. Вы хотите изменить карусель цветов, но все три изменяются, потому что все подчиняются классу owl-carousel. Я думаю, это твоя проблема.

В большинстве случаев цикл не бесконечен)

Цикл will поможет вам перебирать элементы массива.

for (обычно начинается с 0; является ли текущий элемент большим числом, чем индекс последнего элемента массива, если он больше, чем ВЫХОДИТЕ из цикла; добавьте 1) { делайте, что хотите, с текущим элементом массива }

owl.each(function (index) { ... делает это для массива совы.

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

Привет еще раз! Огромное спасибо за внимание к моей проблеме. Наконец, мы исправим это, откорректировав js-скрипт. Если вам интересно взглянуть на него, вы можете найти его здесь: http://srv109687.hoster-test.ru/sites/all/themes/Porto/js/owlwrapper.js

Еще раз спасибо, я очень ценю это!
Илья