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

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

Игорь

27 октября 2023, 13:38

1 436

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

Денис Усманов

27 октября 2023, 13:49

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

Ну, а что бы как в моём случае после оформления заказа открывалась модалка с 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

Корзину-то в модалку я уже вывел (это по верстке отдельное окно) — там все работает хорошо (суммы меняются и т.п.)… А вот страница оформления заказа что-то не хочет подружиться с аяксом — стоимость доставки не подхватывается (на обычной странице все хорошо работает)

Денис Усманов

27 октября 2023, 14:17

Ну вот же, я показал, что можно просто сделать модальное окно в модальном окне по сути, во 2 пункте у меня в коде посмотри, идёт вызов msOrder, где код опять же как модальное окно, а в корзине кнопка «оформить» это вызов этого модального окна… ну и с getOrder так же просто поступи…

Игорь

27 октября 2023, 15:14

ну так и у меня практически также: в модальном окне корзины есть кнопка вызова модального окна заказа…
У тебя меняется стоимость доставки и общая сумма заказа в модальном окне? У меня нет

Денис Усманов

27 октября 2023, 15:16

Вызов msOrder как у меня, с! знаком? Т.е. всё не кешированное вызывается?

Денис Усманов

27 октября 2023, 14:18

Вот код чанка msOrder.tpl у меня:

Игорь

28 октября 2023, 13:18

Подключил скрипт минишопа 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

Не знаю, насколько это правильно, но со стоимостью доставки вроде получилось решить таким костылем:

<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

А зачем выносить полноценное оформление заказа в модалку?

Игорь

28 октября 2023, 16:33

А кто же его знает? Хозяин — барин, спорить что-то доказывать бесполезно… ((

Артур Шевченко

29 октября 2023, 13:15

Бесполезно, только если нет аргументов. Оформление заказа в модальном окне нужно чтобы ускорить процесс, а если нагружать его выбором способов оплаты и доставки, расчётом стоимости доставки, то весь смысл теряется, а процесс разработки усложняется.

Игорь

28 октября 2023, 16:43

Самое страшное, что я пока не сильно понимаю, как сделать всплывающее окно станицы «Заказ получен» со всеми данными из GetOrder ((

Артур Шевченко

29 октября 2023, 13:16

Делать запрос на сервер с id заказа и получать нужные данные.

Игорь

01 ноября 2023, 12:36

Пытаюсь вызвать 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

В исходном коде при успешном оформлении редирект происходит, причём на сервере.

Игорь

02 ноября 2023, 00:18

Обернул колбэк в функцию — так вроде он работает с моим аяксом…

$(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

Доброе утро. Вот так надо?
видео

Игорь

30 октября 2023, 09:40

Здравствуйте.
Не совсем — оформление заказа у меня в отдельном модальном окне (в принципе с ним уже разобрался кое-как костылями-колбэками). Остается теперь ещё одно окно «Заказ получен» как-то прикрутить.

Алексей

30 октября 2023, 09:57

Посмотрите вот это дополнение QuickView

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

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

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

Здесь упомянуты