Merge pull request 'feat: adiciona css breadcrumb 1440px' (#7) from feature/adiciona-css-breadcrumb-1440px into development

Reviewed-on: #7

manifest.json

@@ -15,6 +15,7 @@
     "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/minicart.jsonc

@@ -4,7 +4,7 @@
       "blockClass": "addToCart",
       "addToCartFeedback": "customEvent",
       "customPixelEventId": "add-to-cart-button",
-      "width": "73%",
+      "width": "75%",
       "text": "ADICIONAR À SACOLA"
     }
   },

store/blocks/pdp/product.jsonc

@@ -2,7 +2,7 @@
   "store.product": {
     "children": [
       "html#breadcrumb",
-      "condition-layout.product#availability",
+      "flex-layout.row#product-container",
       "flex-layout.row#description",
       "flex-layout.row#specifications-title",
       "product-specification-group#table",
@@ -32,6 +32,13 @@
     },
     "children": ["product-description"]
   },
+
+  "flex-layout.row#product-container": {
+    "props": {
+      "blockClass": "product-container"
+    },
+    "children": ["condition-layout.product#availability"]
+  },
   "condition-layout.product#availability": {
     "props": {
       "conditions": [
@@ -109,7 +116,8 @@
       "product-identifier.product",
       "product-rating-summary",
       "flex-layout.row#selling-price",
-      "product-installments",
+      // "product-installments",
+      "rich-text#product-installments",
       "sku-selector",
       "product-gifts",
       "flex-layout.row#buy-button",
@@ -133,10 +141,14 @@
     }
   },
 
-  "product-installments": {
+  // "product-installments": {
+  //   "children": ["rich-text#product-installments"]
+  // },
+
+  "rich-text#product-installments": {
     "props": {
-      "markers": ["parcelas", "valor"],
+      "text": "**36 x** de **R$ 2,17** sem juros",
-      "message": "36 x de R$ 2,17 sem juros"
+      "blockClass": "product-installments"
     }
   },
 
@@ -160,7 +172,7 @@
       "blockClass": "addToCartQuantity",
       "showLabel": false,
       "size": "large",
-      "width": "24%"
+      "width": "25%"
     }
   },
 

styles/css/agenciamagma.store-theme.css

@@ -7,10 +7,8 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.html {
-  background-color: red;
-}
-
 .html--pdp-breadcrumb {
-  background-color: green;
+  display: flex;
+  justify-content: center;
+  padding: 0 40px;
 }

styles/css/vtex-rich-text.css

@@ -0,0 +1,12 @@
+/*
+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 */
+.paragraph--product-installments {
+  margin: 0;
+}

styles/css/vtex.breadcrumb.css

@@ -1,3 +1,18 @@
+@charset "UTF-8";
+/*
+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 */
+.container {
+  width: 100%;
+  max-width: 1920px;
+}
+
 .termArrow,
 .term {
   display: none;
@@ -36,4 +51,4 @@
   display: block;
   content: "Sandálias";
   font-size: 16px;
-}
+}

styles/css/vtex.flex-layout.css

@@ -7,6 +7,10 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.flexRowContent {
+  padding: 0;
+}
+
 .flexRowContent--menu-link,
 .flexRowContent--main-header {
   padding: 0 0.5rem;
@@ -112,4 +116,8 @@
   background: black;
   border: none;
   border-radius: 0;
+}
+
+.flexRowContent--product-container {
+  padding: 0 40px;
 }

styles/css/vtex.rich-text.css

@@ -6,4 +6,7 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
+/* Grid breakpoints */
+.paragraph--product-installments {
+  margin: 0;
+}

styles/css/vtex.store-components.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -73,7 +74,7 @@
 .skuSelectorSubcontainer--cor .skuSelectorName::after {
   display: block;
   content: "OUTRAS CORES:";
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .skuSelectorSubcontainer--tamanho {
@@ -85,11 +86,143 @@
 .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
   display: block;
   content: "OUTROS TAMANHOS:";
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .productImagesThumb .figure .thumbImg {
   width: 90px;
   height: 90px;
   border-radius: 8px;
+}
+
+.shippingContainer {
+  display: flex;
+  position: relative;
+  max-width: 664px;
+}
+
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+  padding: 0;
+}
+
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0;
+}
+
+.shippingContainer :global(.vtex-input__label)::after {
+  font-size: 14px;
+  display: block;
+  content: "CALCULAR FRETE:";
+}
+
+.shippingContainer :global(.vtex-input-prefix__group) {
+  border: 1px solid #cccccc;
+  border-radius: 0;
+  height: 49px;
+}
+
+.shippingContainer :global(.vtex-button) {
+  width: 49px;
+  height: 49px;
+  position: absolute;
+  left: 33.4%;
+  top: 32%;
+  background: #292929;
+  border: none;
+  border-radius: 0;
+}
+
+.shippingContainer :global(.vtex-button__label) {
+  font-size: 0;
+}
+
+.shippingContainer :global(.vtex-button__label)::after {
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  display: block;
+  content: "OK";
+}
+
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  font-size: 0;
+  visibility: hidden;
+  position: absolute;
+  left: 43%;
+  top: 36%;
+}
+
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL)::after {
+  visibility: visible;
+  content: "Não sei meu CEP";
+  font-size: 12px;
+  color: #292929;
+  text-decoration-line: underline;
+}
+
+.shippingTable {
+  border: none;
+  padding: 0;
+}
+
+.shippingTableHead {
+  display: flex;
+}
+
+.shippingTableRow {
+  position: relative;
+  margin-bottom: 15px;
+}
+
+.shippingTableHeadDeliveryName {
+  font-size: 0;
+}
+
+.shippingTableHeadDeliveryName::after {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  content: "Entrega";
+  text-transform: uppercase;
+  display: block;
+  color: #292929;
+}
+
+.shippingTableHeadDeliveryEstimate {
+  font-size: 0;
+  position: absolute;
+  top: 5%;
+  left: 242%;
+}
+
+.shippingTableHeadDeliveryEstimate::after {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  content: "Prazo";
+  text-transform: uppercase;
+  display: block;
+  color: #292929;
+}
+
+.shippingTableHeadDeliveryPrice {
+  font-size: 0;
+  position: absolute;
+  top: 5%;
+  left: 138%;
+}
+
+.shippingTableHeadDeliveryPrice::after {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  content: "Frete";
+  text-transform: uppercase;
+  display: block;
+  color: #292929;
+}
+
+.shippingTableRadioBtn {
+  display: none;
 }

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

@@ -1,8 +1,9 @@
-.html {
+// .html {
-  background-color: red;
+//   background-color: red;
-}
+// }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  display: flex;
+  justify-content: center;
+  padding: 0 40px;
 }
-

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

@@ -0,0 +1,44 @@
+.container {
+  width: 100%;
+  max-width: 1920px;
+}
+
+.termArrow,
+.term {
+  display: none;
+}
+
+.homeLink {
+  visibility: hidden;
+  position: relative;
+  margin-right: 15px;
+}
+
+.homeLink::after {
+  visibility: visible;
+  display: block;
+  content: "Home";
+  font-size: 16px;
+  position: absolute;
+  top: 20%;
+}
+
+.link--1 {
+  font-size: 0;
+}
+
+.link--1::after {
+  display: block;
+  content: "Sapatos";
+  font-size: 16px;
+}
+
+.link--2 {
+  font-size: 0;
+}
+
+.link--2::after {
+  display: block;
+  content: "Sandálias";
+  font-size: 16px;
+}

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

@@ -1,3 +1,7 @@
+.flexRowContent {
+  padding: 0;
+}
+
 .flexRowContent--menu-link,
 .flexRowContent--main-header {
   padding: 0 0.5rem;
@@ -106,3 +110,7 @@
   border: none;
   border-radius: 0;
 }
+
+.flexRowContent--product-container {
+  padding: 0 40px;
+}

styles/sass/pages/product/vtex.rich-text.scss

@@ -0,0 +1,3 @@
+.paragraph--product-installments {
+  margin: 0;
+}

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

@@ -2,6 +2,11 @@
   background: red;
 }
 
+// .container {
+//   display: flex;
+//   justify-content: center;
+// }
+
 .productBrand--quickview {
   display: flex;
   justify-content: end;
@@ -64,7 +69,7 @@
     &::after {
       display: block;
       content: "OUTRAS CORES:";
-      font-size: 16px;
+      font-size: 14px;
     }
   }
 }
@@ -78,7 +83,7 @@
     &::after {
       display: block;
       content: "OUTROS TAMANHOS:";
-      font-size: 16px;
+      font-size: 14px;
     }
   }
 }
@@ -92,3 +97,135 @@
     }
   }
 }
+
+.shippingContainer {
+  display: flex;
+  position: relative;
+  max-width: 664px;
+}
+
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+  padding: 0;
+}
+
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0;
+}
+
+.shippingContainer :global(.vtex-input__label)::after {
+  font-size: 14px;
+  display: block;
+  content: "CALCULAR FRETE:";
+}
+
+.shippingContainer :global(.vtex-input-prefix__group) {
+  border: 1px solid $color-gray6;
+  border-radius: 0;
+  height: 49px;
+}
+
+.shippingContainer :global(.vtex-button) {
+  width: 49px;
+  height: 49px;
+  position: absolute;
+  left: 33.4%;
+  top: 32%;
+  background: $color-black;
+  border: none;
+  border-radius: 0;
+}
+
+.shippingContainer :global(.vtex-button__label) {
+  font-size: 0;
+}
+
+.shippingContainer :global(.vtex-button__label)::after {
+  font-size: 14px;
+  font-weight: 600;
+  color: $color-white;
+  display: block;
+  content: "OK";
+}
+
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  font-size: 0;
+  visibility: hidden;
+  position: absolute;
+  left: 43%;
+  top: 36%;
+}
+
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL)::after {
+  visibility: visible;
+  content: "Não sei meu CEP";
+  font-size: 12px;
+  color: $color-black;
+  text-decoration-line: underline;
+}
+
+.shippingTable {
+  border: none;
+  padding: 0;
+}
+
+.shippingTableHead {
+  display: flex;
+}
+
+.shippingTableRow {
+  position: relative;
+  margin-bottom: 15px;
+}
+
+.shippingTableHeadDeliveryName {
+  font-size: 0;
+}
+
+.shippingTableHeadDeliveryName::after {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  content: "Entrega";
+  text-transform: uppercase;
+  display: block;
+  color: $color-black;
+}
+
+.shippingTableHeadDeliveryEstimate {
+  font-size: 0;
+  position: absolute;
+  top: 5%;
+  left: 242%;
+}
+
+.shippingTableHeadDeliveryEstimate::after {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  content: "Prazo";
+  text-transform: uppercase;
+  display: block;
+  color: $color-black;
+}
+
+.shippingTableHeadDeliveryPrice {
+  font-size: 0;
+  position: absolute;
+  top: 5%;
+  left: 138%;
+}
+
+.shippingTableHeadDeliveryPrice::after {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  content: "Frete";
+  text-transform: uppercase;
+  display: block;
+  color: $color-black;
+}
+
+.shippingTableRadioBtn {
+  display: none;
+}