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

Question

I am working on my first ecommerce shopify project so I am very new to liquid. I have customised my code to incorporate jQuery's datepicker to select a delivery date and currently when the date is selected and the order is confirmed, the selected date appears in additional information on business side order confirmation, never being visible again to the client. What I would like to do is create a global variable/property that I can: 1. reuse in another liquid page(e.g the confirmation page) and 2: use in an email template. Is this possible and how could I do this?

delivery-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>

then in the cart-template.liquid I render the snippet

{% render 'delivery-date' %}

The email template is able to access properties from the confirmed order like {{ customer.first_name }}, all billing and shipping information etc.

cMarius cMarius · Accepted Answer · 2021-05-12T13:11:05

You can access cart attributes in the email templates (order confirmation or new order) using the attributes array with the same name that you have on the cart page.

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

As for the checkout thank you page you can use the the same object {{ checkout.attributes["date"] }} in the Additional scripts section of Shopify Settings > Checkout.

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

2 Answers