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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

/**

* Module to ajaxify all add to cart forms on the page.

* 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>

赏

矛盾体

树洞

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

Leave a Reply Cancel reply