jQuery .addClass works in console but not in code

Question

I'm trying to add a class to an element that's created by Shopify's "Buy Button SDK". When I add it through the console it works fine, but it doesn't work when I run it through the attached .js document. It put in the alert and the color change for the H1 to make sure it's attached correctly, and it is.

Looking at other questions in this vein, it appears the script is trying to manipulate elements that aren't loaded yet. However, using either $(document).ready or $(window).on("load" have not worked. jQuery is called in the head, before the custom script.

$(window).on("load", function(){
    	alert("The page is reading the JavaScript");
		$("h1").css("color", "orange");
		$(".shopify-buy__product-img-wrapper").addClass("col-md-6");
    	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
	<script src="http://sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js"></script>
    <script src="script.js"></script>

Up at Five · Accepted Answer · 2017-11-20 20:47:30Z

0

Try adding the class the 'Shopify Way'. From the BuyButton.js documentation:

var options = {
  product: {
    contents: {
      footer: true,
    },
    templates: {
      footer: '<footer class="{{data.classes.product.footer}}">This is a footer</footer>'
    },
    classes: {
      footer: 'product-footer',
    },
    styles: {
      footer: {
        'background-color': 'black'
      }
    }
  }
}

you can check out the reference to the docs here http://shopify.github.io/buy-button-js/advanced/

specifically to add the class to the element with a class of shopify-buy__product-img-wrapper you would do something like this:

 var ui = ShopifyBuy.UI.init(client);
        ui.createComponent('product', {
          id: the_product_id,
          node: document.getElementById('product'),
          options: {

            product: {

              templates: {
                img: '<div class="{{data.classes.product.imgWrapper}} new_class_here"><img class="{{data.classes.product.img}}" src="{{data.currentImage.src}}" /></div>'
              }
            }
          }
        });

edited Nov 20, 2017 at 20:47

answered Nov 20, 2017 at 18:43

Up at Five

463 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Josh Over a year ago

Thanks! This seems like the proper way to go about it, but I'm having trouble figuring out where to put the class I want to add. I specifically want to add the class "col-md-6" to the <div> I can select with $(".shopify-buy__product-img-wrapper"). When I use $(".shopify-buy__product-img-wrapper").addClass("col-md-6"); in the console, it works.

Up at Five Over a year ago

updated the answer with a specific example relating to your use case

Josh Over a year ago

The page loads but the elements aren't taking the correct class:

var ui = ShopifyBuy.UI.init(client);         ui.createComponent('product', {           id: [#],           node: document.getElementById('product'),           options: {             product: {               templates: {                 img: '<div class="{{data.classes.product.imgWrapper}} col-md-6"><img class="{{data.classes.product.img}}" src="{{data.currentImage.src}}" /></div>'               },               classes: "col-md-6",             }           }         });

Up at Five Over a year ago

remove , classes: "col-md-6",. You don't need it if you are explicitly setting the class in the template markup.

Collectives™ on Stack Overflow

jQuery .addClass works in console but not in code

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related