Shop-Script 3: доработка «Недавно просмотренные товары»

Интересное бесплатное решение, выводит список просмотренных товаров оформленный в виде «карусели» на jQuery. По сути, состоит из плагина jQuery jCarouselLite и плагина для Shop-Script.

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

  • Качаем файлы, необходимые для работы (все ссылки ведут на сайт автора). Часть из них находится здесь, остальное качаем вот отсюда (там нам понадобится только «function.visitedProducts.php»).
  • Раскладываем всё это по папкам: из архива «product_list_carousel» берём папку f и определяем её в удобное для вас место (в моём случае — корневой каталог сайта), а function.visitedProducts.php размещаем в /kernel/includes/smarty/plugins/
  • Если у вас уже подключена библиотека jQuery, этот пункт можно пропустить (отмечу лишь, что для работы карусели желательно использовать не ниже 1.10.2), если же нет, заходим в админпанель и добавляем в раздел head строку:
  • <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    1. Туда же, можно подключить «карусель» (она есть в папке f):
    <script type="text/javascript" src="f/js/carousel.js"></script>
    1. Дописываем в css описание работы кнопок вперёд-назад:
     .prev,  .next {
            width: 30px;
            float:left;
            height: 143px;
            text-decoration: none;
            background: url("/f/img/imageNavLeft.gif") left 60px no-repeat;
            cursor:pointer;
        }
         .next {
            background: url("/f/img/imageNavRight.gif") right 60px no-repeat;
        }
         .next:hover {
            background-image: url("/f/img/imageNavRightHover.gif");
        }
         .prev:hover {
            background-image: url("/f/img/imageNavLeftHover.gif");
        }   
    1. Создаём варианты перевода для переменной visited_products. Для это заходим в админпанель -> магазин ->дизайн -> языки и перевод -> редактировать перевод -> добавить новую строку. В ID мы записываем значение visited_products , а в перевод — что-нибудь. Обычно это Недавно просмотренные товары. Не забываем про кнопку «Сохранить» в самом низу.
    2. Заходим в админпанель, и в том месте, где вы хотите вывести список добавляем:
    {visitedProducts}
    1. При необходимости, открываем function.visitedProducts.php и настраиваем карусель, отображающую товары. Настройки там следующие:
    visible:5, // количество товара, отображаемое в карусели
    scroll:1, // шаг скроллинга
    circular: true, // при true, скроллинг выполняется циклично
    auto: false, // если поставить true, прокрутка товаров в карусели начинается автоматически, после загрузки страницы. false - всё стоит на месте
    speed: 1500, // скорость прокрутки (чем выше цифра, тем медленнее), по умолчанию - 800
    mouseWheel: false // разрешить/запретить пользователю пользоваться колёсиком мыши для прокрутки (для работы нужен Mouse Wheel plugin, о чём автор видимо, забыл упомянуть); если пользоваться им не планируете, желательно отключить сразу

    Собственно, это всё. Перед просмотром результата, будет не лишним почистить кэш и куки браузера.

    Если не заработало…

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

    Ничего не отображается.

    Для начала, стоит проверить, подключился ли модуль. Самый простой способ — открываем function.visitedProducts.php и дописываем туда строку 8, получается примерно вот так:

        $disp = '';
        $langu = '';
        if(isset($_GET['lang_iso2']) && !empty($_GET['lang_iso2'])){
                $langu = '/'.$_GET['lang_iso2'];
        }
        $domain = $_SERVER['HTTP_HOST'];
        $visitedProducts = isset($_COOKIE['visited_products'])?$_COOKIE['visited_products']:'';
    echo '<span style="color:red; font-size:16px;">йа подключился!</span>';
        if(empty($visitedProducts)){
            $visitedProducts = $_GET['productID'];
            setcookie('visited_products', $visitedProducts, time()+60*60*24*365, '/', $domain);
        } else {
            $visitedProductsArray = explode(',', $visitedProducts);
            $visitedProductsArray[] = $_GET['productID'];
            $visitedProductsArray = array_unique($visitedProductsArray);
            $visitedProducts = implode(',', $visitedProductsArray);

    Обновляем страницу, если надпись выводится — читаем дальше, если нет — проверьте выполнение 2го и 7го пункта инструкции. Увидели проверочную надпись на экране — модуль скорее всего работает, но неправильно. С подобным мне пришлось столкнуться на одном из магазинов, где уже стояла куча приблуд сторонних разработчиков. Впрочем, на сайте автора есть комментарий по этому поводу — проблема возникла не только у меня. Что делать?
    На сколько я понял, при просмотре товаров модуль формирует массив содержащий их ID, затем преобразует его в строку и записывает в куки браузера для последующего вывода. Чтобы понять, что работает не так, можно (вообще-то, правильно было бы поставить какой-нибудь дебаггер) попытаться вывести уже сформированную строку просмотренных товаров на экран:

            $visitedProductsArray = explode(',', $visitedProducts);
            $visitedProductsArray[] = $_GET['productID'];
            $visitedProductsArray = array_unique($visitedProductsArray);
            $visitedProducts = implode(',', $visitedProductsArray);
    print_r ($visitedProducts);
    setcookie('visited_products', $visitedProducts, time()+60*60*24*365, '/', $domain);

    Далее чистим куки и ходим по товарам, посматривая на промежуточные результаты. Как правило это что-то вроде (xxx, xxx, xxx). У меня, уже после второго просмотра она имела вид (xxx,, xxx, xxx) — т.е. где-то «терялся» ID второй просмотренной позиции.
    Мало того, если перейти из товара на главную, а потом снова в товар, то получаем (xxx, xxx,) — последняя запятая, которая тут крайне нежелательна.
    Решение, хоть и не самое лучшее (в идеале — нужно бы разобраться в причинах):

            $visitedProductsArray = explode(',', $visitedProducts);
            $visitedProductsArray[] = $_GET['productID'];
            $visitedProductsArray = array_unique($visitedProductsArray);
            $visitedProducts = implode(',', $visitedProductsArray);
    $visitedProducts = str_replace (',,',',',$visitedProducts);// ищем ',,' и заменяем их на ','
    if (substr($visitedProducts, -1) == ',') {mb_substr($visitedProducts, 0, -1);} // если последний символ строки = ',' то удаляем его
            setcookie('visited_products', $visitedProducts, time()+60*60*24*365, '/', $domain);

    Или например так (удаляем пустые элементы массива перед выводом):

            $visitedProductsArray = explode(',', $visitedProducts);
            $visitedProductsArray[] = $_GET['productID'];
    $array_empty = array(null);
    $visitedProductsArray = array_diff($visitedProductsArray, $array_empty);
            $visitedProductsArray = array_unique($visitedProductsArray);

    Если же строка формируется правильно — придётся искать проблему дальше.

    Просмотренные товары выводятся в виде списка.

    Т.е., не работает карусель. Здесь причин может быть несколько, и лучше будет воспользоваться сообщениями об ошибках в самом браузере. Проверьте, подгружаются ли jQuery и carousel.js. Ещё один интересный момент: строчку из 4го пункта инструкции можно разместить не в head, а в теле документа — возможно сработает.

    Если стоит «Автоматическое заполнение рекомендуемых товаров» или «Слайдер в списках продуктов» от того же автора.

    В этом случае у вас на сайте уже две карусели, и работать они корректно не будут: их элементы управления используют одинаковые переменные (как результат — при нажатии на кнопку прокрутки синхронно проворачиваются обе, подхватывают одни и те же настройки). Решение только одно: «разделить» обе карусели, присвоив элементам каждой уникальный id.

    Добавить комментарий