diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx
index db401d3..ed4c8fb 100644
--- a/react/components/Html/index.tsx
+++ b/react/components/Html/index.tsx
@@ -1,5 +1,6 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
+import "./styles.css";
const CSS_HANDLES = ["html"] as const;
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
new file mode 100644
index 0000000..06be4ab
--- /dev/null
+++ b/react/components/Html/styles.css
@@ -0,0 +1,3 @@
+[class*="html--buy-button"]{
+ display: flex;
+}
diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc
index 5c797c2..800b870 100644
--- a/store/blocks/minicart.jsonc
+++ b/store/blocks/minicart.jsonc
@@ -2,7 +2,9 @@
"add-to-cart-button": {
"props": {
"addToCartFeedback": "customEvent",
- "customPixelEventId": "add-to-cart-button"
+ "customPixelEventId": "add-to-cart-button",
+ "blockClass": "button",
+ "text": "ADICIONAR À SACOLA"
}
},
diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc
index 799c583..b3dc525 100644
--- a/store/blocks/pdp/product-assembly.jsonc
+++ b/store/blocks/pdp/product-assembly.jsonc
@@ -4,7 +4,7 @@
"blockClass": "button-quantity",
"position": "bottom"
},
- "children": ["flex-layout.row#buy-button"]
+ "children": ["html#buy-button"]
},
"product-assembly-options": {
"children": [
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index f37b6af..bd95902 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -4,10 +4,25 @@
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
- "shelf.relatedProducts",
+ "list-context.product-list#prateleira",
+ //"shelf.relatedProducts",
"product-questions-and-answers"
]
},
+
+ "product-summary.shelf#prateleira": {
+ "children": [
+ "stack-layout#prodsum",
+ "product-summary-name",
+ "product-installments",
+ "product-selling-price"
+ ]
+ },
+ "list-context.product-list#prateleira": {
+ "blocks": ["product-summary.shelf#prateleira"],
+ "children": ["slider-layout#demo-products"]
+ },
+
"html#breadcrumb": {
"props": {
"tag": "section",
@@ -107,7 +122,7 @@
"sku-selector",
"product-assembly-options",
"product-gifts",
- "flex-layout.row#buy-button",
+ "html#buy-button",
"shipping-simulator"
]
},
@@ -129,8 +144,11 @@
}
},
- "flex-layout.row#buy-button": {
+ "html#buy-button": {
"props": {
+ "tag": "div",
+ "testId": "buy-button",
+ "blockClass": "buy-button",
"marginTop": 4,
"marginBottom": 7
},
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 9294fef..4125368 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@@ -23,4 +24,33 @@
.sellingPriceValue {
font-size: 50px;
+}
+
+.flexRowContent {
+ padding: 0;
+ margin-top: 0;
+}
+.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+ padding: 0;
+ display: flex;
+}
+.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth):nth-child(even) {
+ width: 100% !important;
+}
+.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) {
+ background-color: black;
+ border: none;
+ height: 49px;
+ margin-top: 8px;
+}
+.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
+ font-size: 0;
+}
+.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after {
+ font-family: "Open sans", sans-serif;
+ content: "ADICIONAR À SACOLA";
+ font-size: 18px;
+ font-weight: 400;
+ padding: 12px 0;
+ line-height: 22px;
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index d5f0da5..f874c99 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -12,6 +12,7 @@
margin-top: 8px;
margin-bottom: 16px;
width: 149px;
+ margin-right: 10px;
}
.quantitySelectorContainer .quantitySelectorTitle {
display: none;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index d707a0f..2f5b631 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -17,6 +17,7 @@
/*SELEÇÃO DE PRODUTOS (TAMANHO E COR) */
/*PRODUTO INDISPONIVEL, TEXTOS */
/* FORMULARIO DE PRODUTO INDISPONIVEL */
+ /* BUSCA DE CEP */
}
.container .productNameContainer--quickview {
text-align: end;
@@ -68,22 +69,25 @@
.container .skuSelectorOptionsList .skuSelectorItem:first-child {
margin-left: 0;
}
-.container .skuSelectorOptionsList .frameAround {
+.container .skuSelectorOptionsList .skuSelectorItem .frameAround {
border-radius: 50%;
border-color: #000000;
+ color: #000000;
}
-.container .skuSelectorOptionsList .skuSelectorItemTextValue {
+.container .skuSelectorOptionsList .skuSelectorItem .skuSelectorItemTextValue {
max-width: 100%;
display: flex;
justify-content: center;
color: #000000;
}
-.container .skuSelectorOptionsList .diagonalCross {
- margin: 4px;
-}
-.container .skuSelectorOptionsList .skuSelectorInternalBox {
+.container .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox {
border-radius: 50%;
}
+.container .skuSelectorOptionsList .diagonalCross {
+ margin: 5px;
+ background-image: linear-gradient(to top right, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 0, transparent 0%);
+ transform: rotate(90deg);
+}
.container .carouselGaleryThumbs {
margin: 16px 0;
}
@@ -191,4 +195,70 @@
}
.container .form :global(.vtex-store-components-3-x-content) .submit :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
+}
+.container .shippingContainer {
+ display: flex;
+}
+.container .shippingContainer :global(.vtex-address-form__postalCode) {
+ display: flex;
+ align-items: center;
+ padding: 0;
+}
+.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
+ font-size: 0;
+}
+.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::before {
+ content: "CALCULAR FRETE";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) {
+ width: 280px;
+ height: 49px;
+ border-radius: 0;
+}
+.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+ padding: 0;
+ margin-top: 25px;
+ position: relative;
+ left: 32px;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ text-decoration: underline;
+}
+.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+ color: #000000;
+}
+.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
+ display: none;
+}
+.container .shippingContainer :global(.vtex-button) {
+ height: 49px;
+ width: 49px;
+ margin-top: 27px;
+ position: relative;
+ right: 148px;
+ font-size: 0;
+ border-radius: 0;
+ cursor: pointer;
+}
+.container .shippingContainer :global(.vtex-button)::before {
+ content: "OK";
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #fff;
+}
+.container .shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+ height: fit-content;
+}
+
+.productImage {
+ width: max-content;
+}
+.productImage .productImageTag--main {
+ max-height: 664px !important;
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index aac0493..3584833 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -19,3 +19,34 @@
.sellingPriceValue {
font-size: 50px;
}
+
+.flexRowContent {
+ padding: 0;
+ margin-top: 0;
+ :global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
+ padding: 0;
+ display: flex;
+ &:nth-child(even) {
+ width: 100% !important;
+ }
+ :global(.vtex-button) {
+ background-color: black;
+ border: none;
+ height: 49px;
+ margin-top: 8px;
+ :global(.vtex-button__label) {
+ :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
+ font-size: 0;
+ &::after {
+ font-family: "Open sans", sans-serif;
+ content: "ADICIONAR À SACOLA";
+ font-size: 18px;
+ font-weight: 400;
+ padding: 12px 0;
+ line-height: 22px;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index 9ea7657..f897cc6 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -3,6 +3,7 @@
margin-top: 8px;
margin-bottom: 16px;
width: 149px;
+ margin-right: 10px;
.quantitySelectorTitle {
display: none;
}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 5f0bf77..fc449fa 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -68,26 +68,34 @@
&:first-child {
margin-left: 0;
}
- }
+ .frameAround {
+ border-radius: 50%;
+ border-color: $color-black-padrao;
+ color: $color-black-padrao;
+ }
- .frameAround {
- border-radius: 50%;
- border-color: $color-black-padrao;
- }
-
- .skuSelectorItemTextValue {
- max-width: 100%;
- display: flex;
- justify-content: center;
- color: $color-black-padrao;
+ .skuSelectorItemTextValue {
+ max-width: 100%;
+ display: flex;
+ justify-content: center;
+ color: $color-black-padrao;
+ }
+ .skuSelectorInternalBox {
+ border-radius: 50%;
+ }
}
.diagonalCross {
- margin: 4px;
- }
-
- .skuSelectorInternalBox {
- border-radius: 50%;
+ margin: 5px;
+ background-image: linear-gradient(
+ to top right,
+ transparent 44%,
+ rgba(0, 0, 0, 0.3) 48%,
+ currentColor 48%,
+ currentColor 0,
+ transparent 0%
+ );
+ transform: rotate(90deg);
}
}
@@ -209,4 +217,72 @@
}
}
}
+
+ /* BUSCA DE CEP */
+ .shippingContainer {
+ display: flex;
+ :global(.vtex-address-form__postalCode) {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ :global(.vtex-input__label) {
+ font-size: 0;
+ &::before {
+ content: "CALCULAR FRETE";
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray-6;
+ }
+ }
+ :global(.vtex-input-prefix__group) {
+ width: 280px;
+ height: 49px;
+ border-radius: 0;
+ }
+ :global(.vtex-address-form__postalCode-forgottenURL) {
+ padding: 0;
+ margin-top: 25px;
+ position: relative;
+ left: 32px;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ text-decoration: underline;
+ :last-child {
+ color: $color-black-padrao;
+ }
+ :global(.vtex__icon-external-link) {
+ display: none;
+ }
+ }
+ }
+ :global(.vtex-button) {
+ height: 49px;
+ width: 49px;
+ margin-top: 27px;
+ position: relative;
+ right: 148px;
+ font-size: 0;
+ border-radius: 0;
+ cursor: pointer;
+ &::before {
+ content: "OK";
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-white;
+ }
+ :global(.vtex-button__label) {
+ height: fit-content;
+ }
+ }
+ }
+}
+
+.productImage {
+ width: max-content;
+ .productImageTag--main {
+ max-height: 664px !important;
+ }
}