Блог

У меня есть вопрос, связанный с кодированием Shopify Liquid, и я надеюсь, что вы сможете мне немного помочь!

В принципе, я хочу, чтобы текст динамически обновлялся, когда клиент увеличивает количество товара на странице корзины, без перезапуска страницы. ( Вроде того, как обновляется цена на странице корзины, когда кто-то увеличивает количество товара, без перезапуска страницы.)

Это то, что я делал до сих пор:

 <div class="cart__footer">
        {% if cart.item_count == 1 %}
        <p class="grid__item text-right small--text-center">Add another item for 5% discount!</p>
        {% elsif cart.item_count == 2 %}
        <p class="grid__item text-right small--text-center">Add another item for 10% discount!</p>
        {% elsif cart.item_count == 3 %}
        <p class="grid__item text-right small--text-center">Add another item for 15% discount!</p>
        {% elsif cart.item_count >= 4 %}
        <p class="grid__item text-right small--text-center">Hooray! Maximum discount reached!</p>
        {% endif %}
</div>
 

И это действительно работает, но только если я обновлю страницу.

А ты как думаешь? А идеи?

Я думаю, что то, что вы ищете, — это API Cart JS

Я бы использовал этот POST /cart/add.js метод для добавления товара в корзину. Возвращаемое значение для этой конечной точки-объект JSON, содержащий текущие товары корзины, например:

 {
  "items": [
    {
      "id": 794864229,
      "quantity": 1
    }
  ]
}
 

Затем вы можете прочитать эту информацию и обновить страницу правильным контентом с помощью Javascript, например:

 let el = document.querySelector('.grid__item.text-right');

if(qty == 3){
  el.innerHTML = "Add another item for 15% discount!"
}