Обычно я не люблю делать туториалы: нет времени аккуратно писать.

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

Сегодня за несколько часов работы я смог внести изменения в тему Shopify Opera Campi, которые сделают инвентаризацию более логичной: если количество инвентаря варианта (или товара) равно 0, то он ищет, есть ли предстоящие Transfer, если есть пополнение, он будет отображать дату прибытия и давать людям добавить товар в корзину, в противном случае он отключает кнопку Добавить в корзину: это логично!

Некоторые помещения:

  • Я использовал стартовую тему Debut, но с небольшими правками можно адаптировать код к любой хорошей теме Shopify.
  • Я не тестировал это с продуктами без вариантов
  • Трудная задача состоит в том, чтобы сделать его динамичным, когда пользователь меняет вариант.

Короче, вот что я сделал. Логика изменений, позволяющих заставить его работать, заключается в том, что Shopify создает Product Json со всеми необходимыми ему данными о продукте и его варианте. К сожалению, инженеры Shopify немного поленились, потому что решили не включать информацию о переводе в JSON продукта. Чтобы обнаружить изменение варианта пользователем, нам нужно получить доступ к этой информации, а для доступа к этой информации нам нужно добавить их в файл json. Но… JSON генерируется в жидких файлах (например, product-template.liquid в случае стартовой темы Debut), а обновление варианта выполняется в файле theme.js.

Итак, сначала мы добавляем необходимую информацию в JSON, затем редактируем theme.js.

Правки в product-template.js

Просто найдите эту часть

<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>

Добавьте этот код ниже:

<!-- UPDATE PRODUCT JSON WITH MORE INFORMATION -->
<script type="text/javascript">
var productJson = {{ product | json }};
{% for variant in product.variants %}
productJson.variants[{{ forloop.index0 }}].incoming = {{ variant.incoming | json }};
productJson.variants[{{ forloop.index0 }}].next_incoming_date = {{ variant.next_incoming_date | date: '%B %d, %Y' | json }};
{% endfor %}
document.getElementById("ProductJson-{{ section.id }}").innerHTML = JSON.stringify(productJson);
</script>

Как видите, я не адаптировал оригинальный скрипт Debut Json по разным причинам. Но вы можете сделать это, если предпочитаете меньше кода.

Правки в Theme.js

В theme.js найдите «this._updateSKU(variant)» и добавьте следующую строку ниже:

this._updateShipping(variant);

Давайте добавим в Theme.js функцию, которая будет инициировать изменение отображения предстоящего перевода, добавим ее сразу после триггера _onSelectChange…

/**
* Trigger Update Shipping from Transfer
*/
_updateShipping: function(variant) {
var sectionId = this.$container.attr('data-section-id');
if (variant.inventory_quantity  == 0 && variant.available == false  ) {
if(variant.incoming) {
$('.product_shipping').html( "Shipping from " + variant.next_incoming_date);
} else {
$('.product_shipping').html( "This product is sold out");
$("#AddToCart-"+ sectionId).prop('disabled', true);
$("#AddToCartText-"+sectionId).text(theme.strings.soldOut);
}
} else {
$('.product_shipping').html( "Shipping in 3 working days");
}
},

Не забудьте изменить 3 рабочих дня на стандартное время доставки.

Итак, это будут части, обновленные в theme.js:

Обновить

После некоторых тестов я понял, что наиболее совместимой является логика, предложенная в этом коде. На самом деле у меня были некоторые проблемы с продуктами с вариантами и отсутствием инвентаря с предыдущим кодом.

_updateShipping: function(variant) {
var sectionId = this.$container.attr('data-section-id');
if (variant.inventory_quantity  == 0 ) {
if(variant.incoming) {
$('.product_shipping').html( "Shipping from " + variant.next_incoming_date);
} else if (variant.available == true ) {
$('.product_shipping').html( "Shipping in 3 working days");
} else {
$('.product_shipping').html( "This product is sold out");
$("#AddToCart-"+ sectionId).prop('disabled', true);
$("#AddToCartText-"+sectionId).text(theme.strings.soldOut);
}
} else {
$('.product_shipping').html( "Shipping in 3 working days");
}
},