Повторный рендеринг корзины AJAX после пользовательских запросов корзины
Я создаю приложение Shopify, которое предлагает дополнительные продукты или услуги, связанные с некоторыми идентифицированными продуктами. В некоторых случаях я добавляю товар в корзину со страницы корзины.
Я нашел этот вопрос весьма полезным для принятия мер при изменении корзины. Проблема в том, что в настоящее время я вынужден перезагрузить страницу, чтобы повторно отобразить корзину вместе с новым продуктом. Я не могу самостоятельно реконструировать тележку, чтобы включить в нее новые предметы.
Следовательно, есть ли способ запустить "AJAX-рендеринг" корзины и избежать полной перезагрузки страницы?
Ответы
Вы можете добиться этого разными способами в зависимости от вашей конечной цели. Из вашего описания я понял, что вы просто хотите, чтобы ваш скрипт запускался на странице корзины. Однако просто обратите внимание, что пользователь может перейти на страницу оформления заказа, не посещая страницу корзины. Так что просто рассмотрите все варианты использования.
Это было бы намного проще, если бы вам приходилось делать это в теме, а не в приложении. Поскольку ваше приложение не имеет никакого представления о разметке страницы корзины, нелегко просто добавить новую строку продукта в существующую таблицу. В качестве обходного пути при добавлении нового продукта вызовите страницу корзины через Ajax, проанализируйте возвращенный HTML и замените форму корзины. Поэтому после добавления нового продукта просто вызовите приведенный ниже код, чтобы повторно отобразить форму продукта на странице корзины.
function RerenderCart() {
$.get("/cart", function (data) { const parser = new DOMParser(); const doc = parser.parseFromString(data, "text/html"); const formSelector = doc.querySelector("form[action='/cart']"); $("form[action='/cart']").replaceWith(formSelector);
});
}
Добавьте проверки для страницы корзины и если форма была найдена в возвращенном HTML.
Этот код отлично работает с темой Debut Shopify. Просто тщательно протестируйте его на всех ваших сценариях использования.
DOMParser