Skip to content


Andrey Kharanenka edited this page Nov 19, 2018 · 10 revisions

ProductPage component

The component allows to work with ProductItem class objects.

The ProductPage class is extended from ElementPage class.

Usage example:

slug = "{{ :slug }}"

{# Get product item #}
{% set obProduct = ProductPage.get() %}
<div data-id="{{ }}">
    <h1>{{ }}</h1>
    {% if obProduct.preview_image is not empty %}
        <img src="{{ obProduct.preview_image.path }}" title="{{ obProduct.preview_image.title }}" alt="{{ obProduct.preview_image.description }}">
    {% endif %}
    <span>Category: {{ }}</span>
    <span>Brand: {{ }}</span>
    {% set obOffer = obProduct.offer.first() %}
    {% if obOffer.isNotEmpty()%}  
        <span>Price: {{ obOffer.price }} {{ obOffer.currency }}</span>
    {% endif %}
    <div>{{ obProduct.description|raw }}</div>

"Smart URL check" adds additional URL validation. For example:

  • Product page URL = "/women/jeans-women/floral-embroidered-skinny-high-waisted-blue-9"
  • Go to URL = "/men/jeans-women/floral-embroidered-skinny-high-waisted-blue-9"
  • With enabled "Smart URL check" component ProductPage returns 404 page, with disabled "Smart URL check" component ProductPage returns product page.

"Smart URL check" works only when you have components on page correctly connected and ProductItem::getPageUrl method returns the correct URL to the product page.

Plugin extension "Compare for shopaholic"

Compare for Shopaholic plugin adds methods:


Methods adds product to compare

$.request('ProductPage::onAddToCompare', {
    data: {'product_id': 10}


Methods removes product from compare

$.request('ProductPage::onRemoveFromCompare', {
    data: {'product_id': 10}


Methods clears the list of products added to the compare


Plugin extension "Viewed products for shopaholic"

Viewed products for Shopaholic plugin adds method:


Methods removes product from viewed products list

$.request('ProductData::onRemoveFromViewedProductList', {
    data: {'product_id': 10}


Methods clears the list of viewed products


Plugin extension "Wish list for shopaholic"

Wish list for Shopaholic plugin adds methods:


Methods adds product to wish list

$.request('ProductData::onAddToWishList', {
    data: {'product_id': 10}


Methods removes product from wish list

$.request('ProductData::onRemoveFromWishList', {
    data: {'product_id': 10}


Methods clears the list of products added to the wish list

Clone this wiki locally
You can’t perform that action at this time.