Provide instructions for Product listing rendering

You are reading about requirements for the integration done by the Luigi's Box team. You can safely skip this part of the documentation if you are integrating yourself using either API or Luigi's Box frontend libraries.

When integrating product listings, Luigi's Box needs to identify the products that it should render for the particular listing. Depending on your business requirements, you may need to provide explicit identification about which products Luigi's Box should load. Think about it as the "query", which selects the products and Luigi's Box AI provides ranking and personalization to sort them. Instead of textual "query" which is inherently absent in product listings, you will use "filers" to instruct Luigi's Box which products it should load. For example, you may want to say: for this listing, load all products from category id 2342.

Loading products by category/brand URL

In the simplest but most frequent case you will only want to integrate category and brand listings. In this case, you don't need to do anything special as long as:

  • You are indexing nested category/brand objects via API or provide separate category/brand feeds
  • You are providing URL for category/brand objects

In this case, the integration provided by Luigi's Box team can use the URL of the category/brand listing page to identify the products. For example, the user visits this URL:

https://example.com/c/men/shirts

The integration will use this URL and load all products which belong to a category with thiS URL. In more technical terms, the integration will load all products using filters f[]=nested_category_url:/c/men/shirts.

Explicit instructions for complex scenarios

For product listings where the loading filters are more complex and do not depend on the URL, you need to provide explicit loading instructions in form of a short Javascript code.

These loading instructions are represented as a Javascript object with keys representing attribute names and values representing attribute values. For example, to populate the listing with new products, identified by their label, you may use the following notation:

<script>
  window.LbxPlp = { labels: "new" }
</script>

A configuration like this will translate to an API filter f[]=labels:new

You may use combination of attributes and values, e.g., to load new products for "Men", use:

<script>
  window.LbxPlp = { labels: "new", gender: "male" }
</script>

Note that the attribute names must match your indexed data, so if you provide instructions for label, your indexed data must contain label attribute.