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

Reviewed-on: #3
2023-02-02 14:35:55 +00:00 · 2023-02-02 14:35:55 +00:00 · e0ed8bbac0
commit e0ed8bbac0
parent 138695db1d 35364d362f
10 changed files with 467 additions and 54 deletions
--- a/store/blocks/pdp/product.jsonc
+++ b/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",
-      "product-identifier.product",
-      "sku-selector",
-      "flex-layout.row#availability"
+      "flex-layout.row#product-name",
+      "flex-layout.row#availability",
+      "sku-selector"
    ]
  },
+
  "flex-layout.row#availability": {
    "props": {
      "blockClass": "message-availability"
    },
    "children": ["availability-subscriber"]
-  }
+  },
+
+  "availability-subscriber": {}
 }
--- a/styles/configs/style.json
+++ b/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",
--- a/styles/css/vtex.flex-layout.css
+++ b/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),
-.flexColChild--productInformations :global(.vtex-product-identifier-0-x-product-identifier__separator) {
-  font-size: 0;
-  width: 0;
-  height: 0;
+@media screen and (max-width: 1024px) {
+  .flexRowContent--productMain {
+    flex-direction: column !important;
+  }
+  .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) {
-  .flexRowContent--productAddToCart :global(.vtex-button) {
+@media screen and (min-width: 768px) {
+  .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%;
 }

--- a/styles/css/vtex.product-quantity.css
+++ b/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__minus-button-container) {
+.quantitySelectorStepper :global(.vtex-numeric-stepper__input),
+.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;
 }
--- a/styles/css/vtex.shelf.css
+++ b/styles/css/vtex.shelf.css
@ -6,11 +6,4 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
-.relatedProducts {
-  padding: 0 40px;
-}
-
-.shelfContentContainer :global(.vtex-slider-0-x-sliderFrame) {
-  gap: 12px;
-}
+/* Grid breakpoints */
--- a/styles/css/vtex.store-components.css
+++ b/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;
 }
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@ -97,16 +97,18 @@
  padding-bottom: 1rem;
 }

+.flexRow--productAvailability,
 .flexRow--productMain {
  padding: 0 40px;
 }

-.flexColChild--productInformations {
-  :global(.vtex-product-identifier-0-x-product-identifier__label),
-  :global(.vtex-product-identifier-0-x-product-identifier__separator) {
-    font-size: 0;
-    width: 0;
-    height: 0;
+.flexRowContent--productMain {
+  @media screen and (max-width: 1024px) {
+    flex-direction: column !important;
+
+    .stretchChildrenWidth {
+      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;
    }

--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@ -4,13 +4,25 @@
    min-height: 49px;
  }

-  :global(.vtex-numeric-stepper__input) {
-    width: 100%;
-    height: 100%;
+  :global(.vtex-numeric-stepper-container) {
+    height: 49px;
+    border: 1px solid #cccccc;
  }

-  :global(.vtex-numeric-stepper__plus-button-container),
-  :global(.vtex-numeric-stepper__minus-button-container) {
+  :global(.vtex-numeric-stepper__input) {
+    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;
  }
 }
--- a/styles/sass/pages/product/vtex.shelf.scss
+++ b/styles/sass/pages/product/vtex.shelf.scss
@ -1,9 +0,0 @@
-.relatedProducts {
-  padding: 0 40px;
-}
-
-.shelfContentContainer {
-  :global(.vtex-slider-0-x-sliderFrame) {
-    gap: 12px;
-  }
-}
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/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;
+        }
+      }
+    }
+  }
+}