Thiết kế website giá rẻ

Question

For some reason i cannot loop through the items array to display in my order confirmation email template the items, quantity and price of the customer order.

Any ideas what I’m I doing wrong? already tried with the this keyword and nothing.

this is my handlebars template:

<html lang='en'>
  <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Document</title>
  </head>
  <body>
    <div
      style='background-color: rgba(255, 255, 255, 0.8); margin-top: 2.5rem; margin-bottom: 6rem; overflow: hidden; border-radius: 0.5rem; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); margin-right: 8rem; margin-left: 8rem;'
    >
      <main style='position: relative; min-height: 100%;'>
        <div
          style='height: 20rem; overflow: hidden; position: absolute; height: 100%; width: 50%; padding-right: 1rem;'
        >
          <img
            src='https://imagedelivery.net/-Kv3q_Rw64dJAsVUQLtKJw/09d99a13-814f-420f-fcac-dd14432d4e00/public'
            alt='LOGO'
            style='height: 100%; width: 100%; object-fit: cover; object-position: center;'
          />
        </div>

        <div>
          <div
            style='margin: 0 auto; max-width: 32rem; padding: 4rem 1rem 6rem; display: grid; max-width: 70rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding: 8rem;'
          >
            <div style='grid-column-start: 2;'>
              <h1
                style='font-size: 0.875rem; font-weight: 500; color: #6B46C1;'
              >Orden confirmada</h1>
              <p
                style='margin-top: 0.5rem; font-size: 2.25rem; font-weight: bold; line-height: 1.2; color: #1a202c; font-size: 3rem;'
              >
                Gracias por ordernar</p>
              <p
                style='margin-top: 0.5rem; font-size: 1rem; color: #6b7280;'
              >Agradecemos tu pedido, actualmente lo estamos empacando. ¡Dentro
                de unos dias tu pedido estara contigo!</p>

              <div
                style='display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));'
              >
                <dl
                  style='margin-top: 4rem; font-size: 0.875rem; font-weight: 500;'
                >
                  <dt style='color: #1a202c;'>Numero de orden</dt>
                  <dd style='margin-top: 0.5rem; color: #6B46C1;'>
                    <a href='https://ticogrinders.com/myOrders'>#{{orderId}}</a>
                  </dd>
                </dl>

                <dl
                  style='margin-top: 4rem; font-size: 0.875rem; font-weight: 500;'
                >
                  <dt style='color: #1a202c;'>Numero de rastreo</dt>
                  <dd style='margin-top: 0.5rem; color: #6B46C1;'>
                    <a
                      href='https://correos.go.cr/rastreo/'
                    >{{trackingNumber}}</a>
                  </dd>
                </dl>
              </div>

              <ul
                role='list'
                style='margin-top: 1.5rem; border-top: 1px solid #e5e7eb; font-size: 0.875rem; font-weight: 500; color: #6b7280;'
              >
              {{items}}
                <li style='display: flex; gap: 1.5rem; padding: 1.5rem 0;'>
                  <img
                    src='{{this.imageSrc}}'
                    alt='{{this.imageAlt}}'
                    style='height: 6rem; width: 6rem; flex: none; border-radius: 0.375rem; background-color: #f3f4f6; object-fit: cover; object-position: center;'
                  />
                  <div style='flex: auto; space-y-0.25rem;'>
                    <h3 style='color: #1a202c;'>
                      <a
                        href='https://ticogrinders.com/products/grinders/{{this.href}}'
                        style='color: inherit; text-decoration: none; transition: color 0.3s;'
                      >{{this.name}}</a>
                    </h3>
                    <p>{{this.color}}</p>
                    <p>{{this.size}}</p>
                    <p>Cantidad: {{this.quantity}}</p>
                  </div>
                  <p
                    style='flex: none; font-weight: 500; color: #1a202c;'
                  >₡{{this.price}}</p>
                </li>

              </ul>

              <dl
                style='space-y: 1.5rem; border-top: 1px solid #e5e7eb; padding-top: 1.5rem; font-size: 0.875rem; font-weight: 500; color: #6b7280;'
              >
                <div style='display: flex; justify-content: space-between;'>
                  <dt>Subtotal</dt>
                  <dd style='color: #1a202c;'>₡{{subTotal}}</dd>
                </div>

                <div style='display: flex; justify-content: space-between;'>
                  <dt>Envio</dt>
                  <dd style='color: #1a202c;'>₡{{shippingCost}}</dd>
                </div>

                <div style='display: flex; justify-content: space-between;'>
                  <dt>Impuestos</dt>
                  <dd style='color: #1a202c;'>₡{{taxes}}</dd>
                </div>

                <div
                  style='display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e5e7eb; padding-top: 1.5rem; color: #1a202c;'
                >
                  <dt style='font-size: 1rem;'>Total</dt>
                  <dd style='font-size: 1rem;'>₡{{amount}}</dd>
                </div>
              </dl>

              <dl
                style='margin-top: 4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; font-size: 0.875rem; color: #4b5563;'
              >
                <div>
                  <dt style='font-weight: 500; color: #1a202c;'>Direccion de
                    envio
                  </dt>
                  <dd style='margin-top: 0.5rem;'>
                    <address style='font-style: normal;'>
                      <span style='display: block;'>{{customerName}}</span>
                      <span style='display: block;'>{{customerCountry}}</span>
                      <span style='display: block;'>{{customerStreet}}</span>
                      <span style='display: block;'>{{customerStreet2}}
                        {{customerState}},
                        {{customerPostalCode}}</span>
                    </address>
                  </dd>
                </div>
                <div>
                  <dt style='font-weight: 500; color: #1a202c;'>Informacion de
                    pago
                  </dt>
                  <dd
                    style='margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 1rem;'
                  >
                    <div style='flex: auto;'>
                      <p style='color: #1a202c;'>Ending with
                        {{lastFour}}</p>
                      <p>Expires {{expMonth}} / {{expYear}}</p>
                    </div>
                  </dd>
                </div>
              </dl>
            </div>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>

By accessing the items object in the template I get this in the email

[{ id: '65b3e7fcd6d8153509988154', 
name: 'Ara La Lapa Roja', 
price: 15000, 
quantity: 1,
 size: 'Mediano',
 imageSrc: 'https://tailwindui.com/img/ecommerce-images/product-page-02-secondary-product-shot.jpgn',
 imageAlt: 'Two each of gray, white, and black shirts laying flat.', 
href: 'ara', 
_id: new ObjectId('66735a58e80bfff624d4c81d') 
},
{ 
id: '65b3e7fcd6d8153509988156', 
name: 'Onca La Jaguar', 
price: 15000, 
quantity: 1, 
size: 'Mediano', imageSrc: 'https://cdn.shopify.com/s/files/1/2303/2711/files/2_e822dae0-14df-4cb8-b145-ea4dc0966b34.jpg?v=1617059123', 
imageAlt: 'Onca1', 
href: 'onca', 
_id: new ObjectId('66735a58e80bfff624d4c81e') 
}]

I already tried with

{{#each items}}
    {{imageSrc}}
{{/each}}

And got no luck accessing the data, any ideas what I’m I doing wrong?

I did made sure the data I’m passing as the template context is an array.

Thiết kế website giá rẻ

Danh mục

Cannot loop an array in a handlebarsjs template