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) со следующим кодом:

 (function($) {


Drupal.behaviors.myBehavior = {


attach: function (context) {


$('.attribute-widgets > div > div ').addClass("owl-carousel");


$('.attribute-widgets > div > div ').addClass("owl-theme");


var owl = $('.owl-carousel');


owl.owlCarousel({


dots: false,


margin: 10,


autoWidth: false,


responsive:{


640:{


items:3,


nav: true,


navText: "",


},


768:{


items:4,


nav: true,


navText: "",


},


1024:{


items:7,


nav: true,


navText: "",


},


1280:{


items:9,


nav: true,


navText: "",


},


1366:{


items:10,


nav: true,


navText: "",


},


1600:{


items:13,


nav: true,


navText: "",


},


}


});


}


};


})(jQuery);

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

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

Эй, ты уловил идею? Должен ли я уточнить больше? Кроме того, вам не обязательно иметь карусели в виде корзины.

 


(function($) {


Drupal.behaviors.myBehavior = {


attach: function(context) {


var owlDoors = $('#doorsCarousel'),


owlColors = $('#colorsCarousel'),


owlWindows = $('#windowsCarousel');


owlDoors.owlCarousel({


settings


});


owlColors.owlCarousel({


settings


});


owlWindows.owlCarousel({


settings


});


}


};


})(jQuery);

Код (разметка):

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

При нажатии на элемент загружается только большое изображение двери

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 отдельный класс и другую переменную.

Я не знаю, как объяснить это лучше всего. У вас есть 3 элемента div, которые вы хотите превратить в карусели.

Вы присваиваете им класс сова-карусель.

Тогда все 3 карусели подчиняются правилам класса сова-карусель.

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

Вы хотите изменить карусель цветов, но все три изменяются, потому что все подчиняются классу owl-carousel.

Я думаю, это твоя проблема.

Привет! Спасибо за ваш ответ! Да, ты прав.

Кажется, что когда новый контент загружается вызовом Ajax, карусель возвращается в исходное состояние.

Ajax-запрос не является частью кода карусели.

Модуль Commerce Fancy Attribute отвечает за загрузку виджетов большого изображения и связанных с ним атрибутов.

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

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

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

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