Блог

21.01.15

Быстрый просмотр товаров

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

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

Задача

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

Решение

Идея решения

Все решение будет делаться в шаблоне _eshop_item_list.tpl, находящегося в модуле "Менеджер сайта" - "Шаблоны модулей" (документация на сайте Амиро по работе с шаблонами), в сете item_list.

После клика по кнопке "Быстрый просмотр", будет производиться AJAX запрос к сайту, который получит страницу с детальной информацией о товаре, и уже из этой страницы будет взят только основной контент страницы (блок с id="lay_body"). Использование AJAX запроса позволит использовать стандартный функционал генерации страницы и встроенную систему кеширования Amiro.CMS.

Для создания всплывающего окна будет использован элемент управления Dialog от jQueryUI. Поэтому для использования данного решения, если библиотека jQueryUI еще не была подключена, потребуется подключение в HEAD макета в модуле "Менеджер сайта" - "Макеты страниц" (документация по работе с макетами):

<link type='text/css' href='//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' rel='stylesheet' />
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

Вывод кнопки "Быстрый просмотр"

При реализации будем полагать, что изображение товара в списке сейчас является кликабельным элементом, то есть находится внутри ссылки на детали товара. Пример исходного кода HTML кликабельного изображения в категории товаров (обращаем внимание, что требуемая ссылка на товар, содержащая изображение, имеет class="eshop-item-small__visual-link"):

<div class="eshop-item-small__visual">
  <a class="eshop-item-small__visual-link" href="katalog/internet-magazin/dlja-umenija/tvorchestvo/risovanie/raznocvetnye-pasteli-24-sht">
    <img class="eshop-item-small__img" src="/_mod_files/ce_images/eshop/generated/cr0024_160x160_sm.jpg" title="Разноцветные пастели 24 шт" alt="Разноцветные пастели 24 шт" width="160" height="160" />
  </a>
</div>

Добавляем следующий код в сет item_list шаблона _eshop_item_list.tpl:

<script>
    $(function() {
        // UZ. Fast preview
        var linkSel = 'a.eshop-item-small__visual-link';
        $('div:has(> ' + linkSel + ')').hover(
            function() {
                // Создаем кнопку, определяем ее место положение, задаем ссылку
                $(this).css('height', $(this).height());
                $(this).append('<button class="uz_fast_preview_btn" style="position:relative;" type="button">Быстрый просмотр</button>');
                $('.uz_fast_preview_btn')
                    .css('top', '-' + $(this).height()/2 - $('.uz_fast_preview_btn').height()/2)
                    .attr('uz_url', $(this).find(linkSel).attr('href'))
                    .click(function() {
                    });
            }, function() {
                $('.uz_fast_preview_btn').remove();
            }
        );
    });
</script>

Если на сайте у ссылки, содержащий изображение товара, имеется другой отличительный атрибут, указываем данный атрибут, как jQuery селектор, в коде:

var linkSel = 'a.eshop-item-small__visual-link';

Результат работы, при наведении на изображение появляется кнопка "Быстрый просмотр", которая исчезает при убирании курсора с изображения:


Открытие всплывающего окна

Создадим всплывающее окно, открываемое по клику на страницу, итоговый код сета item_list:

##list##
##pager##
<div id="uz_fast_preview_cont"></div>
<script>
    $(function() {
        // UZ. Fast preview
        var linkSel = 'a.eshop-item-small__visual-link';
        $('div:has(> ' + linkSel + ')').hover(
            function() {
                // Создаем кнопку, определяем ее место положение, задаем ссылку
                $(this).css('height', $(this).height());
                $(this).append('<button class="uz_fast_preview_btn" style="position:relative;" type="button">Быстрый просмотр</button>');
                $('.uz_fast_preview_btn')
                    .css('top', '-' + $(this).height()/2 - $('.uz_fast_preview_btn').height()/2)
                    .attr('uz_url', $(this).find(linkSel).attr('href'))
                    .click(function() {
                        // Добавляем обработчик клика кнопки - вызываем функцию открытия окна
                        UzGetItemPreview($(this).attr('uz_url'));
                    });
            }, function() {
                $('.uz_fast_preview_btn').remove();
            }
        );

        // Создаем скрытое диалоговое окно
        $('#uz_fast_preview_cont').dialog({autoOpen: false, width: $('#lay_body').width() + 50, height: $(window).height() * 2/3});
    });

    // Функция открытия диалогового окна
    function UzGetItemPreview(url) {
        // Открываем диалог, пишем текст "Идет загрузка"
        $('#uz_fast_preview_cont').html('<div style="position: relative; top: 50%; text-align: center; width: 100%; height: 100%;">Идет загрузка</div>').dialog("open");

        // Выполняем AJAX запрос сайта
        $.ajax(url).done(function(html) {
            // Выводим в диалоговом окне содержимое блока с id=lay_body по завершении загрузки
            // В случае необходимости, данный контент также можно модифицировать при помощи jQuery
            $('#uz_fast_preview_cont').html($(html).find('#lay_body'));
        });
    }
</script>

Было добавлено:

  • Обработчик клика кнопки: UzGetItemPreview($(this).attr('uz_url'));
  • Создание диалогового окна: $('#uz_fast_preview_cont').dialog({autoOpen: false, width: $('#lay_body').width() + 50, height: $(window).height() * 2/3});
  • Функция открытия диалогового окна с содержимым страницы: function UzGetItemPreview(url) {...}

Результат работы (клик на открытие кнопки быстрого просмотра):


Результат работы (загрузка быстрого просмотра товара завершена):


Выводы

  • Добавить быстрый просмотр товаров можно путем модификации одного шаблона, никакая разработка на PHP не требуется.
  • Не изменяется текущая верстка сайта.
  • По умолчанию подобраны наиболее минимальные стили, которые можно настроить дополнительно. Например:
    • Изменить стиль, размеры и положение кнопки.
    • Вид диалогового окна
    • Текст/изображение, появляющееся при загрузке карточки товара.
  • Функция UzGetItemPreview(url) специально вынесена в виде отдельной функции, которую удобно использовать, если кнопка "Быстрый просмотр" создается любым другим способом.
  • Полностью поддерживается кеширование Amiro.CMS - нет потери производительности.
  • В случае сложной карточки товара (наличие сложных JavaScript), возможно, потребуется дополнительная обработка полученного контента.
Все записи

Комментарии

Андрей | 22.07.15 20:33
Отличное решение, применил на своем проекте, все работает, время на реализацию быстрого просмотра ушло порядка 10 минут. Респект компании за подробное описание и реализацию !!!

Ответ: спасибо. Всегда можно подписаться на нашу рассылку про эффективное использование Амиро - мы делимся нашим опытом и предлагаем различные решения.
Правильный угол зрения на природу сайтостроения
(383) 310-63-21

Заказать звонок

ФИО:*
Телефон:*
Комментарий(вопрос):*



* Обязательные поля

Личный кабинет
Каталог модулей
Случайные модули
Популярные модули
Корзина 2.0
1,990 руб.

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

Наклейки 2.0
3,990 руб.

Модуль позволяет визуализировать различные свойства товара. Например, возможность отображения наклеек "Новинка", "Бесплатная доставка", "Гарантия 12 месяцев", "Распродажа" и т.п. на изображении товара.


Отзывы
Контакты    Карта сайта    Вакансии    Вопрос-ответ    Оплата
Работает на: Amiro CMS