Время доставки в интернет-магазине wix
- Julia Sememova
- 18 февр. 2022 г.
- 2 мин. чтения
Позвольте клиентам выбрать время доставки в процессе оформления заказа.
Описание
В этом примере мы даем покупателям магазина возможность выбирать предпочтительный временной интервал доставки. Когда покупатель переходит на страницу корзины, он может выбрать дату доставки и предварительно определенный интервал времени доставки. Выходные дни, указанные даты, например праздники, и временные интервалы, в которые достигается максимальное количество доставок, блокируются.
Пример кода
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. Позвольте покупателю обновить время доставки, нажав кнопку «Обновить доставку» на странице корзины.
Comments