3種方法來實(shí)現(xiàn)更好的網(wǎng)站用戶體驗(yàn)

/**
* Module to add a shipping rates calculator to cart page.
*
* Copyright (c) 2011-2016 Caroline Schnapp (11heavens.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.gnu.org/licenses/gpl.html
* http://www.opensource.org/licenses/mit-license.php
*
*/  "object"==typeof Countries&&(Countries.updateProvinceLabel=function(e,t){if("string"==typeof e&&Countries[e]&&Countries[e].provinces){if("object"!=typeof t&&(t=document.getElementById("address_province_label"),null===t))return;t.innerHTML=Countries[e].label;var r=jQuery(t).parent();r.find("select");r.find(".custom-style-select-box-inner").html(Countries[e].provinces[0])}}),"undefined"==typeof Shopify.Cart&&(Shopify.Cart={}),Shopify.Cart.ShippingCalculator=function(){var _config={submitButton:"Calculate shipping",submitButtonDisabled:"Calculating...",templateId:"shipping-calculator-response-template",wrapperId:"wrapper-response",customerIsLoggedIn:!1,moneyFormat:"${{amount}}"},_render=function(e){var t=jQuery("#"+_config.templateId),r=jQuery("#"+_config.wrapperId);if(t.length&&r.length){_.templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var n=_.template(jQuery.trim(t.text())),a=n(e);if(jQuery(a).appendTo(r),"undefined"!=typeof Currency&&"function"==typeof Currency.convertAll){var i="";jQuery("[name=currencies]").size()?i=jQuery("[name=currencies]").val():jQuery("#currencies span.selected").size()&&(i=jQuery("#currencies span.selected").attr("data-currency")),""!==i&&Currency.convertAll(shopCurrency,i,"#wrapper-response span.money, #estimated-shipping span.money")}}},_enableButtons=function(){jQuery(".get-rates").removeAttr("disabled").removeClass("disabled").val(_config.submitButton)},_disableButtons=function(){jQuery(".get-rates").val(_config.submitButtonDisabled).attr("disabled","disabled").addClass("disabled")},_getCartShippingRatesForDestination=function(e){var t={type:"POST",url:"/cart/prepare_shipping_rates",data:jQuery.param({shipping_address:e}),success:_pollForCartShippingRatesForDestination(e),error:_onError};jQuery.ajax(t)},_pollForCartShippingRatesForDestination=function(e){var t=function(){jQuery.ajax("/cart/async_shipping_rates",{dataType:"json",success:function(r,n,a){200===a.status?_onCartShippingRatesUpdate(r.shipping_rates,e):setTimeout(t,500)},error:_onError})};return t},_fullMessagesFromErrors=function(e){var t=[];return jQuery.each(e,function(e,r){jQuery.each(r,function(r,n){t.push(e+" "+n)})}),t},_onError=function(XMLHttpRequest,textStatus){jQuery("#estimated-shipping").hide(),jQuery("#estimated-shipping em").empty(),_enableButtons();var feedback="",data=eval("("+XMLHttpRequest.responseText+")");feedback=data.message?data.message+"("+data.status+"): "+data.description:"Error : "+_fullMessagesFromErrors(data).join("; ")+".","Error : country is not supported."===feedback&&(feedback="We do not ship to this destination."),_render({rates:[],errorFeedback:feedback,success:!1}),jQuery("#"+_config.wrapperId).show()},_onCartShippingRatesUpdate=function(e,t){_enableButtons();var r="";if(t.zip&&(r+=t.zip+", "),t.province&&(r+=t.province+", "),r+=t.country,e.length){"0.00"==e[0].price?jQuery("#estimated-shipping em").html("FREE"):jQuery("#estimated-shipping em").html(_formatRate(e[0].price));for(var n=0;n

{  "name": "Shipping Rates Calculator",
"settings": [ {  "type": "select",
"id": "shipping_calculator",
"label": "Show the shipping calculator?",
"options": [ {  "value": "Disabled",  "label": "No"  }, {  "value": "Enabled",  "label": "Yes"  }  ],  "default": "Enabled"  }, {  "type": "text",  "id": "shipping_calculator_heading",  "label": "Heading text",  "default": "Get shipping estimates"  }, {  "type": "text",  "id": "shipping_calculator_default_country",  "label": "Default country selection",  "default": "United States"  }, {  "type": "paragraph",  "content": "If your customer is logged-in, the country in his default shipping address will be selected. If you are not sure about the  spelling to use here, refer to the first checkout page."  }, {  "type": "text",  "id": "shipping_calculator_submit_button_label",  "label": "Submit button label",  "default": "Calculate shipping"  }, {  "type": "text",  "id": "shipping_calculator_submit_button_label_disabled",  "label": "Submit button label when calculating",  "default": "Calculating..."  }, {  "type": "paragraph",  "content": "Do not forget to include the snippet shipping-calculator in your cart.liquid template where you want the shipping  calculator to appear. You can get the snippet here: [shipping-calculator.liquid](https:\/\/github.com\/carolineschnapp\/shipping-calculator\/blob\/master\/shipping-calculator.liquid) ."  }  ]  }

{% unless settings.shipping_calculator == 'Disabled' %}  <div id="shipping-calculator">    <h3>{{ settings.shipping_calculator_heading | default: 'Get shipping estimates' }}p> <p class="field">  <input type="button" class="get-rates btn button" value="{{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' }}" />     {{ '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js' | script_tag }} {{ '/services/javascripts/countries.js' | script_tag }} {{ 'shopify_common.js' | shopify_asset_url | script_tag }} {{ 'jquery.cart.min.js' | asset_url | script_tag }}  <script>  Shopify.Cart.ShippingCalculator.show( {  submitButton: {{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' | json }},   submitButtonDisabled: {{ settings.shipping_calculator_submit_button_label_disabled | default: 'Calculating...' | json }}{% if customer %},  customerIsLoggedIn: true{% endif %},  moneyFormat: {{ shop.money_with_currency_format | json }} } );  并在其下面添加上述代碼。
最后，保存更改。
剩下的就是自定義運(yùn)費(fèi)計(jì)算器。
前往您的“定制”主題頁面。查找運(yùn)費(fèi)計(jì)算器部分，并自定義以下內(nèi)容：
是否顯示計(jì)算器
計(jì)算器上方顯示的確切送貨文本
默認(rèn)國家選擇
將在“提交”按鈕上顯示的副本
大功告成！

3.在購物車頁面上顯示交貨日期選擇器
讓客戶看到他們的產(chǎn)品何時(shí)交付不僅是標(biāo)準(zhǔn)的客戶服務(wù)，而且還是購物網(wǎng)站上一流的用戶體驗(yàn)。
要在購物車頁面上包括日期選擇器，請(qǐng)執(zhí)行以下操作。
轉(zhuǎn)到Assets文件夾并打開它。在Assets目錄中，打開theme.js或theme.js.liquid文件，并將其添加到文件底部：
$(document).ready( function() {  $(function() {  $("#date").datepicker( {  minDate: +1,  maxDate: '+2M',  beforeShowDay: jQuery.datepicker.noWeekends  } );  }); });
然后，保存更改。
停留在“ 編輯HTML / CSS”頁面上。在Sections文件夾中，選擇cart-template.liquid文件以在在線代碼編輯器中打開它。找到您的購物車表單的結(jié)束標(biāo)記，即
在上方，添加以下行：
<div style="width:300px; clear:both;">  <p>  <label for="date">Pick a delivery date:標(biāo)記之前，添加以下內(nèi)容：

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" defer="defer">