AllValue

中文

  • 中文
  • 繁体中文
  • English
  • 日本語

AllValue

中文

  • 中文
  • 繁体中文
  • English
  • 日本語
  • 首页
  • 产品特性
  • 解决方案

    • 经营场景

      • 国货品牌DTC出海解决方案
      • 国际版微信小程序解决方案
      • B2B解决方案
      • 品牌区域多站点解决方案
    • 运营与营销

      • 分销联盟解决方案
      • 社群营销解决方案
      • 极致移动解决方案
    • 出海国家

      • 北美出海解决方案
  • 商家服务

    • 品牌出海

      • 装修与建站服务
      • 选品指导服务
      • 中国100品牌出海计划
    • 社交营销

      • 网红营销服务
      • 北美社群营销服务
    • 广告投放

      • Google广告投放服务
      • Facebook广告投放服务
  • 套餐价格
  • 跨境学堂

    • 有料学堂

      • 有料学堂
      • 有料公开课
      • 系列专业课
    • 头条博客

      • 头条博客
      • 公司动态
    • 跨境社区

      • 跨境社区
  • 主题模板

    • 全部模板

    • 精选模板

  • 关于我们

    • 品牌故事

    • 联系我们

    • 合作伙伴

  1. 头条博客
  2. 独立站
  3. 怎样在日期选择符日历中禁止使用特殊日期

怎样在日期选择符日历中禁止使用特殊日期

2022-06-01 17:48:34

创建派送日期代码精彩片段

若想为派送日期选择符创建代码精彩片段,请实行下列实际操作:

PC:

在Shopify后台管理中,转到在线商店模板。

寻找要编辑的模板,随后点击实际操作编辑代码。

在Snippets文件目录中,点击加上新代码精彩片段。

创建代码片段:

将代码精彩片段取名为delivery-date。

点击创建代码精彩片段。新的代码片段文档将在代码编辑器中开启。

ios系统:

在Shopify后台管理中,转到在线商店模板。

寻找要编辑的模板,随后点击实际操作编辑代码。

在Snippets文件目录中,点击加上新代码精彩片段。

创建代码片段:

将代码精彩片段取名为delivery-date。

点击创建代码精彩片段。新的代码片段文档将在代码编辑器中开启。

安卓手机系统:

在Shopify后台管理中,转到在线商店模板。

寻找要编辑的模板,随后点击实际操作编辑代码。

在Snippets文件目录中,点击加上新代码精彩片段。

创建代码片段:

将代码精彩片段取名为delivery-date。

点击创建代码精彩片段。新的代码片段文档将在代码编辑器中开启。

在新的delivery-date.liquid代码精彩片段中,黏贴下列代码:

```html{{//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css|stylesheet_tag}}

divstyle=width:300px;clear:both;plabelfor=datePickadeliverydate:/labelinputid=datetype=textname=attributes[date]value={{cart.attributes.date}}/spanstyle=display:blockWedonotdeliverduringtheweek-end./span/p/divscriptwindow.onload=function(){if(window.jQuery){let$=window.jQuery;$(function(){$(#date).datepicker({minDate: 1,maxDate: 2M,beforeShowDay:$.datepicker.noWeekends});});}}/script

1.点击**储存**。##在加入购物车网页页面中包括代码精彩片段若想在加入购物车网页页面中包括派送日期代码精彩片段,请实行下列实际操作:1.在**Sections**文件目录中,点击`cart-template.liquid`。假如您的模板中并没有此文档,则点击**Templates**文件目录中的`cart.liquid`。2.[搜索](/manual/shopify-admin/productivity-tools/keyboard-shortcuts#find)代码中的完毕`/form`标识。在完毕`/form`标识上边的新行中,黏贴下列代码:```liquid{%renderdelivery-date%}

点击储存。

您的加入购物车网页页面中如今将有一个派送日期键入字段名。当您点击文字字段名时,将发生日历:

此自定设定中采用的日期选择符是jQueryUI库文件的小组件。此网络文章详细介绍怎样在日期选择符日历中禁止使用特殊日期。

Shopify商家官方网站全文详细信息:

Createadeliverydatesnippet

Tocreateasnippetforyourdeliverydatepicker:

PC:

FromyourShopifyadmin,gotoOnlineStoreThemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

IntheSnippetsdirectory,clickAddanewsnippet:

Createthesnippet:

Nameyoursnippetdelivery-date.

ClickCreatesnippet.Thenewsnippetfilewillopeninthecodeeditor.

iPhone:

FromyourShopifyadmin,gotoOnlineStoreThemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

IntheSnippetsdirectory,clickAddanewsnippet:

Createthesnippet:

Nameyoursnippetdelivery-date.

ClickCreatesnippet.Thenewsnippetfilewillopeninthecodeeditor.

Android:

FromyourShopifyadmin,gotoOnlineStoreThemes.

Findthethemeyouwanttoedit,andthenclickActionsEditcode.

IntheSnippetsdirectory,clickAddanewsnippet:

Createthesnippet:

Nameyoursnippetdelivery-date.

ClickCreatesnippet.Thenewsnippetfilewillopeninthecodeeditor.

Inyournewdelivery-date.liquidsnippet,pastethefollowingcode:

{{//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css|stylesheet_tag}}scriptsrc=https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.jsdefer=defer/scriptdivstyle=width:300px;clear:both;plabelfor=datePickadeliverydate:/labelinputid=datetype=textname=attributes[date]value={{cart.attributes.date}}/spanstyle=display:blockclass=instructionsWedonotdeliverduringtheweek-end./span/p/divscriptwindow.onload=function(){if(window.jQuery){let$=window.jQuery;$(function(){$(#date).datepicker({minDate: 1,maxDate: 2M,beforeShowDay:$.datepicker.noWeekends});});}}/script

ClickSave.

Includethesnippetinyourcartpage

Toincludethedeliverydatesnippetinyourcartpage:

IntheSectionsdirectory,clickcart-template.liquid.Ifyourthemedoesnthavethisfile,thenclickcart.liquidintheTemplatesdirectory.

Findtheclosing/formtaginthecode.Onanewlineabovetheclosing/formtag,pastethefollowingcode:

{%renderdelivery-date%}

ClickSave.

Younowhaveadeliverydateinputfieldonyourcartpage.Whenyouclickinsidethetextfield,acalendarwillappear:

ThedatepickerusedinthiscustomizationisawidgetfromthejQueryUIlibrary.Thisblogpostexplainshowtodisablespecificdatesinthedatepickercalendar.

文章由来:Shopify商家官网


部分文章来源于网络,如有侵权,请联系 caihong@youzan.com 删除。

标签:

相关文章

  • Facebook广告被定位在哪一群人?
  • 没有网站?不要担心,亚马逊允许你去创建一个店铺
  • Pinterest在网络营销领域里扮演着重要的角色
  • 如何在facebook上做企业的推广
  • pinterest引流技巧分享

热门标签

评论

    添加优质配图将会得到更多人回答,媒体大小小于2M,建议尺寸:200x200

评论提交成功

评论有以下违规词汇

删除成功

评论

确定删除此评论吗

  • 未读列表
  • 已读列表

消息类型标题

2021-08-24 12:45

消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容消息详细内容

  • 产品与服务
  • 产品特性
  • 商家服务
  • 主题模板
  • 套餐价格
  • 帮助中心
  • 解决方案
  • 品牌DTC解决方案
  • B2B解决方案
  • 极致移动解决方案
  • 分销联盟解决方案
  • 北美出海解决方案
  • 关于我们
  • 品牌故事
  • 开发者中心
  • 用户协议
  • 隐私政策
  • 跨境学堂
  • 有料学堂
  • 博客头条
  • 跨境社区
  • 联系方式
  • 商家服务: 15814458155
  • 渠道专线: 15814458155
  • 市场合作: 15814458155
  • 官方账号
  • 邮箱: info@allvalue.com
  • AllValue公众号

    加入华人社群

©2024 allvalue.com Rights Reserved|浙ICP备2020040621号

  • 产品与服务

    • 产品特性

    • 商家服务

    • 主题模板

    • 套餐价格

    • 帮助中心

  • 解决方案

    • 品牌DTC解决方案

    • B2B解决方案

    • 极致移动解决方案

    • 分销联盟解决方案

    • 北美出海解决方案

  • 关于我们

    • 品牌故事

    • 开发者中心

    • 用户协议

    • 隐私政策

  • 跨境学堂

    • 有料学堂

    • 博客头条

    • 跨境社区

  • 联系方式

    商家服务: 15814458155

    渠道专线: 15814458155

    市场合作: 15814458155

  • 官方账号

    邮箱: info@allvalue.com

    • AllValue公众号

    • 加入华人社群

  • ©2024 allvalue.com Rights Reserved|浙ICP备2020040621号