diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 9210559..dc0ddf6 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,7 +7,9 @@ // "flex-layout.row#specifications-title", // "product-specification-group#table", "tab-layout", - "shelf.relatedProducts", + // "product-summary.shelf#carousel", + "rich-text#carousel", + "list-context.product-list#product-carousel", "product-questions-and-answers", "newsletter" ] @@ -69,15 +71,6 @@ ] }, - // "product-specification-badges": { - // "props": { - // "specificationGroupName": "Group", - // "specificationName": "On Sale", - // "visibleWhen": "True", - // "displayValue": "SPECIFICATION_NAME" - // } - // }, - "flex-layout.col#stack": { "children": ["stack-layout"], "props": { @@ -335,6 +328,28 @@ } }, + "rich-text#carousel": { + "props": { + "text": "Você também pode gostar:", + "textAlignment": "CENTER", + "textPosition": "CENTER", + "blockClass": "carousel-title" + } + }, + + "product-summary.shelf#carousel": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-price" + ] + }, + + "list-context.product-list#product-carousel": { + "blocks": ["product-summary.shelf#carousel"], + "children": ["slider-layout#demo-products"] + }, + "newsletter": { "props": { "label": "Assine nossa newsletter", diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 58d74c0..4ec87c2 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,11 +8,11 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - margin: 6px 36px; + padding: 16px 36px; } @media screen and (min-width: 112.5em) { .container { - margin: 6px 356px; + margin: 0px 356px; } } .container .link, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index e523ef0..96a5a69 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,6 +9,7 @@ /* Grid breakpoints */ .flexRowContent { margin: 0; + padding-top: 0; } .flexRowContent--menu-link, diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..a2fc014 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,73 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; +/* +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 */ +:global(.vtex-slider-layout-0-x-slideChildrenContainer) { + width: 314px; } -.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; - } +.imageWrapper { + height: 314px; + display: flex; + justify-content: center; + align-items: center; } .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + padding: 0 0 8px; +} +.nameContainer .brandName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #000000; } -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; +:global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; +} +:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; +} +:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; } -.container { - text-align: start; +:global(.vtex-store-components-3-x-listPrice) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; + margin: 0; + padding-bottom: 8px; +} +:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { + display: none; +} +:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::before { + content: "de "; +} +:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::after { + content: " por"; } -.imageContainer { - text-align: center; +:global(.vtex-slider-layout-0-x-sliderRightArrow) :global(.vtex-slider-layout-0-x-caretIcon)::after { + display: block; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png); } -.image { - border-radius: 0.25rem; +:global(.vtex-store-components-3-x-discountInsideContainer) { + display: none; } + +:global(.vtex-slider-layout-0-x-paginationDotsContainer) :global(.vtex-slider-layout-0-x-paginationDot--shelf) { + color: #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..844ba9e 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,11 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.paragraph--carousel-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + margin: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5151187..b2b27a9 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -27,7 +27,6 @@ .productImageTag--main { max-height: max-content !important; - max-width: 664px; } .carouselGaleryThumbs { @@ -96,6 +95,12 @@ .skuSelectorContainer .skuSelectorSubcontainer--tamanho { order: 1; } +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; +} .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { padding: 0; margin: auto; @@ -335,8 +340,10 @@ .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail { grid-area: email; } -.subscriberContainer .form :global(.vtex-store-components-3-x-content) :global(.vtex-button) { +.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit { grid-area: submit; +} +.subscriberContainer .form :global(.vtex-store-components-3-x-content) :global(.vtex-button) { background-color: #000000; border: none; border-radius: 0; @@ -363,6 +370,8 @@ position: relative; } .newsletter :global(.vtex-store-components-3-x-form) .label { + display: flex; + flex-direction: column; color: #fff; font-weight: 400; font-size: 24px; @@ -373,12 +382,9 @@ font-size: 18px; line-height: 25px; color: #929292; - position: absolute; - top: 85px; - right: 225px; } .newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) { - padding-top: 52px; + padding-top: 16px; } .newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) { border: none; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 814cab3..3c3e217 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -57,6 +57,7 @@ } :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) { width: inherit !important; + display: block; } :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-heading) { font-weight: 400; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 04e2890..2318bbb 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,8 +1,8 @@ .container { - margin: 6px 36px; + padding: 16px 36px; @media screen and (min-width: 112.5em) { - margin: 6px 356px; + margin: 0px 356px; } .link, diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index af79240..7ae4654 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,5 +1,6 @@ .flexRowContent { margin: 0; + padding-top: 0; } .flexRowContent--menu-link, 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..caa47d2 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,86 @@ +// :global(.vtex-slider-layout-0-x-slide--shelf) { +// width: 300px; +// } + +:global(.vtex-slider-layout-0-x-slideChildrenContainer) { + width: 314px; +} + +.imageWrapper { + height: 314px; + display: flex; + justify-content: center; + align-items: center; +} + +.nameContainer { + padding: 0 0 8px; + + .brandName { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $black; + } +} + +:global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + + :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; + } + + :global(.vtex-store-components-3-x-sellingPriceValue) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: $black; + } +} + +:global(.vtex-store-components-3-x-listPrice) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-300; + margin: 0; + padding-bottom: 8px; + + :global(.vtex-store-components-3-x-listPriceLabel) { + display: none; + } + + :global(.vtex-store-components-3-x-currencyContainer) { + &::before { + content: "de "; + } + + &::after { + content: " por"; + } + } +} + +:global(.vtex-slider-layout-0-x-sliderRightArrow) { + // display: none; + + :global(.vtex-slider-layout-0-x-caretIcon) { + // display: none; + + &::after { + display: block; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png); + } + } +} + +:global(.vtex-store-components-3-x-discountInsideContainer) { + display: none; +} + +:global(.vtex-slider-layout-0-x-paginationDotsContainer) { + :global(.vtex-slider-layout-0-x-paginationDot--shelf) { + color: $black; + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..153cc80 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,7 @@ +.paragraph--carousel-title { + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $gray-600; + margin: 0; +} diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss deleted file mode 100644 index 1f4bf5d..0000000 --- a/styles/sass/pages/product/vtex.shelf.scss +++ /dev/null @@ -1,5 +0,0 @@ -.title { - font-weight: 400; - font-size: 24px; - line-height: 38px; -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7e5b351..6357699 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -16,7 +16,7 @@ .productImageTag--main { max-height: max-content !important; - max-width: 664px; + // max-width: 664px; } .carouselGaleryThumbs { @@ -96,6 +96,14 @@ .skuSelectorSubcontainer--tamanho { order: 1; + .skuSelectorNameContainer { + margin: 0; + + .skuSelectorOptionsList { + margin: 0; + } + } + .skuSelectorItemTextValue { padding: 0; margin: auto; @@ -384,8 +392,11 @@ grid-area: email; } - :global(.vtex-button) { + .submit { grid-area: submit; + } + + :global(.vtex-button) { background-color: $black; border: none; border-radius: 0; @@ -409,6 +420,7 @@ .newsletter { display: block; background: $black; + :global(.vtex-store-components-3-x-form) { padding: 32px 0 13px; width: 774px; @@ -416,6 +428,8 @@ position: relative; .label { + display: flex; + flex-direction: column; color: $white; font-weight: 400; font-size: 24px; @@ -426,14 +440,11 @@ font-size: 18px; line-height: 25px; color: $gray-500; - position: absolute; - top: 85px; - right: 225px; } } :global(.vtex-store-components-3-x-inputGroup) { - padding-top: 52px; + padding-top: 16px; :global(.vtex-input-prefix__group) { border: none; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 358e9dd..9091399 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -65,6 +65,7 @@ // } :global(.vtex-store-components-3-x-productImageTag) { width: inherit !important; + display: block; // max-width: 872px; }