From 6505aaea6fecd00a1b15f18c702cef882af50acf Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Wed, 8 Feb 2023 16:22:43 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20ajustes=20na=20prateleira=20de=20produt?= =?UTF-8?q?os,=20ajustes=20na=20newsletter,=20come=C3=A7ando=20a=20estiliz?= =?UTF-8?q?ar=20o=20produto=20individual?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 1 - store/blocks/pdp/product.jsonc | 42 ++++--- styles/css/vtex.flex-layout.css | 110 +++--------------- styles/css/vtex.product-identifier.css | 15 ++- ...tore-theme.css => vtex.product-sumary.css} | 9 +- styles/css/vtex.product-summary.css | 53 +++------ styles/css/vtex.slider-layout.css | 47 ++++---- styles/css/vtex.store-components.css | 17 ++- .../product/agenciamagma.store-theme.scss | 8 -- .../sass/pages/product/vtex.flex-layout.scss | 13 +++ .../pages/product/vtex.product-summary.scss | 10 ++ .../pages/product/vtex.slider-layout.scss | 24 ++++ .../pages/product/vtex.store-components.scss | 19 ++- 13 files changed, 172 insertions(+), 196 deletions(-) rename styles/css/{agenciamagma.store-theme.css => vtex.product-sumary.css} (69%) delete mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 376d391..751300f 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -13,7 +13,7 @@ // "list-context.product-list", // "slider-layout", // "shelf.relatedProducts", - "newsletter", + "newsletter#footer", "product-questions-and-answers" ] }, @@ -85,7 +85,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "45%", "rowGap": 0 } }, @@ -98,9 +98,15 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "thumbnailsOrientation": "horizontal", + "showNavigationArrows": false, + "showPaginationDots": false, + "displayThumbnailsArrows": false, + "blockClass": "produto-carrossel" } }, + + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -108,12 +114,12 @@ }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", + // "product-rating-summary", + + // "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", + // "product-separator", "sku-selector", "product-quantity", "product-assembly-options", @@ -127,9 +133,10 @@ "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 3, + "blockClass": "identifier" }, - "children": ["vtex.store-components:product-name"] + "children": ["vtex.store-components:product-name", "product-identifier.product"] }, "sku-selector": { @@ -319,14 +326,6 @@ - - - - - - - - "list-context.product-list#carousel-list": { "blocks": ["product-summary.shelf#carousel-shelf"], "children": ["slider-layout#carousel"] @@ -352,8 +351,15 @@ "showNavigationArrows": "desktopOnly", "blockClass": "carousel" } + }, + + + "newsletter#footer": { + "props": { + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } } - } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..f505c51 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,18 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +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 */ +.stretchChildrenWidth { + padding: 0; } -@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; -} - -.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 { +.flexRowContent--identifier { 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; -} + flex-direction: column; + align-items: end; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..c37b733 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,12 @@ -.product-identifier--productReference { - margin-bottom: 1rem; -} +/* +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 */ +.product-identifier { + text-align: end; +} \ No newline at end of file diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/vtex.product-sumary.css similarity index 69% rename from styles/css/agenciamagma.store-theme.css rename to styles/css/vtex.product-sumary.css index 5e37ba5..9b58164 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/vtex.product-sumary.css @@ -7,10 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; +.element { + align-items: center; + text-align: center; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..34860b0 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,17 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { +/* +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 */ +.element { + align-items: center; text-align: center; } -.image { - border-radius: 0.25rem; -} +.imageContainer { + height: 60%; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..c98799e 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,30 @@ +/* +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 */ +.slideChildrenContainer { + text-align: center; + margin-bottom: 67px; +} + .sliderLayoutContainer { - justify-content: center; + padding: 0 40px; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.slide { + background-color: #FFFFFF; } -.sliderTrackContainer { - max-width: 100%; +.paginationDot { + background-color: #000000; } -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; -} - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +.paginationDot--carousel--isActive { + background-color: #Fff; + border: 0.5px solid #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 7f69f05..567fbca 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,19 +7,34 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.container { + padding: 0 40px; +} + +.productNameContainer { + text-align: end; +} + .productDescriptionContainer { width: 43.89%; } .productImagesContainer { width: 43.89%; - margin-right: 32px; } .productImage { display: flex; } +.produto-carrossel .swiper-wrapper { + gap: 16px; +} + +.discountInsideContainer { + display: none; +} + .newsletter { color: #FFFFFF; background: #000000; diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss deleted file mode 100644 index ea7d5b9..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} - 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..40b284f --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,13 @@ + +.stretchChildrenWidth{ + padding: 0; +} + + +.flexRowContent--identifier{ + display: flex; + flex-direction: column; + align-items: end; + +} + diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..83a4fab --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,10 @@ + +.element{ + align-items: center; + text-align: center; +} + +.imageContainer{ + height: 60%; +} + diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..1cf414b --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,24 @@ + +.slideChildrenContainer{ + text-align: center; + margin-bottom: 67px; +} + +.sliderLayoutContainer{ + padding: 0 40px; +} + +.slide{ + background-color: #FFFFFF; +} + +.paginationDot{ + background-color: #000000; +} + +.paginationDot--carousel--isActive{ + background-color: #Fff; + border: 0.5px solid #000000; +} + + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index bc690e6..42d6696 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,17 +1,34 @@ +.container { + padding: 0 40px; +} + +.productNameContainer{ + text-align: end; +} + .productDescriptionContainer{ width: 43.89%; } .productImagesContainer{ width: 43.89%; - margin-right: 32px; } .productImage{ display: flex; } +.produto-carrossel{ + .swiper-wrapper{ + gap: 16px + } +} + + +.discountInsideContainer{ + display: none; +} .newsletter{ color: #FFFFFF;