Слушайте, чтобы узнать количество обновлений корзины
Я пишу приложение Shopify, и я хотел бы слушать событие обновления корзины shopify. Я знаю, что когда пользователь нажимает удалить или увеличить количество товара. Shopify отправляет запрос POST на бэкэнд, чтобы обновить карту. Мое приложение рассчитывает стоимость доставки на основе количества товаров в корзине. Я добавляю свой сценарий приложения в shopify через тег script.
Я попытался прослушать ввод количества, но это событие вызывает только один. Я думаю, что shopify обновляет входную DOM после каждого обновления корзины, поэтому он может удалить моего слушателя.
$('body').on('change', '.input[name="updates[]"]', function() { console.log('HELLO')});
Как я могу прослушать событие обновления корзины? Кажется, это простой вопрос, но я действительно не могу найти ответа по поводу Shopify!
Ответы
Таким образом, есть 2 способа обновления корзины Shopify. Либо через форму отправки, либо с помощью Ajax API. Предположим, вы уже решили проблему отправки формы, вызвав функцию расчета доставки при загрузке страницы. Для обновлений корзины на основе Ajax стандартного события нет. Некоторые темы могут запускать событие при обновлении корзины, но в случае общего приложения на них нельзя полагаться из-за отсутствия определенного стандартного поведения.
Итак, что вы можете сделать, так это прослушивать вызовы AJAX и вызывать свою функцию, если она соответствует вашим условиям. Shopify Docs for Ajax API перечисляет 4 типа запросов POST, которые могут обновлять корзину. Таким образом, исправляя функцию открытия XMLHttpRequest, мы добавляем прослушиватель событий для загрузки, который запускается при успешном завершении запроса. В обратном вызове события мы проверяем, был ли URL-адрес тем, который использовался для обновления корзины, а затем вызываем функцию доставки обновления.
const open = window.XMLHttpRequest.prototype.open;
function openReplacement() {
this.addEventListener("load", function () {
if (
[
"/cart/add.js",
"/cart/update.js",
"/cart/change.js",
"/cart/clear.js",
].includes(this._url)
) {
calculateShipping(this.response);
}
});
return open.apply(this, arguments);
}
window.XMLHttpRequest.prototype.open = openReplacement;
function calculateShipping(cartJson) {
console.log("calculate new shipping");
console.log(JSON.parse(cartJson));
}
Идея взята из ответа Николаса
ajaxComplete не использовался, потому что он слушает только запросы, сделанные с помощью jQuery.
Передача ответа вашей функции доставки сохраняет дополнительный вызов Get Cart Ajax.
Обновить
Если приведенный выше код не работает для вас или не улавливает все вызовы, см. Мой другой ответ, который также прослушивает все вызовы API Fetch, если он используется для обновления корзины.
Чтобы обновить поля количества товара в корзине в разделенной теме
Шаг 1: Вы получаете доступ к администратору Shopify, нажимаете Интернет-магазин и переходите в Темы.
Шаг 2: Найдите темы, которые вы хотите отредактировать, затем нажмите «Действия», затем «Редактировать код».
Шаг 3: Посмотрите разделы, нажмите cart-template.liquid. В случае, если вы не используете тему, у которой нет адреса, вы можете получить доступ к каталогу шаблонов и щелкнуть cart.liquid.
Шаг 4: Найдите фразу, написанную как update [item.id] во входном теге.
Шаг 5: Измените имя на значение name = «updates []».
Шаг 6. Повторяйте эти вышеупомянутые шаги всякий раз, когда вы видите значение имени updates [] во входном теге.
Шаг 7: Нажмите «Сохранить», и вы успешно обновите поля количества товаров.