Skip to content

Commit 7bed151

Browse files
author
Ícaro
committed
Adding example of multiple search gallery layouts usage
1 parent 66f42c2 commit 7bed151

13 files changed

+483
-24
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
66
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
77

88
## [Unreleased]
9+
### Added
10+
- Example of multiple search gallery layouts usage
911

1012
## [4.0.0] - 2020-10-30
1113
### Added

‎manifest.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
"vtex.product-list": "0.x",
4848
"vtex.add-to-cart-button": "0.x",
4949
"vtex.product-bookmark-interfaces": "1.x",
50+
"vtex.responsive-layout": "0.x",
5051
"vtex.slider-layout": "0.x",
5152
"vtex.store-image": "0.x",
5253
"vtex.store-icons": "0.x",

‎store/blocks/pdp/product-specifications-table.jsonc renamed to ‎store/blocks/pdp/product-specifications.jsonc

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,5 +79,32 @@
7979
"props": {
8080
"message": "{specificationValue}"
8181
}
82+
},
83+
"product-specification-group#summary": {
84+
"children": [
85+
"product-specification#summary"
86+
]
87+
},
88+
"product-specification#summary": {
89+
"children": [
90+
"flex-layout.row#summarySpecificationValues"
91+
]
92+
},
93+
"flex-layout.row#summarySpecificationValues": {
94+
"props": {
95+
"preventHorizontalStretch": true,
96+
"colGap": 3
97+
},
98+
"children": [
99+
"rich-text#summarySpecificationBullet",
100+
"product-specification-values"
101+
]
102+
},
103+
"rich-text#summarySpecificationBullet": {
104+
"props": {
105+
"text": "•",
106+
"textColor": "c-action-primary",
107+
"blockClass": "summarySpecificationBullet"
108+
}
82109
}
83110
}

‎store/blocks/product-summary/product-summary-list.jsonc

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
{
2+
"product-summary.shelf#listLayout": {
3+
"props": {
4+
"blockClass": "listLayout"
5+
},
6+
"children": [
7+
"responsive-layout.desktop#productSummaryList",
8+
"responsive-layout.mobile#productSummaryList"
9+
]
10+
},
11+
"responsive-layout.desktop#productSummaryList": {
12+
"children": [
13+
"flex-layout.row#summaryListDesktop"
14+
]
15+
},
16+
"responsive-layout.mobile#productSummaryList": {
17+
"children": [
18+
"flex-layout.row#summaryListMobile"
19+
]
20+
},
21+
"product-price-savings#summaryPercentage": {
22+
"props": {
23+
"message": "{savingsPercentage}",
24+
"blockClass": "summaryPercentage"
25+
}
26+
},
27+
"flex-layout.row#savingsSummaryListDesktop": {
28+
"props": {
29+
"colSizing": "auto",
30+
"colGap": 3,
31+
"blockClass": "savingsSummaryListDesktop"
32+
},
33+
"children": [
34+
"product-price-savings#summaryPercentage",
35+
"product-price-savings#summary"
36+
]
37+
},
38+
"flex-layout.row#summaryListDesktop": {
39+
"props":{
40+
"fullWidth": true,
41+
"colSizing": "auto",
42+
"blockClass": "summaryListDesktop"
43+
},
44+
"children": [
45+
"flex-layout.row#summaryLeftListDesktop",
46+
"flex-layout.col#summaryRightListDesktop"
47+
]
48+
},
49+
"flex-layout.row#summaryLeftListDesktop": {
50+
"props": {
51+
"blockClass": "summaryLeftListDesktop",
52+
"colSizing": "auto",
53+
"colGap": 7
54+
},
55+
"children": [
56+
"stack-layout#summaryListDesktop",
57+
"flex-layout.col#summaryDetailsListDesktop"
58+
]
59+
},
60+
"flex-layout.col#summaryDetailsListDesktop": {
61+
"props": {
62+
"preventVerticalStretch": true
63+
},
64+
"children": [
65+
"vtex.store-components:product-brand#summaryListDesktop",
66+
"product-summary-name#summaryListDesktop",
67+
"flex-layout.col#productRating",
68+
"flex-layout.row#productSpecifications"
69+
]
70+
},
71+
"flex-layout.row#productSpecifications": {
72+
"children": [
73+
"product-specification-group#summary"
74+
]
75+
},
76+
"product-summary-name#summaryListDesktop": {
77+
"props": {
78+
"blockClass": "summaryListDesktop"
79+
}
80+
},
81+
"vtex.store-components:product-brand#summaryListDesktop": {
82+
"props": {
83+
"displayMode": "text",
84+
"blockClass": "summaryListDesktop"
85+
}
86+
},
87+
"flex-layout.col#summaryRightListDesktop": {
88+
"props": {
89+
"blockClass": "summaryRightListDesktop",
90+
"preventVerticalStretch": true
91+
},
92+
"children": [
93+
"flex-layout.row#savingsSummaryListDesktop",
94+
"flex-layout.col#priceSummaryListDesktop",
95+
"flex-layout.row#buyButtonsSummaryListDesktop"
96+
]
97+
},
98+
"flex-layout.row#buyButtonsSummaryListDesktop": {
99+
"props": {
100+
"colSizing": "auto",
101+
"colGap": 5
102+
},
103+
"children": [
104+
"add-to-cart-button",
105+
"flex-layout.row#buyNowButton"
106+
]
107+
},
108+
"flex-layout.row#buyNowButton": {
109+
"props": {
110+
"blockClass": "buyNowButton"
111+
},
112+
"children": [
113+
"add-to-cart-button#buyNow"
114+
]
115+
},
116+
117+
"add-to-cart-button#buyNow": {
118+
"props": {
119+
"text": "BUY NOW",
120+
"isOneClickBuy": true,
121+
"onClickEventPropagation": "enabled",
122+
"blockClass": "buyNow"
123+
}
124+
},
125+
"flex-layout.col#priceSummaryListDesktop": {
126+
"children": [
127+
"product-selling-price#summary",
128+
"product-list-price#summary"
129+
]
130+
},
131+
"stack-layout#summaryListDesktop": {
132+
"children": [
133+
"product-summary-image#summaryListDesktop",
134+
"vtex.product-highlights@2.x:product-highlights#collection",
135+
"modal-trigger#quickview" // Check quickview.jsonc
136+
]
137+
},
138+
"product-summary-image#summaryListDesktop": {
139+
"props": {
140+
"showBadge": false,
141+
"aspectRatio": "1:1",
142+
"maxHeight": 180,
143+
"blockClass": "summaryListDesktop"
144+
}
145+
},
146+
"flex-layout.row#summaryListMobile": {
147+
"props":{
148+
"preserveLayoutOnMobile": true,
149+
"colSizing": "auto",
150+
"blockClass": "summaryListMobile",
151+
"colGap": 5
152+
},
153+
"children": [
154+
"stack-layout#summaryListMobile",
155+
"flex-layout.col#summaryDetailsListMobile"
156+
]
157+
},
158+
"stack-layout#summaryListMobile": {
159+
"children": [
160+
"product-summary-image#summaryListMobile",
161+
"vtex.product-highlights@2.x:product-highlights#collection",
162+
"modal-trigger#quickview" // Check quickview.jsonc
163+
]
164+
},
165+
"product-summary-image#summaryListMobile": {
166+
"props": {
167+
"showBadge": false,
168+
"aspectRatio": "1:1",
169+
"maxHeight": 220,
170+
"blockClass": "summaryListMobile"
171+
}
172+
},
173+
"flex-layout.col#summaryDetailsListMobile": {
174+
"props": {
175+
"preventVerticalStretch": true,
176+
"width": "grow",
177+
"blockClass": "summaryDetailsListMobile"
178+
},
179+
"children": [
180+
"flex-layout.col#summaryUpDetailsListMobile",
181+
"flex-layout.col#summaryDownDetailsListMobile"
182+
]
183+
},
184+
"flex-layout.col#summaryUpDetailsListMobile": {
185+
"props": {
186+
"preventVerticalStretch": true,
187+
"blockClass": "summaryUpDetailsListMobile"
188+
},
189+
"children": [
190+
"vtex.store-components:product-brand#summaryListMobile",
191+
"product-summary-name#summaryListMobile",
192+
"product-rating-inline"
193+
]
194+
},
195+
"flex-layout.col#summaryDownDetailsListMobile": {
196+
"props": {
197+
"preventVerticalStretch": true
198+
},
199+
"children": [
200+
"product-selling-price#summary",
201+
"product-installments#summary"
202+
]
203+
},
204+
"vtex.store-components:product-brand#summaryListMobile": {
205+
"props": {
206+
"displayMode": "text",
207+
"blockClass": "summaryListMobile"
208+
}
209+
},
210+
"product-summary-name#summaryListMobile": {
211+
"props": {
212+
"tag": "div",
213+
"blockClass": "summaryListMobile"
214+
}
215+
}
216+
}

‎store/blocks/product-summary/product-summary.jsonc

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,20 @@
33
"children": [
44
"stack-layout#prodsum",
55
"product-summary-name",
6-
"product-rating-inline",
6+
"flex-layout.col#productRating",
77
"product-summary-space",
88
"product-list-price#summary",
99
"flex-layout.row#selling-price-savings",
1010
"product-installments#summary",
1111
"add-to-cart-button"
1212
]
1313
},
14+
"flex-layout.col#productRating": {
15+
"props": {
16+
"blockClass": "productRating"
17+
},
18+
"children": ["product-rating-inline"]
19+
},
1420

1521
"stack-layout#prodsum": {
1622
"children": [

0 commit comments

Comments
 (0)