Позвольте клиентам выбрать время доставки в процессе оформления заказа.
Описание
В этом примере мы даем покупателям магазина возможность выбирать предпочтительный временной интервал доставки. Когда покупатель переходит на страницу корзины, он может выбрать дату доставки и предварительно определенный интервал времени доставки. Выходные дни, указанные даты, например праздники, и временные интервалы, в которые достигается максимальное количество доставок, блокируются.
Пример кода
cart.jsw
Страница Корзина
events.js
Коллекции
Мы добавили 4 коллекции в этот пример:
Доставка: общая информация о доставке
DeliveryDisabledDates: отключенные даты (например, праздники).
DeliverySlots: предварительно определенные временные интервалы (например, 08:00–12:00, 14:00–18:00)
DeliveryAvailability: количество доставок на слот
Страницы и лайтбоксы
Наш сайт содержит следующие страницы и лайтбоксы:
Страница корзины: содержит текстовые элементы дня и времени доставки для отображения выбранных сроков доставки, а также кнопку «Обновить время доставки» для открытия лайтбокса для изменения времени доставки.
лайтбокс сведений о доставке: содержит средство выбора даты для выбора даты доставки и элемент раскрывающегося списка для выбора предопределенного временного интервала доставки.
Бэкенд
Наш сайт содержит следующие внутренние файлы:
cart.jsw: получает информацию о текущей корзине.
events.js: обновляет доступность временных интервалов доставки в коллекциях.
npm-пакет
Мы использовали Moment.js для упрощения обработки недоступности доставки в выходные дни.
Код
Наш пример сайта содержит код, который выполняет следующие действия:
1. После того, как клиент добавит товар в свою корзину, получите данные корзины и проверьте существующий выбранный временной интервал доставки. Если клиент уже выбрал слот, отобразите его дату и время. Если клиент еще не выбрал временной интервал для доставки, откройте лайтбокс.
2. Когда лайтбокс откроется, проверьте коллекции на наличие следующего:
Если определенная дата и/или время недоступны (выходные, заблокированные дни/время), заблокируйте их с помощью средства выбора даты и раскрывающегося списка временных интервалов.
В соответствии с предопределенными настройками, если день покупки слишком близок к выходным, разрешайте временные интервалы только на следующей неделе.
Если для определенного временного интервала достигнуто максимальное количество выделенных доставок, не показывать этот интервал.
3. Когда клиент выбирает предпочитаемый слот и размещает заказ, обновляйте коллекции.
4. Позвольте покупателю обновить время доставки, нажав кнопку «Обновить доставку» на странице корзины.