Minishop2 Оформление заказа в модальном окне через ajax

Здравствуйте.
Пытаюсь сделать оформление заказа в модальном окне.
Пока вижу 2 большие проблемы:
1. При изменении способа доставки сумма заказа не меняется (и сумма стоимости доставки тоже не выводится)
2. Не понятно как потом выводить страницу Заказ получен (сниппет msGetOrder) — её тоже желательно выводить в новом модальном окне.
Пожалуйста, помогите кто чем может, а то я уже всю голову сломал )
Игорь
Игорь
27 октября 2023, 13:38
modx.pro
644
0

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

Денис Усманов
Денис Усманов
27 октября 2023, 13:49
0
1) Создаёшь ресурс без шалона со сниппетом msCart


2) В чанк (как моём случае customMiniCart) вкладываешь код самой корзины, сниппет msOrder и т.п., а так же доп. скрипты


3) На миникорзину вешаешь вызов модального окна, так же такой скрипт:

<script>
  $(document).on('click', '.msMiniCart', function(e) {
	e.preventDefault();
	$.ajax({  
	  type: "POST",  
	  url: '[[~ID ресурса созданного при 1 пункте]]', 
	  data: {parent: '[[*id]]'},
	  success:  function(data) { 
		if (data){
		    $('#miniCartContainer').html(data);
		    miniShop2.Order.initialize();
		}else{
		  AjaxForm.Message.error('Что-то пошло не так, попробуйте позже!');
		}
	  } 
	}); 
  });
</script>
#miniCartContainer — это то, что должно быть в модальном окне, куда будет подгружаться корзина

Ну и напоследок: Для динамического изменения кол. товаров и при чём корректного, я использую компонент msMiniCartDynamic
    Денис Усманов
    Денис Усманов
    27 октября 2023, 14:02
    0
    Ну, а что бы как в моём случае после оформления заказа открывалась модалка с id (в конце скрина во 2 пункте) orderSuccess, необходимо изменить js файл MiniShop2:
    assets/components/minishop2/js/web/default.js
    Строки примерно такие:
    callbacks.submit.response.success = function (response) {
                if (response.data['redirect']) {
                    document.location.href = response.data['redirect'];
                } 
                else if (response.data['msorder']) {
                    $('#msMiniCart').removeClass('full');
                    $('#miniCart').removeClass('open');
                    $('body').find('.global-overlay').removeClass('overlay-open');
                    $.fancybox.close([{
                          src  : '#msOrder'
                      }]);
                    $.fancybox.open([{
                          src  : '#orderSuccess',
                          padding: 0
                      }]);
                }
                else {
                    $.fancybox.open([{
                          src  : '#orderSuccess',
                          padding: 0
                      }]);
                }
            };
      Игорь
      Игорь
      27 октября 2023, 14:15
      0
      Корзину-то в модалку я уже вывел (это по верстке отдельное окно) — там все работает хорошо (суммы меняются и т.п.)… А вот страница оформления заказа что-то не хочет подружиться с аяксом — стоимость доставки не подхватывается (на обычной странице все хорошо работает)
        Денис Усманов
        Денис Усманов
        27 октября 2023, 14:17
        0
        Ну вот же, я показал, что можно просто сделать модальное окно в модальном окне по сути, во 2 пункте у меня в коде посмотри, идёт вызов msOrder, где код опять же как модальное окно, а в корзине кнопка «оформить» это вызов этого модального окна… ну и с getOrder так же просто поступи…
          Игорь
          Игорь
          27 октября 2023, 15:14
          0
          ну так и у меня практически также: в модальном окне корзины есть кнопка вызова модального окна заказа…
          У тебя меняется стоимость доставки и общая сумма заказа в модальном окне? У меня нет
            Денис Усманов
            Денис Усманов
            27 октября 2023, 15:16
            0
            Вызов msOrder как у меня, с! знаком? Т.е. всё не кешированное вызывается?
          Денис Усманов
          Денис Усманов
          27 октября 2023, 14:18
          0
          Вот код чанка msOrder.tpl у меня:
            Игорь
            Игорь
            28 октября 2023, 13:18
            0
            Подключил скрипт минишопа default.js и тестовое сообщение в модальном окне — видно что так стоимость доставки пересчитывается (без default.js не пересчитывается), но во фронтенде так ничего и не меняется — что я мог упустить? (
            <script src="/assets/components/minishop2/js/web/default.js"></script>
<script>
    miniShop2.Callbacks.Order.getcost.response.success = function(response) {
var rdc = response.data['delivery_cost'];
alert(rdc);	
	}
</script>
        Игорь
        Игорь
        28 октября 2023, 15:59
        0
        Не знаю, насколько это правильно, но со стоимостью доставки вроде получилось решить таким костылем:
        <script src="/assets/components/minishop2/js/web/default.js"></script>
<script>
    miniShop2.Callbacks.Order.getcost.response.success = function(response) {
 $('.mydeliverycost').text(miniShop2.Utils.formatPrice(response.data['delivery_cost']));
 $('.myorderprice').text(miniShop2.Utils.formatPrice(response.data['cost']));                 
	}
</script>
        (естественно, что полям, где должна меняться стоимость нужно добавить соответствующие классы '.mydeliverycost' и '.myorderprice')… С причиной, почему не работало по умолчанию в аяксе (хотя, например, корзина в аяксе нормально работает) так и не удалось разобраться — будем надеяться, что более умные люди, нам объяснят… а лучше переделают, что бы сразу всё работало красиво ;))… сейчас, почему-то все хотят эти всплывающие окна
          Артур Шевченко
          Артур Шевченко
          28 октября 2023, 16:27
          0
          А зачем выносить полноценное оформление заказа в модалку?
            Игорь
            Игорь
            28 октября 2023, 16:33
            0
            А кто же его знает? Хозяин — барин, спорить что-то доказывать бесполезно… ((
              Артур Шевченко
              Артур Шевченко
              29 октября 2023, 13:15
              0
              Бесполезно, только если нет аргументов. Оформление заказа в модальном окне нужно чтобы ускорить процесс, а если нагружать его выбором способов оплаты и доставки, расчётом стоимости доставки, то весь смысл теряется, а процесс разработки усложняется.
            Игорь
            Игорь
            28 октября 2023, 16:43
            0
            Самое страшное, что я пока не сильно понимаю, как сделать всплывающее окно станицы «Заказ получен» со всеми данными из GetOrder ((
              Артур Шевченко
              Артур Шевченко
              29 октября 2023, 13:16
              0
              Делать запрос на сервер с id заказа и получать нужные данные.
                Игорь
                Игорь
                01 ноября 2023, 12:36
                0
                Пытаюсь вызвать callback на отправку из ajax формы (хочу в дальнейшем вызывать модальное окно «Заказ получен»:
                miniShop2.Callbacks.Order.submit.response.success = function (response) { alert('eeeeeeee'); };
                Что-то не срабатывает ничего (или может, просто не успевает сработать). Хотя другой callback нормально работает:
                miniShop2.Callbacks.Order.submit.response.error = function(response) { }
                Как быть?
                  Артур Шевченко
                  Артур Шевченко
                  01 ноября 2023, 22:26
                  0
                  В исходном коде при успешном оформлении редирект происходит, причём на сервере.
                    Игорь
                    Игорь
                    02 ноября 2023, 00:18
                    0
                    Обернул колбэк в функцию — так вроде он работает с моим аяксом…
                    $(document).ready(function() {  
    miniShop2.Callbacks.Order.submit.response.success = function (response) { 
if (response.data['redirect']) {
                    document.location.href = response.data['redirect'];
                } else if (response.data['msorder']) {
                    if(document.location.pathname.indexOf('checkout') == -1){
                        document.location.href = document.location.origin + '/getorder.html'
                            + (document.location.search ? document.location.search + '&' : '?')
                            + 'msorder=' + response.data['msorder'];
                    }
                    else{
                        document.location.href = document.location.origin + document.location.pathname
                            + (document.location.search ? document.location.search + '&' : '?')
                            + 'msorder=' + response.data['msorder'];
                    }
                } else {
                    location.reload();
}
	}; 

    });
                    Жалко только, что так и не получилось сделать как планировалось (всплывающее окно «заказ получен» через ajax без перезагрузки страницы) — Сейчас просто редиректится на новую страницу, а там уже модалка вызывается со сниппетом GetOrder ((
                Алексей
                Алексей
                30 октября 2023, 08:40
                0
                Доброе утро. Вот так надо?
                видео
                  Игорь
                  Игорь
                  30 октября 2023, 09:40
                  0
                  Здравствуйте.
                  Не совсем — оформление заказа у меня в отдельном модальном окне (в принципе с ним уже разобрался кое-как костылями-колбэками). Остается теперь ещё одно окно «Заказ получен» как-то прикрутить.
              Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
              20