Product templates

After your online shop has implemented the H5mag E-commerce API you have to connect your shopping magazine with your online shop. For this to work you will need to create your own custom area for your products.

After you create a product area you can add it to your magazine, just like any other area.

The product area displays the product name, image, price, variant selector and a buy button. You can modify and extend this by changing the HTML and CSS codes.

Creating a product template

1. After logging in go to H5mag Studio and click "Templates" (left side)
2. Click the button "Create template"
3. Enter "product" in the name, title and class fields.
4. Enter the following HTML code in the large text field:

<div class="blockwrapper awakable" data-productid="{{productID}}" data-awake="Product"
        data-region-id=".productid"
        data-region-title=".name"
        data-region-description=".description"
        data-region-variants=".variants"
        data-region-buy=".buy"
        data-region-price=".price"
        data-region-image=".product-image">
    <img class="product-image" alt="" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
    <div class="name"></div>
    <div class="productid"></div>
    <div class="description"></div>
    <div class="variants"></div>
    <div class="price"></div>
    <div class="buy"></div>
    <div class="clear"></div>
</div>

This HTML code displays the product area. The data-region-* attributes contain a CSS selector that maps the value from the JSON data source to the HTML node which matches the selector.

Styling

Although the product area is technically functional after adding the HTML code, it will not look very good. You can add styling by clicking the "Edit styles" button below the HTML input field.

For styling you can use plain CSS, here is an example of some default styles that you can use as basic functionality:

.area.product {
   width: auto;
}

   .area.product .product-image-block {
      display: block;
      position: relative;
      width: 40%;
      float: left;
   }

   .area.product .product-image {
      position: relative;
      max-width: 100%;
      width: auto;
      height: auto;
   }

   .area.product .info {
      float: left;
      width: 60%;
      padding-left: 20px;
   }

      .area.product .info .name {
         font-size: 24px;
      }

      .area.product .info .price {
         font-size: 18px;
         margin-bottom: 10px;
      }

      .area.product .info .description {
         font-size: 16px;
         margin-bottom: 10px;
      }

   .area.product .buy {
      background: #000 url(/static/img/shared/cart.png) 14px center no-repeat;
      padding-left: 48px;
      color: #FFF;
      padding: 10px 20px 10px 48px;
      margin: 10px 0;
      display: inline-block;
      text-decoration: none;
      cursor: pointer;
   }

/* styling specific for mobile devices */
.small-portrait .area.product .info,
.small-portrait .area.product .product-image-block {
   width: 100%;
   float: none;
}

.small-portrait .area.product .info {
   margin-top: 20px;
}