oc-mall

# Products

The Products component displays a list of products. The list can be sorted, filtered and paginated.

# Properties

# category (mixed)

Select only items from this Category. Possible values are:

Value Description
null Don't filter by category (display everything)
8 Only show products from the category with the ID 8 (use any integer)
:slug Use the page's :slug URL parameter to find the category to filter by

# filterComponent (string)

Alias of the ProductsFilter component that is used to filter this Products component. Defaults to productsFilter

# filter (string)

Use this property to force a filter for this component instance.

The expected value is a encoded query string. You can tweak your filter using the ProductsFilter component and simply copy and paste the query string:

https://mall.offline.swiss/en/category/bikes?on_sale=true&material=aluminium.carbon&color=dark-grey (opens new window)

filter = "on_sale=true&material=aluminium.carbon&color=dark-grey"
1

# includeChildren (bool)

Include all products or variants from child categories as well.

# setPageTitle (bool)

If a category is defined, overwrite the page's title with the category's name. Also set any SEO information stored with the category.

# includeVariants (bool)

Set this to true to list all Variants as single items. Set this to false to list only Products.

# perPage (int)

How many items to show per page.

# paginate (bool)

Display more than one page.

# sort (string)

The sort mode applied to the result set. Possible values are:

Value Description
manual Order defined via Backend
bestseller Best selling first
latest Latest products first
oldest Oldest products first
price_low Lowest price first
price_high Highest price first
random Sort randomly
name Sort by name

# Example implementations

# Display all items of a category

[products]
category = ":slug"
setPageTitle = 1
includeVariants = 1
includeChildren = 1
perPage = 9
1
2
3
4
5
6

# Display the four best selling products

[products]
perPage = 4
paginate = 0
includeVariants = 0
sort = "bestseller"
1
2
3
4
5

# Display the four latest items

[products]
perPage = 4
paginate = 0
includeVariants = 1
sort = "latest"
1
2
3
4
5

# Display eight random products that are currently on sale

[products]
perPage = 8
paginate = 0
includeVariants = 1
sort = "random"
filter = "on_sale=true"
1
2
3
4
5
6

# Display four random items from the same category of the currently viewed product

title = "Product"
url = "/product/:slug/:variant?"
layout = "default"
is_hidden = 0

[product]
product = ":slug"
variant = ":slug"

[products relatedProducts]
setPageTitle = 0
includeVariants = 1
includeChildren = 0
perPage = 4
paginate = 0
sort = "random"
==
use OFFLINE\Mall\Models\Category;

function onStart() {
    // Fetch the category from the product component.
    $productComponent = $this->findComponentByName('product');
    $item = optional($productComponent)->item;
    if (!$item) {
        return;
    }
    $category = optional($item->categories)->first();
    if (!$category) {
        return;
    }
    // If a category is available, use it for the products component.
    $this->findComponentByName('relatedProducts')->category = $category;
}
==
{% component 'product' %}

<h2>Other products from this category</h2>
{% component 'relatedProducts' %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# Add a add to cart button on the category page

Add the following a tag to your item partial /plugins/offline/components/products/item.htm

<div class="mall-products-item">

    <!-- Add this -->
    <a class="mall-products-item__cart-button"
       href="javascript:;"
       data-request="{{ __SELF__ }}::onAddToCart"
       data-request-success="data.added && $.publish('mall.cart.productAdded', data)" 
       data-request-data="product: '{{ item.productHashId }}', variant: '{{ item.variantHashId }}'"
       data-request-flash
    >
        Add to cart
    </a>
    <!-- /Add this -->
    
    <a href="{{ productPage|page({slug: item.slug, variant: item.variantId}) }}">
        <!-- Thumb, Title, etc. -->
    </a>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

← ProductsFilter →