Hello!

There is a piece of code that, from a product catalog when you click on the "Add to Cart" button for a particular product, adds a tick to this product, changes the text to "Go to basket", also changes the link path (go to basket), changes the value of the data-show link data-show from 0 to number 1 and deletes the link class="add-to-cart" from the link so that e.preventDefault(); does not work e.preventDefault();

The problem is that the same thing works with the item card on the 3rd click on the "Add to cart" button (the 1st and 2nd click works fine - the item is being added to the cart). In the item card, there is no need to change the link path, add a data-show="1" link and delete the link data-show="1" class="add-to-cart" link so that e.preventDefault(); does not work e.preventDefault();

JS Code:

 $(document).on('click', '.add-to-cart', function (e) { e.preventDefault(); that = $(this), shows = parseInt(that.attr("data-show"),10), add = that.attr("data-text"); if(shows==0){ that.closest('.catalog-tovarov').find('#mot3').show('slow'); $(this).removeClass('add-to-cart'); that.attr("data-show", "1"); that.text(add); that.attr("href", "http://test.ru/korzina"); } });

Code from the catalog of goods:

 <div class="catalog-tovarov"> <div id="mot3" style="display: none;"> <img src="images/check.png" /> </div> <a class="add-to-cart" data-show="0" data-text="Перейти в корзину" href="http://test.ru/addtocart/6">Добавить в корзину</a> </div>

Product card code:

 <div class="product-kartochka"> <a class="add-to-cart" href="http://test.ru/addtocart/6">Добавить в корзину</a> </div>

The bottom line is that you probably most likely need to specifically refer to the link only in the product catalog (possibly by id), and for the link in the item card you don’t need to change anything. I hope for your help:)

  • We didn’t try to change the event to click on ".catalog-tovarov> .add-to-cart" - Oleksandr
  • @Olexander He is already there without a click. On the contrary, after clicking on the product catalog, this class is deleted, which is necessary, but you do not need to do this from the product card. Either I did not understand you correctly or you are the opposite. - Dmitry
  • I do not understand. You want this event not to work when you click on a product card, right? But in it you have the same class as in the catalog, and I suggest that you contact the add-to-cart, which is in catalog-tovarov, that is, when you click on the goods card, it will not find this class, but with -venno and will not delete. Or what's the problem? - Oleksandr
  • @ Oleksandr Yes, that's right. It is only necessary that it all worked for the product catalog. - Dmitry

2 answers 2

In else do all the necessary manipulations for the button which is in the item card.

 $(document).on('click', '.add-to-cart', function (e) { e.preventDefault(); that = $(this), shows = parseInt(that.attr("data-show"),10), parent = that.closest('.catalog-tovarov'), add = that.attr("data-text"); if(shows==0 && parent.hasClass('catalog-tovarov')){ parent.find('#mot3').show('slow'); $(this).removeClass('add-to-cart'); that.attr("data-show", "1"); that.text(add); that.attr("href", "http://test.ru/korzina"); } else{ }});
  • Fine! Everything works, thank you! I will go further to study JS. Advise good sources where you can learn the language of js :) - Dmitry
  • one
    youtube.com/user/loftblog/… channel with video lessons where there are a lot of videos on different topics for website development, and not only - Karalahti
  • Thank you And thanks for your help :) - Dmitry

We look at my commentary, if this is what you need then try this option.

 $(document).on('click', '.catalog-tovarov>.add-to-cart', function (e) { console.log(1); });

and look at the console. What do you need?

  • Thank you, but adding a product from the product card will not work this way, since in your case it will only work with the product catalog. See the answer below. - Dmitry