Item variations
On this page
Suppose you’re selling products with variations, such as t-shirts in different colors or smartphones with different memory capacities (and costs). Arranging your inventory data without ending up with duplicates can be tricky.
For example, say your website sells t-shirts and sweatshirts in many designs and colors. The simplest solution is to have one entry for each design and list the possible color variants. This will, however, cause a problem when someone searches for a “red t-shirt” - the engine will display all colors of your t-shirt designs (that have a red variation).
To avoid this confusion, make sure that searches for “red t-shirt” only display the red version of any shirt (while still finding a way to show all variants).
Dataset example
In the inventory, you have two t-shirt designs (A and B) and two designs of sweatshirts (C and D). Each design comes in several colors.
In your dataset, you can represent them by creating one record for each color variant of each item. Each record specifies the type, the design, the color, and the associated thumbnail. Here’s what your records look like:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
{
"type": "t-shirt",
"design": "B",
"color": "blue",
"thumbnail_url": "tshirt-B-blue.png"
},
{
"type": "sweatshirt",
"design": "C",
"color": "red",
"thumbnail_url": "sweatshirt-C-red.png"
},
]
Going further, you could add all the possible color variations for each record. This way, you could display all the variants for a single product in your frontend (for example, color swatches under the thumbnail), allowing the end user to discover them.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[
{
"type": "t-shirt",
"design": "B",
"color": "blue",
"thumbnail_url": "tshirt-B-blue.png",
"color_variants": ["orange", "teal", "yellow", "red", "green"]
},
{
"type": "t-shirt",
"design": "B",
"color": "orange",
"thumbnail_url": "tshirt-B-orange.png",
"color_variants": ["blue", "teal", "yellow", "red", "green"]
},
]
With this approach, every record represents a single variation, which ensures always displaying consistent data. One record per variation lets you add granular custom ranking attributes, like number_of_sales. Besides, you can use Algolia’s distinct feature to deduplicate designs. This way, when someone searches for “t-shirt”, they only get one of each design.
Using the API
At indexing time
Before deduplicating items, restrict what attributes are searchable. You don’t want to search into thumbnail_url, which may be irrelevant and add noise, nor into color_variants, because it could lead to false positives. Therefore, you can set design, type, and color as searchableAttributes.
1
2
3
4
5
6
7
$index->setSettings([
'searchableAttributes' => [
"design",
"type",
"color"
]
]);
To use distinct, you first need to set design as attributeForDistinct during indexing time. Only then can you set distinct to true to deduplicate your results.
Note that setting distinct at indexing time is optional. If you want to, you can set it at query time instead.
1
2
3
4
$index->setSettings([
'attributeForDistinct' => 'design',
'distinct' => true
]);
At query time
Once attributeForDistinct is set, you can enable distinct by setting it to true.
You can set distinct to true or 1 interchangeably.
1
2
3
$results = $index->search('query', [
'distinct' => true
]);
Using the dashboard
You can also set your attribute for distinct and enable distinct in your Algolia dashboard.
- Go to your dashboard, then go to the Search product and select your index.
- Click on the Configuration tab.
- In the Searchable Attributes section, click the “Add a searchable attribute” button.
- Select the
design,type, andcolorattributes in the drop-down menu one after another. - Click the Deduplication and Grouping tab, which you can find under Search behavior.
- Set the Distinct option to
true. - Set the Attribute for Distinct option to
design. - Save your changes.
When distinct is true, you get one color for each design. To control which one, you can set a new attribute with business metrics, for example, number_of_sales, and set it up for custom ranking.
Additionally, you can display all available colors for each item thanks to the color_variants attribute. This way, the end user can access all possible variants from the search results without the page being crowded with too many items.
