Question

我正在尝试将一个类添加到由Shopify的“Buy Button SDK”创建的元素中。当我通过控制台添加它时，它工作正常，但当我通过附加的.js文档运行它时，它不起作用。它为H1提供警报和颜色更改，以确保它正确连接，并且确实如此。

以这种方式看待其他问题，似乎脚本试图操纵尚未加载的元素。但是，使用$（document）.ready或$（window）.on（“load”没有用。在自定义脚本之前调用jQuery。

$(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>

Answer 1

尝试添加“Shopify Way”类。来自BuyButton.js文档：

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

您可以在此处查看对文档的引用http://shopify.github.io/buy-button-js/advanced/

专门用于将类添加到具有shopify-buy__product-img-wrapper类的元素中，您将执行以下操作：

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

jQuery .addClass在控制台中工作，但不在代码中工作

1 个答案: