What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Packing Slip: Multiple line for same product quantity

Solved

Packing Slip: Multiple line for same product quantity

Prisc9
New Member
5 0 0

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:

 

Capture d’écran 2021-12-02 à 09.28.17.png

But, I need it to show it likes this but with the same product (for exemple):

 

Capture d’écran 2021-12-02 à 09.29.32.png

 

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 ! 🙂

 

Accepted Solution (1)

mareksuscak
Tourist
4 2 1

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

 

View solution in original post

Replies 3 (3)

mareksuscak
Tourist
4 2 1

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

 

Prisc9
New Member
5 0 0

Thank you, it worked ! 

gayalmanac
Visitor
2 0 0

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!