Обратный отсчет бесплатной доставки, требуется автоматическое обновление - PullRequest
Новая
       17

Обратный отсчет бесплатной доставки, требуется автоматическое обновление

0 голосов
/ 10 апреля 2020

Недавно я добавил небольшую функцию в корзину для покупок на сайте Shopify, чтобы показать покупателю, сколько еще товаров нужно добавить в корзину, чтобы получить бесплатную доставку. Он работает просто отлично, однако проблема в том, что если клиент обновляет свое количество из корзины, то функция не обновляется автоматически и не показывает, что у него есть право на бесплатную доставку. Клиенту придется обновить sh страницу или go на другую страницу, чтобы увидеть обновление.

Как мне сделать это автоматическое обновление? 

{% assign free_quantity = 2 %}

{% assign cart_total = cart.item_count %}

{% assign cart_qty_left = free_quantity | minus: cart_total %}



<p class="tt-cart__add-on-title tt-text-2">

  {% if cart_qty_left > 0 %}

  You are {{ cart_qty_left }} item away from free shipping! 

  {% else %}

    You've got free shipping!

  {% endif %}

</p>

1 Ответ

0 голосов
/ 11 апреля 2020

Самое быстрое и простое решение - сделать запрос AJAX на текущей странице и заменить содержимое.

Например: 

fetch(window.location.href).then(r => r.text()).then(res => {
    const html = new DOMParser().parseFromString(res, 'text/html');
    const cartText = html.querySelector('.tt-cart__add-on-title').innerText;
    document.querySelector('.tt-cart__add-on-title').innerText = cartText
})

Где мы делаем запрос к текущий адрес URL с fetch(window.location.href), затем мы конвертируем ответ в текст с помощью .then(r => r.text()).

После этого мы создаем DOMParser с текстом ответа:

const html = new DOMParser().parseFromString(res, 'text/html');

Мы извлекаем текст из проанализированного html, ориентируясь на соответствующий элемент:

const cartText = html.querySelector('.tt-cart__add-on-title').innerText;

И, наконец, мы заменяем текст, который присутствует на странице, текстом, который мы получили из ответа:

document.querySelector('.tt-cart__add-on-title').innerText = cartText

This должно происходить при указанном событии c при добавлении продуктов в корзину или их обновлении.

...