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

Reviewed-on: #22

store/blocks/pdp/product.jsonc

@@ -137,7 +137,7 @@
     "props": {
       "blockClass": "cart"
     },
-    "children": ["product-quantity", "flex-layout.row#buy-button"]
+    "children": ["product-quantity#qtd", "flex-layout.row#buy-button"]
   },
   "flex-layout.row#product-name": {
     "props": {
@@ -152,11 +152,20 @@
       "showValueNameForImageVariation": true
     }
   },
-
+  "product-quantity#qtd": {
+    "props": {
+      "width": "25%",
+      "size": "regular",
+      "blockClass": "buyQtd"
+    }
+    //"children": ["product-quantity"]
+  },
   "flex-layout.row#buy-button": {
     "props": {
-      "width": "80%",
+      "blockClass": "buyButton",
-      "blockClass": "buyButton"
+      "marginTop": "4",
+      "marginBottom": "7",
+      "paddingRight": "0"
     },
 
     "children": ["add-to-cart-button"]
@@ -303,7 +312,7 @@
     "props": {
       "itemsPerPage": {
         "desktop": 4,
-        "tablet": 1,
+        "tablet": 3,
         "phone": 1
       },
       "infinite": true,

styles/css/vtex.breadcrumb.css

@@ -8,10 +8,27 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
-.homeIcon {
+.container {
+  margin-left: 40px;
+}
+.container .homeIcon {
   display: none;
 }
-
+.container .Link,
-.homeLink::after {
+.container .term {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.container .homeLink::after {
   content: "Home";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
 }

styles/css/vtex.flex-layout.css

@@ -9,11 +9,23 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
+.flexRowContent {
+  margin: 8px 0 0 0px;
+  padding: 0;
+}
+
+:global(.vtex-stack-layout-0-x-stackItem) .flexRow {
+  margin: 0;
+}
+
+.flexRow--buyButton .flexRowContent {
+  margin: 0 0 0 0 !important;
+  padding: 0;
+}
+
 .flexRowContent--cart {
   display: flex;
-  align-items: center;
+  gap: 10px;
-  justify-content: center;
-  margin-bottom: 25px;
 }
 .flexRowContent--cart .flexRow--buyButton :global(.vtex-button) {
   background-color: black;
@@ -29,4 +41,11 @@
   font-size: 18px;
   line-height: 25px;
   color: #ffffff;
+}
+
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .flexRowContent {
+    display: flex;
+    flex-direction: column;
+  }
 }

styles/css/vtex.product-price.css

@@ -1,79 +1,27 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: .25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
-}
+[1200 - 1800] is where our nortal styles apply
-
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+/* Grid breakpoints */
 .sellingPrice {
-  color: #3f3f40;
+  font-family: "Open Sans";
-  font-size: 1.25rem;
+  font-style: normal;
-}
-
-.sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
 }
 
 .installments {
-  color: #727273;
+  font-family: "Open Sans";
-  margin-bottom: 1rem;
+  font-style: normal;
-}
+  font-weight: 700;
-
+  font-size: 16px;
-.savings {
+  line-height: 22px;
-  font-weight: 500;
+  color: #929292;
-  color: #79B03A;
+}
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
-}

styles/css/vtex.product-summary.css

@@ -1,42 +1,10 @@
-.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 */
-
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
+/* Grid breakpoints */
-  opacity: 1;
-}
-
-@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 {
-  border-radius: 0.25rem;
-}

styles/css/vtex.store-components.css

@@ -10,20 +10,22 @@
 /* Grid breakpoints */
 .container {
   max-width: 100%;
-  margin: 0 0 0 0 !important;
+  margin: 0 40px 0 40px !important;
 }
 
 .productImageTag {
   max-height: none !important;
 }
 
-.thumbImg {
+/*
-  width: 86%;
+.productImagesGallerySlide {
-  margin: 0;
+  .productImageTag {
+    width: 800px;
+  }
 }
-
+*/
 .productImagesThumb {
-  height: auto !important;
+  margin-right: 16px;
 }
 
 .productBrand {
@@ -159,6 +161,99 @@
   top: 8px;
 }
 
+.shippingTableRadioBtn {
+  display: none;
+}
+
+.shippingTableHead {
+  display: grid;
+  position: relative;
+  right: 60px;
+}
+
+.shippingTable {
+  border: none;
+  grid-template-columns: none !important;
+}
+
+.shippingTableRow {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+.shippingTableCellDeliveryName {
+  order: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+
+.shippingTableCellDeliveryPrice {
+  order: 1;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+
+.shippingTableCellDeliveryEstimate {
+  order: 2;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+
+.shippingTableHeadDeliveryName {
+  order: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+
+.shippingTableHeadDeliveryPrice {
+  order: 1;
+  font-size: 0;
+}
+.shippingTableHeadDeliveryPrice::before {
+  content: "FRETE";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+
+.shippingTableHeadDeliveryEstimate {
+  order: 2;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+
 .productDescriptionContainer .productDescriptionTitle {
   font-family: "Open Sans";
   font-style: normal;
@@ -174,4 +269,111 @@
   font-size: 16px;
   line-height: 22px;
   color: #929292;
+}
+
+.newsletter {
+  background: black;
+  border-bottom: 1px solid #ffffff;
+  margin: 64px 0 0 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.newsletter .container {
+  padding: 32px 0 16px 0;
+}
+.newsletter .label {
+  font-size: 0;
+}
+.newsletter .label::before {
+  content: "Assine nossa newsletter";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #ffffff;
+}
+.newsletter .label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #929292;
+}
+.newsletter :global(.vtex-input-prefix__group) {
+  display: flex;
+  justify-content: center;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  border-bottom: 1px solid #929292;
+  border-radius: 0;
+}
+.newsletter :global(.vtex-styleguide-9-x-input) {
+  background: transparent;
+  padding: 0 0 0 0;
+  width: 774px;
+}
+.newsletter :global(.vtex-button) {
+  position: relative;
+  right: 40px;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  border-bottom: 3px solid #bfbfbf;
+}
+.newsletter :global(.vtex-button):hover {
+  border-bottom: 5px solid #bfbfbf;
+}
+
+.label {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #ffffff;
+  border: none;
+}
+
+.label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #929292;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.productDescriptionTitle {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+  margin-bottom: 8px;
+}
+
+.productDescriptionText {
+  text-align: left;
+}
+
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
 }

styles/css/vtex.tab-layout.css

@@ -9,7 +9,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 /* Grid breakpoints */
 .container {
-  margin-bottom: 16px;
+  padding: 0 40px 16px 40px;
 }
 
 .listContainer {
@@ -61,4 +61,20 @@
   display: flex;
   flex-direction: row;
   gap: 32px;
+}
+
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .listContainer {
+    display: flex;
+    flex-direction: column;
+  }
+  .contentItem {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #b9b9b9;
+    padding-bottom: 16px;
+  }
+  .productDescriptionText {
+    text-align: justify;
+  }
 }

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

@@ -1,8 +1,26 @@
-.homeIcon {
+.container {
-  display: none;
+  margin-left: 40px;
-}
+  .homeIcon {
-.homeLink {
+    display: none;
-  &::after {
+  }
-    content: "Home";
+  .Link,
+  .term {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #929292;
+  }
+  .homeLink {
+    &::after {
+      content: "Home";
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: #929292;
+    }
   }
 }

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

@@ -1,8 +1,24 @@
+.flexRow {
+}
+.flexRowContent {
+  margin: 8px 0 0 0px;
+  padding: 0;
+}
+:global(.vtex-stack-layout-0-x-stackItem) {
+  .flexRow {
+    margin: 0;
+  }
+}
+.flexRow--buyButton {
+  .flexRowContent {
+    margin: 0 0 0 0 !important;
+    padding: 0;
+  }
+}
+
 .flexRowContent--cart {
   display: flex;
-  align-items: center;
+  gap: 10px;
-  justify-content: center;
-  margin-bottom: 25px;
   .flexRow--buyButton {
     :global(.vtex-button) {
       background-color: black;
@@ -21,3 +37,9 @@
     }
   }
 }
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .flexRowContent {
+    display: flex;
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,17 @@
+.sellingPrice {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
+}
+
+.installments {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}

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

@@ -0,0 +1,2 @@
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+}

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

@@ -10,3 +10,5 @@
   display: flex;
   justify-content: center;
 }
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+}

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

@@ -1,20 +1,22 @@
 .container {
   max-width: 100%;
-  margin: 0 0 0 0 !important;
+  margin: 0 40px 0 40px !important;
 }
-
 .productImageTag {
   max-height: none !important;
 }
-
+/*
-.thumbImg {
+.productImagesGallerySlide {
-  width: 86%;
+  .productImageTag {
-  margin: 0;
+    width: 800px;
+  }
 }
+*/
 
 .productImagesThumb {
-  height: auto !important;
+  margin-right: 16px;
 }
+
 .productBrand {
   display: flex;
   justify-content: flex-end;
@@ -159,7 +161,91 @@
     top: 8px;
   }
 }
+.shippingTableRadioBtn {
+  display: none;
+}
+.shippingTableHead {
+  display: grid;
+  position: relative;
+  right: 60px;
+}
+.shippingTable {
+  border: none;
 
+  grid-template-columns: none !important;
+}
+.shippingTableRow {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+.shippingTableCellDeliveryName {
+  order: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+.shippingTableCellDeliveryPrice {
+  order: 1;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+.shippingTableCellDeliveryEstimate {
+  order: 2;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+
+.shippingTableHeadDeliveryName {
+  order: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
+.shippingTableHeadDeliveryPrice {
+  order: 1;
+  font-size: 0;
+  &::before {
+    content: "FRETE";
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 19px;
+    color: #202020;
+    text-transform: uppercase;
+  }
+}
+.shippingTableHeadDeliveryEstimate {
+  order: 2;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+  text-transform: uppercase;
+}
 //Estilização da descrição do produto
 .productDescriptionContainer {
   .productDescriptionTitle {
@@ -179,3 +265,108 @@
     color: #929292;
   }
 }
+
+.newsletter {
+  background: black;
+  border-bottom: 1px solid #ffffff;
+  margin: 64px 0 0 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .container {
+    padding: 32px 0 16px 0;
+  }
+  .label {
+    font-size: 0;
+    &::before {
+      content: "Assine nossa newsletter";
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 38px;
+
+      color: #ffffff;
+    }
+    &::after {
+      content: "Receba ofertas e novidades por e-mail";
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 25px;
+      text-align: center;
+      color: #929292;
+    }
+  }
+  :global(.vtex-input-prefix__group) {
+    display: flex;
+    justify-content: center;
+    border-top: none;
+    border-right: none;
+    border-left: none;
+    border-bottom: 1px solid #929292;
+    border-radius: 0;
+  }
+  :global(.vtex-styleguide-9-x-input) {
+    background: transparent;
+    padding: 0 0 0 0;
+    width: 774px;
+  }
+  :global(.vtex-button) {
+    position: relative;
+    right: 40px;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    border-bottom: 3px solid #bfbfbf;
+    &:hover {
+      border-bottom: 5px solid #bfbfbf;
+    }
+  }
+}
+.label {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #ffffff;
+  border: none;
+}
+.label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #929292;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.productDescriptionTitle {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+  margin-bottom: 8px;
+}
+
+.productDescriptionText {
+  text-align: left;
+}
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+}

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

@@ -1,5 +1,5 @@
 .container {
-  margin-bottom: 16px;
+  padding: 0 40px 16px 40px;
 }
 .listContainer {
   display: flex;
@@ -52,3 +52,18 @@
   flex-direction: row;
   gap: 32px;
 }
+@media screen and (max-width: 1024px) and (min-width: 768px) {
+  .listContainer {
+    display: flex;
+    flex-direction: column;
+  }
+  .contentItem {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid #b9b9b9;
+    padding-bottom: 16px;
+  }
+  .productDescriptionText {
+    text-align: justify;
+  }
+}