如何为订单页添加配送日期插件_友好速搭

友好速搭

如何为订单页添加配送日期插件

分类: 友干货 | 发表时间:2015.08.10 12:48
Zeta
·
-
友干货 2015.08.10 12:48

前言

一份鲜花或是一磅蛋糕都一份温暖的心意,而这心意最重要的就是时效性,配送时间便尤为重要,这篇blog简述如何为您的订单页面添加配送时间插件,最终效果如下图

图片名称

后台可在订单备注处查看顾客选择的配送时间

图片名称

通用主题

下载并且解压缩日期选择插件文件(点击下载),

得到样式文件datetimepicker.css和脚本文件datetimepicker.js

① 将这些文件上传至 当前主题 --> 代码编辑 -->资源/Assets 文件夹内,具体位置如图所示 图片名称

② 在 模版/Templates -->account/create_order.html 代码段中插入配送日期插件调用的代码

<!-- 配送时间插件 -->
<div class="wrapper">
  <div class="cont">
    <div class="mod order-create settings-text_color">
      <div class="order-create-inner settings-main_border">
        <h3 class="order-create-title settings-formTitle_background" id="delivery-time">指定配送时间(<span class="order-create-title-option">可选</span>):<input type="text" class="order-create-title-time" id="datetimepicker" placeholder=" 点击选择日期"><input class="delivery-time" type="radio" name="delivery" value="全天" checked="checked">全天<input class="delivery-time" type="radio" name="delivery" value="上午">上午<input class="delivery-time" type="radio" name="delivery" value="下午">下午</h3>
      </div>
    </div>
  </div>
</div>

位置如下图所示 图片名称

③ 将下图中所示代码替换为

<textarea class="settings-ipt_border" id="yhsd_orderCreate_remark-display" placeholder="订单补充说明" maxlength="100"></textarea>
<textarea id="yhsd_orderCreate_remark" style="display:none;"></textarea>

创建订单中的备注代码,顾客选择的配送日期即可在后台订单备注中注释说明。

图片名称

④ 全代码段末尾插入脚本代码,位置如图所示

<!-- 配送时间脚本调用 -->
{{ 'datetimepicker.js' | asset_url | js_tag }}
{{ 'datetimepicker.css' | asset_url | css_tag }}
<script type="text/javascript">
    $(document).ready(function(){
        $('#datetimepicker').datetimepicker({ //日期插件
            lang:'ch',
            timepicker:false,
            format:'Y-m-d',
        });

    addRemark();
    function addRemark(){
            var deliveryTime = $('#datetimepicker'); //获取时间输入框
            var yhsdOrderCreateRemark = $('#yhsd_orderCreate_remark'); //获取提交备注框
            var submitBtn = $('#yhsd_orderCreate_submit'); //获取提交表单按钮
            var yhsdOrderCreateRemarkDsiplay = $('#yhsd_orderCreate_remark-display'); //获取用户输入备注框
            submitBtn.click(function() {
                if(deliveryTime.val()){
                    yhsdOrderCreateRemark.val('[' + '配送日期:'+ deliveryTime.val() + $('.delivery-time:checked').attr('value') + '] ' + '\n' + yhsdOrderCreateRemarkDsiplay.val());
                } else {
                    yhsdOrderCreateRemark.val(yhsdOrderCreateRemarkDsiplay.val());
                }
            });
        }
    });
</script>

图片名称

希望能帮助你更有效地完成工作。

分享文章
友好速搭与你一起,共赢未来
联系客服
电话咨询
服务热线
0755-83051027
获取报价
QQ咨询
微信咨询
微信二维码
在线咨询

在线获取方案和报价,专人快速响应

所选城市 *

您的称呼 *

联系电话 *

网站类型 *

请选择
展示官网 电商网站 微信商城 小程序 其他类型

您希望我们为您提供哪些服务?(可多选)

B2C商城 跨境解决方案 B2B2C平台电商 网站备案 自营电商培训
获取报价

提交成功

你好, XXX女士/先生 ,你的需求已提交成功,后续会有专门的客户经理与你电话联系。谢谢!