Хотите остановить функцию при нажатии кнопки в jQuery

#javascript #jquery #shopify

#javascript #jquery #Shopify

Вопрос:

Я написал некоторый код для своего магазина Shopify с помощью jQuery. Работа заключается в том, что, когда клиент придет в мой магазин, он увидит, что товар уже добавлен в корзину.

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

Есть ли какое-либо решение для этого? У меня есть идея, что если кто-то нажмет кнопку удаления, функция больше не будет запускаться. Пожалуйста, скажите мне, каким должен быть код?

 Shopify = Shopify || {};
Shopify.cart = {{ cart | json }};

if (Shopify.cart !=='undefined' amp;amp; Shopify.cart.items.length === 0) {
  jQuery.post('/cart/add.js', {
    quantity: 1,
    id: 36507787624610,
  }).always(function(data){
    window.location.reload();
  })
}

1. Вопрос в том, почему вы вообще автоматически добавляете что-либо в корзину?

2. Вы можете использовать сеанс или локальное хранилище, чтобы сохранить некоторый флаг, когда пользователь нажал кнопку удаления, и избежать добавления элемента в случае появления флага. Или еще лучше переосмыслите свою идею, потому что это звучит как плохой UX 😉

3. Повторяя приведенные выше комментарии: я верю, что на какой бы странице пользователь ни был, которая привела его на ваш сайт, он должным образом подготовил ожидания пользователей от товара, добавляемого в их корзину. Вам нужно посмотреть, как использовать файлы cookie. Допустим, вы используете переменную «ItemAdded», которую вы сохраняете как «TRUE» в cookie. Проверьте наличие «добавленного» cookie-файла и, если он не найден, добавьте товар в корзину, затем установите cookie-файл.

4. У вас есть скрипка или демонстрационная ссылка на вашу функциональность? почему функция всегда повторяется. вы говорите о кнопке остановки, но где находится кнопка добавления или удаления.

Ответ №1:

Я не знаю, какую тему вы используете, но это то, что вы можете сделать со своей темой. Я использовал тему debut.

Добавьте следующий атрибут данных в свой html-код кнопки удаления

item-id="{{ item.id }}"

После добавления приведенной выше строки в теме debut это будет выглядеть так.

 <a href="/cart/change?line={{ forloop.index }}amp;amp;quantity=0" item-id="{{ item.id }}" class="text-link text-link--accent" aria-label="{{ 'cart.label.remove' | t: product: item.title }}" data-cart-remove>{{ 'cart.general.remove' | t }}</a>

Добавьте код JS в свою тему.jS-файл. (Измените идентификатор варианта в соответствии с вашим продуктом)

 //Adding product in cart
  $.getJSON('/cart.js',function( data ) {
    
    $( data.items ).each(function( index, item ) {
      
      //Replace the ID with your variantID
      if(item.id == 30329455837287) {
        localStorage.setItem("item_removed", "1");
      }
    });

  });
  
  
  $('a.text-link.text-link--accent').click(function(){
    var variant_id = $(this).attr('item-id');
    
    console.log(variant_id);
    
    if(variant_id == 30329455837287){
      localStorage.setItem("item_removed", "1");
    }
    
  });

  setTimeout(function(){
    if( localStorage.getItem("item_removed") == "0" || localStorage.getItem("item_removed") == null ) {
      $.post('/cart/add.js', {
        quantity: 1,
        //Replace the ID with your variantID
        id: 30329455837287
      });
    }
  }, 500);

});