Всплывающее окно добавления товара в корзину JoomShopping

Многих устраивает функционал компонента JoomShopping из коробки. Все необходимые модули и дополнения можно скачать с официального сайта разработчика. Но, бывают моменты, когда пожелания заказчика выходят за рамки стандартных возможностей компонента. Например, всплывающее окно добавления товара в корзину.

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

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

Как это работает?

Недавно пришлось реализовать подобную функцию на одном из рабочих сайтов. Делать обработку на Ajax слишком затрано в плане финансов и времени, а использовать сторонние модули не хотелось, поэтому не стал далеко ходить и написал небольшой обработчик на jQuery.

Итак, у нас обязательно должна быть область вывода уведомлений Joomla в шаблоне:

Мы знаем, что при добавлении в корзину товара в эту область добавляется следующее сообщение:

Товар добавлен в корзину.

На основе этого добавим скрипт на jQuery:

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

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

Всплывающее окно добавления товара в корзину JoomShopping

Всплывающее окно добавления товара в корзину JoomShopping

Всё очень просто. Это конечно же не Ajax, но внешне функционал копирует, заказчику этого было вполне достаточно.

Всплывающее окно уведомления о выборе параметров

На том же сайте был реализован функционал выбора параметров, поэтому при попытке купить товар прямо из списка товаров, JoomShoppin сообщал, что необходимо выбрать параметры перед покупкой. Было решено добавить это уведомление также во всплывающее окно, т.к. заказчику казалось, что обычный вывод уведомления не очень заметен для покупателя.

Сделано это было аналогично тому, как сделано всплывающее окно добавления в корзину:

Опять же, проверяем сообщение, и, при его наличии вызываем соответствующее всплывающее окно. Всё просто.

Всплывающее окно выбора параметров JoomShopping

Всплывающее окно выбора параметров JoomShopping

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

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
5,00 / 5 баллов
2 участников
Комментарии
  • Алексей
    Есть бесплатный аддон - JoomShopping Pop-up after added to cart
    Как помнится там только просто всплывает, что товар добавлен в корзину.
    • Blog About
      Добрый день. Да, действительно, спасибо за наводку. Странно, что я не нашел его раньше.
      Только на сайте JoomShopping он называется "Product add - Popup message".
      Пробовать не стал, только код посмотрел, работает лишь для добавления товара в корзину.
      Благодарю за комментарий.

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

* - поля обязательные для заполнения. E-mail не публикуется.