Shopify 2.0, как добавить в корзину несколько товаров? ⇐ CSS

[Anonymous]

В настоящее время я работаю над темой Shopify Sense, и в связи с этим мне нужно переписать их функцию «Добавить в корзину», чтобы она могла добавлять в корзину более одного товара одновременно.
У меня есть настройка, при которой на страницу продукта были добавлены некоторые дополнительные продукты, которые покупатель может добавить в так называемый пакет. Когда покупатель нажимает «Добавить в корзину» на основном товаре, он должен добавить в корзину не только основной товар, но и выбранные товары в комплекте. У каждого продукта в комплекте есть связанная форма, как и у основного продукта.
Вот скрипт Shopify «Добавить в корзину»:

Код: Выделить всё

onSubmitHandler(evt) {
evt.preventDefault();
if (this.submitButton.getAttribute('aria-disabled') === 'true') return;

this.handleErrorMessage();

this.submitButton.setAttribute('aria-disabled', true);
this.submitButton.classList.add('loading');
this.querySelector('.loading-overlay__spinner').classList.remove('hidden');

const config = fetchConfig('javascript');
config.headers['X-Requested-With'] = 'XMLHttpRequest';
delete config.headers['Content-Type'];

const formData = new FormData(this.form);
if (this.cart) {
formData.append('sections', this.cart.getSectionsToRender().map((section) => section.id));
formData.append('sections_url', window.location.pathname);
this.cart.setActiveElement(document.activeElement);
}
config.body = formData;
console.log("Form data: " + formData);

fetch(`${routes.cart_add_url}`, config)
.then((response) => response.json())
.then((response) => {
if (response.status) {
this.handleErrorMessage(response.description);

const soldOutMessage = this.submitButton.querySelector('.sold-out-message');
if (!soldOutMessage) return;
this.submitButton.setAttribute('aria-disabled', true);
this.submitButton.querySelector('span').classList.add('hidden');
soldOutMessage.classList.remove('hidden');
this.error = true;
return;
} else if (!this.cart) {
window.location = window.routes.cart_url;
return;
}

this.error = false;
const quickAddModal = this.closest('quick-add-modal');
if (quickAddModal) {
document.body.addEventListener('modalClosed', () => {
setTimeout(() => { this.cart.renderContents(response) });
}, { once: true });
quickAddModal.hide(true);
} else {
this.cart.renderContents(response);
}
})
.catch((e) => {
console.error(e);
})
.finally(() => {
this.submitButton.classList.remove('loading');
if (this.cart && this.cart.classList.contains('is-empty')) this.cart.classList.remove('is-empty');
if (!this.error) this.submitButton.removeAttribute('aria-disabled');
this.querySelector('.loading-overlay__spinner').classList.add('hidden');
});
}

Я предполагаю создание цикла forEach для каждого выбранного продукта пакета и создание нового formData для каждого из них, а затем объединение их всех вместе с formData основного продукта. Однако мне не удалось заставить его работать полностью.
Вы можете прочитать документацию Shopify Cart API по этому вопросу здесь:
https: //shopify.dev/docs/api/ajax/reference/cart
Пожалуйста, не стесняйтесь предлагать потенциальное решение или сообщать мне, сколько это будет стоить, особенно если есть кто-то, кто сможет решить эту проблему сегодня, в понедельник.

Подробнее здесь: https://stackoverflow.com/questions/770 ... o-the-cart