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/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..3511a1f 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; - +import "./styles.css"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..7b114be --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,50 @@ +[class*="html--pdp-breadcrumb"] { + margin: 0 40px; +} + +[class*="html--product-main"] { + display: flex; + padding: 0 40px 16px; + gap: 32px; +} + +[class*="html--stack"] { + width: 48.8235294%; +} + +[class*="html--right-col"] { + width: 48.8235294%; +} + +@media screen and (min-width: 2500px) { + [class*="html--pdp-breadcrumb"] { + margin: 0 360px; + } + + [class*="html--product-main"] { + padding: 0 360px 16px; + } + + [class*="html--stack"] { + width: 49.13043478%; + } + + [class*="html--right-col"] { + width: 49.13043478%; + } +} + +@media screen and (max-width: 1024px) { + [class*="html--product-main"] { + display: block; + padding: 0 40px 16px; + } + + [class*="html--stack"] { + width: 100%; + } + + [class*="html--right-col"] { + width: 100%; + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dea7449..6bd6109 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -40,20 +40,15 @@ "subject": "isProductAvailable" } ], - "Then": "flex-layout.row#product-main", - "Else": "flex-layout.row#product-availability" + "Then": "html#product-main", + "Else": "html#product-availability" } }, - "flex-layout.row#product-main": { + "html#product-main": { "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 + "blockClass": "product-main" }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["html#stack", "html#right-col"] }, "stack-layout": { @@ -61,7 +56,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#product-image", "product-bookmark", "product-specification-badges" ] @@ -76,29 +71,32 @@ } }, - "flex-layout.col#stack": { + "html#stack": { "children": ["stack-layout"], "props": { - "width": "60%", - "rowGap": 0 + "blockClass": "stack" } }, - "flex-layout.row#product-image": { + "html#product-image": { + "props": { + "blockClass": "product-image" + }, "children": ["product-images"] }, "product-images": { "props": { - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" - }, - "displayThumbnailsArrows": true + // "aspectRatio": "auto", + "thumbnailAspectRatio": "1:1", + "thumbnailMaxHeight": 90, + "showNavigationArrows": false, + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal", + "thumbnailVisibility": "visible" } }, - "flex-layout.col#right-col": { + "html#right-col": { "props": { - "preventVerticalStretch": true, - "rowGap": 0 + "blockClass": "right-col" }, "children": [ "flex-layout.row#product-name", @@ -141,19 +139,13 @@ "children": ["add-to-cart-button"] }, - "flex-layout.row#product-availability": { + "html#product-availability": { "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 + "blockClass": "product-availability" }, - "children": [ - "flex-layout.col#stack", - "flex-layout.col#right-col-availability" - ] + "children": ["html#stack", "html#right-col-availability"] }, - "flex-layout.col#right-col-availability": { + "html#right-col-availability": { "props": { "preventVerticalStretch": true, "rowGap": 0, diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 54b243e..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,12 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html--pdp-breadcrumb { - margin: 0 40px; -} -@media screen and (min-width: 2500px) { - .html--pdp-breadcrumb { - margin: 0 360px; - } -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..8453d15 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,26 @@ /* Grid breakpoints */ .newsletter { background: red; +} + +.productImageTag--main { + max-height: max-content !important; +} + +.carouselGaleryThumbs { + margin-top: 16px; +} +@media screen and (max-width: 1024px) { + .carouselGaleryThumbs { + margin-bottom: 32px; + display: block; + } +} +.carouselGaleryThumbs .productImagesThumbActive, +.carouselGaleryThumbs .productImagesThumb { + margin: 0 16px 0 0; + width: 90px !important; + height: 90px; + border-radius: 8px; + overflow: hidden; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ee45a0d..e69de29 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,11 +0,0 @@ -// .html { -// background-color: red; -// } - -.html--pdp-breadcrumb { - margin: 0 40px; - - @media screen and (min-width: 2500px) { - margin: 0 360px; - } -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..1c1b324 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,26 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +} + +.productImageTag--main { + max-height: max-content !important; +} + +.carouselGaleryThumbs { + margin-top: 16px; + + @media screen and (max-width: 1024px) { + margin-bottom: 32px; + display: block; + } + + .productImagesThumbActive, + .productImagesThumb { + margin: 0 16px 0 0; + + width: 90px !important; + height: 90px; + border-radius: 8px; + overflow: hidden; + } +}