Позвольте клиентам выбрать время доставки в процессе оформления заказа.

Описание

В этом примере мы даем покупателям магазина возможность выбирать предпочтительный временной интервал доставки. Когда покупатель переходит на страницу корзины, он может выбрать дату доставки и предварительно определенный интервал времени доставки. Выходные дни, указанные даты, например праздники, и временные интервалы, в которые достигается максимальное количество доставок, блокируются.

Пример кода

cart.jsw

import wixStores from 'wix-stores-backend';


export function getCurrentCart() {
	return wixStores.getCurrentCart();
}

Страница Корзина

import wixWindow from 'wix-window';
import wixData from 'wix-data';
import { getCurrentCart } from 'backend/cart.jsw'


$w.onReady(function () {
	$w('#updateTimeButton').hide();


	getCurrentCart()
		.then((response) => {
			const cartId = response._id;


			if (response.lineItems.length > 0) {
				$w('#updateTimeButton').show();
				findDelivery(cartId).then(() => {
					displayLightbox(cartId);
				});
			}


			$w('#updateTimeButton').onClick((event) => {
				updateDeliveryTime(cartId);
			});
		});
});


async function findDelivery(cartId) {
	wixData.query('deliveries')
		.eq('cartId', cartId)
		.find()
		.then((results) => {
			if (results.items.length > 0) {
				displayDeliveryTime(results.items[0]);
			} else {
				$w('#deliveryDate').text = 'Delivery day';
				$w('#deliveryTime').text = 'Delivery time';
			}
		})
		.catch((err) => {
			console.error(err);
		});
}


function updateDeliveryTime(cartId) {
	displayLightbox(cartId);
}


function displayDeliveryTime(data) {
	$w('#deliveryDate').text = data.deliveryDate.toDateString();
	$w('#deliveryTime').text = data.deliveryTime;
}


function displayLightbox(cartId) {
	wixWindow.openLightbox('delivery details', {
			cartId: cartId
		})
		.then((result) => {
			displayDeliveryTime(result);
		});
}

events.js

import wixData from 'wix-data';


const CONSTANTS = {
	PICKUP_TITLE: 'Pickup from store',
	PICKUP_TIME: '00:00'
}


function setOrderNumber(cartId, orderNumber) {
	wixData.query('deliveries')
		.eq('cartId', cartId)
		.find()
		.then((results) => {
			if (results.items.length > 0) {
				const item = results.items[0];
				deliveryUpdate(cartId, orderNumber, item);
				setDeliverySlot(item.date, item.deliveryTime);
			} else {
				console.log('Cart ID ' + cartId + ' not found');
			}
		})
		.catch((err) => {
			console.error('deliveryUpdate error', err);
		});
}


function deliveryUpdate(cartId, orderNumber, itemToUpdate) {
	wixData.get('deliveries', itemToUpdate._id)
		.then((item) => {
			item.orderNumber = orderNumber + '';
			wixData.update('deliveries', item);
		})
		.catch((err) => {
			console.error('deliveryUpdate error', err);
		});
}


function updateDeliveryAvailability(item) {
	wixData.get('deliveries-availability', item._id)
		.then(result => {
			result.counter = result.counter + 1;
			wixData.update('deliveries-availability', result);
		})
		.catch((err) => {
			console.error('updateDeliveryAvailability error', err);
		});
}


function insertDeliveryAvailability(datObj, slot) {
	let toInsert = {
		'deliveryDate': datObj,
		'deliveryTime': slot,
		'counter': 1
	};


	wixData.insert('deliveries-availability', toInsert)
		.then((response) => {
			console.log('deliveries-availability insert', response)
		})
		.catch((err) => {
			console.error('insertDeliveryAvailability error', err);
		});
}


function setDeliverySlot(date, slot) {
	const datObj = new Date(date).toDateString();


	wixData.query('deliveries-availability')
		.eq('deliveryDate', datObj)
		.find()
		.then((results) => {
			if (results.items.length > 0) {
				const itemToUpdate = results.items[0];


				if (itemToUpdate.deliveryTime === slot) {
					updateDeliveryAvailability(itemToUpdate); // date & slot exist
				} else {
					insertDeliveryAvailability(datObj, slot); // date exists, slot does not
				}
			} else {
				insertDeliveryAvailability(datObj, slot); // date does not exist
			}
		})
		.catch((err) => {
			console.error('setDeliverySlot error', err);
		});
}


export function wixStores_onNewOrder(event) {
	getFullOrder(event.orderId)
		.then(async (order) => {
			setOrderNumber(order.cartId, order.number);
		});
}


function getFullOrder(orderId) {
	return wixData.get('Stores/Orders', orderId);
}

Коллекции​

Мы добавили 4 коллекции в этот пример:

  • Доставка: общая информация о доставке

  • DeliveryDisabledDates: отключенные даты (например, праздники).

  • DeliverySlots: предварительно определенные временные интервалы (например, 08:00–12:00, 14:00–18:00)

  • DeliveryAvailability: количество доставок на слот

Страницы и лайтбоксы​

Наш сайт содержит следующие страницы и лайтбоксы:

  • Страница корзины: содержит текстовые элементы дня и времени доставки для отображения выбранных сроков доставки, а также кнопку «Обновить время доставки» для открытия лайтбокса для изменения времени доставки.

  • лайтбокс сведений о доставке: содержит средство выбора даты для выбора даты доставки и элемент раскрывающегося списка для выбора предопределенного временного интервала доставки.

Бэкенд

Наш сайт содержит следующие внутренние файлы:

  • cart.jsw: получает информацию о текущей корзине.

  • events.js: обновляет доступность временных интервалов доставки в коллекциях.

npm-пакет

​Мы использовали Moment.js для упрощения обработки недоступности доставки в выходные дни.

Код​

Наш пример сайта содержит код, который выполняет следующие действия:

1. После того, как клиент добавит товар в свою корзину, получите данные корзины и проверьте существующий выбранный временной интервал доставки. Если клиент уже выбрал слот, отобразите его дату и время. Если клиент еще не выбрал временной интервал для доставки, откройте лайтбокс.

2. Когда лайтбокс откроется, проверьте коллекции на наличие следующего:

  • Если определенная дата и/или время недоступны (выходные, заблокированные дни/время), заблокируйте их с помощью средства выбора даты и раскрывающегося списка временных интервалов.

  • В соответствии с предопределенными настройками, если день покупки слишком близок к выходным, разрешайте временные интервалы только на следующей неделе.

  • Если для определенного временного интервала достигнуто максимальное количество выделенных доставок, не показывать этот интервал.

3. Когда клиент выбирает предпочитаемый слот и размещает заказ, обновляйте коллекции.

4. Позвольте покупателю обновить время доставки, нажав кнопку «Обновить доставку» на странице корзины.

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