Добавление виджета для выбора даты доставки в корзину

Вы можете добавить на страницу корзины календарь, с помощью которого клиенты смогут указать дату доставки своего заказа.

На этой странице

Подключение jQuery в файле theme.liquid

Чтобы эта настройка работала, для некоторых тем требуется добавить тег скрипта jQuery в файл макета theme.liquid. Если вы используете бесплатную тему Shopify, возможно, вам придётся выполнить следующий шаг:

В папке Layout нажмите theme.liquid.
Найдите в коде закрывающий тег </head>. На новой строке над ним вставьте следующий код:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

Нажмите Сохранить.

Создание фрагмента для даты доставки

Чтобы создать фрагмент для виджета выбора даты доставки:

Компьютер

В панели администратора Shopify перейдите в раздел Интернет-магазин > Темы.
Найдите тему, которую хотите отредактировать, нажмите кнопку …, чтобы открыть меню действий, а затем нажмите Редактировать код.
В папке Snippets нажмите Добавить новый фрагмент:
Создайте фрагмент:
Назовите фрагмент delivery-date.
Нажмите Создать фрагмент. Новый файл фрагмента откроется в редакторе кода.
В новый фрагмент delivery-date.liquid вставьте следующий код:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
  </p>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>

Нажмите Сохранить.

Мобильное устройство

В приложении Shopify нажмите значок .
В разделе Каналы продаж нажмите Интернет-магазин.
Нажмите Управление темами.
Найдите тему, которую хотите отредактировать, нажмите кнопку …, чтобы открыть меню действий, а затем нажмите Редактировать код.
В папке Snippets нажмите Добавить новый фрагмент:
Создайте фрагмент:
Назовите фрагмент delivery-date.
Нажмите Создать фрагмент. Новый файл фрагмента откроется в редакторе кода.
В новый фрагмент delivery-date.liquid вставьте следующий код:

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
  </p>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>

Нажмите Сохранить.

Добавление фрагмента на страницу корзины

Чтобы добавить фрагмент для выбора даты доставки на страницу корзины:

В папке Sections нажмите main-cart-items.liquid.
Найдите в коде закрывающий тег </form>. На новой строке над ним вставьте следующий код:

{% render 'delivery-date' %}

Нажмите Сохранить.

Теперь на вашей странице корзины есть поле для ввода даты доставки. Когда вы нажмёте на текстовое поле, появится календарь:

Виджет для выбора даты, используемый в этой настройке, — это виджет из библиотеки jQuery UI.