Hello!
Tell me, please, how to click on the button "Add to cart" of a specific product - to bring him the same tick, that the product was successfully added?
Here is an example - link
Tried to compare through data-show="0" - does not work.

    1 answer 1

    The first thing you need to understand is whether you need to add several more products or maybe only once, if you need to add several, then there is no point in putting a bird, the user may simply not understand whether it is possible to add more goods or not as there is a bird . Probably you need to show him this bird for a while and then hide it. If you can only add one product, then you need to connect everything with the server, that is, send to the server that the product is added and block the addition to the cart + put the number in the data-show 1, which in my opinion is not correct. But that's what you wanted if essentially.

     $('.add-to-cart').on('click', function (e) { var that = $(this), shows = parseInt(that.attr("data-show"),10), add = that.attr("data-text"); if(shows == 0){ e.preventDefault(); that.attr("data-show", "1"); that.text(add); that.closest('.catalog-tovarov').find('#mot').show(); } }); 
     .catalog-tovarov{display:inline-block;vertical-align:top;text-align:center;margin:0 0 20px 11px;width:150px;height:200px;padding: 1%;transition:0.4s 0.2s ease;background:#cfcfcf;} .catalog-tovarov:hover{box-shadow: 0 4px 9px 0 #CECECE;} .price{margin-top:120px;} #mot{display: none; text-align: right; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="catalog-tovarov"> <div id="mot"><img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /></div> <div class="price"> <span>444 руб.</span><br/> <a class="add-to-cart" data-price="10000" data-show="0" data-text="Перейти в корзину" href="#">В корзину</a> </div> </div> <div class="catalog-tovarov"> <div id="mot"> <img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /> </div> <div class="price"> <span>444 руб.</span><br/> <a class="add-to-cart" data-price="10000" data-show="0" href="#">В корзину</a> </div> </div> <div class="catalog-tovarov"> <div id="mot"> <img width="30px" src="http://sparkysite.ru/small/check/check03/scheck264.png" /> </div> <div class="price"> <span>444 руб.</span><br/> <a class="add-to-cart" data-price="10000" data-show="0" href="#">В корзину</a> </div> </div>

    • Thank you very much! With PHP, everything is checked, that is, after the page has been updated, the check mark will remain and instead of the button "Add to basket" - "Go to basket", as well as in the data-show, you can already write number 1. Something like this: data-show="<?php if($_SESSION['cart'][$product['goods_id']]['qty'] > 0): ?>1<?php else:?>0<?php endif; ?>" Or I thought to show a tick smoothly for a while and smoothly for a time instead of the inscription "Add to the basket" - just show the tick in the button instead of the text or write the text “Added”. But, how to implement it, I do not know yet) - Dmitry
    • one
      Corrected the code, by clicking it is now checked if it costs 0 then change the text to go to the basket, just put the path of the link to the basket, if added, the link will work as a normal transition - Karalahti
    • Very grateful to you! Thanks :) But only here is e.preventDefault(); it is not desirable to write in the condition, since I have a product card, the product is added as many times as desired, and the curious ones can change the value in the data-show through the developer panel :) Therefore, e.preventDefault(); will not stand in the condition, but at the very beginning, as in the example I had. In this case, is it possible to somehow remove the class, namely add-to-cart from the link, just as a link or text is added? Given that there is an additional one more class for styling a button. - Dmitry
    • one
      $ (this) .removeClass ('add-to-cart'); I didn’t quite understand why it was, those who are curious can do a lot of things))) - Karalahti
    • one
      yes, it is necessary to delegate a click, ie, rewrite the first line to this $ (document) .on ('click', '.add-to-cart', function (e) {then e.preventDefault () does not wake up after the first click - Karalahti