ECT render example

by arohy

HTML

<script type="text/template" hidden class="product" id="list">
  <% if @products?.length > 0 : %>
    <% for product in @products : %>
      <% if product : %>
        <div class="product_preview-preview">
          <div class="image-wrapper">
            <a  href="<%- product.url %>"
                class="product_preview-image image-square"
                title="<%- product.title %>"
            >
              <img  src="<%- product.first_image.medium_url %>"
                    class=""
                    title="<%- product.title %>"
              />
            </a>
          </div>
        </div>

        <div class="padded">
          <div class="product_preview-prices prices">
            <span class="prices-current">
              <%- @formatMoney product.price %>
            </span>
          </div>

          <div class="product_preview-title">
            <a  href="<%- product.url %>" 
                class="product_preview-link" 
                title="<%- product.title %>" 
            >
              <%- product.title %>
            </a>
          </div>
        </div>
      <% end %>
    <% end %>
  <% end %>
</script>

JavaScript

var data = {
    products: [
        { url: '/...', title: 'product_title1', first_image: 'image_url1' },
        { url: '/...', title: 'product_title2', first_image: 'image_url2' },
        { url: '/...', title: 'product_title3', first_image: 'image_url3' },
    ]
}