Rich-text Reply

Hiding A Checkout Button With The Same Class?

KO 09-07-16

Hiding A Checkout Button With The Same Class?

I am developing an A/B test that will run on our mobile site. 

When a user adds something to the cart, their cart is displayed in the following manner

 

<!-- This is width:100% on someone's smartphone -->

<a href="/checkout/cc" class="primary button checkout-btn ">Begin Checkout</a> 

{CART CONTENT}


<!-- These buttons are side by side; together spanning the phone width -->

<a href="/" class="btn continue-shopping-btn">Continue Shopping</a>

<a href="/checkout/cc" class="primary button checkout-btn ">Begin Checkout</a>

I want to be able to hide the top button, but there doesn't seem to be a unique ID for that button. Here's how I have written up the test thus far, but unfortunately it is hiding both buttons:

 

(function($) {
  
  function RemoveBtn() {
    this.experimentID = '7254990115';
    this.variationINdex = '1';
  }
  
  RemoveBtn.prototype = {
    
    distinguishVariation: function() {
      	$('body').addClass('opt-' + this.experimentID + '-v' + this.variationIndex);
    },
    
    removeBtn: function () {
      var interval = setInterval(function() {
        if($('.checkout-btns').length > 0 && $('.checkout-btns').is(':visible')) {
          clearInterval(interval);
          $('.checkout-btns').remove();
        }
      }, 100);
    },
    
    init: function() {
      this.distinguishVariation();
      this.removeBtn();
      
    }
    
  }; // end prototype def
  
  var removeBtn = new RemoveBtn();
  
  removeBtn.init();
  
}(jQuery));

Is there a way to identify using CSS selectors? If so how would I go about doing that?

 

I think the simplest solution is to add a unique id to the top button, but unfortunately I don't have access to the source code & I don't think this would be high up on the list of priorities for my dev team. 

 

Any and all input is greatly appreciated. 

 

Thank You

 

 

KO
Level 2

Lyndsey 09-08-16
 

Re: Hiding A Checkout Button With The Same Class?

You can achieve this by creating a class and then targeting that class for the changes you would like to make. You can create a new class by selecting the button, then Edit HTML > Edit Classes.

Thanks,
Lyndsey
Technical Support Engineer
Optimizely
Optimizely