这篇用来记录一个细节,是我一个月前给一个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>