How-to: How to build reusable HTML components?

How to build reusable HTML components?

Step 1

Declare a new block with the associated template in the HTML JSON configuration file:

themes
+--- {theme}
     +--- layout
          +--- html.json

{
  "block.product": "template/block/product.html"
}

Step 2

Add the block template HTML content:

themes
+--- {theme}
     +--- template
          +--- block
               +--- product.html

<div class="product {{ $class }}">
    <a href="{{ url }}{{ $_path }}">
        <img src="{{ url }}media/catalog/{{ $image }}" alt="{{ $name }}" />
    </a>
    <h2>
        <a href="{{ url }}{{ $_path }}">{{ $name }}</a>
    </h2>
    <div class="price">US$ {{ $price }}</div>
</div>

Step 3

There are 3 ways to call the block in the HTML content.

Arguments

{% block.product
    name:"Stapy Coffee Cup"
    image:"stapy-coffee-cup.jpg"
    price:"9.90"
    class:"featured"
    _path:"product/stapy-coffee-cup.html"
%}

Page data

source
+--- pages
     +---- product
           +------ stapy-coffee-cup.html.json

{
  "name": "Stapy Coffee Cup",
  "image": "stapy-coffee-cup.jpg",
  "price": "9.90"
}

{% block.product class:"related" + product/stapy-coffee-cup.html %}

Page list data

source
+--- pages
     +---- product
           +------ stapy-coffee-cup.html.json
           +------ stapy-t-shirt.html.json

{
  "name": "Stapy Coffee Cup",
  "image": "stapy-coffee-cup.jpg",
  "price": "9.90",
  "tags": ["product"]
}

{
  "name": "Stapy T-Shirt",
  "image": "stapy-t-shirt.jpg",
  "price": "12.90",
  "tags": ["product"]
}

{% block.product class:"list" ~ SELECT ITEMS 1-10 WHERE "product" in tags ORDER BY name asc %}