Блог

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,990 руб.

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

Отзывы
Политика конфиденциальности    Контакты    Карта сайта    Вакансии    Вопрос-ответ    Оплата     Мобильная версия
Работает на: Amiro CMS