diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 09b9b31..f1d920a 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -3,7 +3,9 @@ "props": { "blockClass": "addToCart", "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "customPixelEventId": "add-to-cart-button", + "width": "73%", + "text": "ADICIONAR À SACOLA" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 1630fbc..81c8333 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -100,6 +100,7 @@ }, "flex-layout.col#right-col": { "props": { + "blockClass": "right-col", "preventVerticalStretch": true, "rowGap": 0 }, @@ -110,7 +111,6 @@ "flex-layout.row#selling-price", "product-installments", "sku-selector", - "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", @@ -141,8 +141,7 @@ "sku-selector": { "props": { - "variationsSpacing": 3, - "showValueNameForImageVariation": true + "variationsSpacing": 3 } }, @@ -152,7 +151,16 @@ "marginTop": 4, "marginBottom": 7 }, - "children": ["product-quantity", "add-to-cart-button#addToCart"] + "children": ["product-quantity#addToCart", "add-to-cart-button#addToCart"] + }, + + "product-quantity#addToCart": { + "props": { + "blockClass": "addToCartQuantity", + "showLabel": false, + "size": "large", + "width": "24%" + } }, "flex-layout.row#product-availability": { diff --git a/styles/css/vtex-add-to-cart-button.css b/styles/css/vtex-add-to-cart-button.css new file mode 100644 index 0000000..34c4328 --- /dev/null +++ b/styles/css/vtex-add-to-cart-button.css @@ -0,0 +1,9 @@ +/* +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 */ \ No newline at end of file diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css new file mode 100644 index 0000000..e69de29 diff --git a/styles/css/vtex.fle-layout.css b/styles/css/vtex.fle-layout.css new file mode 100644 index 0000000..2c86776 --- /dev/null +++ b/styles/css/vtex.fle-layout.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 */ +.flexRowContent--buy-button .pr7 { + width: 22%; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f1720d1..f755429 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +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 */ .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.5rem; @@ -9,14 +18,12 @@ padding: 0 1rem; } } - @media screen and (min-width: 80rem) { .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.25rem; } } - .flexRowContent--menu-link { background-color: #03044e; color: #fff; @@ -99,4 +106,4 @@ .flexRow--addToCartRow { padding-bottom: 1rem; -} +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..ecf0f5a --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,3 @@ +/* .quantitySelectorSteper--addToCart { + border-radius: 0; +} */ diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 91a1b12..023f573 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -28,6 +28,44 @@ display: none; } -.thumbImg { - width: 90px; +.shareLabel { + display: none; } + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} + +.skuSelectorItem { + height: 40px !important; + width: 40px; +} + +.frameAround { + border-radius: 50%; +} + +.diagonalCross { + transform: rotate(90deg); +} + +.skuSelectorInternalBox { + border-radius: 50%; + display: flex; + justify-content: center; +} + +.skuSelectorSubcontainer--cor { + order: 2; +} + +.skuSelectorSubcontainer--tamanho { + order: 1; +} + +.productImagesThumb .figure .thumbImg { + width: 90px; + height: 90px; + border-radius: 8px; +} \ No newline at end of file diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css new file mode 100644 index 0000000..11b5662 --- /dev/null +++ b/styles/css/vtex.styleguide.css @@ -0,0 +1,4 @@ +.hideDecorators { + border-left: 0; + border-right: 0; +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..f1720d1 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,102 @@ +.flexRowContent--menu-link, +.flexRowContent--main-header { + padding: 0 0.5rem; +} + +@media screen and (min-width: 40em) { + .flexRowContent--menu-link, + .flexRowContent--main-header { + padding: 0 1rem; + } +} + +@media screen and (min-width: 80rem) { + .flexRowContent--menu-link, + .flexRowContent--main-header { + padding: 0 0.25rem; + } +} + +.flexRowContent--menu-link { + background-color: #03044e; + color: #fff; +} + +.flexRowContent--main-header { + background-color: #f0f0f0; +} + +.flexRowContent--main-header-mobile { + align-items: center; + padding: 0.625rem 0.5rem; + background-color: #f0f0f0; +} + +.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { + color: #ffffff; + font-size: 14px; +} + +.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { + color: #727273; + font-size: 14px; +} + +.flexRowContent--buy-button { + height: 49px; +} + +.flexRow--deals { + background-color: #0f3e99; + padding: 14px 0px; +} + +.flexRow--deals .stretchChildrenWidth { + align-items: center; +} + +.flexRow--deals .flexCol { + align-items: center; + margin-bottom: 5px; + padding-top: 5px; +} + +.flexCol--filterCol { + max-width: 500px; + min-width: 230px; +} + +.flexCol--productCountCol { + align-items: flex-start; +} + +.flexCol--orderByCol { + align-items: flex-end; +} + +.flexCol--orderByMobileCol { + width: 42%; +} + +.flexCol--filterMobileCol { + width: 38%; +} + +.flexRow--quickviewMainRow { + display: flex; + max-height: 100%; +} + +.flexColChild--quickviewDetails:first-child { + overflow-y: auto; + height: 66% !important; + overflow-x: hidden; +} + +.flexColChild--quickviewDetails:last-child { + height: 34% !important; +} + +.flexRow--addToCartRow { + padding-bottom: 1rem; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..fd48980 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,65 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +} + +.productBrand--quickview { + display: flex; + justify-content: end; +} + +.carouselGaleryThumbs { + max-height: 90px; +} + +.productImageTag--main { + max-width: 664px; +} + +.carouselThumbBorder { + display: none; +} + +.shareLabel { + display: none; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} + +.skuSelectorItem { + height: 40px !important; + width: 40px; +} + +.frameAround { + border-radius: 50%; +} + +.diagonalCross { + transform: rotate(90deg); +} + +.skuSelectorInternalBox { + border-radius: 50%; + display: flex; + justify-content: center; +} + +.skuSelectorSubcontainer--cor { + order: 2; +} +.skuSelectorSubcontainer--tamanho { + order: 1; +} + +.productImagesThumb { + .figure { + .thumbImg { + width: 90px; + height: 90px; + border-radius: 8px; + } + } +}