Обычно я не люблю делать туториалы: нет времени аккуратно писать.
Но иногда я создаю что-то очень и очень полезное, и я уверен, что кто-то будет это искать.
Сегодня за несколько часов работы я смог внести изменения в тему 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"); } },