Event Based Rule - Add to Cart

[nirupamroy]

Hi

I have a specific question on a Event Based Rule. I want to create an Event Based Rule (for example "Add to Cart") which should fire onclick only when someone clicks on button text highlighted in "BLUE" color and not the button text highlighted in "RED" color

1. "Add to Cart" button having code like <button class="btn btn--primary" id="cartButton" onclick="javascript:addProdToCart();return false;"><i class="icon icon--ui icon--cart-large-dark"></i><span id="cartButtonText">Add to Cart</span></button>
   
   
2. "Low Stock" button having code like <button class="btn btn--lowstock" id="cartButton" onclick="return false;"><i class="icon icon--ui icon--cart-large-dark"></i><span id="cartButtonText">Low Stock</span></button>
   • "Add Item to Cart" button having code like <button class="btn btn--primary" id="modalButton" onclick="javascript:addProdToCart();return false;">I understand - add item to cart</button>
     
     
3. "Backorder" button having code like <button class="btn btn--backorder" id="cartButton" onclick="return false;"><i class="icon icon--ui icon--cart-large-dark"></i><span id="cartButtonText">Backorder</span></button>
   • "Add Item to Cart" button having code like <button class="btn btn--primary" id="modalButton" onclick="javascript:addProdToCart();return false;">I understand - add item to cart</button>

How do I setup one single event based rule that should work for all the situations as shown above. Thanks in advance for all your help.

Roy

[divyas28820797 · Accepted solution]

If you see three Add to cart buttons i.e. text highlighted in blue has same class i.e   btn btn—primary and text highlighted in red doesn’t have that, so we can target that.

Since you are using event-based rule in Element Tag or Selector you can place selector as shown below.

.btn.btn—primary because we are targeting class it should start with “.” And spaces should be replaced with “.” .

Since we are using class it might be used in other elements also It is recommended to use parent element class or Id.

For example:

<div class="btn add cart" id =”addToCart”> //parent element//

<button class="btn btn--primary" id="modalButton" onclick="javascript:addProdToCart();return false;">I understand - add item to cart</button>

</div>

Assume parent element has only class Element tag or selector =.btn.add.cart .btn.btn—primary .

Assume parent element has Id Element tag or selector =#addToCart .btn.btn—primary .

Please let me know if you face any issues.