Skip to main content
Solved

Custom coded abandoned cart html Product Looping for shopify

  • February 12, 2023
  • 3 replies
  • 511 views

Forum|alt.badge.img+2

Hi, 

 

Thanks for your help in advance.

I’m building a custom coded abandoned cart email in html, the store is in shopify.

 

I’m not sure wich code i should use to loop the product table?

I searched and got the below: 

 


        {% if event.extra.line_items %}
        
          {% for item in event.extra.line_items %}
            
    
      
      
    
          {% endfor %}
            
     
      {% else %}
        
      {% endif %}

 

Should i place the product table inside it and then insert baraibles there as per this guide?

 

I did not find enough resource about it, pelase help.

 

Thank you so much!

Best answer by Irrra

Hi @AnupKM ! 

Welcome to the community)

 

Yes, you can place the product table inside the loop in the code you provided. The loop is used to iterate over the line items in the event.extra.line_items array. For each iteration of the loop, you can access the properties of the current item and use them to populate the product table.

Here's an example of how you might use this loop to generate a product table in an HTML email:

{% if event.extra.line_items %}

  <table>

    <thead>

      <tr>

        <th>Product Image</th>

        <th>Product Name</th>

        <th>Quantity</th>

        <th>Price</th>

      </tr>

    </thead>

    <tbody>

      {% for item in event.extra.line_items %}

        <tr>

          <td><img src="{{ item.image_url }}" alt="{{ item.name }}"></td>

          <td>{{ item.name }}</td>

          <td>{{ item.quantity }}</td>

          <td>{{ item.price | money }}</td>

        </tr>

      {% endfor %}

    </tbody>

  </table>

{% else %}

  <p>No items in cart</p>

{% endif %}


 

This code will generate a table that displays the product image, name, quantity, and price for each item in the event.extra.line_items array. If there are no items in the array, the code will display a message saying "No items in cart".

 

View original
Did this topic or the replies in the thread help you find an answer to your question?

3 replies

Irrra
Expert Problem Solver II
Forum|alt.badge.img+17
  • Expert Problem Solver II
  • 57 replies
  • Answer
  • February 13, 2023

Hi @AnupKM ! 

Welcome to the community)

 

Yes, you can place the product table inside the loop in the code you provided. The loop is used to iterate over the line items in the event.extra.line_items array. For each iteration of the loop, you can access the properties of the current item and use them to populate the product table.

Here's an example of how you might use this loop to generate a product table in an HTML email:

{% if event.extra.line_items %}

  <table>

    <thead>

      <tr>

        <th>Product Image</th>

        <th>Product Name</th>

        <th>Quantity</th>

        <th>Price</th>

      </tr>

    </thead>

    <tbody>

      {% for item in event.extra.line_items %}

        <tr>

          <td><img src="{{ item.image_url }}" alt="{{ item.name }}"></td>

          <td>{{ item.name }}</td>

          <td>{{ item.quantity }}</td>

          <td>{{ item.price | money }}</td>

        </tr>

      {% endfor %}

    </tbody>

  </table>

{% else %}

  <p>No items in cart</p>

{% endif %}


 

This code will generate a table that displays the product image, name, quantity, and price for each item in the event.extra.line_items array. If there are no items in the array, the code will display a message saying "No items in cart".

 


Forum|alt.badge.img+2
  • Author
  • Contributor I
  • 1 reply
  • February 13, 2023

Hi @Irrra 

 

So sorry, i’m newbie on this, can you please help a little more?

 

I see the variables are different in another source, if it’s like this then what will be the diffrent?

 

I am using it for Shopify, will this and your’s one make any difference or the same output or is this one wrong:

 

 {% if event.extra.line_items %}

  <table>

    <thead>

      <tr>

        <th>Product Image</th>

        <th>Product Name</th>

        <th>Quantity</th>

        <th>Price</th>

      </tr>

    </thead>

    <tbody>

      {% for item in event.extra.line_items %}

        <tr>

          <td><img src="{{ item.product.image.src  }}" alt="{{ item.product.title }}"></td>

          <td>{{ item.product.title }}</td>

          <td>{{ item.quantity }}</td>

          <td>{{ item.line_price }}</td>

        </tr>

      {% endfor %}

    </tbody>

  </table>

{% else %}

  <p>No items in cart</p>

{% endif %}

 


Irrra
Expert Problem Solver II
Forum|alt.badge.img+17
  • Expert Problem Solver II
  • 57 replies
  • February 15, 2023

Hi @AnupKM!
Most likely both codes will work, you can try and choose the best one for you 🙂