Merge pull request 'feat: added more styles in product-view' (#3) from feature/pdp-product-view into develop

Reviewed-on: #3

store/blocks/pdp/product.jsonc

@@ -60,7 +60,6 @@
       "rowGap": 7,
       "marginTop": 5,
       "marginBottom": 7,
-      "paddingBottom": 7,
       "blockClass": "productMain"
     },
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
@@ -149,10 +148,16 @@
 
     "children": [
       "vtex.store-components:product-name",
-      "product-identifier.product"
+      "product-identifier.product#pdp-identifier"
     ]
   },
 
+  "product-identifier.product#pdp-identifier": {
+    "props": {
+      "label": "hide"
+    }
+  },
+
   "html#sku-selector": {
     "props": {
       "testId": "sku-selector"
@@ -169,6 +174,14 @@
   },
 
   "flex-layout.row#pdp-buy-actions": {
+    "props": {
+      "marginTop": 5,
+      "marginBottom": 5,
+      "colSizing": "auto",
+      "colGap": 5,
+      "rowGap": 5,
+      "blockClass": "productActions"
+    },
     "children": ["html#pdp-product-quantity", "html#add-to-cart-button"]
   },
 
@@ -211,9 +224,10 @@
   "flex-layout.row#product-availability": {
     "props": {
       "colGap": 7,
-      "marginTop": 4,
+      "rowGap": 7,
+      "marginTop": 5,
       "marginBottom": 7,
-      "paddingTop": 7
+      "blockClass": "productAvailability"
     },
     "children": [
       "flex-layout.col#stack",
@@ -227,16 +241,18 @@
       "blockClass": "info-availability"
     },
     "children": [
-      "vtex.store-components:product-name",
+      "flex-layout.row#product-name",
-      "product-identifier.product",
+      "flex-layout.row#availability",
-      "sku-selector",
+      "sku-selector"
-      "flex-layout.row#availability"
     ]
   },
+
   "flex-layout.row#availability": {
     "props": {
       "blockClass": "message-availability"
     },
     "children": ["availability-subscriber"]
-  }
+  },
+
+  "availability-subscriber": {}
 }

styles/configs/style.json

@@ -200,7 +200,7 @@
       "muted-5": "#f2f4f5"
     },
     "on": {
-      "base": "#3f3f40",
+      "base": "#B9B9B999",
       "base--inverted": "#ffffff",
       "action-primary": "#ffffff",
       "action-secondary": "#000000",

styles/css/vtex.flex-layout.css

@@ -104,15 +104,18 @@
   padding-bottom: 1rem;
 }
 
+.flexRow--productAvailability,
 .flexRow--productMain {
   padding: 0 40px;
 }
 
-.flexColChild--productInformations :global(.vtex-product-identifier-0-x-product-identifier__label),
+@media screen and (max-width: 1024px) {
-.flexColChild--productInformations :global(.vtex-product-identifier-0-x-product-identifier__separator) {
+  .flexRowContent--productMain {
-  font-size: 0;
+    flex-direction: column !important;
-  width: 0;
+  }
-  height: 0;
+  .flexRowContent--productMain .stretchChildrenWidth {
+    width: 100% !important;
+  }
 }
 
 @media screen and (min-width: 1025px) {
@@ -121,24 +124,42 @@
   }
 }
 
-.flexRowContent--productAddToCart :global(.vtex-button) {
+.flexRowContent--productActions .stretchChildrenWidth {
+  width: auto !important;
+}
+@media screen and (min-width: 768px) {
+  .flexRowContent--productActions .stretchChildrenWidth:last-child {
+    flex-grow: 1;
+  }
+}
+
+.flexRowContent--productActions {
+  flex-direction: column;
+}
+@media screen and (min-width: 768px) {
+  .flexRowContent--productActions {
+    max-height: 49px;
+    flex-direction: row;
+  }
+}
+.flexRowContent--productActions :global(.vtex-button) {
   height: 72px;
   line-height: 24.51px;
 }
-@media screen and (min-width: 1025px) {
+@media screen and (min-width: 768px) {
-  .flexRowContent--productAddToCart :global(.vtex-button) {
+  .flexRowContent--productActions :global(.vtex-button) {
     height: 49px;
   }
 }
-.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-button__label) {
+.flexRowContent--productActions :global(.vtex-button) :global(.vtex-button__label) {
   justify-content: stretch;
   padding: 12px 64px;
 }
-.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
+.flexRowContent--productActions :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
   flex-grow: 1;
   width: 100%;
 }
-.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonText) {
+.flexRowContent--productActions :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonText) {
   width: 99%;
 }
 

styles/css/vtex.product-quantity.css

@@ -11,11 +11,22 @@
   width: 128px;
   min-height: 49px;
 }
+.quantitySelectorStepper :global(.vtex-numeric-stepper-container) {
+  height: 49px;
+  border: 1px solid #cccccc;
+}
 .quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
   width: 100%;
-  height: 100%;
 }
-.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button-container),
+.quantitySelectorStepper :global(.vtex-numeric-stepper__input),
-.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button-container) {
+.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button),
+.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) {
   height: 100%;
+  border: none;
+  background-color: transparent;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button__text),
+.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button__text) {
+  font-size: 16px;
+  line-height: 21.79px;
 }

styles/css/vtex.shelf.css

@@ -6,11 +6,4 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
+/* Grid breakpoints */
-.relatedProducts {
-  padding: 0 40px;
-}
-
-.shelfContentContainer :global(.vtex-slider-0-x-sliderFrame) {
-  gap: 12px;
-}

styles/css/vtex.store-components.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -120,6 +121,17 @@
   z-index: 2;
 }
 
+.skuSelectorItem--selected .skuSelectorItemTextValue {
+  color: #292929;
+}
+.skuSelectorItem--selected .diagonalCross {
+  width: 100%;
+  background: transparent;
+}
+.skuSelectorItem--selected .diagonalCross::before {
+  border-top: 1px solid #292929;
+}
+
 .skuSelectorItemTextValue {
   width: 100%;
   padding: 0;
@@ -128,7 +140,156 @@
   align-items: center;
 }
 
+.skuSelectorSubcontainer--cor {
+  margin: 0;
+}
 .skuSelectorSubcontainer--cor .skuSelectorItem {
   width: 48px;
   height: 48px;
+}
+
+.shippingContainer {
+  position: relative;
+}
+@media screen and (min-width: 769px) {
+  .shippingContainer {
+    width: 280px;
+  }
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  position: relative;
+  width: 100%;
+  padding: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
+  height: 49px;
+  border: 1px solid #cccccc;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
+  display: none;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  text-align: right;
+}
+@media screen and (min-width: 769px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    text-align: unset;
+    position: absolute;
+    right: -50.7%;
+    top: 70%;
+    margin-left: 16px;
+    padding: 0;
+    transform: translateY(-50%);
+  }
+}
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-input__label)::before {
+  content: "Calcular frete:";
+  font-size: 14px;
+  line-height: 19.07px;
+  text-transform: uppercase;
+  color: inherit;
+}
+.shippingContainer :global(.vtex-button) {
+  background-color: #292929;
+  position: absolute;
+  top: 27px;
+  right: 0;
+  color: #fff;
+  height: 49px;
+  width: 49px;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before {
+  content: "OK";
+  font-size: 14px;
+}
+
+.shippingTable {
+  border: 0;
+  margin: 0;
+  padding: 16px 0 0;
+}
+
+.shippingTableHead {
+  display: table-header-group !important;
+}
+.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
+.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate,
+.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+  width: auto;
+  text-align: left;
+  color: #292929;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19.07px;
+  text-transform: uppercase;
+}
+
+.shippingTableRadioBtn {
+  display: none;
+}
+
+.shippingTableCell {
+  padding: 15px 0;
+}
+
+.subscriberContainer .title {
+  font-size: 0;
+}
+.subscriberContainer .title::before {
+  content: "Produto indisponível";
+  font-size: 14px;
+  font-weight: 700;
+  color: #868686;
+}
+.subscriberContainer .subscribeLabel {
+  font-size: 0;
+}
+.subscriberContainer .subscribeLabel::before {
+  content: "Deseja saber quando estiver disponível?";
+  font-size: 14px;
+  font-weight: 400;
+  color: #868686;
+}
+.subscriberContainer .form .content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 40px 48px;
+  gap: 16px 8px;
+}
+.subscriberContainer .form .input {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+.subscriberContainer .form .input :global(.vtex-input-prefix__group) {
+  border: 1px solid #989898;
+  border-radius: 0;
+}
+.subscriberContainer .submit {
+  grid-column: 1/2 span;
+  margin: 0;
+}
+.subscriberContainer .submit :global(.vtex-button) {
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  color: #fff;
+}
+.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label) {
+  font-size: 0;
+}
+.subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label)::before {
+  content: "Avise-se";
+  font-size: 14px;
+  text-transform: uppercase;
 }

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

@@ -97,16 +97,18 @@
   padding-bottom: 1rem;
 }
 
+.flexRow--productAvailability,
 .flexRow--productMain {
   padding: 0 40px;
 }
 
-.flexColChild--productInformations {
+.flexRowContent--productMain {
-  :global(.vtex-product-identifier-0-x-product-identifier__label),
+  @media screen and (max-width: 1024px) {
-  :global(.vtex-product-identifier-0-x-product-identifier__separator) {
+    flex-direction: column !important;
-    font-size: 0;
+
-    width: 0;
+    .stretchChildrenWidth {
-    height: 0;
+      width: 100% !important;
+    }
   }
 }
 
@@ -116,12 +118,31 @@
   }
 }
 
-.flexRowContent--productAddToCart {
+.flexRowContent--productActions {
+  .stretchChildrenWidth {
+    width: auto !important;
+
+    &:last-child {
+      @media screen and (min-width: 768px) {
+        flex-grow: 1;
+      }
+    }
+  }
+}
+
+.flexRowContent--productActions {
+  flex-direction: column;
+
+  @media screen and (min-width: 768px) {
+    max-height: 49px;
+    flex-direction: row;
+  }
+
   :global(.vtex-button) {
     height: 72px;
     line-height: 24.51px;
 
-    @media screen and (min-width: 1025px) {
+    @media screen and (min-width: 768px) {
       height: 49px;
     }
 

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

@@ -4,13 +4,25 @@
     min-height: 49px;
   }
 
-  :global(.vtex-numeric-stepper__input) {
+  :global(.vtex-numeric-stepper-container) {
-    width: 100%;
+    height: 49px;
-    height: 100%;
+    border: 1px solid #cccccc;
   }
 
-  :global(.vtex-numeric-stepper__plus-button-container),
+  :global(.vtex-numeric-stepper__input) {
-  :global(.vtex-numeric-stepper__minus-button-container) {
+    width: 100%;
+  }
+
+  :global(.vtex-numeric-stepper__input),
+  :global(.vtex-numeric-stepper__plus-button),
+  :global(.vtex-numeric-stepper__minus-button) {
     height: 100%;
+    border: none;
+    background-color: transparent;
+  }
+  :global(.vtex-numeric-stepper__minus-button__text),
+  :global(.vtex-numeric-stepper__plus-button__text) {
+    font-size: 16px;
+    line-height: 21.79px;
   }
 }

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

@@ -1,9 +0,0 @@
-.relatedProducts {
-  padding: 0 40px;
-}
-
-.shelfContentContainer {
-  :global(.vtex-slider-0-x-sliderFrame) {
-    gap: 12px;
-  }
-}

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

@@ -125,6 +125,21 @@
   }
 }
 
+.skuSelectorItem--selected {
+  .skuSelectorItemTextValue {
+    color: $color-black;
+  }
+
+  .diagonalCross {
+    width: 100%;
+    background: transparent;
+
+    &::before {
+      border-top: 1px solid $color-black;
+    }
+  }
+}
+
 .skuSelectorItemTextValue {
   width: 100%;
   padding: 0;
@@ -135,10 +150,182 @@
 }
 
 .skuSelectorSubcontainer--cor {
+  margin: 0;
+
   .skuSelectorItem {
     width: 48px;
     height: 48px;
   }
 }
 
+.shippingContainer {
+  position: relative;
 
+  @media screen and (min-width: 769px) {
+    width: 280px;
+  }
+
+  :global(.vtex-address-form__postalCode) {
+    position: relative;
+    width: 100%;
+    padding: 0;
+
+    :global(.vtex-input-prefix__group) {
+      height: 49px;
+      border: 1px solid #cccccc;
+      border-radius: 0;
+
+      :global(.vtex-input__suffix) {
+        display: none;
+      }
+    }
+  }
+
+  :global(.vtex-address-form__postalCode-forgottenURL) {
+    text-align: right;
+
+    @media screen and (min-width: 769px) {
+      text-align: unset;
+
+      position: absolute;
+      right: -50.7%;
+      top: 70%;
+      margin-left: 16px;
+      padding: 0;
+      transform: translateY(-50%);
+    }
+  }
+
+  :global(.vtex-input__label) {
+    font-size: 0;
+
+    &::before {
+      content: "Calcular frete:";
+      font-size: 14px;
+      line-height: 19.07px;
+      text-transform: uppercase;
+      color: inherit;
+    }
+  }
+
+  :global(.vtex-button) {
+    background-color: $color-black;
+    position: absolute;
+    top: 27px;
+    right: 0;
+    color: $color-white;
+    height: 49px;
+    width: 49px;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+
+    :global(.vtex-button__label) {
+      font-size: 0;
+
+      &::before {
+        content: "OK";
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.shippingTable {
+  border: 0;
+  margin: 0;
+  padding: 16px 0 0;
+}
+
+.shippingTableHead {
+  display: table-header-group !important;
+
+  .shippingTableRow {
+    .shippingTableHeadDeliveryName,
+    .shippingTableHeadDeliveryEstimate,
+    .shippingTableHeadDeliveryPrice {
+      width: auto;
+      text-align: left;
+      color: $color-black;
+
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19.07px;
+      text-transform: uppercase;
+    }
+  }
+}
+
+.shippingTableRadioBtn {
+  display: none;
+}
+
+.shippingTableCell {
+  padding: 15px 0;
+}
+
+.subscriberContainer {
+  .title {
+    font-size: 0;
+
+    &::before {
+      content: "Produto indisponível";
+      font-size: 14px;
+      font-weight: 700;
+      color: #868686;
+    }
+  }
+
+  .subscribeLabel {
+    font-size: 0;
+
+    &::before {
+      content: "Deseja saber quando estiver disponível?";
+      font-size: 14px;
+      font-weight: 400;
+      color: #868686;
+    }
+  }
+
+  .form {
+    .content {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 40px 48px;
+      gap: 16px 8px;
+    }
+
+    .input {
+      margin: 0;
+      width: 100%;
+      height: 100%;
+
+      :global(.vtex-input-prefix__group) {
+        border: 1px solid #989898;
+        border-radius: 0;
+      }
+    }
+  }
+
+  .submit {
+    grid-column: 1 / 2 span;
+    margin: 0;
+
+    :global(.vtex-button) {
+      width: 100%;
+      height: 100%;
+      background-color: #000;
+      color: #fff;
+
+      :global(.vtex-button__label) {
+        font-size: 0;
+
+        &::before {
+          content: "Avise-se";
+          font-size: 14px;
+          text-transform: uppercase;
+        }
+      }
+    }
+  }
+}