这篇用来记录一个细节,是我一个月前给一个Shopify网站给每个商品添加一个“Add to cart” 按钮。时隔几天过然现在很多细节我想不起来了,甚至我都找不到当时参考的一篇论坛的文章。不过我记得在跟着论坛文章弄好后,由于我帮忙管理的网站使用了Langify实现双语页面,而Shopify给的教程是适用于默认单语言。于是在网站选择了第二语言后,由于网站路径后边多了/zh-cn/于是“Add to Cart”按钮的动态效果就失效了。
如果遇到这个问题的朋友,一定会在官方论坛指导下去Github下载一段他们的JS代码,其中为了让代码在Langify语言插件第二语言也有效,我加入一部分识别用户使用语言的代码。简单来讲就是获取用户当前rul,然后通过“/”分割取出网址后第一个路径名。当有Langify翻译成中文的情况下,这个第一个路径名就是‘zh-cn’。于是根据这一点判断这段脚本需要的正确的购物车地址是什么。是没有语言路径的“/cart”还是有语言路径的“/zh-cn/cart/”。
这个需求特别的小众,首先Shopify是很小众的一个领域,另外使用了Langify进行网页翻译的就少了。第三是需要在每个商品加上这么一个按钮。最后还有我是用中文写的记录,而不是说用英文发表在官方论坛。所以说这篇记录更多是写给自己备份,帮助别人的概率也是极低极低的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 | <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> |