Rich-text Reply

Hiding A Checkout Button With The Same Class?

KO 09-07-16
Accepted Solution

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

CouchPsycho 09-07-16
 

Re: Hiding A Checkout Button With The Same Class?

Hi,

using jQuery and if there are only these two buttons with thaht combination of classes you can use: 

 

$(".primary.button.checkout-btn:eq(0)").remove();

 

jQuery provides the eq like an equals, which refers to the index of the element within an array of matching elements generated by jQuery.

 

Kind regards

 

Michael




"the essence of the creative act is to see the familiar as strange." (anonymous)
KO 09-07-16
 

Re: Hiding A Checkout Button With The Same Class?

Very much appreciated, Michael. That worked just fine.

Good information to know moving forward.
KO
Level 2