如何使用 jQuery 日期选择器创建一个可以在电子邮件模板中呈现的 shopify 变量？

Question

我正在做我的第一个电子商务 shopify 项目，所以我对 Liquid 还很陌生。我已经自定义我的代码以将 jQuery 的日期选择器合并到 select 交货日期，并且当前日期是 selected 并且订单已确认，selected 日期出现在业务方订单确认的附加信息中，客户再也看不到。我想做的是创建一个全局 variable/property，我可以：1. 在另一个液体页面（例如确认页面）中重复使用和 2：在电子邮件模板中使用。这可能吗？我该怎么做？

发货-date.liquid

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

  <div style="width:300px; clear:both;">
    <p>
      <label for="date">Pick a delivery date:</label>
      <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    </p>
  </div>

  <script>
    window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
            minDate: +1, 
            maxDate: '+2M',
           });
        });
      }
    }
  </script>

然后在购物车中-template.liquid 我呈现代码段

{% render 'delivery-date' %}

电子邮件模板能够访问已确认订单的属性，如 {{ customer.first_name }}、所有账单和送货信息等

Answer 1

您可以使用与购物车页面上名称相同的 attributes 数组访问电子邮件模板（订单确认或新订单）中的购物车属性。

<p>Date: {{ attributes["date"] }}</p>

至于结帐感谢页面，您可以在 Shopify 设置 > 结帐的其他脚本部分使用相同的对象 {{ checkout.attributes["date"] }}。

Answer 2

作为 cMarius 答案的补充，要在完成后将其添加到客户订单页面，您需要将“结帐”更改为“订单”，如 {{ order.attributes["date"] }}

例如： <p><strong>Desired Delivery Date: {{ order.attributes["date"] }}</p>

如何使用 jQuery 日期选择器创建一个可以在电子邮件模板中呈现的 shopify 变量？

How to create a shopify variable using jQuery datepicker that can then be rendered in email templates?

jquery

datepicker

onselect

liquid

shopify