Custom template

You can create your own template to customize how products are rendered in the widget.

The template file must be a Javascript module that registers a Lit custom element with the pleasepoint-product tag.

The element will receive the product property with the product data and should dispatch the registerevent custom event to track the user interactions with the product.

The custom template must be registered before inserting the SDK script, so that the SDK can use it to render the products.

Example template

You can use this example template as a base to create a custom template for your widget.

<script type="module">
import {LitElement, html, css} from 'https://cdn.jsdelivr.net/gh/lit/dist/core/lit-core.min.js';

class PleasepointProduct extends LitElement {
    static properties = {
        product: {type: Object}
    };

    static styles = css`
      :host {
        display: block;
        width: 100%;
        padding: 40px 25px;
        transition: margin 0.5s ease;
        box-sizing: border-box;
      }
      .product_container {
        background: #fafafa;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 10px 10px 10px rgba(140, 152, 164, 0.175);
        transition: transform 0.25s;
      }
      .product_container:hover {
        transform: scale(1.05);
      }
      img {
        display: block;
        width: 100%;
        background: #f2f2f2;
        border-radius: 12px;
        margin-bottom: 10px;
      }
      a {
        display: block;
        text-decoration: none;
        color: #111;
      }
      b {
        display: block;
        font-size: 16px;
        word-break: break-word;
      }
      span {
        color: #718096;
        font-size: 14px;
      }
    `;

    _productClick(ev) {
        this._registerEvent('click');
    }

    _registerEvent(eventType) {
        const options = {
            detail: {
                productReferenceId: this.product.reference_id,
                recommendationId: this.product.recommendationId,
                eventType
            },
            bubbles: true,
            composed: true,
        };
        this.dispatchEvent(new CustomEvent('registerevent', options));
    }

    render() {
        return html`
            <div class="product_container">
                <a href="${this.product.url}" @click=${this._productClick}>
                    <img src="${this.product.image_url}" alt="" loading="lazy">
                    <b>${this.product.name}</b>
                    <span>${this.product.price}</span>
                </a>
            </div>
        `;
    }
}
customElements.define('pleasepoint-product', PleasepointProduct);
</script>