插入自执行脚本JavaScript / Shopify

时间:2015-06-19 15:39:33

标签: javascript jquery shopify

我正在为Shopify构建应用程序 - 目的是插入脚本标记。我需要帮助编写插入代码。

following this advice检查是否已加载jQuery,然后在中间加载我的代码。然而,它似乎并没有起作用。这是确切的代码:

(function(){

  var loadScript = function(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
      script.onreadystatechange = function(){
        if (script.readyState == "loaded" ||
          script.readyState == "complete"){
          script.onreadystatechange = null;
        callback();
      }
    };
    } else {  //Others
      script.onload = function(){
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
  };

  // my actual jQuery code

  var myAppJavaScript = function($){
    var convert = $('.click-2-tweet-shopify');
    $.each(convert, function(index, item){
      var content = $(item).text().compact();
      $(item)
      .addClass('ui segment')
      .append('<a target=_blank class="pointer float-right"><i class="twitter icon"></i>Click2Tweet</a>')
      .children('a')
      .attr('href', "http://twitter.com/share?" + $.param({ text: content }));  
    });  

    // twitter code snippet

    !function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
      }
    }(document, "script", "twitter-wjs");
  };

  if ((typeof jQuery === 'undefined') || (parseFloat(jQuery.fn.jquery) < 1.7)) {
    loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function(){
      jQuery191 = jQuery.noConflict(true);
      myAppJavaScript(jQuery191);
    });
  } else {
    myAppJavaScript(jQuery);
  }

});

请想象这个脚本的目的是独立的。如果要将其添加到任何页面,它应该按原样工作(因为它最初加载jQuery)。我应该如何调整代码以按预期工作?

1 个答案:

答案 0 :(得分:1)

我们总是忘记有时候的小事!您忘记了I中的第二个IIFE:)

(function(){
    //.....
    //All your code
    //.....
}()); // () --> this :)

<强> -Updated fiddle-