Помощ
Влизане

Добавяне на инструмент за избор на дата на доставка към Вашата количка

Можете да включите календар на страницата си с количка, който позволява на клиентите да посочват дата на доставка за своята поръчка.

Инструмент за избор на дата на доставка

На тази страница

Включване на jQuery във Вашия theme.liquid

За да работи това персонализиране, някои теми изискват добавяне на маркер на скрипт за jQuery към файла с оформление theme.liquid. Ако използвате безплатна тема на Shopify, може да се наложи да следвате следващата стъпка:

  1. В директория Layout натиснете theme.liquid.

  2. Намерете затварящия таг </head> в кода. На нов ред над затварящия таг </head> поставете следния код:

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. Натиснете Запази.

Създаване на фрагмент за дата на доставка

За да създадете фрагмент за Вашия инструмент за избор на дата на доставка:

Настолен компютър

  1. От Вашия администраторски панел на Shopify отидете на Онлайн магазин > Теми.

  2. Намерете темата, която искате да редактирате, натиснете бутона …, за да отворите менюто с действия, и след това натиснете Редактиране на код.

  3. В директория Snippets натиснете Добавяне на нов фрагмент:

  4. Създайте фрагмента:

  5. Дайте име на Вашия фрагмент delivery-date.

  6. Натиснете Създаване на фрагмент. Новият файл с фрагмент ще се отвори в редактора на код.

  7. В новия си фрагмент 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>
  1. Натиснете Запази.
Мобилно устройство

  1. От приложението Shopify докоснете иконата Menu.

  2. В раздел Канали за продажба докоснете Онлайн магазин.

  3. Докоснете Управление на теми.

  4. Намерете темата, която искате да редактирате, докоснете бутона …, за да отворите менюто с действия, и след това докоснете Редактиране на код.

  5. В директория Snippets докоснете Добавяне на нов фрагмент:

  6. Създайте фрагмента:

  7. Дайте име на Вашия фрагмент delivery-date.

  8. Докоснете Създаване на фрагмент. Новият файл с фрагмент ще се отвори в редактора на код.

  9. В новия си фрагмент 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>
  1. Докоснете Запази.

Включване на фрагмента във Вашата страница с количка

За да включите фрагмента за дата на доставка във Вашата страница с количка:

  1. В директория Sections натиснете main-cart-items.liquid.

  2. Намерете затварящия таг </form> в кода. На нов ред над затварящия таг </form> поставете следния код:

{% render 'delivery-date' %}
  1. Натиснете Запази.

Вече имате поле за въвеждане на дата на доставка на Вашата страница с количка. Когато кликнете в текстовото поле, ще се появи календар:

Инструмент за избор на дата на доставка

Инструментът за избор на дата, използван в това персонализиране, е уиджет от библиотеката jQuery UI.