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

[Haider512]

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>

Its showing up in order

[Huptech-Web]

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.

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 %}

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

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>

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

Thanks!