Errors with HTML packing slip code

[emjjay]

Hi!

Trying to change our packing slip to include the metafield we made

'Bundle Components SKUs'

The idea is to have the individual SKU of a bundle product show (without using an app).

i've tried the following attached with no results.

The current code is:

{% for line_item in line_items_in_shipment %}
<div class="flex-line-item">
<div class="flex-line-item-img">
{% if line_item.image != blank %}
<div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
{{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
</div>
{% endif %}
</div>
<div class="flex-line-item-description">
<p>
<span class="line-item-description-line">
{{ line_item.title }}
</span>
{% if line_item.variant_title != blank %}
<span class="line-item-description-line">
{{ line_item.variant_title }}
</span>
{% endif %}
{% if line_item.sku != blank %}
<span class="line-item-description-line">
{{ line_item.sku }}
</span>
{% endif %}
</p>
</div>
<div class="flex-line-item-quantity">
<p class="text-align-right">
{{ line_item.shipping_quantity }} of {{ line_item.quantity }}
</p>
</div>
</div>
{% endfor %}
</div>
{% unless includes_all_line_items_in_order %}
<hr class="subdued-separator">
<p class="missing-line-items-text ">
There are other items from your order not included in this shipment.
</p>
{% endunless %}
<hr>
{% if order.note != blank %}
<div class="notes">
<p class="subtitle-bold to-uppercase">
Notes
</p>
<p class="notes-details">
{{ order.note }}
</p>
</div>



Any advice or feedback appreciated!
Thanks!

 

[c1lonewolf]

<!-- item starts -->
<div id="item" class="flex-line-item">

<!-- item-image container starts -->
<div class="flex-line-item-img">
<!-- item-image inner-container starts -->
<div id="item_image" class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">{{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}</div>
<!-- item-image inner-container  ends -->
</div>
<!-- item-image container ends -->


<!-- item-description container starts -->
<div id="item_description" class="flex-line-item-description">
<p>
<!-- item-title starts -->
<span id="item_title" class="line-item-description-line">{{ line_item.title }}</span>
<!-- item-title ends -->

<!-- item-variant_title starts -->
<span id="item_variant_title" class="line-item-description-line">{{ line_item.variant_title }}</span>
<!-- item-variant_title ends -->

<!-- item-sku starts -->
<span id="item_sku" class="line-item-description-line">{{ line_item.sku }}</span>
<!-- item-sku ends -->
</p>
</div>
<!-- item-description container ends -->

<!-- item-quantity container starts -->
<div id="item_quantity" class="flex-line-item-quantity">
<p class="text-align-right">{{ line_item.shipping_quantity }} of {{ line_item.quantity }}</p>
</div>
<!-- item-quantity container ends -->

</div>
<!-- item ends -->

<!-- missing items starts -->
<hr class="subdued-separator">
<p id="missing_items" class="missing-line-items-text ">
There are other items from your order not included in this shipment.
</p>
<!-- missing items ends -->

<hr>

<!-- additional notes start -->
<div id="notes" class="notes">
<p class="subtitle-bold to-uppercase">Notes</p>
<p class="notes-details">{{ order.note }}</p>
</div>
<!-- additional notes end -->

1. You have an unmatched divisional tag. The ending tag appears just before the missing items group in the "current code" you posted (it's been removed in the code above). Since it's an ending tag and you only posted part of the html there's no way to know if that's the problem or not.

2. STOP BUTCHERING YOUR HTML! Stop butchering your html by embedding processing codes in it, this only makes things harder when you have to change things out. That's why they call it "templating".

3. Use html comments to help find where objects start and end!

4. Use the "id" attribute! It's meant as an aid for individuals using non-visual devices.

 

[emjjay]

<!-- item starts -->
<div id="item" class="flex-line-item">

<!-- item-image container starts -->
<div class="flex-line-item-img">
<!-- item-image inner-container starts -->
<div id="item_image" class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">{{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}</div>
<!-- item-image inner-container  ends -->
</div>
<!-- item-image container ends -->


<!-- item-description container starts -->
<div id="item_description" class="flex-line-item-description">
<p>
<!-- item-title starts -->
<span id="item_title" class="line-item-description-line">{{ line_item.title }}</span>
<!-- item-title ends -->

<!-- item-variant_title starts -->
<span id="item_variant_title" class="line-item-description-line">{{ line_item.variant_title }}</span>
<!-- item-variant_title ends -->

<!-- item-sku starts -->
<span id="item_sku" class="line-item-description-line">{{ line_item.sku }}</span>
<!-- item-sku ends -->
</p>
</div>
<!-- item-description container ends -->

<!-- item-quantity container starts -->
<div id="item_quantity" class="flex-line-item-quantity">
<p class="text-align-right">{{ line_item.shipping_quantity }} of {{ line_item.quantity }}</p>
</div>
<!-- item-quantity container ends -->

</div>
<!-- item ends -->

<!-- missing items starts -->
<hr class="subdued-separator">
<p id="missing_items" class="missing-line-items-text ">
There are other items from your order not included in this shipment.
</p>
<!-- missing items ends -->

<hr>

<!-- additional notes start -->
<div id="notes" class="notes">
<p class="subtitle-bold to-uppercase">Notes</p>
<p class="notes-details">{{ order.note }}</p>
</div>
<!-- additional notes end -->

1. You have an unmatched divisional tag. The ending tag appears just before the missing items group in the "current code" you posted (it's been removed in the code above). Since it's an ending tag and you only posted part of the html there's no way to know if that's the problem or not.

2. STOP BUTCHERING YOUR HTML! Stop butchering your html by embedding processing codes in it, this only makes things harder when you have to change things out. That's why they call it "templating".

3. Use html comments to help find where objects start and end!

4. Use the "id" attribute! It's meant as an aid for individuals using non-visual devices.

Thanks a lot for all those tips going forward trying to figure out coding! Really appreciate it.