Event Based Rule - Add to Cart | Community
Skip to main content
niroy
niroy
March 7, 2018
Solved

Event Based Rule - Add to Cart

  • March 7, 2018
  • 1 reply
  • 1647 views

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by divyas28820797

    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.

    1 reply

    D
    divyas28820797Accepted solution
    March 7, 2018

    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.

      Terms & ConditionsAccessibility statement

      Loading footer...