Merge pull request 'feature/shelf' (#2) from feature/shelf into development

Reviewed-on: #2

store/blocks/pdp/product.jsonc

@@ -6,6 +6,8 @@
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
       "tab-layout#product",
+      "list-context.product-list#shelf",
+      "newsletter",
       "product-questions-and-answers"
     ]
   },
@@ -218,5 +220,25 @@
     "props": {
       "tabId": "product2"
     }
+  },
+  "list-context.product-list#shelf": {
+    "blocks": ["product-summary.shelf#shelf"],
+    "children": ["slider-layout#shelf-products"]
+  },
+  "product-summary.shelf#shelf": {
+    "children": ["product-summary-image#shelf", "product-summary-price"]
+  },
+  "slider-layout#shelf-products": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 1,
+        "phone": 1
+      },
+      "infinite": true,
+      "showNavigationArrows": "desktopOnly",
+      "blockClass": "carousel"
+    },
+    "children": []
   }
 }

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

@@ -9,14 +9,10 @@
     ]
   },
   "responsive-layout.desktop#productSummaryList": {
-    "children": [
+    "children": ["flex-layout.row#summaryListDesktop"]
-      "flex-layout.row#summaryListDesktop"
-    ]
   },
   "responsive-layout.mobile#productSummaryList": {
-    "children": [
+    "children": ["flex-layout.row#summaryListMobile"]
-      "flex-layout.row#summaryListMobile"
-    ]
   },
   "product-price-savings#summaryPercentage": {
     "props": {
@@ -36,7 +32,7 @@
     ]
   },
   "flex-layout.row#summaryListDesktop": {
-    "props":{
+    "props": {
       "fullWidth": true,
       "colSizing": "auto",
       "blockClass": "summaryListDesktop"
@@ -69,9 +65,7 @@
     ]
   },
   "flex-layout.row#productSpecifications": {
-    "children": [
+    "children": ["product-specification-group#summary"]
-      "product-specification-group#summary"
-    ]
   },
   "product-summary-name#summaryListDesktop": {
     "props": {
@@ -100,18 +94,13 @@
       "colSizing": "auto",
       "colGap": 5
     },
-    "children": [
+    "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
-      "add-to-cart-button",
-      "flex-layout.row#buyNowButton"
-    ]
   },
   "flex-layout.row#buyNowButton": {
     "props": {
       "blockClass": "buyNowButton"
     },
-    "children": [
+    "children": ["add-to-cart-button#buyNow"]
-      "add-to-cart-button#buyNow"
-    ]
   },
 
   "add-to-cart-button#buyNow": {
@@ -123,10 +112,7 @@
     }
   },
   "flex-layout.col#priceSummaryListDesktop": {
-    "children": [
+    "children": ["product-selling-price#summary", "product-list-price#summary"]
-      "product-selling-price#summary",
-      "product-list-price#summary"
-    ]
   },
   "stack-layout#summaryListDesktop": {
     "children": [
@@ -144,7 +130,7 @@
     }
   },
   "flex-layout.row#summaryListMobile": {
-    "props":{
+    "props": {
       "preserveLayoutOnMobile": true,
       "colSizing": "auto",
       "blockClass": "summaryListMobile",

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

@@ -81,9 +81,7 @@
   },
   "product-price-savings#summary": {
     "props": {
-      "markers": [
+      "markers": ["discount"],
-        "discount"
-      ],
       "blockClass": "summary"
     }
   }

store/interfaces.json

@@ -6,7 +6,7 @@
     "component": "html",
     "composition": "children"
   },
-  "product-description-component": {
+  "product-payment-component": {
     "component": "ProductDescription"
   }
 }

styles/css/vtex.breadcrumb.css

@@ -13,4 +13,9 @@
 
 .homeLink::after {
   content: "Home";
+}
+
+.link--1 {
+  display: flex;
+  order: -1;
 }

styles/css/vtex.store-components.css

@@ -6,4 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
+/* Grid breakpoints */
+.productDescriptionContainer {
+  background: red;
+}

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -6,3 +6,7 @@
     content: "Home";
   }
 }
+.link--1 {
+  display: flex;
+  order: -1;
+}

styles/sass/pages/product/vtex.store-components.scss

@@ -0,0 +1,3 @@
+.productDescriptionContainer {
+  background: red;
+}