top of page
  • Julia Sememova

Время доставки в интернет-магазине wix

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

Время доставки в интернет-магазине wix

Описание

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




Пример кода

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. Позвольте покупателю обновить время доставки, нажав кнопку «Обновить доставку» на странице корзины.

213 просмотров

Недавние посты

Смотреть все
bottom of page