Продвигайте товары, основываясь на выборе ваших покупателей. Функционал допродажи в корзине интернет-магазина 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);
		});
}

Элементы страницы

На странице корзины мы добавили следующие элементы:

  1. Бокс для отображения информации о дополнительном продукте.

  2. 3 текстовых элемента для отображения названия продукта, цены и описания

  3. Изображение для отображения изображения продукта

  4. Кнопка "Добавить в корзину"

Код

В бэкэнд модуле cart.jsw мы получаем информацию о корзине текущего посетителя сайта.

На странице корзины делаем следующее:

  1. Определяем переменную, содержащую информацию о дополнительном продукте.

  2. Первоначально мы скрываем поле допродажи.

  3. В коде используется внутренняя функция для получения информации о текущей корзине.

  4. Мы проверяем, находится ли продукт допродажи в настоящее время в корзине, сравнивая идентификатор этого продукта с каждым идентификатором продукта элемента корзины.

  5. Если товара допродажи нет в корзине, мы получаем информацию о продукте допродажи из коллекции Stores/Products и отображаем информацию в поле допродажи.

  6. Мы устанавливаем обработчик событий, который запускается, если посетитель сайта нажимает кнопку «Добавить в корзину».

← Все руководства по WixНайти другой материал →