- Julia Sememova
Допродажа продуктов в интернет-магазине wix
Продвигайте товары, основываясь на выборе ваших покупателей. Функционал допродажи в корзине интернет-магазина wix с помощью кода Wix Velo.
Описание
В этом примере мы выбираем продукт, который хотим продвигать (допродажа), и добавляем его на страницу корзины. Продукт дополнительной продажи отображается, когда посетители сайта помещают в корзину продукт из той же коллекции. Посетители сайта могут добавить товар в корзину с этой же страницы, не проваливаясь в карточку товара.
Пример кода
Страница Корзины
import wixData from 'wix-data';
import { getCurrentCart } from 'backend/cart.jsw'
const upsellProduct = {
id: '6b1c6f08-b490-0338-1c5e-1df46fee9b16',
size: '140g',
quantity: 1,
name: 'Jasmine'
};
$w.onReady(function () {
$w('#upsellBox').hide();
$w('#addToCart').onClick((event) => {
addToCart(event);
});
getCurrentCart()
.then((response) => {
if (!isUpsellItemInCart(response.lineItems)) {
wixData.get('Stores/Products', upsellProduct.id)
.then((result) => {
setUpsellProduct(result)
$w('#upsellBox').show();
})
.catch((err) => {
console.error(err);
});
}
});
});
function isUpsellItemInCart(items) {
let upsellItemInCart = false;
items.forEach((item) => {
if (upsellProduct.id === item.productId) {
upsellItemInCart = true;
}
});
return upsellItemInCart;
}
function setUpsellProduct(product) {
$w('#productName').text = product.name;
$w('#productImage').src = product.mainMedia;
$w('#productDescription').html = product.description;
$w('#productPrice').text = '$ ' + product.price;
}
function addToCart(event) {
$w('#shoppingCartIcon').addToCart(upsellProduct.id, upsellProduct.quantity, { 'choices': { 'Size': upsellProduct.size } })
.then(() => {
$w('#upsellBox').hide();
})
.catch((error) => {
console.error(error);
});
}
cart.jsw
import wixData from 'wix-data';
import { getCurrentCart } from 'backend/cart.jsw'
const upsellProduct = {
id: '6b1c6f08-b490-0338-1c5e-1df46fee9b16',
size: '140g',
quantity: 1,
name: 'Jasmine'
};
$w.onReady(function () {
$w('#upsellBox').hide();
$w('#addToCart').onClick((event) => {
addToCart(event);
});
getCurrentCart()
.then((response) => {
if (!isUpsellItemInCart(response.lineItems)) {
wixData.get('Stores/Products', upsellProduct.id)
.then((result) => {
setUpsellProduct(result)
$w('#upsellBox').show();
})
.catch((err) => {
console.error(err);
});
}
});
});
function isUpsellItemInCart(items) {
let upsellItemInCart = false;
items.forEach((item) => {
if (upsellProduct.id === item.productId) {
upsellItemInCart = true;
}
});
return upsellItemInCart;
}
function setUpsellProduct(product) {
$w('#productName').text = product.name;
$w('#productImage').src = product.mainMedia;
$w('#productDescription').html = product.description;
$w('#productPrice').text = '$ ' + product.price;
}
function addToCart(event) {
$w('#shoppingCartIcon').addToCart(upsellProduct.id, upsellProduct.quantity, { 'choices': { 'Size': upsellProduct.size } })
.then(() => {
$w('#upsellBox').hide();
})
.catch((error) => {
console.error(error);
});
}
Элементы страницы
На странице корзины мы добавили следующие элементы:
Бокс для отображения информации о дополнительном продукте.
3 текстовых элемента для отображения названия продукта, цены и описания
Изображение для отображения изображения продукта
Кнопка "Добавить в корзину"
Код
В бэкэнд модуле cart.jsw мы получаем информацию о корзине текущего посетителя сайта.
На странице корзины делаем следующее:
Определяем переменную, содержащую информацию о дополнительном продукте.
Первоначально мы скрываем поле допродажи.
В коде используется внутренняя функция для получения информации о текущей корзине.
Мы проверяем, находится ли продукт допродажи в настоящее время в корзине, сравнивая идентификатор этого продукта с каждым идентификатором продукта элемента корзины.
Если товара допродажи нет в корзине, мы получаем информацию о продукте допродажи из коллекции Stores/Products и отображаем информацию в поле допродажи.
Мы устанавливаем обработчик событий, который запускается, если посетитель сайта нажимает кнопку «Добавить в корзину».