Показать / обернуть Woocommerce продукты в Карусель Slider

Question

Показать / обернуть Woocommerce продукты в Карусель Slider

Я хочу отображать продукты через короткий код IE: [product_category category = «test» per_page = «12»] В карусели.

У меня есть настройка Flexslider, я попробовал добавить это в loop-start.php

<link rel="stylesheet" href="https://googledrive.com/host/0B4TRd-vaKaSkWUFRVkRiM1g2eGs" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B4TRd-vaKaSkUHZIaTBXR0JLdVE"></script>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
selector : ".products > li",
animation : "slide",
controlsContainer : ".flex-container"});
});
</script>

<div class="flexslider">
<ul class="products">

и закрытие div после ul на loop-end.php

Хотя мне совсем не повезло: / Он отлично работает с тестовым html-файлом.

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

Спасибо за любую помощь

0

carousel jquery php woocommerce wordpress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Сначала я думал, что ваша разметка не совпадает, но потом я увидел, что вы изменили цикл. Хотя я думаю селектор jQuery ul.products должно сработать. Потому что это должен быть контейнер и его прямые потомки в виде слайдов.

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

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

function so_28486348_print_footer(){ ?>
<script type="text/javascript" charset="utf-8">
jQuery(window).load(function() {
$('ul.products').flexslider({
selector : "li.product",
animation : "slide",
controlsContainer : ".flex-container"});
});
</script>
<?php }
add_action( 'wp_print_footer_scripts', 'so_28486348_print_footer

Я бы также посоветовал загрузить все ваши скрипты (по крайней мере, внешние скрипты) через wp_enqueue_script (см. ссылку на кодекс выше)

function my_scripts_method() {
wp_enqueue_script(
'custom-script', 'https://googledrive.com/host/0B4TRd-vaKaSkUHZIaTBXR0JLdVE' ,
array( 'jquery' )
);
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

1