feat: adiciona estilizacao em produtos indisponiveis

store/blocks/pdp/product-assembly.jsonc

@@ -1,6 +1,7 @@
 {
   "sticky-layout#buy-button": {
     "props": {
+      "blockClass": "button-quantity",
       "position": "bottom"
     },
     "children": ["flex-layout.row#buy-button"]

store/blocks/pdp/product.jsonc

@@ -79,6 +79,9 @@
   },
   "product-images": {
     "props": {
+      "thumbnailsOrientation": "horizontal",
+      "showPaginationDots": false,
+      "showNavigationArrows": false,
       "aspectRatio": {
         "desktop": "auto",
         "phone": "16:9"
@@ -102,7 +105,6 @@
       "product-separator",
       "availability-subscriber",
       "sku-selector",
-      "product-quantity",
       "product-assembly-options",
       "product-gifts",
       "flex-layout.row#buy-button",
@@ -132,7 +134,7 @@
       "marginTop": 4,
       "marginBottom": 7
     },
-    "children": ["add-to-cart-button"]
+    "children": ["product-quantity","add-to-cart-button"]
   },
 
   "flex-layout.row#product-availability": {
@@ -166,4 +168,5 @@
     },
     "children": ["availability-subscriber"]
   }
+
 }

styles/css/vtex.flex-layout.css

@@ -12,10 +12,6 @@
   margin: 0;
   width: 100%;
 }
-.flexRowContent .productNameContainer--quickview {
-  display: flex;
-  text-align: end;
-}
 .flexRowContent .flexCol--right-col .flexColChild--right-col .list-price-savings {
   display: none;
 }

styles/css/vtex.product-quantity.css

@@ -0,0 +1,53 @@
+/*
+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 */
+.quantitySelectorContainer {
+  height: 49px;
+  margin-top: 8px;
+  margin-bottom: 16px;
+  width: 149px;
+}
+.quantitySelectorContainer .quantitySelectorTitle {
+  display: none;
+}
+.quantitySelectorContainer .quantitySelectorStepper {
+  height: 49px;
+}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
+  width: 31.6px;
+  height: 49px;
+  border-top: 1px solid #cccccc;
+  border-bottom: 1px solid #cccccc;
+  border-left: none;
+  border-right: none;
+  color: #929292;
+}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) {
+  height: 49px;
+  border-right: 1px solid #cccccc;
+  border-bottom: 1px solid #cccccc;
+  border-top: 1px solid #cccccc;
+  background: #fff;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #000000;
+}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) {
+  height: 49px;
+  width: 10px;
+  border-left: 1px solid #cccccc;
+  border-bottom: 1px solid #cccccc;
+  border-top: 1px solid #cccccc;
+  background: #fff;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #000000;
+}

styles/css/vtex.store-components.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -11,8 +12,11 @@
   margin: 0;
   padding: 0 40px;
   max-width: 100%;
-  /* TITULO, NOME DO PRODUTO */
+  /* TITULO (NOME DO PRODUTO PRINCIPAL)*/
-  /* TAMANHO E CORES DOS PRODUTOS */
+  /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
+  /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
+  /*PRODUTO INDISPONIVEL, TEXTOS */
+  /* FORMULARIO DE PRODUTO INDISPONIVEL */
 }
 .container .productNameContainer--quickview {
   text-align: end;
@@ -21,88 +25,170 @@
   line-height: 34px;
   color: #575757;
 }
-.container .skuSelectorContainer--sku-selector {
+.container .skuSelectorContainer {
   display: flex;
   flex-direction: column-reverse;
 }
-.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorName {
+.container .skuSelectorContainer .skuSelectorName {
+  font-size: 0;
+}
+.container .skuSelectorContainer .skuSelectorNameSeparator {
+  font-size: 0;
+}
+.container .skuSelectorContainer .skuSelectorSubcontainer--cor::before {
+  content: "OUTRAS CORES:";
+  font-family: "Open Sans", sans-serif;
   font-weight: 400;
-  font-size: 14px;
   line-height: 19px;
+  font-size: 14px;
   color: #929292;
-  text-transform: uppercase;
 }
-.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector {
+.container .skuSelectorContainer .skuSelectorSubcontainer--tamanho::before {
-  height: 40px;
+  content: "OUTROS TAMANHOS:";
-  width: 40px;
+  font-family: "Open Sans", sans-serif;
-}
-.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .frameAround--sku-selector {
-  height: 40px;
-  width: 40px;
-  border-radius: 50%;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector {
-  border-radius: 50%;
-  border: 1px solid #989898;
-  height: 40px;
-  width: 40px;
-}
-.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector:focus {
-  border-color: black;
-}
-.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--tamanho .skuSelectorItem--sku-selector .skuSelectorInternalBox--sku-selector .valueWrapper--sku-selector {
-  position: absolute;
-  left: -4px;
-}
-.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorName {
   font-weight: 400;
-  font-size: 14px;
   line-height: 19px;
-  color: #929292;
-  text-transform: uppercase;
-}
-.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
-  color: #929292;
-}
-.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
-  font-weight: 400;
   font-size: 14px;
-  line-height: 19px;
   color: #929292;
-  text-transform: uppercase;
 }
-.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--sku-selector {
+.container .skuSelectorContainer .skuSelectorTextContainer {
-  height: 48px;
+  display: none;
-  width: 48px;
 }
-.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .frameAround--sku-selector {
+.container .skuSelectorContainer .skuSelectorOptionsList {
-  border-radius: 50%;
+  margin-top: 8px;
+  margin-left: 0;
 }
-.container .skuSelectorContainer--sku-selector .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorInternalBox--sku-selector {
+.container .skuSelectorContainer .skuSelectorSelectorImageValue {
-  border-radius: 50%;
+  font-size: 0;
 }
-.container .subscriberContainer .form .content {
+.container .skuSelectorOptionsList .skuSelectorItem {
-  display: block;
+  width: 40px;
-  position: relative;
-}
-.container .subscriberContainer .form .content .inputName {
-  width: 185px;
   height: 40px;
 }
-.container .subscriberContainer .form .content .inputName .vtex-input .flex-row {
+.container .skuSelectorOptionsList .skuSelectorItem:first-child {
-  border: none;
+  margin-left: 0;
 }
-.container .subscriberContainer .form .content .inputEmail {
+.container .skuSelectorOptionsList .frameAround {
-  width: 185px;
+  border-radius: 50%;
-  height: 40px;
+  border-color: #000000;
-  position: absolute;
-  top: 0%;
-  left: 51%;
 }
-.container .subscriberContainer .form .content .submit {
+.container .skuSelectorOptionsList .skuSelectorItemTextValue {
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+  color: #000000;
+}
+.container .skuSelectorOptionsList .diagonalCross {
+  margin: 4px;
+}
+.container .skuSelectorOptionsList .skuSelectorInternalBox {
+  border-radius: 50%;
+}
+.container .carouselGaleryThumbs {
+  margin: 16px 0;
+}
+.container .carouselGaleryThumbs .thumbImg {
+  width: 90px;
+  height: 90px;
+  border-radius: 8px;
+}
+.container .carouselGaleryThumbs .productImagesThumb {
+  margin-right: 16px;
+  height: 100% !important;
+  width: 90px !important;
+}
+.container .carouselGaleryThumbs .productImagesThumbCaret {
+  display: none;
+}
+.container .subscriberContainer {
   width: 100%;
 }
+.container .subscriberContainer .title {
+  font-size: 0;
+  margin-bottom: 0;
+}
+.container .subscriberContainer .title::before {
+  content: "Produto indisponível";
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.container .subscriberContainer .subscribeLabel {
+  font-size: 0;
+}
+.container .subscriberContainer .subscribeLabel::before {
+  content: "Deseja saber quando estiver disponível?";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #868686;
+}
+.container .form {
+  position: relative;
+}
+.container .form :global(.vtex-store-components-3-x-content) {
+  width: 374.65px;
+  display: block;
+  margin-top: 16px;
+}
+.container .form :global(.vtex-store-components-3-x-content) .inputName {
+  width: 182.46px;
+  margin-right: 10.08px;
+  margin-bottom: 15px;
+}
+.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-input-prefix__group) {
+  border: 0.6px solid #929292;
+  border-radius: 0;
+}
+.container .form :global(.vtex-store-components-3-x-content) .inputName :global(.vtex-styleguide-9-x-input) {
+  padding: 0 14px;
+  font-size: 12px;
+  line-height: 28px;
+  color: #929292;
+}
+.container .form :global(.vtex-store-components-3-x-content) .inputEmail {
+  position: absolute;
+  left: 51%;
+  top: 0%;
+  border-radius: 0;
+  width: 182.46px;
+  font-weight: 400;
+  margin-bottom: 15px;
+}
+.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) {
+  border: 0.6px solid #929292;
+  border-radius: 0;
+}
+.container .form :global(.vtex-store-components-3-x-content) .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  padding: 0 14px;
+  font-size: 12px;
+  line-height: 28px;
+  color: #929292;
+}
+.container .form :global(.vtex-store-components-3-x-content) .submit {
+  width: 100%;
+  margin-bottom: 16px;
+}
+.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) {
+  width: 100%;
+  height: 49px;
+  background-color: #000000;
+  border: none;
+  border-radius: 0;
+  font-size: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button)::before {
+  content: "AVISE-ME";
+  color: #fff;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  font-family: "Open sans", sans-serif;
+}
+.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
+  padding: 0;
+}

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

@@ -3,10 +3,6 @@
   margin: 0;
   width: 100%;
 
-  .productNameContainer--quickview {
-    display: flex;
-    text-align: end;
-  }
   .flexCol--right-col {
     .flexColChild--right-col {
       .list-price-savings {

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

@@ -0,0 +1,44 @@
+.quantitySelectorContainer {
+  height: 49px;
+  margin-top: 8px;
+  margin-bottom: 16px;
+  width: 149px;
+  .quantitySelectorTitle {
+    display: none;
+  }
+  .quantitySelectorStepper {
+    height: 49px;
+    :global(.vtex-numeric-stepper__input) {
+      width: 31.6px;
+      height: 49px;
+      border-top: 1px solid #cccccc;
+      border-bottom: 1px solid #cccccc;
+      border-left: none;
+      border-right: none;
+      color: $color-gray-6;
+    }
+    :global(.vtex-numeric-stepper__plus-button) {
+      height: 49px;
+      border-right: 1px solid #cccccc;
+      border-bottom: 1px solid #cccccc;
+      border-top: 1px solid #cccccc;
+      background: $color-white;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 22px;
+      color: $color-black-padrao;
+    }
+    :global(.vtex-numeric-stepper__minus-button) {
+      height: 49px;
+      width: 10px;
+      border-left: 1px solid #cccccc;
+      border-bottom: 1px solid #cccccc;
+      border-top: 1px solid #cccccc;
+      background: $color-white;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 22px;
+      color: $color-black-padrao;
+    }
+  }
+}

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

@@ -3,7 +3,7 @@
   padding: 0 40px;
   max-width: 100%;
 
-  /* TITULO, NOME DO PRODUTO */
+  /* TITULO (NOME DO PRODUTO PRINCIPAL)*/
   .productNameContainer--quickview {
     text-align: end;
     font-weight: 300;
@@ -11,107 +11,200 @@
     line-height: 34px;
     color: $color-gray-7;
   }
-  /* TAMANHO E CORES DOS PRODUTOS */
+
-  .skuSelectorContainer--sku-selector {
+  /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
+  .skuSelectorContainer {
     display: flex;
     flex-direction: column-reverse;
-    .skuSelectorSubcontainer--tamanho {
-      .skuSelectorName {
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 19px;
-        color: $color-gray-6;
-        text-transform: uppercase;
-      }
-      .skuSelectorItem--sku-selector {
-        height: 40px;
-        width: 40px;
-        .frameAround--sku-selector {
-          height: 40px;
-          width: 40px;
-          border-radius: 50%;
-          top: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
-        }
-        .skuSelectorInternalBox--sku-selector {
-          border-radius: 50%;
-          border: 1px solid $color-gray-8;
-          height: 40px;
-          width: 40px;
 
-          &:focus {
+    .skuSelectorName {
-            border-color: black;
+      font-size: 0;
-          }
-          .valueWrapper--sku-selector {
-            position: absolute;
-            left: -4px;
-          }
-        }
     }
+
+    .skuSelectorNameSeparator {
+      font-size: 0;
     }
 
     .skuSelectorSubcontainer--cor {
-      .skuSelectorName {
+      &::before {
+        content: "OUTRAS CORES:";
+        font-family: "Open Sans", sans-serif;
         font-weight: 400;
-        font-size: 14px;
         line-height: 19px;
-        color: $color-gray-6;
+        font-size: 14px;
-        text-transform: uppercase;
-      }
-      .skuSelectorNameSeparator {
         color: $color-gray-6;
       }
-      .skuSelectorSelectorImageValue {
+    }
+
+    .skuSelectorSubcontainer--tamanho {
+      &::before {
+        content: "OUTROS TAMANHOS:";
+        font-family: "Open Sans", sans-serif;
         font-weight: 400;
-        font-size: 14px;
         line-height: 19px;
+        font-size: 14px;
         color: $color-gray-6;
-        text-transform: uppercase;
+      }
+    }
+
+    .skuSelectorTextContainer {
+      display: none;
     }
 
     .skuSelectorOptionsList {
-        .skuSelectorItem--sku-selector {
+      margin-top: 8px;
-          height: 48px;
+      margin-left: 0;
-          width: 48px;
     }
 
-        .frameAround--sku-selector {
+    .skuSelectorSelectorImageValue {
-          border-radius: 50%;
+      font-size: 0;
-        }
-        .skuSelectorInternalBox--sku-selector {
-          border-radius: 50%;
     }
   }
+  /*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
+  .skuSelectorOptionsList {
+    .skuSelectorItem {
+      width: 40px;
+      height: 40px;
+      &:first-child {
+        margin-left: 0;
       }
     }
 
+    .frameAround {
+      border-radius: 50%;
+      border-color: $color-black-padrao;
+    }
+
+    .skuSelectorItemTextValue {
+      max-width: 100%;
+      display: flex;
+      justify-content: center;
+      color: $color-black-padrao;
+    }
+
+    .diagonalCross {
+      margin: 4px;
+    }
+
+    .skuSelectorInternalBox {
+      border-radius: 50%;
+    }
+  }
+
+  .carouselGaleryThumbs {
+    margin: 16px 0;
+
+    .thumbImg {
+      width: 90px;
+      height: 90px;
+      border-radius: 8px;
+    }
+    .productImagesThumb {
+      margin-right: 16px;
+      height: 100% !important;
+      width: 90px !important;
+    }
+
+    .productImagesThumbCaret {
+      display: none;
+    }
+  }
+
+  /*PRODUTO INDISPONIVEL, TEXTOS */
   .subscriberContainer {
+    width: 100%;
+    .title {
+      font-size: 0;
+      margin-bottom: 0;
+
+      &::before {
+        content: "Produto indisponível";
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 19px;
+        color: $color-gray-9;
+      }
+    }
+
+    .subscribeLabel {
+      font-size: 0;
+      &::before {
+        content: "Deseja saber quando estiver disponível?";
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: $color-gray-9;
+      }
+    }
+  }
+
+  /* FORMULARIO DE PRODUTO INDISPONIVEL */
   .form {
-      .content {
-        display: block;
     position: relative;
+    :global(.vtex-store-components-3-x-content) {
+      width: 374.65px;
+      display: block;
+      margin-top: 16px;
       .inputName {
-          width: 185px;
+        width: 182.46px;
-          height: 40px;
+        margin-right: 10.08px;
-          .vtex-input {
+        margin-bottom: 15px;
-            .flex-row {
+        :global(.vtex-input-prefix__group) {
-              border: none;
+          border: 0.6px solid $color-gray-6;
+          border-radius: 0;
+        }
+        :global(.vtex-styleguide-9-x-input) {
+          padding: 0 14px;
+          font-size: 12px;
+          line-height: 28px;
+          color: $color-gray-6;
         }
       }
-        }
-
       .inputEmail {
-          width: 185px;
-          height: 40px;
         position: absolute;
-          top: 0%;
         left: 51%;
-        }
+        top: 0%;
+        border-radius: 0;
+        width: 182.46px;
+        font-weight: 400;
+        margin-bottom: 15px;
 
+        :global(.vtex-input-prefix__group) {
+          border: 0.6px solid $color-gray-6;
+          border-radius: 0;
+          :global(.vtex-styleguide-9-x-input) {
+            padding: 0 14px;
+            font-size: 12px;
+            line-height: 28px;
+            color: $color-gray-6;
+          }
+        }
+      }
       .submit {
         width: 100%;
+        margin-bottom: 16px;
+        :global(.vtex-button) {
+          width: 100%;
+          height: 49px;
+          background-color: $color-black-padrao;
+          border: none;
+          border-radius: 0;
+          font-size: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          &::before {
+            content: "AVISE-ME";
+            color: $color-white;
+            font-weight: 600;
+            font-size: 18px;
+            line-height: 25px;
+            font-family: "Open sans", sans-serif;
+          }
+
+          :global(.vtex-button__label) {
+            padding: 0;
+          }
         }
       }
     }

styles/sass/utils/_vars.scss

@@ -10,6 +10,7 @@ $color-gray5: #e5e5e5;
 $color-gray-6: #929292;
 $color-gray-7: #575757;
 $color-gray-8: #989898;
+$color-gray-9: #868686;
 
 $color-blue: #4267b2;