Shopify 配合Langify给每个增加“添加到购物车”按钮

这篇用来记录一个细节，是我一个月前给一个Shopify网站给每个商品添加一个“Add to cart” 按钮。时隔几天过然现在很多细节我想不起来了，甚至我都找不到当时参考的一篇论坛的文章。不过我记得在跟着论坛文章弄好后，由于我帮忙管理的网站使用了Langify实现双语页面，而Shopify给的教程是适用于默认单语言。于是在网站选择了第二语言后，由于网站路径后边多了/zh-cn/于是“Add to Cart”按钮的动态效果就失效了。

如果遇到这个问题的朋友，一定会在官方论坛指导下去Github下载一段他们的JS代码，其中为了让代码在Langify语言插件第二语言也有效，我加入一部分识别用户使用语言的代码。简单来讲就是获取用户当前rul，然后通过“/”分割取出网址后第一个路径名。当有Langify翻译成中文的情况下，这个第一个路径名就是‘zh-cn’。于是根据这一点判断这段脚本需要的正确的购物车地址是什么。是没有语言路径的“/cart”还是有语言路径的“/zh-cn/cart/”。

这个需求特别的小众，首先Shopify是很小众的一个领域，另外使用了Langify进行网页翻译的就少了。第三是需要在每个商品加上这么一个按钮。最后还有我是用中文写的记录，而不是说用英文发表在官方论坛。所以说这篇记录更多是写给自己备份，帮助别人的概率也是极低极低的。

<script>

/**
 * Module to ajaxify all add to cart forms on the page.
 *
 * Copyright (c) 2015 Caroline Schnapp (11heavens.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
      	
  var pathname = window.location.pathname;
  var langCode= pathname.split("/");
  //langCode[1] 
  console.log(langCode[1]);
  
  //var langify_languate = window.langify.locale.iso_code;
  //console.log(langify_languate);
  
    //if (langify_languate != 'zh-CN')
  if (langCode[1] != 'zh-cn')
    {
  		var var_01 = 'form[action="/cart/add"]';
  		var var_02 = '/cart/add.js';
  		var var_03 = '/cart.js';
    }
	else
    {
  		var var_01 = 'form[action="/zh-cn/cart/add"]';
  		var var_02 = '/zh-cn/cart/add.js';
  		var var_03 = '/zh-cn/cart.js';
    }

Shopify.AjaxifyCart = (function($) {
  
  // Some configuration options.
  // I have separated what you will never need to change from what
  // you might change.
    
  var _config = {
    
    // What you might want to change
    addToCartBtnLabel:             'Add to cart',
    addedToCartBtnLabel:           'Thank you!',
    addingToCartBtnLabel:          'Adding...',
    soldOutBtnLabel:               'Sold Out',
    howLongTillBtnReturnsToNormal: 1000, // in milliseconds.
    cartCountSelector:             '.cart-count, #cart-count a:first, #gocart p a, #cart .checkout em, .item-count',
    cartTotalSelector:             '#cart-price',
    // 'aboveForm' for top of add to cart form, 
    // 'belowForm' for below the add to cart form, and 
    // 'nextButton' for next to add to cart button.
    feedbackPosition:              'nextButton',
    
    // What you will never need to change
    //addToCartBtnSelector:          '[type="submit"]',
    //addToCartFormSelector:         'form[action="/cart/add"]',
    //shopifyAjaxAddURL:             '/cart/add.js',
    //shopifyAjaxCartURL:            '/cart.js'
    
    addToCartBtnSelector:          '[type="submit"]',
    addToCartFormSelector:         var_01,
    shopifyAjaxAddURL:             var_02,
    shopifyAjaxCartURL:            var_03
  };
  
  // We need some feedback when adding an item to the cart.
  // Here it is.  
  var _showFeedback = function(success, html, $addToCartForm) {
    $('.ajaxified-cart-feedback').remove();
    var feedback = '<p class="ajaxified-cart-feedback ' + success + '">' + html + '</p>';
    switch (_config.feedbackPosition) {
      case 'aboveForm':
        $addToCartForm.before(feedback);
        break;
      case 'belowForm':
        $addToCartForm.after(feedback);
        break;
      case 'nextButton':
      default:
        $addToCartForm.find(_config.addToCartBtnSelector).after(feedback);
        break;   
    }
    // If you use animate.css
    // $('.ajaxified-cart-feedback').addClass('animated bounceInDown');
    $('.ajaxified-cart-feedback').slideDown();
  };
  var _setText = function($button, label) {
    if ($button.children().length) {
      $button.children().each(function() {
        if ($.trim($(this).text()) !== '') {
          $(this).text(label);
        }
      });
    }
    else {
      $button.val(label).text(label);
    }
  };
  var _init = function() {   
    $(document).ready(function() { 
      $(_config.addToCartFormSelector).submit(function(e) {
        e.preventDefault();
        var $addToCartForm = $(this);
        var $addToCartBtn = $addToCartForm.find(_config.addToCartBtnSelector);
        _setText($addToCartBtn, _config.addingToCartBtnLabel);
        $addToCartBtn.addClass('disabled').prop('disabled', true);
        // Add to cart.
        $.ajax({
          url: _config.shopifyAjaxAddURL,
          dataType: 'json',
          type: 'post',
          data: $addToCartForm.serialize(),
          success: function(itemData) {
            // Re-enable add to cart button.
            $addToCartBtn.addClass('inverted');
            _setText($addToCartBtn, _config.addedToCartBtnLabel);
            
            
            /*
            	05.09.2020 @Shuspieler remove 'continue shopping'
                back up the original 
            _showFeedback('success','<i class="fa fa-check"></i> Added to cart! <a href="/cart">View cart</a> or <a href="/collections/all">continue shopping</a>.',$addToCartForm); */
            _showFeedback('success','<i class="fa fa-check"></i> Artikel in den Warenkorb gelegt, <a href="/cart">Warenkorb öffnen</a>.',$addToCartForm);
            window.setTimeout(function(){
              $addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
              _setText($addToCartBtn,_config.addToCartBtnLabel);
            }, _config.howLongTillBtnReturnsToNormal);
            // Update cart count and show cart link.
            $.getJSON(_config.shopifyAjaxCartURL, function(cart) {
              if (_config.cartCountSelector && $(_config.cartCountSelector).length) {
                var value = $(_config.cartCountSelector).html() || '0';
                $(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).removeClass('hidden-count');
              }
              if (_config.cartTotalSelector && $(_config.cartTotalSelector).length) {
                if (typeof Currency !== 'undefined' && typeof Currency.moneyFormats !== 'undefined') {
                  var newCurrency = '';
                  if ($('[name="currencies"]').length) {
                    newCurrency = $('[name="currencies"]').val();
                  }
                  else if ($('#currencies span.selected').length) {
                    newCurrency = $('#currencies span.selected').attr('data-currency');
                  }
                  if (newCurrency) {
                    $(_config.cartTotalSelector).html('<span class=money>' + Shopify.formatMoney(Currency.convert(cart.total_price, "{{ shop.currency }}", newCurrency), Currency.money_format[newCurrency]) + '</span>');
                  } 
                  else {
                    $(_config.cartTotalSelector).html(Shopify.formatMoney(cart.total_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"));
                  }
                }
                else {
                  $(_config.cartTotalSelector).html(Shopify.formatMoney(cart.total_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"));
                }
              };
            });        
          }, 
          error: function(XMLHttpRequest) {
            var response = eval('(' + XMLHttpRequest.responseText + ')');
            response = response.description;
            if (response.slice(0,4) === 'All ') {
              _showFeedback('error', response.replace('All 1 ', 'All '), $addToCartForm);
              $addToCartBtn.prop('disabled', false);
              _setText($addToCartBtn, _config.soldOutBtnLabel);
              $addToCartBtn.prop('disabled',true);
            }
            else {
              _showFeedback('error', '<i class="fa fa-warning"></i> ' + response, $addToCartForm);
              $addToCartBtn.prop('disabled', false).removeClass('disabled');
              _setText($addToCartBtn, _config.addToCartBtnLabel);
            }
          }
        });   
        return false;    
      });
    });
  };
  return {
    init: function(params) {
        // Configuration
        params = params || {};
        // Merging with defaults.
        $.extend(_config, params);
        // Action
        $(function() {
          _init();
        });
    },    
    getConfig: function() {
      return _config;
    }
  }  
})(jQuery);

Shopify.AjaxifyCart.init();

</script>

{% comment %}
  If you want to animate your feedback message.
{% endcomment %}

{% comment %}
{{ '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css' | stylesheet_tag }}
{% endcomment %}

{{ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css' | stylesheet_tag }}

<style>
.ajaxified-cart-feedback {
  display: block;
  line-height: 36px;
  font-size: 90%;
  vertical-align: middle;
}
.ajaxified-cart-feedback.success { 
  color: #3D9970;
}
.ajaxified-cart-feedback.error { 
  color: #FF4136; 
} 
.ajaxified-cart-feedback a {
  border-bottom: 1px solid;
}
</style>