向shopify购物车页面添加配送日期选择器
向shopify购物车页面添加配送日期选择器的核心内容
向购物车页面添加配送日期选择器备注如果您使用Shopify 免费模板,您可以联系 Shopify 支持团队获得本教程的帮助。本教程设计时间为 15 分钟。详情请参考Support向shopify购物车页面添加配送日期选择器文本
将配送日期选择器添加到购物车页面
备注
如果您使用Shopify 免费模板,您可以联系 Shopify 支持团队获得本教程的帮助。本教程设计时间为 15 分钟。详情请参考Support for themes。
备注
本定义用于复古 Shopify 模板不适用于 模板Online Store 2.0”模板。
找到你的模板架构版本
探索“Online Store 2.0自定义模板
您可以在购物车页面上包含日历,以便客户可以指定订单的交付日期。
注意
这种自定义设置不适用于抽屉式或弹出式购物车,只适用于购物车页面(位于 URLyour-store.com/cart)。如果您使用购物车抽屉或弹出式购物车,您需要在模板编辑器中将您的购物车样式更改为购物车页面。在模板预览中向购物车添加产品,然后点击模板编辑器中的购物车页面选项卡查看您的购物车设置。
在 theme.liquid 中包含 jQuery
某些模板需要将 定制为正常工作jQuery 添加到 theme.liquid 布局文件。如果使用 Boundless、Debut 版本 17.2.0 或更高的版本,Express、Narrative 或 Venture,您可能需要遵循以下步骤:
在Layout点击目录theme.liquid。
在代码中搜索结束</head>标记</head>在标记上方的新行中,粘贴以下代码:
liquid{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
点击保存。
Shopify商户官网原文详情:
Add a delivery date picker to your cart
Note
If you use afree theme from Shopify,then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more,refer toSupport for themes.
Note
This customization is for vintage Shopify themes,and doesn't apply to Online Store 2.0 themes.
Find out your theme's architecture version
Explore Online Store 2.0 theme customizations
You can include a calendar on your cart page that allows customers to specify a delivery date for their order.
Caution
This customization will not work for drawer or pop-up cart styles,and will only work for a cart page (at the URLyour-store.com/cart). If you use a cart drawer or pop-up,then you will need to change your cart style toPagein thetheme editor. Add a product to the cart in the theme preview,and then click theCart pagetab in the theme editor to view your cart settings.
Include jQuery in your theme.liquid
For this customization to work,some themes require that a script tag for jQuery is added to the theme.liquid layout file. If you use Boundless,Debut version 17.2.0 or newer,Express,Narrative,or Venture,then you may need to follow the next step:
In theLayoutdirectory,clicktheme.liquid.
Findthe closing</head>tag in the code. On a new line above the closing</head>tag,paste the following code:
{{'//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js'|script_tag}}ClickSave.
文章内容来源:Shopify官家官网