How can I edit packing slips to include a shipping date attribute?

Haider512
Shopify Partner
10 0 0

I add a additional attribute in cart that was shipping date it's code is below. Now I want to add this on my store Packing Slip. Are you guys help me that which liquid code will use there.

<p>
Select a date for delivery (Required) <br>
<input
name="attributes[Shipping date]"
placeholder="Click to Select Date* "
type="text"
id="datepicker"
required
>
</p>

Haider512_0-1711734495894.png

 

 

Its showing up in order

Reply 1 (1)

Rishihuptech
Shopify Partner
470 80 86

Hello @Haider512 ,

 

Currently, In Shopify Packing Slip it is not possible to add the additional attributes. But you can get this done with cart notes by adding some custom code. You need to follow the below steps and add the code to the files. It will help you to add the Shipping date in Shopify Packing Slip.

 

1. Open the Shopify code editor from the Shopify admin.

Screenshot_15.png

 

Open the "theme.liquid" file and add the below code before the </body> tag.

{% if template == 'cart' %}
      <script>
        document.addEventListener('DOMContentLoaded', function () {
          var shippingDate = document.getElementById('datepicker');
          var cartNote = document.getElementById('Cart-note');
          var cartForm = document.getElementById('cart');
        
          cartForm.addEventListener('submit', function(event) {
        
            // Get the values of shipping date and cart note
            var shippingDateValue = shippingDate.value;
            var cartNoteValue = cartNote.value;
        
            var combinedNote = cartNoteValue + "|" + "Shipping Date: " + shippingDateValue;
            cartNote.value = combinedNote;
        
          });
        });
      </script>
    {% endif %}

Screenshot_13.png

 

2. Edit the Packing Slips Template - To edit the template click on Settings from the Shopify admin. Then go to Shipping and delivery -> Packing slips -> Edit Template

Screenshot_16.pngScreenshot_17.pngScreenshot_18.png

 

Once you open the template find "{% if order.note != blank %}" code and replace the code inside the condition with below code:

<div class="notes">
      {% if order.note contains ' | ' %}
        {% assign cartNotes = order.note | split: '|' %}
        {% assign shippingDate = cartNotes.last | split: ':' %}
        {% assign cartNote = cartNotes.first %}
      {% else %}
        {% assign shippingDate = order.note | split: ':' %}
      {% endif %}
      {% if cartNote %}
      <p class="subtitle-bold to-uppercase">
        Notes
      </p>
      <p class="notes-details">
        {{ cartNote }}
      </p>
      {% endif %}
      {% if shippingDate.first and shippingDate.last %}
      <p class="subtitle-bold to-uppercase">
        {{ shippingDate.first }}
      </p>
      <p class="notes-details">
        {{ shippingDate.last | date: format: "date" }}
      </p>
      {% endif %}
    </div>

Screenshot_19.png

 

Please let me know if it doesn't help or if you have any queries.

Thanks!

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required