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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии

  • Павел
    Тогда может подскажете, как в модальное окно вписать эти кнопки(В корзину, продолжить покупки).
    Ваш код куда только не клеил, выдает ошибку.
    Вот код:

    if ($content) {
    $replacement = "";
    $replacement .= "";
    $replacement .= "";
    $replacement .= "".JText::_('PLG_SYSTEM_MODALMESSAGES_TITLE')."";
    $replacement .= "params->get('closewith', 'both') == "background" ? "class='messages-hide'" : "").">";
    $replacement .= "<a></a>";
    $replacement .= "";
    $replacement .= "";
    $replacement .= "".$content."";

    if ($this->params->get('footer', '')) {
    $replacement .= "".$this->params->get('footer')."";
    }

    $replacement .= "";
    $replacement .= "";
    $replacement .= "";
    JResponse::setBody(preg_replace('//i', $replacement, JResponse::getBody()));
    return true;
    }
    }
    • Blog About
      Добрый день. Не совсем понимаю что за код Вы показываете, основываясь на нем, я ничего не могу сказать. Могу лишь предположить, что где-то здесь $replacement .= "<a></a>";
      В статье указан код JavaScript, Вы же показываете PHP. Мой код у Вас не работает, скорей всего потому что у Вас не установлена библиотека arcticmodal, а вставить код можно хоть куда, хоть просто где-нибудь в футер.
      Чтобы разобраться где и что вставлять, нужен полный FTP доступ. Если Вы не разбираетесь во всем этом, то лучше обратиться к специалистам.
  • Павел
    Здрасте.
    А куда что вставлять? я не алле в php и js. Можно пошагово, с адресами документов.
    • Blog About
      Добрый день. У всех на сайтах используются разные шаблоны с разной структурой и я не могу точно знать, где какие файлы расположены. Также Вы можете использовать другую библиотеку для создания лайтбоксов, соответственно там будут другие функции. По сути это даже не решение, а просто предложение идеи решения вопроса, а каким путем действовать, это уже сугубо дело каждого.
  • Алексей
    Есть бесплатный аддон - JoomShopping Pop-up after added to cart
    Как помнится там только просто всплывает, что товар добавлен в корзину.
    • Blog About
      Добрый день. Да, действительно, спасибо за наводку. Странно, что я не нашел его раньше.
      Только на сайте JoomShopping он называется "Product add - Popup message".
      Пробовать не стал, только код посмотрел, работает лишь для добавления товара в корзину.
      Благодарю за комментарий.

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