2

I am hoping someone can please help me out here. I've been struggling for 3 days. :)

I am new to wordpress-woocommerce & php, but the theme I am using does not show any "signs" when an item is added to cart with Ajax cart. I am not good with programming, but created some Javascript to try and conquer this issue. Unfortunately, right now if you click one button, ALL buttons change.

I would like the code to only apply to the button actively being clicked.

The main criteria:

  • The buttons cannot have separate ids. Must use class alone
  • Buttons are dynamically generated for each product, and the number of products-per-page is unpredictable
  • Something like, "onclick="this.innerHTML='hi Stack!'" cannot be used I think (it breaks the category page)

This is the pen of what I have so far including the html, css, and js: http://codepen.io/xkurohatox/pen/eNbMKb

HTML 

    <a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds()">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds()">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds()">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds()">Add to Cart</a>

In actuality, the number of buttons can range from maybe 1-2000 at a time.

css

    .button.add_to_cart_button.product_type_simple.added {color:yellow;}

js 

     function birds(){
var a = document.querySelectorAll('.button.add_to_cart_button.product_type_simple.added' ), i;

    for (i = 0; i < a.length; ++i) {
     a[i].style.color = "pink";
     a[i].innerHTML="Success";  
   }
    setTimeout ( 'cats()', 2000 );
   }
    function cats(){
      var a = document.querySelectorAll('.button.add_to_cart_button.product_type_simple.added'        ), i;


    for (i = 0; i < a.length; ++i) {
     a[i].style.color = "red";
    a[i].innerHTML="Add to Cart";
       }
     }

Here is a page for element inspector: http://s.codepen.io/xkurohatox/debug/eNbMKb?

I have visited this site many times, but never joined until now. Thank you in advance for ANY help! =)

xkurohatox
  • 198
  • 1
  • 1
  • 16
  • I have zero knowledge about woocommerce, so I'm posting this as a comment, but this `added` class looks rather conspicuous. Could it be that this is class being dynamically added by the framework once an item is added to the cart, in which case you can just leverage the class in CSS? Or is it just always there / have some other semantic meaning? – lc. Aug 03 '15 at 04:45
  • Hi IC. You are right, it is dynamically generated! I'm not sure how to go about leveraging it to change the text though since practically everything is in php (which I don't know yet) and I'm scared to try editing it. Honestly I wasn't expecting most of the sheets to be in php, although still happy to learn. Do you have any suggestions on where to maybe look or what to try/do? Thank you for your interest! Really makes me happy :) – xkurohatox Aug 03 '15 at 05:35
  • FWIW take a look at http://stackoverflow.com/a/29682894/44853 . It's a bit hacky, but you might be able to do something similar if it gets the job done. – lc. Aug 03 '15 at 06:24
  • Thanks Ic.! I was looking into this as well as the "checkmark" method but was scared about crossbrowser issues. I'll probably give it a go on something less critical than an add to cart button first, but may have to look into it again for add to cart as well though (still some issues, may fault though), and your answer is for woocommerce specifically. Wooooohoo ;) Thank you again! – xkurohatox Aug 03 '15 at 06:35
  • WooCommerce already does this is the shop archive, so I don't see the point of writing this yourself. Instead I would look at which templates your theme is overriding and why it is breaking default functionality. – helgatheviking Aug 03 '15 at 23:57

5 Answers5

1

You can use jQuery for this.

HTML

<a href="#" class="button add_to_cart_button product_type_simple added" >Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" >Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" >Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" >Add to Cart</a>

jQuery

$(document).ready(function() {
    $('.add_to_cart_button').on('click', function() {
           $(this).text('success').css('color', 'red');
    })  
})

DEMO

Sougata Bose
  • 31,517
  • 8
  • 49
  • 87
0

You can try it using jQuery.

$(".add_to_cart_button").on("click",function(){
  $(this).css("color","red");
  $(this).html("Success");
});
.button.add_to_cart_button.product_type_simple.added {
  color:yellow;
}
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
Shehroz Ahmed
  • 537
  • 4
  • 16
  • 1
    Thank you so much Shehroz! It is official, I will open my mind to learning jQuery finally hehe. Your answer is very concise and legible. :) I will practice this with the timeout function to begin. – xkurohatox Aug 03 '15 at 06:09
  • Yes jQuery is too easy to learn :) And you're welcome. kindly vote it up and accept as answer if it helps you! – Shehroz Ahmed Aug 03 '15 at 06:11
0

Since Woocommerce support jQuery, you can do something like this, don't struggle with plain Javascript if you don't have to:

$(function() {
    $('.add_to_cart_button').click(function(){
      $(this).text('success').css('color', 'red');
    }); 
});
Tomas Ramirez Sarduy
  • 17,294
  • 8
  • 69
  • 85
  • 1
    Hi Tom, Thank you very much for your kind suggestion and help. :) Yes, I really need to make the transition to jQuery now. As is probably quite noticeable, I am very new to Javascript, but jQuery looks very logical and concise. – xkurohatox Aug 03 '15 at 05:40
  • @xkurohatox: You're welcome, and yes, jQuery is a must. Note: If you solved your problem don't forget to mark one of the answers as correct – Tomas Ramirez Sarduy Aug 03 '15 at 14:14
0

In pure javascript, you can do it with

1) Change onclick="birds()" to onclick="birds(this)"

2) In Birds function, receive the anchor as parameter and change the styles of the anchor, instead of iterate over all anchors.

function birds(btn){

    btn.style.color = "pink";
    btn.innerHTML="Success";  

    setTimeout ( function() {
         cats(btn);
    }, 2000 );
}

function cats(btn){
    btn.style.color = "red";
    btn.innerHTML="Add to Cart";
}
.button.add_to_cart_button.product_type_simple.added {
    color:yellow;
}
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds(this)">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds(this)">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds(this)">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added" onclick="birds(this)">Add to Cart</a>
davcs86
  • 3,926
  • 2
  • 18
  • 30
  • Thank you so very much Davcs86, your answer is PERFECT and solved the problem very nicely using simply js. :) I really appreciate your explanation as well, yes, that is exactly what I was looking for. Thank you again, davcs86! – xkurohatox Aug 03 '15 at 06:03
0

I'd like to provide a native way: 

var all_buttons = document.querySelectorAll(".add_to_cart_button");

Array.prototype.slice.call(all_buttons)
  .forEach(function(button) {
    button.onclick = function() {
      this.innerHTML = 'success';
      this.style.color = 'red';
    };
  });
    
.button.add_to_cart_button.product_type_simple.added {
  color:yellow;
}
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
<a href="#" class="button add_to_cart_button product_type_simple added">Add to Cart</a>
iplus26
  • 2,518
  • 15
  • 26
  • Thank you very much iplus26. :) Wow, I was actually trying to use 'for each' earlier, but couldn't figure out how to make it work. Is there any benefit in this case to using an array and slicing/calling? Thank you again :) – xkurohatox Aug 03 '15 at 05:56
  • @xkurohatox You're welcome. `document.querySelectorAll()` method returns a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), which is an array-like object but not an array. You need to use `Array.prototype.slice.call()` method if you wanna use some array methods, like `forEach()` on array-like objects. You can use the native way I provide or just use the jQuery solutions. – iplus26 Aug 03 '15 at 06:33
  • Oh Thanks again iplus26! :) I took a javascript class a few months ago, but we never got to nodes, although I remember being curious about how they work. I appreciate your help! – xkurohatox Aug 03 '15 at 06:40
  • @xkurohatox Keep moving. Remember to check out MDN documents when you wanna use some methods. I'll be very appreciate if you vote up my answer. :) – iplus26 Aug 03 '15 at 06:43