feat: ajustes na prateleira de produtos, ajustes na newsletter, começando a estilizar o produto individual

manifest.json

@@ -15,7 +15,6 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
-    "agenciamagma.store-theme": "5.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",

store/blocks/pdp/product.jsonc

@@ -13,7 +13,7 @@
       // "list-context.product-list",
       // "slider-layout",
       // "shelf.relatedProducts",
-      "newsletter",
+      "newsletter#footer",
       "product-questions-and-answers"
     ]
   },
@@ -85,7 +85,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "45%",
       "rowGap": 0
     }
   },
@@ -98,9 +98,15 @@
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "thumbnailsOrientation": "horizontal",
+      "showNavigationArrows": false,
+      "showPaginationDots": false,
+      "displayThumbnailsArrows": false,
+      "blockClass": "produto-carrossel"
     }
   },
+
+
   "flex-layout.col#right-col": {
     "props": {
       "preventVerticalStretch": true,
@@ -108,12 +114,12 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-rating-summary",
+      // "product-rating-summary",
-      "flex-layout.row#list-price-savings",
+
+      // "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-separator",
+      // "product-separator",
-      "product-identifier.product",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",
@@ -127,9 +133,10 @@
 
   "flex-layout.row#product-name": {
     "props": {
-      "marginBottom": 3
+      "marginBottom": 3,
+      "blockClass": "identifier"
     },
-    "children": ["vtex.store-components:product-name"]
+    "children": ["vtex.store-components:product-name", "product-identifier.product"]
   },
 
   "sku-selector": {
@@ -319,14 +326,6 @@
 
 
 
-
-
-
-
-
-
-
-
   "list-context.product-list#carousel-list": {
     "blocks": ["product-summary.shelf#carousel-shelf"],
     "children": ["slider-layout#carousel"]
@@ -352,8 +351,15 @@
       "showNavigationArrows": "desktopOnly",
       "blockClass": "carousel"
     }
+  },
+
+
+  "newsletter#footer": {
+    "props": {
+      "label": "Assine nossa newsletter",
+      "placeholder": "Digite seu e-mail"
+    }
   }
 
 
-
 }

styles/css/vtex.flex-layout.css

@@ -1,98 +1,18 @@
-.flexRowContent--menu-link,
+/*
-.flexRowContent--main-header {
+0 - 600PX: Phone
-  padding: 0 0.5rem;
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.stretchChildrenWidth {
+  padding: 0;
 }
 
-@media screen and (min-width: 40em) {
+.flexRowContent--identifier {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 1rem;
-  }
-}
-
-@media screen and (min-width: 80rem) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
-  }
-}
-
-.flexRowContent--menu-link {
-  background-color: #03044e;
-  color: #fff;
-}
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.flexCol--filterCol {
-  max-width: 500px;
-  min-width: 230px;
-}
-
-.flexCol--productCountCol {
-  align-items: flex-start;
-}
-
-.flexCol--orderByCol {
-  align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
-  width: 42%;
-}
-
-.flexCol--filterMobileCol {
-  width: 38%;
-}
-
-.flexRow--quickviewMainRow {
   display: flex;
-  max-height: 100%;
+  flex-direction: column;
-}
+  align-items: end;
-
+}
-.flexColChild--quickviewDetails:first-child {
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
-}

styles/css/vtex.product-identifier.css

@@ -1,3 +1,12 @@
-.product-identifier--productReference {
+/*
-  margin-bottom: 1rem;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.product-identifier {
+  text-align: end;
+}

styles/css/vtex.product-sumary.css

@@ -7,10 +7,7 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.html {
+.element {
-  background-color: red;
+  align-items: center;
-}
+  text-align: center;
-
-.html--pdp-breadcrumb {
-  background-color: green;
 }

styles/css/vtex.product-summary.css

@@ -1,42 +1,17 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
+/*
-  border-radius: 50%;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
+[1200 - 1800] is where our nortal styles apply
-  opacity: 0;
+1800px + : Big desktop
-  transition: opacity 200ms ease-in-out;
+*/
-}
+/* Media Query M3 */
-
+/* Grid breakpoints */
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
+.element {
-  opacity: 1;
+  align-items: center;
-}
-
-@media screen and (max-width: 40em) {
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
-    display: none;
-  }
-}
-
-.nameContainer {
-  justify-content: start;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.brandName {
-  font-weight: 600;
-  font-size: 18px;
-  color: #2E2E2E;
-}
-
-.container {
-  text-align: start;
-}
-
-.imageContainer {
   text-align: center;
 }
 
-.image {
+.imageContainer {
-  border-radius: 0.25rem;
+  height: 60%;
-}
+}

styles/css/vtex.slider-layout.css

@@ -1,31 +1,30 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.slideChildrenContainer {
+  text-align: center;
+  margin-bottom: 67px;
+}
+
 .sliderLayoutContainer {
-  justify-content: center;
+  padding: 0 40px;
 }
 
-.sliderLayoutContainer--carousel {
+.slide {
-  background-color: #F0F0F0;
+  background-color: #FFFFFF;
-  min-height: 450px;
 }
 
-.sliderTrackContainer {
+.paginationDot {
-  max-width: 100%;
+  background-color: #000000;
 }
 
-.paginationDotsContainer {
+.paginationDot--carousel--isActive {
-  margin-top: .5rem;
+  background-color: #Fff;
-  margin-bottom: .5rem;
+  border: 0.5px solid #000000;
-}
+}
-
-.layoutContainer--shelf {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  max-width: 96rem;
-  min-height: 550px;
-}
-
-.slide--shelf {
-  margin-bottom: 25px;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  min-height: 550px;
-}

styles/css/vtex.store-components.css

@@ -7,19 +7,34 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.container {
+  padding: 0 40px;
+}
+
+.productNameContainer {
+  text-align: end;
+}
+
 .productDescriptionContainer {
   width: 43.89%;
 }
 
 .productImagesContainer {
   width: 43.89%;
-  margin-right: 32px;
 }
 
 .productImage {
   display: flex;
 }
 
+.produto-carrossel .swiper-wrapper {
+  gap: 16px;
+}
+
+.discountInsideContainer {
+  display: none;
+}
+
 .newsletter {
   color: #FFFFFF;
   background: #000000;

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -1,8 +0,0 @@
-.html {
-  background-color: red;
-}
-
-.html--pdp-breadcrumb {
-  background-color: green;
-}
-

styles/sass/pages/product/vtex.flex-layout.scss

@@ -0,0 +1,13 @@
+
+.stretchChildrenWidth{
+  padding: 0;
+}
+
+
+.flexRowContent--identifier{
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+
+}
+

styles/sass/pages/product/vtex.product-summary.scss

@@ -0,0 +1,10 @@
+
+.element{
+  align-items: center;
+  text-align: center;
+}
+
+.imageContainer{
+  height: 60%;
+}
+

styles/sass/pages/product/vtex.slider-layout.scss

@@ -0,0 +1,24 @@
+
+.slideChildrenContainer{
+  text-align: center;
+  margin-bottom: 67px;
+}
+
+.sliderLayoutContainer{
+  padding: 0 40px;
+}
+
+.slide{
+  background-color: #FFFFFF;
+}
+
+.paginationDot{
+  background-color: #000000;
+}
+
+.paginationDot--carousel--isActive{
+  background-color: #Fff;
+  border: 0.5px solid #000000;
+}
+
+

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

@@ -1,17 +1,34 @@
 
+.container {
+  padding: 0 40px;
+}
+
+.productNameContainer{
+  text-align: end;
+}
+
 .productDescriptionContainer{
   width: 43.89%;
 }
 
 .productImagesContainer{
   width: 43.89%;
-  margin-right: 32px;
 }
 
 .productImage{
   display: flex;
 }
 
+.produto-carrossel{
+  .swiper-wrapper{
+    gap: 16px
+  }
+}
+
+
+.discountInsideContainer{
+  display: none;
+}
 
 .newsletter{
     color: #FFFFFF;