How to limit td element to 1

[birdiejay]

Hi there I have this theme called Shella, it is out of Shopify theme store.

I wanted to add tracking codes to account page > order history. I did but my way it brings all the tracking codes for each line item. meaning if there is 10 items in an order 10 lines of same code is displayed. Please see the ss below:

how to limit td elements to 1 line?

Added codes,

mobile:

<tr>
 <td>{{ 'customer.order.tracking_number' | t }}</td>
  <td>                      
   {% for line_item in order.line_items %}
   {% if line_item.fulfillment.tracking_number %}
      <p><a href="https://panel.bovo.com.tr/kargo-takip?tracking_number={{ line_item.fulfillment.tracking_number }}">{{ line_item.fulfillment.tracking_number}}</a</p>
   {% endif %}
   {% endfor %}
  </td>
</tr>

desktop:

Added to <thead>:
<th>Kargo Takip</th>

added to <tbody>:
<td>
  {% for line_item in order.line_items %}
  {% if line_item.fulfillment.tracking_number %}
    <p><a href="https://panel.bovo.com.tr/kargo-takip?tracking_number={{ line_item.fulfillment.tracking_number }}">{{ line_item.fulfillment.tracking_number}}</a</p>
  {% endif %}
  {% endfor %}
</td>

how to limit td elements to 1 line?

[websensepro]

Hi @birdiejay 

To ensure that the tracking code for the order is displayed on only one line instead of repeating for each line item, you'll need to make a couple of changes. The issue occurs because you are using a for loop to display each tracking number for each line item, which results in multiple rows for multiple items.

Solution:

1. Display only one tracking number for the entire order:
   • Instead of looping through each line item to show a tracking number, you can find the first tracking number available and display it once.

Here’s how you can modify your code:

Updated Code:

Mobile:

<tr>
  <td>{{ 'customer.order.tracking_number' | t }}</td>
  <td>
    {% assign tracking_numbers = order.line_items | map: 'fulfillment.tracking_number' %}
    {% assign unique_tracking_numbers = tracking_numbers | uniq %}
    
    {% if unique_tracking_numbers.size > 0 %}
      <p>
        <a href="https://panel.bovo.com.tr/kargo-takip?tracking_number={{ unique_tracking_numbers.first }}">{{ unique_tracking_numbers.first }}</a>
      </p>
    {% endif %}
  </td>
</tr>

Desktop:

<th>Kargo Takip</th>

<td>
  {% assign tracking_numbers = order.line_items | map: 'fulfillment.tracking_number' %}
  {% assign unique_tracking_numbers = tracking_numbers | uniq %}
  
  {% if unique_tracking_numbers.size > 0 %}
    <p>
      <a href="https://panel.bovo.com.tr/kargo-takip?tracking_number={{ unique_tracking_numbers.first }}">{{ unique_tracking_numbers.first }}</a>
    </p>
  {% endif %}
</td>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[birdiejay]

Hello @websensepro 

Thanks a lot for your help, unfortunately it didn't work as expected.

Please see the ss below, now it doesn't show any of the tracking codes. I think it is because of the logic.

If there are 2 products in an order there wouldn't be 2 unique tracking numbers, in fact there would be 0 unique tracking numbers. Whereas if there is 1 product in an order there would be 1 unique tracking number.

I am not a developer so I might be wrong.

And you don't have to create tracking code like i did, the shipping company writes the tracking number and link for every order. If you can get the tracking link it should also work just fine.

Thanks a lot in advance,