Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
Hello,
I have a problem with the packing slip template. I would like multiple lines if a client orders a same product multiple times. Currently, it appears with only one line and the quantity at the end:
But, I need it to show it likes this but with the same product (for exemple):
But I don't know how actually, so I need help..
Here's what I have in the template section if it's helpful:
<hr>
<div class="order-container">
<div class="order-container-header">
<div class="order-container-header-left-content">
<p class="subtitle-bold to-uppercase">
Produit(s)
</p>
</div>
<div class="order-container-header-right-content">
<p class="subtitle-bold to-uppercase">
Quantité
</p>
</div>
</div>
{% comment %}
To adjust the size of line item images, change desired_image_size.
The other variables make sure your images print at high quality.
{% endcomment %}
{% assign desired_image_size = 78 %}
{% assign resolution_adjusted_size = desired_image_size | times: 300 | divided_by: 72 | ceil %}
{% capture effective_image_dimensions %}
{{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}
{% endcapture %}
{% 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 }}
</p>
</div>
</div>
Thank you to anyone who will help me with that ! 🙂
Solved! Go to the solution
This is an accepted solution.
You could try using the range loop as documented here. Here's how you'd need to modify your template (I did not try before posting so apologies if it contains typos, hopefully it gives you an idea for how to go about implementing it):
{% for line_item in line_items_in_shipment %}
{% assign num = line_item.shipping_quantity %} {% assign range = (1..num) %} {% for i in range %} <div class="flex-line-item">
…
</div> {% endfor %}
{% endfor %}
This is an accepted solution.
You could try using the range loop as documented here. Here's how you'd need to modify your template (I did not try before posting so apologies if it contains typos, hopefully it gives you an idea for how to go about implementing it):
{% for line_item in line_items_in_shipment %}
{% assign num = line_item.shipping_quantity %} {% assign range = (1..num) %} {% for i in range %} <div class="flex-line-item">
…
</div> {% endfor %}
{% endfor %}
Thank you, it worked !
Hello!! I’m looking for this exact thing.
would anyone be able to tell me where to go to edit this code? I’m very new to adjusting code so any and all directions would be greatly appreciated! Thanks in advance!