From 9cc7b166bc00096b263749bc9d82a06c2209db52 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Mon, 6 Feb 2023 16:54:22 -0300 Subject: [PATCH] feat: adiciona css --- store/blocks/pdp/product.jsonc | 28 +++++++++++++------ styles/css/vtex.slider-layout.css | 25 ++++++++++++++--- .../pages/product/vtex.slider-layout.scss | 26 ++++++++++++++--- 3 files changed, 63 insertions(+), 16 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e5802e9..0ee54f4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -82,6 +82,25 @@ "rowGap": 0 } }, + "html#prateleira": { + "props": { + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-name", + "product-summary-description", + "product-summary-image", + "product-summary-price", + "product-summary-sku-selector", + "product-summary-buy-button" + ] + }, + "html#imagens": { + "props": { + "testId": "product-images" + }, + "children": ["product-images"] + }, "flex-layout.row#product-image": { "children": ["product-images"] }, @@ -314,14 +333,7 @@ }, "product-summary.shelf#demo1": { - "children": [ - "product-summary-name", - "product-summary-description", - "product-summary-image", - "product-summary-price", - "product-summary-sku-selector", - "product-summary-buy-button" - ] + "children": ["html#prateleira"] }, "slider-layout#demo-products": { diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 6484857..7216b8c 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -11,22 +11,39 @@ padding: 16px 40px 113px; } .sliderLayoutContainer .sliderTrackContainer { - padding: 0 24px 36px; + padding: 0 40px 36px; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack { + width: 450% !important; gap: 16px; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) { margin: 0; width: 100%; + max-width: none !important; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) { + padding: 0; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { display: flex; order: 1; - width: 100%; + width: fit-content; } -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { - height: 314px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) { + background-color: #ededed; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + width: fit-content; + min-width: 314.4px; + height: fit-content; + min-height: 314.4px; + max-height: 314.4px; + border-radius: 0; + background-color: #ededed; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { display: flex; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 5bddf9f..36c3bb6 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -2,9 +2,10 @@ padding: 16px 40px 113px; .sliderTrackContainer { - padding: 0 24px 36px; + padding: 0 40px 36px; .sliderTrack { + width: 450% !important; gap: 16px; .slide { @@ -12,15 +13,32 @@ :global(.vtex-product-summary-2-x-container) { margin: 0; width: 100%; + max-width: none !important; :global(.vtex-product-summary-2-x-element) { + padding: 0; :global(.vtex-product-summary-2-x-imageContainer) { display: flex; order: 1; - width: 100%; + width: fit-content; - :global(.vtex-product-summary-2-x-imageNormal) { - height: 314px; + :global(.vtex-store-components-3-x-discountContainer) { + :global(.vtex-store-components-3-x-discountInsideContainer) { + display: none; + } + :global(.vtex-product-summary-2-x-imageContainer) { + background-color: #ededed; + + :global(.vtex-product-summary-2-x-imageNormal) { + width: fit-content; + min-width: 314.4px; + height: fit-content; + min-height: 314.4px; + max-height: 314.4px; + border-radius: 0; + background-color: #ededed; + } + } } } :global(.vtex-product-summary-2-x-nameContainer) {