Area and Widget

Polavi template system is all about Area and Widget. They are both React js component.

Important

Polavi application use es6 module and dynamic import. There is no webpack and bundled js file. If you are not familiar with es6 and dynamic import I suggest you check this document.

Widget

What is a Widget?

Technically, a Widget is a JS module which export a React component as a default export. A widget can be a text block, a banner or something more powerful like product filter.

This is an example of a widget:

function MainImage({src, alt}) {
return <div className="product-image">
<img src={src} alt={alt}/>
</div>
}
export default function Images({images, productName}) {
let mainImage = images.find(function(i) {
return i.isMain === true;
});
return <div className="uk-width-1-1">
{mainImage && <MainImage src={mainImage.main} alt={productName}/>}
<ul className="uk-thumbnav product-gallery">
{images.map((i,j) => {
return <li key={j}><a href={"#"}><img src={i.thumb} alt={productName}/></a></li>
})}
</ul>
</div>
}

When you have something and want to show it on the frontend, widget is what you need.

How to display a widget?

As we described, Widget is just a Javascript es6 module which exports a React component as default export. So in order to display it, we need to.