Как сделать так, чтобы человек не смог оформить заказ на определенную дату на Тильде

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

Особенность бизнеса — это изделия ручной работы. Соответсвенно, не все товары есть в наличии и, после оформления заказа, необходимо время на их изготовление.

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

В Тильде в блоке ST100 есть возможность закрыть для заказа некоторые даты (скрины ниже).

Как сделать так, чтобы человек не смог оформить заказ на определенную дату на Тильде
Как сделать так, чтобы человек не смог оформить заказ на определенную дату на Тильде

Но, как видите, возможности сделать запрет на 1 день вперед — нет. Поэтому для данной задачи был разработан отдельный код, который позволяет сделать запрет на n дней вперед.

Код:

<script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js" charset="utf-8" onerror="this.loaderr='y';"></script> <script> $(document).ready(function(){ let colDay = 1; // Кол-во блокированных дней от текущего $('input[name="Date"]'); let date = new Date(); let attrDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(); let month = date.getMonth() + 1; let year = date.getFullYear(); function blockFutureDays() { if (attrDate) { for (let i = 1; i <= colDay; i++) { let arr = attrDate.split('-'); let setAttrDate = new Date(arr[0], arr[1] - 1, arr[2]); setAttrDate.setDate(setAttrDate.getDate() + i); let findDate = setAttrDate.getFullYear() + '-' + (Number(setAttrDate.getMonth()) + 1) + '-' + setAttrDate.getDate(); $('td[data-picker="' + findDate + '"]').addClass('t_datepicker__day-cell--disabled'); } } } const observer = new MutationObserver((mutationsList) => { for (let mutation of mutationsList) { if (mutation.type === 'childList' || mutation.type === 'subtree') { blockFutureDays(); } } }); const targetNode = document.querySelector('.t-input-block_inited-date-picker'); if (targetNode) { observer.observe(targetNode, { childList: true, subtree: true }); } });

Как использовать код:

Вставить в блок на Тильде Т123 и в 4-й строчке вместо 1 поставить то количество дней, на которое нужно сделать запрет. Например, 1 — нельзя заказывать завтра, 2 — нельзя заказывать завтра и послезавтра и т.д.

Реализованный функционал можно увидеть на сайте https://zefir.moscow/

На сайте сделали запрет заказа на сегодня и завтра. А так же подключили эквайринг от Т-банка и сделали переадресацию заявок в телеграм.

✹✹✹

Если пост был полезен — поставь лайк или перешли другу дизайнеру)

А если хочешь узнавать еще больше полезного о коде на Тильде — подпишись на мой телеграм-канал

22
Начать дискуссию