Merge pull request #240 from vtex-apps/feature/gallery-layout

Adding example of multiple search gallery layouts usage
vtex-apps · Jan 14, 2021 · 6768c1a · 6768c1a
2 parents 3517af4 + 5bad1e1
commit 6768c1a
Show file tree

Hide file tree

Showing 15 changed files with 481 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Example of multiple search gallery layouts usage
 
 ## [4.2.1] - 2020-12-14
 ### Fixed

diff --git a/manifest.json b/manifest.json
@@ -47,6 +47,7 @@
     "vtex.product-list": "0.x",
     "vtex.add-to-cart-button": "0.x",
     "vtex.product-bookmark-interfaces": "1.x",
+    "vtex.responsive-layout": "0.x",
     "vtex.slider-layout": "0.x",
     "vtex.store-image": "0.x",
     "vtex.store-icons": "0.x",

diff --git a/store/blocks/product-summary/product-specification-list.jsonc b/store/blocks/product-summary/product-specification-list.jsonc
@@ -0,0 +1,29 @@
+{
+  "product-specification-group#summary": {
+    "children": [
+      "product-specification#summary"
+    ]
+  },
+  "product-specification#summary": {
+    "children": [
+      "flex-layout.row#summarySpecificationValues"
+    ]
+  },
+  "flex-layout.row#summarySpecificationValues": {
+    "props": {
+      "preventHorizontalStretch": true,
+      "colGap": 3
+    },
+    "children": [
+      "rich-text#summarySpecificationBullet",
+      "product-specification-values"
+    ]
+  },
+  "rich-text#summarySpecificationBullet": {
+    "props": {
+      "text": "•",
+      "textColor": "c-action-primary",
+      "blockClass": "summarySpecificationBullet"
+    }
+  }
+}
diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc
@@ -0,0 +1,216 @@
+{
+  "product-summary.shelf#listLayout": {
+    "props": {
+      "blockClass": "listLayout"
+    },
+    "children": [
+      "responsive-layout.desktop#productSummaryList",
+      "responsive-layout.mobile#productSummaryList"
+    ]
+  },
+  "responsive-layout.desktop#productSummaryList": {
+    "children": [
+      "flex-layout.row#summaryListDesktop"
+    ]
+  },
+  "responsive-layout.mobile#productSummaryList": {
+    "children": [
+      "flex-layout.row#summaryListMobile"
+    ]
+  },
+  "product-price-savings#summaryPercentage": {
+    "props": {
+      "message": "{savingsPercentage}",
+      "blockClass": "summaryPercentage"
+    }
+  },
+  "flex-layout.row#savingsSummaryListDesktop": {
+    "props": {
+      "colSizing": "auto",
+      "colGap": 3,
+      "blockClass": "savingsSummaryListDesktop"
+    },
+    "children": [
+      "product-price-savings#summaryPercentage",
+      "product-price-savings#summary"
+    ]
+  },
+  "flex-layout.row#summaryListDesktop": {
+    "props":{
+      "fullWidth": true,
+      "colSizing": "auto",
+      "blockClass": "summaryListDesktop"
+    },
+    "children": [
+      "flex-layout.row#summaryLeftListDesktop",
+      "flex-layout.col#summaryRightListDesktop"
+    ]
+  },
+  "flex-layout.row#summaryLeftListDesktop": {
+    "props": {
+      "blockClass": "summaryLeftListDesktop",
+      "colSizing": "auto",
+      "colGap": 7
+    },
+    "children": [
+      "stack-layout#summaryListDesktop",
+      "flex-layout.col#summaryDetailsListDesktop"
+    ]
+  },
+  "flex-layout.col#summaryDetailsListDesktop": {
+    "props": {
+      "preventVerticalStretch": true
+    },
+    "children": [
+      "vtex.store-components:product-brand#summaryListDesktop",
+      "product-summary-name#summaryListDesktop",
+      "flex-layout.col#productRating",
+      "flex-layout.row#productSpecifications"
+    ]
+  },
+  "flex-layout.row#productSpecifications": {
+    "children": [
+      "product-specification-group#summary"
+    ]
+  },
+  "product-summary-name#summaryListDesktop": {
+    "props": {
+      "blockClass": "summaryListDesktop"
+    }
+  },
+  "vtex.store-components:product-brand#summaryListDesktop": {
+    "props": {
+      "displayMode": "text",
+      "blockClass": "summaryListDesktop"
+    }
+  },
+  "flex-layout.col#summaryRightListDesktop": {
+    "props": {
+      "blockClass": "summaryRightListDesktop",
+      "preventVerticalStretch": true
+    },
+    "children": [
+      "flex-layout.row#savingsSummaryListDesktop",
+      "flex-layout.col#priceSummaryListDesktop",
+      "flex-layout.row#buyButtonsSummaryListDesktop"
+    ]
+  },
+  "flex-layout.row#buyButtonsSummaryListDesktop": {
+    "props": {
+      "colSizing": "auto",
+      "colGap": 5
+    },
+    "children": [
+      "add-to-cart-button",
+      "flex-layout.row#buyNowButton"
+    ]
+  },
+  "flex-layout.row#buyNowButton": {
+    "props": {
+      "blockClass": "buyNowButton"
+    },
+    "children": [
+      "add-to-cart-button#buyNow"
+    ]
+  },
+
+  "add-to-cart-button#buyNow": {
+    "props": {
+      "text": "BUY NOW",
+      "isOneClickBuy": true,
+      "onClickEventPropagation": "enabled",
+      "blockClass": "buyNow"
+    }
+  },
+  "flex-layout.col#priceSummaryListDesktop": {
+    "children": [
+      "product-selling-price#summary",
+      "product-list-price#summary"
+    ]
+  },
+  "stack-layout#summaryListDesktop": {
+    "children": [
+      "product-summary-image#summaryListDesktop",
+      "vtex.product-highlights@2.x:product-highlights#collection",
+      "modal-trigger#quickview" // Check quickview.jsonc
+    ]
+  },
+  "product-summary-image#summaryListDesktop": {
+    "props": {
+      "showBadge": false,
+      "aspectRatio": "1:1",
+      "maxHeight": 180,
+      "blockClass": "summaryListDesktop"
+    }
+  },
+  "flex-layout.row#summaryListMobile": {
+    "props":{
+      "preserveLayoutOnMobile": true,
+      "colSizing": "auto",
+      "blockClass": "summaryListMobile",
+      "colGap": 5
+    },
+    "children": [
+      "stack-layout#summaryListMobile",
+      "flex-layout.col#summaryDetailsListMobile"
+    ]
+  },
+  "stack-layout#summaryListMobile": {
+    "children": [
+      "product-summary-image#summaryListMobile",
+      "vtex.product-highlights@2.x:product-highlights#collection",
+      "modal-trigger#quickview" // Check quickview.jsonc
+    ]
+  },
+  "product-summary-image#summaryListMobile": {
+    "props": {
+      "showBadge": false,
+      "aspectRatio": "1:1",
+      "maxHeight": 220,
+      "blockClass": "summaryListMobile"
+    }
+  },
+  "flex-layout.col#summaryDetailsListMobile": {
+    "props": {
+      "preventVerticalStretch": true,
+      "width": "grow",
+      "blockClass": "summaryDetailsListMobile"
+    },
+    "children": [
+      "flex-layout.col#summaryUpDetailsListMobile",
+      "flex-layout.col#summaryDownDetailsListMobile"
+    ]
+  },
+  "flex-layout.col#summaryUpDetailsListMobile": {
+    "props": {
+      "preventVerticalStretch": true,
+      "blockClass": "summaryUpDetailsListMobile"
+    },
+    "children": [
+      "vtex.store-components:product-brand#summaryListMobile",
+      "product-summary-name#summaryListMobile",
+      "product-rating-inline"
+    ]
+  },
+  "flex-layout.col#summaryDownDetailsListMobile": {
+    "props": {
+      "preventVerticalStretch": true
+    },
+    "children": [
+      "product-selling-price#summary",
+      "product-installments#summary"
+    ]
+  },
+  "vtex.store-components:product-brand#summaryListMobile": {
+    "props": {
+      "displayMode": "text",
+      "blockClass": "summaryListMobile"
+    }
+  },
+  "product-summary-name#summaryListMobile": {
+    "props": {
+      "tag": "div",
+      "blockClass": "summaryListMobile"
+    }
+  }
+}
diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc
@@ -3,14 +3,20 @@
     "children": [
       "stack-layout#prodsum",
       "product-summary-name",
-      "product-rating-inline",
+      "flex-layout.col#productRating",
       "product-summary-space",
       "product-list-price#summary",
       "flex-layout.row#selling-price-savings",
       "product-installments#summary",
       "add-to-cart-button"
     ]
   },
+  "flex-layout.col#productRating": {
+    "props": {
+      "blockClass": "productRating"
+    },
+    "children": ["product-rating-inline"]
+  },
 
   "stack-layout#prodsum": {
     "children": [