Событие по нажатию "Добавить в корзину"

Всем привет. На данный момент при добавлении товара в корзину высвечивается зеленое окошко:


Хочу сделать вот так:


Я так понял, что за это событие отвечает /jquery.jgrowl.min.js Но так как он минимизирован, не очень удобно его разобрать. Подскажите, может я ошибаюсь? Или может у кого есть готовое решение, которое надо немного отредактировать
Сергей Лим
30 декабря 2015, 04:13
modx.pro
4
3 454
0
Поблагодарить автора Отправить деньги

Комментарии: 14

Алексей Федоров
30 декабря 2015, 13:49
0
jgrowl отвечает за отображение мини-сообщения на фронте. «Событие» нужно искать в скриптах магазина. По идее, на событие нужно вешать вывод модала своим отдельным скриптом со своим чанком отображения, в котрый будут подставляться данные из БД по id. Все, чем могу помочь, отправить к соответствующей документации, ибо не программер)) Если получится сделать некий «готовый рецепт», надеюсь выложишь его тут)) Уверен, найдутся те, кому он пригодится.
    Воеводский Михаил
    30 декабря 2015, 13:59
    1
    +3
    Тебе нужно использовать JS callback.
    Если не ошибаюсь:
    miniShop2.Callbacks.Cart.add.response.success = funtion(){};
      Сергей Лим
      11 января 2016, 04:35
      1
      0
      Вот вроде готовый вариант. Подскажите как вытаскивать [[+price]] и тд не со страницы товара? То есть перехват этих данных по нажатию на «Добавить в корзину»

      miniShop2.Callbacks.Cart.add.response.success = function() {
              $('.modal_cart').fadeIn("normal");
      }
      <div class="modal_cart">
          <div class="modal_content">
              <div class="closebox"><a href="#" class="close-btn deletemodal"></a></div>
              <h3>Товар добавлен в корзину</h3>
              <div class="modal_info">
                  <img src="[[+thumb]]" alt="[[+pagetitle]]"/>
                  <strong>[[*pagetitle]]</strong>
                  <div class="mod_price">Цена: <span class="price">[[+price]]</span> <i class="rub">Р</i></div>
                  <div class="clearfix"></div>
                  <a class="button_stay" href="javascript:;" onclick="jQuery('.modal_cart').hide()">Продолжить покупки</a>
                  <a class="button_buy" href="/cart.html">Оформить заказ</a>
              </div>
          </div>
      </div>
        Сергей Лим
        13 января 2016, 04:52
        0
        Помогите кто-нибудь, последний штрих остался и будет хорошее решение для повышения конверсии
          Andrei
          03 февраля 2016, 00:42
          0
          Сергей, скажите как у вас с данной проблемой? Есть решение?
            Сергей Лим
            04 февраля 2016, 05:24
            0
            К сожанию, нет
              Andrei
              04 февраля 2016, 12:53
              0
              Я понял в чем тут проблема и куда нужно копать. Способ выше работает, но он не генерирует информацию в модальном окне. Т.е. оно у вас уже в коде html и выводит только статику.

              Я не знаю как это сделать, но тут нужно контент модального окна генерировать, т.е. оно собирается при помощи js во время нажатия. Может через AjaxForm.
                Сергей Лим
                10 марта 2016, 10:29
                0
                Ну как?
                  Андрей
                  13 марта 2016, 14:23
                  0
                  Сергей, не решили еще проблему?
                    Сергей Лим
                    07 апреля 2016, 08:29
                    0
                    неа
                      Здоров Александр
                      07 апреля 2016, 19:06
                      0
                      может поможет modx.pro/help/8149/
                        Андрей
                        25 апреля 2016, 16:20
                        2
                        0
                        Сергей, решил проблему «в лоб». Так как окно несет чисто информационный характер и никакого сложного функционала не выполняет, то было решено передать нужные параметры через data- атрибуты.
                        Подписываем к кнопке «В корзину»:
                        data-pname="[[+pagetitle:stripString=`"`]]" data-pimg="[[+thumb]]" data-pprice="[[+price]]"
                        А снизу такой скрипт и разметка.
                        Стили на свой вкус.
                        <script>
                        $(document).on('click','button.btn-submit',function(e){
                        	var pid = $(this).data('pid') || 0;
                        	var pname = $(this).data('pname');
                        	var pimg = $(this).data('pimg');
                        	var pprice = $(this).data('pprice');
                        	$('#pname').empty();
                        	$('#pprice').empty();
                        	$('#modal_img').empty();
                        	$('#pname').prepend(pname);
                        	$('#pprice').prepend(pprice);
                        	$('#modal_img').prepend('<img src="'+pimg+'" id="modal-img" width="100"/>')
                        	$('.modal_cart').fadeIn("normal");
                        });
                        </script>
                        <div class="modal_cart" style="display: none;">
                            <div class="modal_content">
                                <div class="closebox"><a href="#" class="close-btn deletemodal"></a></div>
                                <h3><i class="fa fa-check"></i> Товар добавлен в корзину</h3>
                                <div class="modal_info">
                                	<div id="modal_img"></div>
                                    <strong id="pname"></strong>
                                    <div class="mod_price">Цена: <span class="price" id="pprice"></span> <i class="fa fa-rub"></i></div>
                                    <div class="clearfix"></div>
                                <div class="buttons_modals">
                                    <a class="button_stay" href="javascript:;" onclick="jQuery('.modal_cart').hide()">Продолжить покупки</a>
                                    <a class="btn btn-default" href="/cart.html" style="padding: 15px 20px;">Оформить заказ</a>
                                </div>
                                </div>
                            </div>
                        </div>
                        Знаю, что костылями пахнет)))
                        Кто поможет все упростить и сделать по фен-шую, буду благодарен))
                          Сергей Лим
                          04 мая 2016, 05:22
                          0
                          Как понять снизу? Прям в том же чанке?
                            Андрей
                            05 мая 2016, 19:00
                            0
                            Да, можно в этом же чанке или прямо в шаблоне.
          Это сообщение было удалено
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          15