Shopify Ajax API, Alpine JS, добавление выбранных пользователем опций в корзину с помощью Ajax
Я создаю этот раздел Build A Box, где пользователь может выбирать различные элементы, составляющие 1 продукт. У меня проблемы с добавлением товаров в корзину.
ОБНОВЛЯТЬ: Текущее состояние: можно добавить жестко закодированный основной продукт в formData. Сначала я сделал это, чтобы запустить addToCart. Он добавляет основной продукт, но не перенаправляет на страницу корзины. Если вы измените URL-адрес в браузере на /cart, он там.
Мне нужно выяснить 2 вещи.
1 как перенаправить на страницу корзины после запуска addToCart()
2 Как добавить выбранные пользователем элементы в корзину как 1 продукт, а не варианты.
См. журналы
Я могу выбирать элементы и помещать их в массив в моем компоненте x-data. Данные выглядят так:
[
{img_string: 'https://cdn.shopify.com/s/files/1/0695/7495/1222/files/Barky.webp?
v=1672528086&width=150', title: 'Barky', id: 'selected_item-1'},
{img_string: 'https://cdn.shopify.com/s/files/1/0695/7495/1222/files/Barky.webp?
v=1672528086&width=150', title: 'Barky', id: 'selected_item-1'}
]
Для моей последней итерации я просто жестко закодировал идентификатор варианта и количество. Еще нужно придумать, как поместить все выбранные товары в корзину.
ОБНОВЛЕНИЕ: я добавил фильтр preventDefault в вызов Alpine addToCart(), теперь он не перенаправляется, но если вы измените URL-адрес в браузере на /cart, там будет жестко запрограммированный основной продукт.
<div x-data = "items: []">
<div
x-data = "
{
qty: 1,
addToCart(){
let formData = {
'items': [{
'id': 44202123100470,
'quantity': 1
}]
};
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
console.info(response)
return response.json();
})
.catch((error) => {
console.error('Error:', error);
});
}
}
"
class = "tw-mt-12 tw-flex tw-flex-col tw-p-auto tw-bg-brandText tw-opacity-80"
>
<div class = "tw-p-8">
<h2 class = "tw-mb-4 tw-text-white">Your Selections</h2>
{% assign product_form_id = 'product-form-' | append: section.id %}
{%- form 'product',
product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<input
type = "hidden"
name = "id"
value = "{{ product.selected_or_first_available_variant.id }}"
disabled
>
<input type = "hidden" name = "quantity" x-model = "qty" value = "1">
<div class = "product-form__buttons">
<button
type = "add"
@click = "addToCart()"
:class = "full_box ? 'tw-bg-ctaColor' : ''"
class = "tw-bg-white tw-text-brandText tw-flex tw-justify-center tw-py-4 tw-px-6 tw-rounded-full tw-font-bold"
>
<p class = "" x-show = "!full_box">
<span x-text = "items_selected" class = "tw-mr-2"></span><span class = "tw-mr-2">of</span
><span class = "tw-font-bold" x-text = "box_size"></span><span class = "tw-ml-2">Selected</span>
</p>
<p x-show = "full_box" class = "">Add to cart</p>
</button>
</div>
{%- endform -%}
</div>
</div>
Ответы 1
Я решил проблему с перенаправлением, используя Location API добавив location.href="/cart" в обещание успеха вызова Ajax.
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
console.info(response)
return response.json();
})
.then((data) => {
location.href = '/cart';
console.info('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
Решить вопрос, как поместить все выбранные товары в корзину. Я сопоставил массив объектов items и вернул массив строк. Затем я присвоил переменной selectedItems и вызвал toString()
В ключе свойств formData я добавил значение selectItems в ключ Box Items. Немного некрасиво на данный момент нет пробелов в строке. Определенно нужно реорганизовать это. Любой отзыв будет суперкрутым 😀♂️
<div
x-data = "
{
addToCart(items, id){
let itemsToAdd = items.map((item) => {
return item['title'];
})
let selectedItems = itemsToAdd.toString()
let formData = {
'items': [{
'id': id,
'quantity': 1,
'properties': {
'Box Items': selectedItems,
}
}]
};
fetch(window.Shopify.routes.root + 'cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => {
console.info(response)
return response.json();
})
.then((data) => {
location.href = '/cart';
console.info('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
reset()
}
}
"
class = "tw-mt-12 tw-flex tw-flex-col tw-p-auto tw-bg-brandText tw-opacity-80"
>...</div>