You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* A [result template](https://docs.coveo.com/en/atomic/latest/usage/displaying-results#defining-a-result-template) determines the format of the query results, depending on the conditions that are defined for each template.
2104
-
* @MapProp name: mustMatch;attr: must-match;docs: The field and values that define which result items the condition must be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
2105
-
* @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that define which result items the condition must not be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
2106
-
*/
2107
-
interfaceAtomicResultTemplate{
2108
-
/**
2109
-
* A function that must return true on results for the result template to apply. Set programmatically before initialization, not via attribute. For example, the following targets a template and sets a condition to make it apply only to results whose `title` contains `singapore`: `document.querySelector('#target-template').conditions = [(result) => /singapore/i.test(result.title)];`
2110
-
*/
2111
-
"conditions": ResultTemplateCondition[];
2112
-
/**
2113
-
* Gets the appropriate result template based on conditions applied.
* A [result template](https://docs.coveo.com/en/atomic/latest/usage/displaying-results#defining-a-result-template) determines the format of the query results, depending on the conditions that are defined for each template.
3633
-
* @MapProp name: mustMatch;attr: must-match;docs: The field and values that define which result items the condition must be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
3634
-
* @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that define which result items the condition must not be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
* A [result template](https://docs.coveo.com/en/atomic/latest/usage/displaying-results#defining-a-result-template) determines the format of the query results, depending on the conditions that are defined for each template.
6077
-
* @MapProp name: mustMatch;attr: must-match;docs: The field and values that define which result items the condition must be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
6078
-
* @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that define which result items the condition must not be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
6079
-
*/
6080
-
interfaceAtomicResultTemplate{
6081
-
/**
6082
-
* A function that must return true on results for the result template to apply. Set programmatically before initialization, not via attribute. For example, the following targets a template and sets a condition to make it apply only to results whose `title` contains `singapore`: `document.querySelector('#target-template').conditions = [(result) => /singapore/i.test(result.title)];`
6083
-
*/
6084
-
"conditions"?: ResultTemplateCondition[];
6085
-
/**
6086
-
* Verifies whether the specified fields match the specified values.
6087
-
* @type {Record<string, string[]>}
6088
-
*/
6089
-
"mustMatch"?: Record<
6090
-
string,
6091
-
string[]
6092
-
>;
6093
-
/**
6094
-
* Verifies whether the specified fields do not match the specified values.
6095
-
* @type {Record<string, string[]>}
6096
-
*/
6097
-
"mustNotMatch"?: Record<
6098
-
string,
6099
-
string[]
6100
-
>;
6101
-
}
6102
6032
/**
6103
6033
* The `atomic-result-text` component renders the value of a string result field.
* A [result template](https://docs.coveo.com/en/atomic/latest/usage/displaying-results#defining-a-result-template) determines the format of the query results, depending on the conditions that are defined for each template.
7068
-
* @MapProp name: mustMatch;attr: must-match;docs: The field and values that define which result items the condition must be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
7069
-
* @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that define which result items the condition must not be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
Copy file name to clipboardExpand all lines: packages/atomic/src/components/commerce/atomic-product-template/atomic-product-template.mdx
+107-1Lines changed: 107 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,8 @@ import { AtomicDocTemplate } from '../../../../storybook-utils/documentation/ato
14
14
>
15
15
16
16
This component defines the UI display of your products.
17
-
It can be used inside `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-search-box-instant-products`, and it must have a `<template>` as its child.
17
+
A `template` element must be the child of an `atomic-product-template`. Furthermore, an `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-commerce-search-box-instant-products` must be the parent of each `atomic-product-template`.
18
+
***Note:** Any `<script>` tags that are defined inside a `<template>` element will not be executed when the products are being rendered.
18
19
19
20
Example using the `atomic-commerce-product-list`:
20
21
```html
@@ -53,5 +54,110 @@ Example using the `atomic-commerce-product-list`:
53
54
</atomic-commerce-product-list>
54
55
```
55
56
57
+
## Template Conditions
58
+
59
+
You can use conditions to display different templates based on product properties. You can specify as many `must-match-*` and `must-not-match-*` attributes as you want on a template, each targeting a different field. Each attribute can accept multiple comma-separated values.
60
+
61
+
**Comma represents OR:** Within a single attribute, comma-separated values represent a logical OR. For example, `must-match-ec_brand="Nike,Adidas"` means the brand must be Nike OR Adidas.
62
+
63
+
**Multiple attributes represent AND:** All conditions from different attributes must be met (logical AND) for the template to apply to a product.
64
+
65
+
If you set both `must-match-*` and `must-not-match-*` for the same field and there is any overlap in values, the template will be ignored (it will never match any product).
66
+
67
+
**Order of declaration matters:** The first template whose conditions are met will be applied. If a default template (without conditions) is declared first, it will apply to all products, even if other templates with conditions are declared later.
68
+
69
+
**Examples:**
70
+
71
+
```html
72
+
<!-- Template applies if brand is Nike or Adidas, and product is in stock -->
73
+
<atomic-product-template
74
+
must-match-ec_brand="Nike,Adidas"
75
+
must-match-ec_in_stock="true"
76
+
>
77
+
<template>
78
+
<!-- ... -->
79
+
</template>
80
+
</atomic-product-template>
81
+
82
+
<!-- This template will never apply, because the same value is required and forbidden -->
* * A product template determines the format of the products, depending on the conditions that are defined for each template.
17
+
* A product template determines the format of the products, depending on the conditions that are defined for each template.
18
18
*
19
-
* A `template` element must be the child of an `atomic-product-template`. Furthermore, an `atomic-commerce-product-list`, `atomic-commerce-recommendation-list`, or `atomic-commerce-search-box-instant-products` must be the parent of each `atomic-product-template`.
20
-
*
21
-
* **Note:** Any `<script>` tags that are defined inside a `<template>` element will not be executed when the products are being rendered.
22
19
* @MapProp name: mustMatch;attr: must-match;docs: The field and values that must be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is `lithiummessage` or `YouTubePlaylist`: `must-match-filetype="lithiummessage,YouTubePlaylist"`;type: Record<string, string[]> ;default: {}
23
20
* @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that must not be matched by a product item for the template to apply. For example, a template with the following attribute only applies to product items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
24
21
* @slot default - The default slot where to insert the template element.
![developer-experience-bot[bot]](https://avatars.githubusercontent.com/in/139346?v=4&size=40){kind=avatar}
0 commit comments