CODEWITHSUNDEEP
jquerydom
Josh
Josh

Reputation: 19

jQuery .addClass works in console but not in code

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>

Upvotes: 1

Views: 317

Answers (1)

Up at Five
Up at Five

Reputation: 56

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>'
              }
            }
          }
        });

Upvotes: 1

Related Questions