From 0aa0ee0f1440c5fe17d80a5752005c648276b80a Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Thu, 26 Jan 2023 11:21:37 -0300 Subject: [PATCH 01/14] =?UTF-8?q?feat:=20customiza=C3=A7=C3=A3o=20do=20Bre?= =?UTF-8?q?adcump?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/LogoM3Academy.png | Bin 0 -> 2501 bytes manifest.json | 1 - react/components/Html/index.tsx | 79 +++++++------ store/blocks/home/home.jsonc | 8 +- store/blocks/pdp/product.jsonc | 11 +- store/blocks/product-summary/quickview.json | 30 ++--- styles/css/agenciamagma.store-theme.css | 4 +- styles/css/vtex.breadcrumb.css | 29 +++++ styles/css/vtex.flex-layout.css | 111 ++---------------- styles/css/vtex.product-identifier.css | 26 +++- styles/css/vtex.store-components.css | 17 +++ .../product/agenciamagma.store-theme.scss | 5 +- .../sass/pages/product/vtex.breadcrumb.scss | 28 +++++ .../sass/pages/product/vtex.flex-layout.scss | 4 + .../product/vtex.product-identifier.scss | 19 +++ .../pages/product/vtex.store-components.scss | 25 +++- styles/sass/utils/_vars.scss | 23 ++-- 17 files changed, 236 insertions(+), 184 deletions(-) create mode 100644 assets/LogoM3Academy.png create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss diff --git a/assets/LogoM3Academy.png b/assets/LogoM3Academy.png new file mode 100644 index 0000000000000000000000000000000000000000..7f904e8ee717a94e1ab827f4b6d799acf3bc058d GIT binary patch literal 2501 zcmV;$2|D(PP)c=O~=AuV}%Jh3eIAdVb4 zlEZ`Yl-sv&FI>KSc~-uLNVU}buU3Szj6zv55~G_qkw_$pEF_c35*}Z3g`rhhml>3D za<_1gT9zoU4qvK&AZRtR=ovVe7&{4 z@69FY>FJp{di1DYtJR82OH0$TMIcV_M8#Y;ZrrH&zF+ND|Lyk0I?A#Mc%GN(?d|m- z1BL=V#`$)8e}8{Q(e&*xE}k?Ww{G34Ub%9mV$_LA$Hj}D3v{a{-2{}y!~a*M12Ryp z-8~}Lu;JC425~3{s^#_dM%^Q6k$)Z**_#fd>Tem5Qsq;T!B<=9Kk%<-<-x!Gq5ck~ z8N-5#vI#)R3V4i4Yk=-lzGKIZ71r7xj1mIUF;kFHeeqt#W5nv4Mg6!mTWbI2 z&6}sOsi$-dgFYpU8)2Cni25mMweC&4qu&(z<<YI-!JmP4@9oO23^PV{8311kI37Pi(EzBYuWJm zvpwOMl?{>ay&|&bC6V8*G-%aoB4aD=dG5RLT+=&+frS^P1Js662%e*vf-4<9e7K-1 zAdGnk;f$>SA%C?z`k&XQuw7sD%IP0 z_lpO^_irFN`pbb(*@$88Dg_e3P0EqzGxS^_Vm8U^MK@aNF94s=K zJVP^!4Vu7f*6goND+TB4rQkOO+Iihq!qcA9w59om6U>kH8NGp|jYolF@S`Q+TzQLk z&m2Rmqb&!=C>l-~U_BGGaEfNZ;GJzV7?V+J%ag7#l=Thw0;Q*1q!~F~;2gHwN(Bnz z&c?`h2SlFS8)Ud1YOmhJyX+UHm+e;XRFhbWcw`1WN?P z@zS1B ze`P(UHEqNIMbKW*w6odl$ol$va5~vnDVJx^9yA0!hxRh9k;VHk<_gA`E=r+-F}|`C zS_Zz+&KT#U$-C}L{;4R&+NRMi+MR(n4|A7ADF$MdQ({;V^gCtDQxXfQcKMd??`V{t zhAWwb!c4v!x+UWIPvDx~2+NFdhIWbU!gF7mm#$X)6zvE5Vd`IQ)X};;@b70O3Ti`g zuHfudug=~oZ-j)tv zhO`{jsDivx^zBL@S!I^Zb$LeFNo#R&k%FAHXw%vpH)%_2yi|AV=;KsiY2G9qhXg=C zJWeZM!{DDv;~7o9v_YraVP9Y0^v1?UQ7I!8R|nuZ!$mp|3@uDWzNGw%>3aV0L8vf9 zrYC&%zqu&8&;5B5l-!>uXhjAF2Bxq$?H=lF#wiii<{52m1xnaA4a=fbU4gKI@2W)q z4^0{tZ#lVxs8lLdSR}pg8EwIpo7CM(uCY{@GOSEax{SX+Ch~0~D9#Qv$_s0uD|+L>v17-)F}B)?o(UBbcx`B3H~Ll$L3^`ROM331|L<2TMLlF2fs;t5-7SFudX+O+GWF9=(>w*jk>vy8s%L* zp}R6Ij4oe59%f}_MfU%3cr&g@FD}X=)Z+jKns)49`gPE#Fcx50KW(VsRd1}PSqJTt z9cZ&n)6C&FX47`e=^Jw-IwklNZ(Rd|-3r{2wv{Ge_&%B`hj5ZAZ=2btcY z-N-mY#~LPdplhOZE&R3XL(sBpMOlcbxWIG^w!byAt*Y;=z9|4%v=3XiB)Xt8(rO{9 zHf<=&kj2M2ozrjy>57*jYfUAU2B@EKn}5`gt5@H4v0oI*EtMp^mNQ2)Wi*$f#)Uc9 zClX^&nxSrf9&lk`>3P`)HP4Q7H1W^{rlLj|g)0Ca9-LP7xr8wP># z_CeEYD+?7=%OcCfAFk0QzTjjANi&N!6Jiw|$fC?o97VXXWo!iNM(qv9HGdK(TwnVO zxDjPw$*91zXj!E!0YCPws9R8qUeN1QPhQ#QqQ*2nKBncQ3V^!~T9tigpM+(}Z%0|$ zEuelK<%Tn^z(&=K{Dp6J#_eFtvQ`DP*;Fo1kAWahOQ>7{5VwqzHh)pHff1c-1E>TO z{5GaC#X6~22TwQ@<0<{Fv&_ubaGc4HI9yyeKr3kQtobOn8`Dr2x~3L>Ee3;&Vrz|N4Gz%_V6WpsUO3n;FAzIoRa;VL?9R&Bqn! zsV}$3w?bQw*$OY)nWr0oMP~L}9}LcWpk4n&8$t}yX5=nmE6NgM`@lZ)lZD6fW@Mg< zYEW4~xzkWSwAe22it)w3KU71UG%R7P<*`n=!0Aq7BNYZ_`g*4TsEc3#NMAo2E6SG- zC=1 { - const { handles } = useCssHandles(CSS_HANDLES); - - const props = { - className: `${handles.html} ${classes}`, - "data-testid": testId - }; - const Children = <>{children}{text}; - const Element = React.createElement(tag, props, Children); - - return <>{Element}; + children?: ReactNode; + /** + * Qual tag Html que deseja que seja usar + * + * @default div + */ + tag?: keyof React.ReactHTML; + /** + * Classes CSS extras que deseja adicionar. + * Feito para uso de [classes do tachyons](https://tachyons.io/) + */ + tachyonsClasses?: string; + /** + * Se caso quiser usar esse componente + * para adicinar um texto simples + */ + text?: string; + /** + * Tag ID para + */ + testId?: string; +}; + +export const Html = ({ + children = null, + tag = "div", + text = "", + tachyonsClasses: classes = "", + testId, +}: HtmlProps) => { + const { handles } = useCssHandles(CSS_HANDLES); + + const props = { + className: `${handles.html} ${classes}`, + "data-testid": testId, + }; + const Children = ( + <> + {children} + {text} + + ); + const Element = React.createElement(tag, props, Children); + + return <>{Element}; }; diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..ec4a516 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,9 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ - "flex-layout.row#deals", + "example-component", + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", "flex-layout.row#shelf", @@ -40,7 +40,7 @@ "phone": 1 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "never", "blockClass": "carousel" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..d7f0c05 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -78,7 +78,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "54%", "rowGap": 0 } }, @@ -91,7 +91,10 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "thumbnailsOrientation": "horizontal", + "displayThumbnailsArrows": false, + "showNavigationArrows": false, + "showPaginationDots": false } }, "flex-layout.col#right-col": { @@ -101,12 +104,12 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", + "flex-layout.row#list-price-savings", "product-separator", - "product-identifier.product", "sku-selector", "product-quantity", "product-assembly-options", diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..7cab0ea 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,10 +120,10 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", - "showNavigationArrows": true + "showNavigationArrows": "never" } } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..c16a50b 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -8,9 +8,9 @@ /* Media Query M3 */ /* Grid breakpoints */ .html { - background-color: red; + background-color: blueviolet; } .html--pdp-breadcrumb { - background-color: green; + background-color: black; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..95cb97c --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,29 @@ +/* +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 */ +.container { + padding-left: 40px; + display: flex; + align-items: center; + color: #929292; +} +.container .homeLink .homeIcon { + display: none; +} +.container .homeLink::before { + content: "Home"; + font-size: 16px; +} +.container .arrow--1 .link { + font-size: 0; +} +.container .arrow--1 .link::before { + content: "Sapatos"; + font-size: 16px; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..4b400f1 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,13 @@ -.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; -} - -.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; -} +/* +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 { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..c752b47 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,25 @@ -.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 { + display: flex; + justify-content: flex-end; + margin-right: 40px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); } +.product-identifier .product-identifier__label, +.product-identifier .product-identifier__separator { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..cb71014 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,21 @@ /* Grid breakpoints */ .newsletter { background: red; +} + +.carouselGaleryThumbs { + width: 59.24%; + padding-left: 40px; +} + +.productBrand { + display: flex; + justify-content: flex-end; + margin-right: 37px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; } \ 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 ea7d5b9..4e15541 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,7 @@ .html { - background-color: red; + background-color: blueviolet; } .html--pdp-breadcrumb { - background-color: green; + background-color: black; } - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..3780c30 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,28 @@ +@import "/styles/sass/utils/vars"; + +.container { + padding-left: 40px; + display: flex; + align-items: center; + + .homeLink { + .homeIcon { + display: none; + } + } + .homeLink::before { + content: "Home"; + font-size: 16px; + color: $color-gray6; + } + .arrow--1 { + .link { + font-size: 0; + } + .link::before { + content: "Sapatos"; + font-size: 16px; + color: $color-gray6; + } + } +} 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..b0a9d90 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,4 @@ +.stretchChildrenWidth { + margin: 0; + padding: 0; +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..cc3986e --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,19 @@ +.product-identifier { + display: flex; + justify-content: flex-end; + margin-right: 40px; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + + color: rgba(146, 146, 146, 0.48); + + .product-identifier__label, + .product-identifier__separator { + display: none; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..e2d6654 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,22 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +} + +.carouselGaleryThumbs { + width: 59.24%; + padding-left: 40px; +} + +.productBrand { + display: flex; + justify-content: flex-end; + margin-right: 37px; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + + color: #575757; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..e0173bb 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -7,6 +7,7 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray6: #929292; $color-blue: #4267b2; @@ -14,18 +15,18 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default; From d3bd6e57958676ffa608d072f12990f9a9339db8 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Tue, 31 Jan 2023 18:43:03 -0300 Subject: [PATCH 02/14] =?UTF-8?q?feat:=20cria=C3=A7=C3=A3o=20da=20descri?= =?UTF-8?q?=C3=A7=C3=A3o=20do=20produto=20e=20estiliza=C3=A7=C3=A3o=20do?= =?UTF-8?q?=20pix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 3 + .eslintrc | 7 + .prettierrc | 1 + package.json | 39 +++-- react/Parcelamento.tsx | 3 + react/components/Example/Example.tsx | 10 +- react/components/Html/index.tsx | 40 ++--- react/components/Html/style.css | 14 ++ .../components/Parcelamento/Parcelamento.css | 3 + .../components/Parcelamento/Parcelamento.tsx | 32 ++++ react/components/pix/pix.css | 23 +++ react/components/pix/pix.svg | 38 +++++ react/components/pix/pix.tsx | 34 ++++ react/package.json | 34 +++- react/pix.tsx | 3 + react/tsconfig.json | 10 +- react/yarn.lock | 120 ++++++++++++-- store/blocks/pdp/product-assembly.jsonc | 24 ++- store/blocks/pdp/product.jsonc | 153 ++++++++++++++++-- store/blocks/product-price.jsonc | 12 +- .../product-summary/product-summary.jsonc | 4 +- store/interfaces.json | 7 + styles/css/vtex-numeric-stepper.css | 13 ++ styles/css/vtex.address-form.css | 13 ++ styles/css/vtex.address.css | 9 ++ styles/css/vtex.breadcrumb.css | 9 +- styles/css/vtex.numeric-stepper.css | 12 ++ styles/css/vtex.product-quantity.css | 45 ++++++ styles/css/vtex.store-components.css | 108 +++++++++++++ styles/css/vtex.tab-layout.css | 49 ++++++ .../sass/pages/product/vtex.breadcrumb.scss | 17 +- .../pages/product/vtex.numeric-stepper.scss | 3 + .../pages/product/vtex.product-quantity.scss | 42 +++++ styles/sass/pages/product/vtex.rich-text.scss | 0 .../pages/product/vtex.store-components.scss | 135 +++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 38 +++++ 36 files changed, 1001 insertions(+), 106 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc create mode 100644 .prettierrc create mode 100644 react/Parcelamento.tsx create mode 100644 react/components/Html/style.css create mode 100644 react/components/Parcelamento/Parcelamento.css create mode 100644 react/components/Parcelamento/Parcelamento.tsx create mode 100644 react/components/pix/pix.css create mode 100644 react/components/pix/pix.svg create mode 100644 react/components/pix/pix.tsx create mode 100644 react/pix.tsx create mode 100644 styles/css/vtex-numeric-stepper.css create mode 100644 styles/css/vtex.address-form.css create mode 100644 styles/css/vtex.address.css create mode 100644 styles/css/vtex.numeric-stepper.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.numeric-stepper.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss delete mode 100644 styles/sass/pages/product/vtex.rich-text.scss create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..f3dbc7f --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +node_modules/ +coverage/ +*.snap.ts \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..9713dfd --- /dev/null +++ b/.eslintrc @@ -0,0 +1,7 @@ +{ + "extends": "vtex", + "root": true, + "env": { + "node": true + } +} \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..320bc0c --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +"@vtex/prettier-config" \ No newline at end of file diff --git a/package.json b/package.json index 4b65062..e87e00e 100644 --- a/package.json +++ b/package.json @@ -1,20 +1,27 @@ { + "name": "store-theme", + "private": true, "license": "UNLICENSED", - "main": "gulpfile.js", - "directories": { - "doc": "docs" - }, "scripts": { - "dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"", "lint": "eslint ./ --fix", + "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"", + "dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"", "scss": "gulp storefront" }, - "repository": { - "type": "git", - "url": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git" + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + }, + "lint-staged": { + "*.{ts,js,tsx,jsx}": [ + "eslint --fix", + "prettier --write" + ], + "*.{json,graphql,gql}": [ + "prettier --write" + ] }, - "keywords": [], - "author": "", "devDependencies": { "eslint": "^7.22.0", "eslint-config-prettier": "^8.1.0", @@ -37,8 +44,18 @@ "prettier": "2.0.2", "typescript": "3.8.3" }, + "main": "gulpfile.js", + "directories": { + "doc": "docs" + }, + "repository": { + "type": "git", + "url": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git" + }, + "keywords": [], + "author": "", "dependencies": { "husky": "^5.2.0", "react": "^17.0.2" } -} +} \ No newline at end of file diff --git a/react/Parcelamento.tsx b/react/Parcelamento.tsx new file mode 100644 index 0000000..3e42227 --- /dev/null +++ b/react/Parcelamento.tsx @@ -0,0 +1,3 @@ +import Parcelamento from './components/Parcelamento/Parcelamento' + +export default Parcelamento diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx index d195271..934f878 100644 --- a/react/components/Example/Example.tsx +++ b/react/components/Example/Example.tsx @@ -1,9 +1,7 @@ -import React from 'react' +import React from "react"; const Example = () => { - return ( -
Example
- ) -} + return
Example
; +}; -export default Example \ No newline at end of file +export default Example; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index 847f910..594f6ca 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,52 +1,54 @@ -import React, { ReactNode } from "react"; -import { useCssHandles } from "vtex.css-handles"; +import React, { ReactNode } from 'react' +import { useCssHandles } from 'vtex.css-handles' -const CSS_HANDLES = ["html"] as const; +const CSS_HANDLES = ['html'] as const + +import './style.css' type HtmlProps = { - children?: ReactNode; + children?: ReactNode /** * Qual tag Html que deseja que seja usar * * @default div */ - tag?: keyof React.ReactHTML; + tag?: keyof React.ReactHTML /** * Classes CSS extras que deseja adicionar. * Feito para uso de [classes do tachyons](https://tachyons.io/) */ - tachyonsClasses?: string; + tachyonsClasses?: string /** * Se caso quiser usar esse componente * para adicinar um texto simples */ - text?: string; + text?: string /** * Tag ID para */ - testId?: string; -}; + testId?: string +} export const Html = ({ children = null, - tag = "div", - text = "", - tachyonsClasses: classes = "", + tag = 'div', + text = '', + tachyonsClasses: classes = '', testId, }: HtmlProps) => { - const { handles } = useCssHandles(CSS_HANDLES); + const { handles } = useCssHandles(CSS_HANDLES) const props = { className: `${handles.html} ${classes}`, - "data-testid": testId, - }; + 'data-testid': testId, + } const Children = ( <> {children} {text} - ); - const Element = React.createElement(tag, props, Children); + ) + const Element = React.createElement(tag, props, Children) - return <>{Element}; -}; + return <>{Element} +} diff --git a/react/components/Html/style.css b/react/components/Html/style.css new file mode 100644 index 0000000..37aab5f --- /dev/null +++ b/react/components/Html/style.css @@ -0,0 +1,14 @@ +[class*='html'] { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 16px; +} + +[class*='html'] > [class*='button'] { + width: 100%; + height: 49px; + margin-right: 40px; + background: #000; + border: #000; +} diff --git a/react/components/Parcelamento/Parcelamento.css b/react/components/Parcelamento/Parcelamento.css new file mode 100644 index 0000000..27a561c --- /dev/null +++ b/react/components/Parcelamento/Parcelamento.css @@ -0,0 +1,3 @@ +.ParcelaWrapper { + margin: 0 0 8px 0; +} diff --git a/react/components/Parcelamento/Parcelamento.tsx b/react/components/Parcelamento/Parcelamento.tsx new file mode 100644 index 0000000..9d9b6b9 --- /dev/null +++ b/react/components/Parcelamento/Parcelamento.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import { useProduct } from 'vtex.product-context' +import { useCssHandles } from 'vtex.css-handles' + +import "./Parcelamento.css" + +const Parcelamento = () => { + const CSS_HANDLES = ['ParcelaWrapper'] + + const handles = useCssHandles(CSS_HANDLES) + const product = useProduct() + + const Installments = { + numberOfInstallments: + product?.selectedItem?.sellers[0].commertialOffer.Installments[3] + .NumberOfInstallments, + } + const Price = { + numberOfInstallments: + product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value, + } + console.log(product) + return ( +

+ {Installments.numberOfInstallments} x de R$  + {Price.numberOfInstallments?.toFixed(2).toString().replace('.', ',')} sem + juros +

+ ) +} + +export default Parcelamento diff --git a/react/components/pix/pix.css b/react/components/pix/pix.css new file mode 100644 index 0000000..7281087 --- /dev/null +++ b/react/components/pix/pix.css @@ -0,0 +1,23 @@ +.pixwrapper { + display: flex; + flex-direction: row; + align-items: center; +} +.pixPrice { + margin-left: 26px; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} +.pixPrice > p { + margin: 0; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/components/pix/pix.svg b/react/components/pix/pix.svg new file mode 100644 index 0000000..06a7b0c --- /dev/null +++ b/react/components/pix/pix.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/components/pix/pix.tsx b/react/components/pix/pix.tsx new file mode 100644 index 0000000..4025ca4 --- /dev/null +++ b/react/components/pix/pix.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +import { useProduct } from 'vtex.product-context' +import { useCssHandles } from 'vtex.css-handles' + +import './pix.css' + +const Pix = () => { + const CSS_HANDLES = ['pixwrapper', 'pixPrice'] + + const handles = useCssHandles(CSS_HANDLES) + const product = useProduct() + const productPrice = product?.selectedItem?.sellers[0].commertialOffer.Price + + let descontoPixValue = 0 + if (productPrice) descontoPixValue = productPrice * 0.9 + + return ( + <> +
+ image-pix +
+ R$ {descontoPixValue.toFixed(2).toString().replace('.', ',')} +

10 % de desconto

+
+
+ + ) +} + +export default Pix diff --git a/react/package.json b/react/package.json index aa90575..76bee3b 100644 --- a/react/package.json +++ b/react/package.json @@ -24,11 +24,35 @@ "@vtex/tsconfig": "^0.4.4", "graphql": "^14.6.0", "typescript": "3.9.7", - "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime", - "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout", - "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text", - "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide", + "vtex.add-to-cart-button": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.add-to-cart-button@0.29.0/public/@types/vtex.add-to-cart-button", + "vtex.breadcrumb": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.breadcrumb@1.9.4/public/@types/vtex.breadcrumb", + "vtex.checkout-summary": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-summary@0.22.0/public/@types/vtex.checkout-summary", + "vtex.condition-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.condition-layout@2.6.0/public/@types/vtex.condition-layout", + "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles", + "vtex.login": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.login@2.56.1/public/@types/vtex.login", + "vtex.menu": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.menu@2.34.25/public/@types/vtex.menu", + "vtex.minicart": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.minicart@2.65.0/public/@types/vtex.minicart", + "vtex.modal-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.modal-layout@0.14.0/public/@types/vtex.modal-layout", + "vtex.my-account": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.25.0/public/@types/vtex.my-account", "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context", - "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles" + "vtex.product-list": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-list@0.36.0/public/@types/vtex.product-list", + "vtex.product-quantity": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-quantity@1.9.0/public/@types/vtex.product-quantity", + "vtex.product-review-interfaces": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-review-interfaces@1.0.2/public/_types/react", + "vtex.product-summary": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary@2.81.0/public/@types/vtex.product-summary", + "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime", + "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.15.0/public/@types/vtex.rich-text", + "vtex.search-result": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-result@3.119.0/public/@types/vtex.search-result", + "vtex.shelf": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shelf@1.47.3/public/@types/vtex.shelf", + "vtex.slider": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider@0.8.3/public/@types/vtex.slider", + "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.23.0/public/@types/vtex.slider-layout", + "vtex.store": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.129.0/public/@types/vtex.store", + "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.164.0/public/@types/vtex.store-components", + "vtex.store-footer": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-footer@2.26.0/public/@types/vtex.store-footer", + "vtex.store-header": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-header@2.29.0/public/@types/vtex.store-header", + "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons", + "vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.15.0/public/@types/vtex.store-image", + "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide", + "vtex.tab-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.tab-layout@0.4.3/public/@types/vtex.tab-layout", + "vtex.telemarketing": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.telemarketing@2.12.0/public/@types/vtex.telemarketing" } } diff --git a/react/pix.tsx b/react/pix.tsx new file mode 100644 index 0000000..bb33125 --- /dev/null +++ b/react/pix.tsx @@ -0,0 +1,3 @@ +import pix from "./components/pix/pix"; + +export default pix; diff --git a/react/tsconfig.json b/react/tsconfig.json index a26a540..9ac901b 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -2,10 +2,16 @@ "extends": "@vtex/tsconfig", "compilerOptions": { "noEmitOnError": false, - "lib": ["dom"], + "lib": [ + "dom" + ], "module": "esnext", "moduleResolution": "node", "target": "es2017" }, - "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"] + "include": [ + "./typings/*.d.ts", + "./**/*.tsx", + "./**/*.ts" + ] } \ No newline at end of file diff --git a/react/yarn.lock b/react/yarn.lock index d4b6c43..4b9cbbb 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -774,29 +774,125 @@ use-isomorphic-layout-effect@^1.1.2: resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb" integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== +"vtex.add-to-cart-button@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.add-to-cart-button@0.29.0/public/@types/vtex.add-to-cart-button": + version "0.29.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.add-to-cart-button@0.29.0/public/@types/vtex.add-to-cart-button#0f09b88092945ba4968bbcad12d0372fb9612953" + +"vtex.breadcrumb@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.breadcrumb@1.9.4/public/@types/vtex.breadcrumb": + version "1.9.4" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.breadcrumb@1.9.4/public/@types/vtex.breadcrumb#624d6ddbd839bccd2b08e10f0f5f4a0509de834b" + +"vtex.checkout-summary@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-summary@0.22.0/public/@types/vtex.checkout-summary": + version "0.22.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-summary@0.22.0/public/@types/vtex.checkout-summary#c6d3dbd76be90cd18c4a6e03a00284dc4f12f352" + +"vtex.condition-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.condition-layout@2.6.0/public/@types/vtex.condition-layout": + version "2.6.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.condition-layout@2.6.0/public/@types/vtex.condition-layout#499861a211a200da6174e2355de934358f3f8339" + "vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles": version "1.0.0" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles#336b23ef3a9bcb2b809529ba736783acd405d081" +"vtex.login@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.login@2.56.1/public/@types/vtex.login": + version "2.56.1" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.login@2.56.1/public/@types/vtex.login#7513b3d0a7e51c9440144ff0072709854eb13ee2" + +"vtex.menu@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.menu@2.34.25/public/@types/vtex.menu": + version "2.34.25" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.menu@2.34.25/public/@types/vtex.menu#3f4c3aa3b5f8c396d1a630703862d354681ae5a2" + +"vtex.minicart@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.minicart@2.65.0/public/@types/vtex.minicart": + version "2.65.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.minicart@2.65.0/public/@types/vtex.minicart#fa4250a0cfa4628a59a1868dbfc5f735eecd01fb" + +"vtex.modal-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.modal-layout@0.14.0/public/@types/vtex.modal-layout": + version "0.14.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.modal-layout@0.14.0/public/@types/vtex.modal-layout#d5787b816241602f87aa7b57c30f300dd4367105" + +"vtex.my-account@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.25.0/public/@types/vtex.my-account": + version "1.25.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.25.0/public/@types/vtex.my-account#3bc46389c0aa28f4e3e2e008fe3690f5901b1f2a" + "vtex.product-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context": version "0.10.0" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc" -"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime": - version "8.130.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime#6958e1017c423c0906eae3500bad70d3fb353a98" +"vtex.product-list@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-list@0.36.0/public/@types/vtex.product-list": + version "0.36.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-list@0.36.0/public/@types/vtex.product-list#9bfd1dffd6a098490cd8b4cd1633979436723e1a" -"vtex.responsive-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout": - version "0.1.2" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout#e33f23a78afb3ffb8ff8aedc77b1ca6728583e72" +"vtex.product-quantity@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-quantity@1.9.0/public/@types/vtex.product-quantity": + version "1.9.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-quantity@1.9.0/public/@types/vtex.product-quantity#686536c85e0bf7af98f803dc4385f959c181bb07" -"vtex.rich-text@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text": - version "0.14.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text#fd31249116da1e0f1caeaa00a44035afa9c91703" +"vtex.product-review-interfaces@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-review-interfaces@1.0.2/public/_types/react": + version "1.0.2" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-review-interfaces@1.0.2/public/_types/react#84d1997cdae079d1401611f3d4a4619ed914673f" -"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide": - version "9.145.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide#41dfb32af8756eb5528dbd452e47003a8f67fe8c" +"vtex.product-summary@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary@2.81.0/public/@types/vtex.product-summary": + version "2.81.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary@2.81.0/public/@types/vtex.product-summary#bbb90d650c759e09c71cce140f1cb4e062d17af5" + +"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime": + version "8.132.4" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime#66bb41bd4d342e37c9d85172aad5f7eefebfb6dc" + +"vtex.rich-text@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.15.0/public/@types/vtex.rich-text": + version "0.15.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.15.0/public/@types/vtex.rich-text#f23416cea64e72531069e58f1b137dfdb5b4b510" + +"vtex.search-result@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-result@3.119.0/public/@types/vtex.search-result": + version "3.119.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-result@3.119.0/public/@types/vtex.search-result#d6d22cc5245d16e24d6e2f2af92ce5b67679e91c" + +"vtex.shelf@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shelf@1.47.3/public/@types/vtex.shelf": + version "1.47.3" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shelf@1.47.3/public/@types/vtex.shelf#afccd7cc6bf2c23d007306062b7413f46b25cbc8" + +"vtex.slider-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.23.0/public/@types/vtex.slider-layout": + version "0.23.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.23.0/public/@types/vtex.slider-layout#cfb7246c982a5133f75a78bba92e3c1b64cae4c4" + +"vtex.slider@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider@0.8.3/public/@types/vtex.slider": + version "0.8.3" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider@0.8.3/public/@types/vtex.slider#9b7be08012a5d3ec41fdc651235a964cb5f7db85" + +"vtex.store-components@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.164.0/public/@types/vtex.store-components": + version "3.164.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.164.0/public/@types/vtex.store-components#ab70608373379c9a405b787c090f93fb42a10011" + +"vtex.store-footer@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-footer@2.26.0/public/@types/vtex.store-footer": + version "2.26.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-footer@2.26.0/public/@types/vtex.store-footer#434f87c10fafb4d145dea1c95906a650d9fab04a" + +"vtex.store-header@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-header@2.29.0/public/@types/vtex.store-header": + version "2.29.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-header@2.29.0/public/@types/vtex.store-header#702033f782c6c25ae2fed42b5a3703db5fd1ac87" + +"vtex.store-icons@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons": + version "0.18.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons#0ee94d549aa283ce3a13ab987c13eac4fdfd1bba" + +"vtex.store-image@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.15.0/public/@types/vtex.store-image": + version "0.15.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.15.0/public/@types/vtex.store-image#5f96a89b8eccce7ac86e487d4c61d96f770bf785" + +"vtex.store@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.129.0/public/@types/vtex.store": + version "2.129.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.129.0/public/@types/vtex.store#09a441473682d1e3ba2459af793e6e99c284d5fa" + +"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide": + version "9.146.3" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide#05558160f29cd8f4aefe419844a4bd66e2b3fdbb" + +"vtex.tab-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.tab-layout@0.4.3/public/@types/vtex.tab-layout": + version "0.4.3" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.tab-layout@0.4.3/public/@types/vtex.tab-layout#579ee7ffabb55ce7ed271b0af1015f41c49b7f30" + +"vtex.telemarketing@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.telemarketing@2.12.0/public/@types/vtex.telemarketing": + version "2.12.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.telemarketing@2.12.0/public/@types/vtex.telemarketing#beda975262b873b778bf5c56b9ff4c2b785f3453" yaml@^1.10.0: version "1.10.2" diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..34f4233 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -1,10 +1,10 @@ { - "sticky-layout#buy-button": { - "props": { - "position": "bottom" - }, - "children": ["flex-layout.row#buy-button"] - }, + // "sticky-layout#buy-button": { + // "props": { + // "position": "bottom" + // }, + // "children": ["flex-layout.row#buy-button"] + // }, "product-assembly-options": { "children": [ "flex-layout.row#product-assembly-options", @@ -32,17 +32,13 @@ "props": { "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "flex-layout.col#product-assembly-image": { "props": { "marginRight": 4 }, - "children": [ - "assembly-option-item-image" - ] + "children": ["assembly-option-item-image"] }, "flex-layout.col#product-assembly-middle": { "props": { @@ -96,9 +92,7 @@ "horizontalAlign": "right", "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "assembly-option-item-customize#sec-level": { "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d7f0c05..adf1416 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", + "tab-layout#desc", "flex-layout.row#specifications-title", "product-specification-group#table", "shelf.relatedProducts", @@ -78,7 +78,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "54%", + "width": "46%", "rowGap": 0 } }, @@ -107,17 +107,15 @@ "product-identifier.product", "product-rating-summary", "flex-layout.row#selling-price", - "product-installments", - "flex-layout.row#list-price-savings", - "product-separator", + "Parcelamento", + "pix", "sku-selector", - "product-quantity", + "html#quantityAndButton", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" + // "share#default" ] }, @@ -128,19 +126,27 @@ "children": ["vtex.store-components:product-name"] }, + "pix": { + "props": { + "marginBottom": 16, + "marginTop": 8 + } + }, + + "Parcelamento": { + "props": { + "marginBottom": 8 + } + }, + "sku-selector": { "props": { "variationsSpacing": 3, "showValueNameForImageVariation": true } }, - - "flex-layout.row#buy-button": { - "props": { - "marginTop": 4, - "marginBottom": 7 - }, - "children": ["add-to-cart-button"] + "html#quantityAndButton": { + "children": ["product-quantity", "add-to-cart-button"] }, "flex-layout.row#product-availability": { @@ -175,6 +181,121 @@ "children": ["availability-subscriber"] }, + "flex-layout.col#image-description": { + "props": { + "blockClass": "image-description" + }, + "children": ["image#img-descricao"] + }, + "image#img-descricao": { + "props": { + "blockClass": "img-descricao", + "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true" + } + }, + + "flex-layout.col#description": { + "props": { "blockClass": "description" }, + "children": ["product-description"] + }, + + "tab-layout#desc": { + "children": ["tab-list#home", "tab-content#desc"], + "props": { + "blockClass": "desc", + "defaultActiveTabId": "desc1" + } + }, + "tab-list#home": { + "children": [ + "tab-list.item#desc1", + "tab-list.item#desc2", + "tab-list.item#desc3", + "tab-list.item#desc4", + "tab-list.item#desc5" + ] + }, + "tab-list.item#desc1": { + "props": { + "tabId": "desc1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#desc2": { + "props": { + "tabId": "desc2", + "label": "Descrição" + } + }, + "tab-list.item#desc3": { + "props": { + "tabId": "desc3", + "label": "Descrição" + } + }, + "tab-list.item#desc4": { + "props": { + "tabId": "desc4", + "label": "Descrição" + } + }, + "tab-list.item#desc5": { + "props": { + "tabId": "desc5", + "label": "Descrição" + } + }, + "tab-content#desc": { + "children": [ + "tab-content.item#desc1", + "tab-content.item#desc2", + "tab-content.item#desc3", + "tab-content.item#desc4", + "tab-content.item#desc5" + ] + }, + "tab-content.item#desc1": { + "children": ["flex-layout.row#description-row"], + "props": { + "tabId": "desc1" + } + }, + "tab-content.item#desc2": { + "children": [], + "props": { + "tabId": "desc2" + } + }, + "tab-content.item#desc3": { + "children": [], + "props": { + "tabId": "desc2" + } + }, + "tab-content.item#desc4": { + "children": [], + "props": { + "tabId": "desc2" + } + }, + "tab-content.item#desc5": { + "children": [], + "props": { + "tabId": "desc2" + } + }, + + "flex-layout.row#description-row": { + "props": { + "blockClass": "description-row" + }, + "children": [ + "flex-layout.col#image-description", + "flex-layout.col#description" + ] + }, + "share#default": { "props": { "social": { diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..bb528e8 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -3,12 +3,9 @@ "props": { "colGap": 2, "preserveLayoutOnMobile": true, - "preventHorizontalStretch": true, - "marginBottom": 4 + "preventHorizontalStretch": true }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +16,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..bb93cc8 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -81,9 +81,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..d504c54 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,12 @@ "html": { "component": "html", "composition": "children" + }, + "pix": { + "component": "pix" + }, + + "Parcelamento": { + "component": "Parcelamento" } } diff --git a/styles/css/vtex-numeric-stepper.css b/styles/css/vtex-numeric-stepper.css new file mode 100644 index 0000000..8a4fd1b --- /dev/null +++ b/styles/css/vtex-numeric-stepper.css @@ -0,0 +1,13 @@ +/* +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 */ +.container { + background: red; + padding: 8.5px 0; +} \ 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..089b934 --- /dev/null +++ b/styles/css/vtex.address-form.css @@ -0,0 +1,13 @@ +/* +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 */ +.__postalCode { + display: flex; + width: 100%; +} \ No newline at end of file diff --git a/styles/css/vtex.address.css b/styles/css/vtex.address.css new file mode 100644 index 0000000..34c4328 --- /dev/null +++ b/styles/css/vtex.address.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.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 95cb97c..006fdc2 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -11,7 +11,6 @@ padding-left: 40px; display: flex; align-items: center; - color: #929292; } .container .homeLink .homeIcon { display: none; @@ -19,6 +18,10 @@ .container .homeLink::before { content: "Home"; font-size: 16px; + color: #929292; +} +.container .homeLink:hover::before { + color: #0f3e99; } .container .arrow--1 .link { font-size: 0; @@ -26,4 +29,8 @@ .container .arrow--1 .link::before { content: "Sapatos"; font-size: 16px; + color: #929292; +} +.container .arrow--1 .link:hover::before { + color: #0f3e99; } \ No newline at end of file diff --git a/styles/css/vtex.numeric-stepper.css b/styles/css/vtex.numeric-stepper.css new file mode 100644 index 0000000..a15666e --- /dev/null +++ b/styles/css/vtex.numeric-stepper.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 */ +.wrapper { + height: 80px; +} \ 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..4bfb790 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,45 @@ +/* +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 */ +.quantitySelectorContainer { + margin: 0; +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) { + width: 128px; + border: solid 1px #ccc; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 49px; + border: none; + background: #fff; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index cb71014..36528d6 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -26,4 +26,112 @@ font-size: 20px; line-height: 34px; color: #575757; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .frameAround, +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 1.5rem; + z-index: 3; + padding: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItem { + height: 43px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { + width: 40px; + height: 40px; + bottom: -0.25rem; + top: 0rem; + left: 0rem; + right: -0.25rem; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .valueWrapper { + padding: 10px 11px; + width: 40px; + height: 40px; +} +.skuSelectorContainer .frameAround { + border-color: #000; +} + +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + display: flex; + flex-direction: column; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + width: 231px; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + border: 1px solid #cccccc; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + padding: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::before { + content: "Digite seu cep"; + height: 16px; + width: 16px; + background: red; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + color: #000; +} +.shippingContainer :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-bottom: 5px; + background: #000; + border: 1px solid #000; + border-radius: 0; + cursor: pointer; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #fff; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..711d8df --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,49 @@ +/* +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 */ +.listContainer { + margin-bottom: 32px; + display: flex; + flex-direction: row; + column-gap: 197.5px; +} +.listContainer::after { + content: ""; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + bottom: 9px; +} + +.listItem :global(.vtex-button) { + background-color: white; + color: #bfbfbf; + border: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-radius: 0; +} + +.listItemActive :global(.vtex-button) { + background-color: white; + color: black; + border: 0; + border-bottom: 2px black solid; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 3780c30..a7074cb 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,5 +1,3 @@ -@import "/styles/sass/utils/vars"; - .container { padding-left: 40px; display: flex; @@ -11,18 +9,25 @@ } } .homeLink::before { - content: "Home"; + content: 'Home'; font-size: 16px; - color: $color-gray6; + color: #929292; + } + + .homeLink:hover::before { + color: #0f3e99; } .arrow--1 { .link { font-size: 0; } .link::before { - content: "Sapatos"; + content: 'Sapatos'; font-size: 16px; - color: $color-gray6; + color: #929292; + } + .link:hover::before { + color: #0f3e99; } } } diff --git a/styles/sass/pages/product/vtex.numeric-stepper.scss b/styles/sass/pages/product/vtex.numeric-stepper.scss new file mode 100644 index 0000000..db39b3b --- /dev/null +++ b/styles/sass/pages/product/vtex.numeric-stepper.scss @@ -0,0 +1,3 @@ +.wrapper { + height: 80px; +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..8b339ef --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,42 @@ +.quantitySelectorContainer { + margin: 0; + + .quantitySelectorTitle { + display: none; + } + :global(.vtex-numeric-stepper-wrapper) { + :global(.vtex-numeric-stepper-container) { + width: 128px; + border: solid 1px #ccc; + + :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; + + :global(.vtex-numeric-stepper__plus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; + } + } + :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 49px; + border: none; + background: #fff; + } + :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; + + :global(.vtex-numeric-stepper__minus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss deleted file mode 100644 index e69de29..0000000 diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index e2d6654..b7d473d 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -12,7 +12,7 @@ justify-content: flex-end; margin-right: 37px; - font-family: "Open Sans", sans-serif; + font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 300; font-size: 20px; @@ -20,3 +20,136 @@ color: #575757; } + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + + .frameAround, + .skuSelectorInternalBox { + border-radius: 1.5rem; + z-index: 3; + padding: 0; + } + + .skuSelectorSubcontainer--tamanho { + .skuSelectorItem { + height: 43px; + } + + .frameAround { + width: 40px; + height: 40px; + + bottom: -0.25rem; + top: 0rem; + left: 0rem; + right: -0.25rem; + } + .valueWrapper { + padding: 10px 11px; + width: 40px; + height: 40px; + } + } + + .frameAround { + border-color: #000; + } +} + +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; + + :global(.vtex-address-form__postalCode) { + display: flex; + + :global(.vtex-input) { + display: flex; + flex-direction: column; + + :global(.vtex-input__label) { + font-size: 0; + } + + :global(.vtex-input__label)::before { + content: 'CALCULAR FRETE:'; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + + :global(.vtex-input-prefix__group) { + width: 231px; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + + border: 1px solid #cccccc; + border-radius: 0; + + :global(.vtex-address-form-4-x-input) { + padding: 0; + } + + :global(.vtex-address-form-4-x-input)::before { + content: 'Digite seu cep'; + height: 16px; + width: 16px; + background: red; + } + } + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; + + :last-child { + color: #000; + } + } + } + + :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-bottom: 5px; + + background: #000; + border: 1px solid #000; + border-radius: 0; + + cursor: pointer; + + :global(.vtex-button__label) { + padding: 0; + font-size: 0; + } + + :global(.vtex-button__label)::before { + content: 'OK'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + display: flex; + align-items: center; + + color: #fff; + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..966d427 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,38 @@ +.listContainer { + margin-bottom: 32px; + display: flex; + flex-direction: row; + column-gap: 197.5px; + &::after { + content: ''; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + bottom: 9px; + } +} +.listItem :global(.vtex-button) { + background-color: white; + color: #bfbfbf; + border: 0; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-radius: 0; +} +.listItemActive :global(.vtex-button) { + background-color: white; + color: black; + border: 0; + border-bottom: 2px black solid; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} From 5a15c8b3cbf9e1189697cce403597d7996f9848b Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Wed, 1 Feb 2023 19:12:53 -0300 Subject: [PATCH 03/14] =?UTF-8?q?feat:=20adi=C3=A7=C3=A3o=20placeholder=20?= =?UTF-8?q?no=20input]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/Placeholder.tsx | 3 +++ react/components/Html/style.css | 2 +- react/components/Placeholder/Placeholder.tsx | 9 +++++++ store/blocks/pdp/product.jsonc | 8 ++++--- store/interfaces.json | 3 +++ styles/css/vtex.flex-layout.css | 14 ++++++++--- styles/css/vtex.product-identifier.css | 1 - styles/css/vtex.shelf.css | 24 +++++++++++++++++++ styles/css/vtex.store-components.css | 12 ---------- .../sass/pages/product/vtex.breadcrumb.scss | 1 - .../sass/pages/product/vtex.flex-layout.scss | 17 ++++++++++--- .../product/vtex.product-identifier.scss | 2 +- styles/sass/pages/product/vtex.shelf.scss | 16 +++++++++++++ .../pages/product/vtex.store-components.scss | 14 +---------- 14 files changed, 88 insertions(+), 38 deletions(-) create mode 100644 react/Placeholder.tsx create mode 100644 react/components/Placeholder/Placeholder.tsx create mode 100644 styles/css/vtex.shelf.css create mode 100644 styles/sass/pages/product/vtex.shelf.scss diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..5276001 --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,3 @@ +import Placeholder from './components/Placeholder/Placeholder' + +export default Placeholder diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 37aab5f..f3cbcbd 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -8,7 +8,7 @@ [class*='html'] > [class*='button'] { width: 100%; height: 49px; - margin-right: 40px; + /* margin-right: 40px; */ background: #000; border: #000; } diff --git a/react/components/Placeholder/Placeholder.tsx b/react/components/Placeholder/Placeholder.tsx new file mode 100644 index 0000000..8fc6add --- /dev/null +++ b/react/components/Placeholder/Placeholder.tsx @@ -0,0 +1,9 @@ +const Placeholder = () => { + if (typeof document !== 'undefined') { + const InputCep = document.querySelector('.vtex-address-form-4-x-input') + InputCep?.setAttribute('placeholder', 'Digite seu CEP') + } + + return null +} +export default Placeholder diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index adf1416..5483354 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,8 +4,8 @@ "html#breadcrumb", "condition-layout.product#availability", "tab-layout#desc", - "flex-layout.row#specifications-title", - "product-specification-group#table", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] @@ -78,7 +78,8 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "46%", + "width": "51%", + // "maxHeight": 664, "rowGap": 0 } }, @@ -111,6 +112,7 @@ "pix", "sku-selector", "html#quantityAndButton", + "Placeholder", "product-assembly-options", "product-gifts", "availability-subscriber", diff --git a/store/interfaces.json b/store/interfaces.json index d504c54..a40473f 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -12,5 +12,8 @@ "Parcelamento": { "component": "Parcelamento" + }, + "Placeholder": { + "component": "Placeholder" } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 4b400f1..6368f7e 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,7 +7,15 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.stretchChildrenWidth { - margin: 0; - padding: 0; +:global(.vtex-store-components-3-x-container) { + padding: 0 40px; +} +:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) { + max-height: 664px !important; +} +:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) .swiper-container { + display: none; +} +:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) .swiper-container .swiper-wrapper { + display: none; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index c752b47..35e807c 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -10,7 +10,6 @@ .product-identifier { display: flex; justify-content: flex-end; - margin-right: 40px; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css new file mode 100644 index 0000000..f65c000 --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,24 @@ +@charset "UTF-8"; +/* +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 */ +.title { + font-size: 0; +} + +.title::before { + content: "Você também pode gostar:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 36528d6..40dee3e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -11,15 +11,9 @@ background: red; } -.carouselGaleryThumbs { - width: 59.24%; - padding-left: 40px; -} - .productBrand { display: flex; justify-content: flex-end; - margin-right: 37px; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 300; @@ -94,12 +88,6 @@ .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { padding: 0; } -.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::before { - content: "Digite seu cep"; - height: 16px; - width: 16px; - background: red; -} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { display: flex; position: absolute; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index a7074cb..ec9da1a 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -13,7 +13,6 @@ font-size: 16px; color: #929292; } - .homeLink:hover::before { color: #0f3e99; } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index b0a9d90..f4ec39f 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,4 +1,15 @@ -.stretchChildrenWidth { - margin: 0; - padding: 0; +:global(.vtex-store-components-3-x-container) { + padding: 0 40px; + + :global(.vtex-store-components-3-x-productImageTag) { + max-height: 664px !important; + } + :global(.vtex-store-components-3-x-carouselGaleryThumbs) { + .swiper-container { + display: none; + .swiper-wrapper { + display: none; + } + } + } } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index cc3986e..2ed5873 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,7 +1,7 @@ .product-identifier { display: flex; justify-content: flex-end; - margin-right: 40px; + // margin-right: 40px; font-family: "Open Sans", sans-serif; font-style: normal; diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss new file mode 100644 index 0000000..4cbba16 --- /dev/null +++ b/styles/sass/pages/product/vtex.shelf.scss @@ -0,0 +1,16 @@ +.title { + font-size: 0; +} + +.title::before { + content: 'Você também pode gostar:'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + text-align: center; + + color: #575757; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index b7d473d..e86295f 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,15 +2,10 @@ background: red; } -.carouselGaleryThumbs { - width: 59.24%; - padding-left: 40px; -} - .productBrand { display: flex; justify-content: flex-end; - margin-right: 37px; + // margin-right: 37px; font-family: 'Open Sans', sans-serif; font-style: normal; @@ -98,13 +93,6 @@ :global(.vtex-address-form-4-x-input) { padding: 0; } - - :global(.vtex-address-form-4-x-input)::before { - content: 'Digite seu cep'; - height: 16px; - width: 16px; - background: red; - } } } From e1db14dfaeb45ef03b19da26aae68d45703524a6 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Wed, 1 Feb 2023 21:25:14 -0300 Subject: [PATCH 04/14] =?UTF-8?q?feat:=20adi=C3=A7=C3=A3o=20do=20newslette?= =?UTF-8?q?r=20e=20prateleira=20de=20sugeridos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 37 +++++++++++++++++-- styles/css/vtex.flex-layout.css | 7 ++++ styles/css/vtex.rich-text.css | 21 ++++++++++- styles/css/vtex.shelf.css | 17 +-------- styles/css/vtex.store-components.css | 2 +- .../sass/pages/product/vtex.flex-layout.scss | 10 +++++ .../product/vtex.product-identifier.scss | 1 - styles/sass/pages/product/vtex.rich-text.scss | 22 +++++++++++ styles/sass/pages/product/vtex.shelf.scss | 16 -------- .../pages/product/vtex.store-components.scss | 2 +- 10 files changed, 96 insertions(+), 39 deletions(-) create mode 100644 styles/sass/pages/product/vtex.rich-text.scss delete mode 100644 styles/sass/pages/product/vtex.shelf.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 5483354..edad1b4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,10 +4,12 @@ "html#breadcrumb", "condition-layout.product#availability", "tab-layout#desc", - // "flex-layout.row#specifications-title", + "flex-layout.row#specifications-title", // "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" + // "shelf.relatedProducts", + "list-context.product-list#demo1", + "product-questions-and-answers", + "newsletter" ] }, "html#breadcrumb": { @@ -307,5 +309,34 @@ "Pinterest": true } } + }, + + "list-context.product-list#demo1": { + "blocks": ["product-summary.shelf#demo1"], + "children": ["slider-layout#demo-products"] + }, + + "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" + ] + }, + + "slider-layout#demo-products": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + } } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 6368f7e..47fc34d 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -18,4 +18,11 @@ } :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) .swiper-container .swiper-wrapper { display: none; +} + +.flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) { + margin-left: 32px; +} +.flexColChild :global(.vtex-store-components-3-x-container) { + padding: 0 32px; } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..c665577 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -6,4 +7,22 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container { + justify-content: center; + padding: 16px 0; +} +.container .heading { + font-size: 0; + text-align: center; +} +.container .heading::before { + content: "Você também pode gostar:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} \ No newline at end of file diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css index f65c000..34c4328 100644 --- a/styles/css/vtex.shelf.css +++ b/styles/css/vtex.shelf.css @@ -1,4 +1,3 @@ -@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -7,18 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.title { - font-size: 0; -} - -.title::before { - content: "Você também pode gostar:"; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 38px; - text-align: center; - color: #575757; -} \ 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 40dee3e..3981649 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -86,7 +86,7 @@ border-radius: 0; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { - padding: 0; + padding: 8px 0; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { display: flex; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index f4ec39f..79b979a 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -13,3 +13,13 @@ } } } + +.flexColChild { + :global(.vtex-store-components-3-x-productDescriptionTitle) { + margin-left: 32px; + } + + :global(.vtex-store-components-3-x-container) { + padding: 0 32px; + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 2ed5873..8bcca6b 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,7 +1,6 @@ .product-identifier { display: flex; justify-content: flex-end; - // margin-right: 40px; font-family: "Open Sans", sans-serif; font-style: normal; diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss new file mode 100644 index 0000000..d311fb3 --- /dev/null +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,22 @@ +.container { + justify-content: center; + padding: 16px 0; + + .heading { + font-size: 0; + text-align: center; + } + + .heading::before { + content: 'Você também pode gostar:'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + text-align: center; + + color: #575757; + } +} diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss deleted file mode 100644 index 4cbba16..0000000 --- a/styles/sass/pages/product/vtex.shelf.scss +++ /dev/null @@ -1,16 +0,0 @@ -.title { - font-size: 0; -} - -.title::before { - content: 'Você também pode gostar:'; - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 38px; - - text-align: center; - - color: #575757; -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index e86295f..feb2e28 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -91,7 +91,7 @@ border-radius: 0; :global(.vtex-address-form-4-x-input) { - padding: 0; + padding: 8px 0; } } } From 3567162e07f9fdc4b3fe8c7687ba523e5a0b61d6 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Fri, 3 Feb 2023 18:05:00 -0300 Subject: [PATCH 05/14] =?UTF-8?q?feat:=20adi=C3=A7=C3=A3o=20scss=20newslet?= =?UTF-8?q?ter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 17 +- styles/css/vtex.flex-layout.css | 5 +- styles/css/vtex.slider-layout.css | 148 +++++++++++++++--- styles/css/vtex.store-components.css | 65 +++++++- .../sass/pages/product/vtex.flex-layout.scss | 9 +- styles/sass/pages/product/vtex.rich-text.scss | 2 +- .../pages/product/vtex.slider-layout.scss | 146 +++++++++++++++++ .../pages/product/vtex.store-components.scss | 72 ++++++++- 8 files changed, 419 insertions(+), 45 deletions(-) create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index edad1b4..e5802e9 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -49,9 +49,7 @@ "props": { "colGap": 7, "rowGap": 7, - "marginTop": 4, "marginBottom": 7, - "paddingTop": 7, "paddingBottom": 7 }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] @@ -81,7 +79,6 @@ "children": ["stack-layout"], "props": { "width": "51%", - // "maxHeight": 664, "rowGap": 0 } }, @@ -266,27 +263,27 @@ } }, "tab-content.item#desc2": { - "children": [], + "children": ["flex-layout.row#description-row"], "props": { "tabId": "desc2" } }, "tab-content.item#desc3": { - "children": [], + "children": ["flex-layout.row#description-row"], "props": { - "tabId": "desc2" + "tabId": "desc3" } }, "tab-content.item#desc4": { - "children": [], + "children": ["flex-layout.row#description-row"], "props": { - "tabId": "desc2" + "tabId": "desc4" } }, "tab-content.item#desc5": { - "children": [], + "children": ["flex-layout.row#description-row"], "props": { - "tabId": "desc2" + "tabId": "desc5" } }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 47fc34d..f71d340 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -13,10 +13,7 @@ :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) { max-height: 664px !important; } -:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) .swiper-container { - display: none; -} -:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) .swiper-container .swiper-wrapper { +:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) :global(.vtex-store-components-3-x-figure--video) { display: none; } diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..ce6049d 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,133 @@ +/* +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 */ .sliderLayoutContainer { + padding: 16px 40px 113px; +} +.sliderLayoutContainer .sliderTrackContainer { + padding: 0 24px 36px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 16px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) { + margin: 0; + width: 100%; +} +.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%; +} +.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-nameContainer) { + display: flex; + order: 2; + padding: 0; justify-content: center; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.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) :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: 50px; + align-items: center; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; } - -.sliderTrackContainer { - max-width: 100%; +.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-priceContainer) { + display: flex; + order: 3; + padding: 0; } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +.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-priceContainer) :global(.vtex-store-components-3-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + text-decoration-line: line-through; + gap: 1px; } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.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-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-transform: lowercase; + text-decoration: none; + padding: 0; } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.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-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-decoration: none; + 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-priceContainer) :global(.vtex-store-components-3-x-listPrice)::after { + content: "por"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; +} +.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-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { + 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-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; +} +.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-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { + 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-priceContainer) :global(.vtex-store-components-3-x-installmentsPrice) { + 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-buyButtonContainer) { + 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-description) { + 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-SKUSelectorContainer) { + display: none; +} +.sliderLayoutContainer .paginationDotsContainer { + bottom: 113px; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot { + width: 10px; + height: 10px; + background-color: #000; + border: 0.5px solid #000; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive { + background-color: #fff; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3981649..6fff9b7 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,7 +8,70 @@ /* Media Query M3 */ /* Grid breakpoints */ .newsletter { - background: red; + background: black; +} +.newsletter .container .form .label { + font-size: 0; + display: flex; + flex-direction: column; + gap: 16px; +} +.newsletter .container .form .label::before { + content: "Assine nossa newsletter"; + font-size: 24px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 38px; + color: #ffffff; +} +.newsletter .container .form .label::after { + content: "Receba ofertas e novidades por e-mail"; + white-space: pre; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +.newsletter .container .form .inputGroup { + display: flex; + justify-content: center; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background: black; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + width: 774px; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before { + content: "Digite seu e-mail"; + font-size: 16px; + color: white; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) { + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; } .productBrand { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 79b979a..09d3b0a 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -5,11 +5,12 @@ max-height: 664px !important; } :global(.vtex-store-components-3-x-carouselGaleryThumbs) { - .swiper-container { + // display: none !important; + // :global(.vtex-store-components-3-x-carouselGaleryThumbs) > .swiper-wrapper { + // display: none; + // } + :global(.vtex-store-components-3-x-figure--video) { display: none; - .swiper-wrapper { - display: none; - } } } } diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index d311fb3..a2e1c4a 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -1,7 +1,7 @@ .container { justify-content: center; padding: 16px 0; - + .heading { font-size: 0; text-align: center; 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..5bae733 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,146 @@ +.sliderLayoutContainer { + padding: 16px 40px 113px; + + .sliderTrackContainer { + padding: 0 24px 36px; + + .sliderTrack { + gap: 16px; + + .slide { + .slideChildrenContainer { + :global(.vtex-product-summary-2-x-container) { + margin: 0; + width: 100%; + + :global(.vtex-product-summary-2-x-element) { + :global(.vtex-product-summary-2-x-imageContainer) { + display: flex; + order: 1; + width: 100%; + + :global(.vtex-product-summary-2-x-imageNormal) { + height: 314px; + } + } + :global(.vtex-product-summary-2-x-nameContainer) { + display: flex; + order: 2; + padding: 0; + justify-content: center; + + :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: 50px; + align-items: center; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; + } + } + :global(.vtex-product-summary-2-x-priceContainer) { + display: flex; + order: 3; + padding: 0; + + :global(.vtex-store-components-3-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + text-decoration-line: line-through; + gap: 1px; + + :global(.vtex-store-components-3-x-listPriceLabel) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-transform: lowercase; + text-decoration: none; + padding: 0; + } + :global(.vtex-store-components-3-x-listPriceValue) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-decoration: none; + padding: 0; + } + } + :global(.vtex-store-components-3-x-listPrice)::after { + content: 'por'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + } + + :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + + :global(.vtex-product-summary-2-x-currencyContainer) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; + } + + :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; + } + } + + :global(.vtex-store-components-3-x-installmentsPrice) { + display: none; + } + } + + :global(.vtex-product-summary-2-x-buyButtonContainer) { + display: none; + } + :global(.vtex-product-summary-2-x-description) { + display: none; + } + :global(.vtex-product-summary-2-x-SKUSelectorContainer) { + display: none; + } + } + } + } + } + } + } + .paginationDotsContainer { + bottom: 113px; + + .paginationDot { + width: 10px; + height: 10px; + background-color: #000; + border: 0.5px solid #000; + } + + .paginationDot--isActive { + background-color: #fff; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index feb2e28..dc9b37f 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,11 +1,79 @@ .newsletter { - background: red; + background: black; + .container { + .form { + .label { + font-size: 0; + display: flex; + flex-direction: column; + gap: 16px; + &::before { + content: 'Assine nossa newsletter'; + font-size: 24px; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + line-height: 38px; + color: #ffffff; + } + &::after { + content: 'Receba ofertas e novidades por e-mail'; + white-space: pre; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + } + } + .inputGroup { + display: flex; + justify-content: center; + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; + :global(.vtex-styleguide-9-x-input) { + background: black; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + width: 774px; + &::before { + content: 'Digite seu e-mail'; + font-size: 16px; + color: white; + } + } + } + } + :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; + :global(.vtex-button) { + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + } + } + } + } + } } .productBrand { display: flex; justify-content: flex-end; - // margin-right: 37px; font-family: 'Open Sans', sans-serif; font-style: normal; From 0a0d6f32fdb25e9f33ccf332e5660d94eda3aca9 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Sun, 5 Feb 2023 12:57:09 -0300 Subject: [PATCH 06/14] feat: ajustes css product image --- styles/css/vtex.flex-layout.css | 3 --- styles/css/vtex.store-components.css | 16 +++++++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 9 --------- .../pages/product/vtex.store-components.scss | 20 +++++++++++++++++++ 4 files changed, 36 insertions(+), 12 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f71d340..faf0aee 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -13,9 +13,6 @@ :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) { max-height: 664px !important; } -:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselGaleryThumbs) :global(.vtex-store-components-3-x-figure--video) { - display: none; -} .flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) { margin-left: 32px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 6fff9b7..5bbb00e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -74,6 +74,22 @@ line-height: 19px; } +.productImageTag { + width: auto !important; +} + +.carouselGaleryThumbs :first-child { + height: 90px; +} +.carouselGaleryThumbs :first-child :first-child { + gap: 16px !important; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb { + width: 13.605%; + height: fit-content !important; + margin: 0; +} + .productBrand { display: flex; justify-content: flex-end; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 09d3b0a..34b6522 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -4,15 +4,6 @@ :global(.vtex-store-components-3-x-productImageTag) { max-height: 664px !important; } - :global(.vtex-store-components-3-x-carouselGaleryThumbs) { - // display: none !important; - // :global(.vtex-store-components-3-x-carouselGaleryThumbs) > .swiper-wrapper { - // display: none; - // } - :global(.vtex-store-components-3-x-figure--video) { - display: none; - } - } } .flexColChild { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index dc9b37f..d5f78e1 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -71,6 +71,26 @@ } } +.productImageTag { + width: auto !important; +} + +.carouselGaleryThumbs { + :first-child { + height: 90px; + + :first-child { + gap: 16px !important; + + .productImagesThumb { + width: 13.605%; + height: fit-content !important; + margin: 0; + } + } + } +} + .productBrand { display: flex; justify-content: flex-end; From f86ca8b682e0354467114fd5a0b2092412b6e6dd Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Mon, 6 Feb 2023 14:23:31 -0300 Subject: [PATCH 07/14] feat: css do frete --- react/components/Html/style.css | 2 +- styles/css/vtex.flex-layout.css | 7 +- styles/css/vtex.slider-layout.css | 5 +- styles/css/vtex.store-components.css | 288 ++++++++++++++-- styles/css/vtex.tab-layout.css | 3 +- .../sass/pages/product/vtex.flex-layout.scss | 8 +- .../pages/product/vtex.slider-layout.scss | 5 +- .../pages/product/vtex.store-components.scss | 325 ++++++++++++++++-- .../sass/pages/product/vtex.tab-layout.scss | 5 +- 9 files changed, 584 insertions(+), 64 deletions(-) diff --git a/react/components/Html/style.css b/react/components/Html/style.css index f3cbcbd..003005c 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -8,7 +8,7 @@ [class*='html'] > [class*='button'] { width: 100%; height: 49px; - /* margin-right: 40px; */ background: #000; border: #000; + border-radius: 0; } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index faf0aee..2501f7c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -11,7 +11,7 @@ padding: 0 40px; } :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) { - max-height: 664px !important; + max-height: none; } .flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) { @@ -19,4 +19,9 @@ } .flexColChild :global(.vtex-store-components-3-x-container) { padding: 0 32px; +} + +.flexRowContent { + margin-bottom: 0; + padding-bottom: 0; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index ce6049d..6484857 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -120,14 +120,17 @@ display: none; } .sliderLayoutContainer .paginationDotsContainer { + align-items: center; bottom: 113px; } .sliderLayoutContainer .paginationDotsContainer .paginationDot { width: 10px; height: 10px; background-color: #000; - border: 0.5px solid #000; } .sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive { background-color: #fff; + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5bbb00e..6b60e6b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -54,11 +55,6 @@ color: #929292; width: 774px; } -.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before { - content: "Digite seu e-mail"; - font-size: 16px; - color: white; -} .newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) { padding: 0; } @@ -74,8 +70,22 @@ line-height: 19px; } -.productImageTag { - width: auto !important; +.productImagesGallerySlide { + width: 100%; + height: 100%; +} +.productImagesGallerySlide .productImage { + width: 100%; + height: 100%; +} +.productImagesGallerySlide .productImage .productImageTag { + max-height: none !important; +} +@media (min-width: 1025px) { + .productImagesGallerySlide .productImage .productImageTag { + width: 100% !important; + height: fit-content; + } } .carouselGaleryThumbs :first-child { @@ -87,6 +97,7 @@ .carouselGaleryThumbs :first-child :first-child .productImagesThumb { width: 13.605%; height: fit-content !important; + max-height: 90px; margin: 0; } @@ -105,30 +116,103 @@ display: flex; flex-direction: column-reverse; } -.skuSelectorContainer .frameAround, -.skuSelectorContainer .skuSelectorInternalBox { +.skuSelectorContainer .frameAround { + width: 43px; + height: 43px; border-radius: 1.5rem; z-index: 3; padding: 0; -} -.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItem { - height: 43px; -} -.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { - width: 40px; - height: 40px; - bottom: -0.25rem; - top: 0rem; - left: 0rem; - right: -0.25rem; -} -.skuSelectorContainer .skuSelectorSubcontainer--tamanho .valueWrapper { - padding: 10px 11px; - width: 40px; - height: 40px; -} -.skuSelectorContainer .frameAround { border-color: #000; + top: -3%; + left: -1px; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::before { + content: "OUTRAS CORES"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTROS TAMANHOS: "; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { + color: #000000; } .shippingContainer { @@ -139,6 +223,7 @@ } .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; + padding-bottom: 16px; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { display: flex; @@ -165,8 +250,19 @@ border-radius: 0; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; padding: 8px 0; } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) { + position: absolute; + bottom: 0; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { display: flex; position: absolute; @@ -181,7 +277,7 @@ display: flex; width: 49px; height: 49px; - margin-bottom: 5px; + margin-top: 11px; background: #000; border: 1px solid #000; border-radius: 0; @@ -201,4 +297,140 @@ display: flex; align-items: center; color: #fff; +} + +.shippingTable { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + border: none; +} +.shippingTable .shippingTableHead { + display: flex; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: flex; + gap: 62px; + margin-bottom: 15px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + order: 2; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before { + content: "FRETE"; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 19px; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: flex; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + align-items: center; + color: #afafaf; + margin-bottom: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + order: 2; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + width: 108px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + width: 95px; + margin-right: 32px; + padding: 0; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn { + display: none; +} + +.subscriberContainer .title { + font-size: 0; + margin-bottom: 0; + border: none; +} +.subscriberContainer .title::before { + content: "Produto indisponível"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::before { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer .form .content { + position: relative; + display: flex; + height: 40px; + gap: 8px; +} +.subscriberContainer .form .content .input { + margin: 0; +} +.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: 0.6px solid #989898; + border-radius: 0; +} +.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + border-radius: 0; +} +.subscriberContainer .form .content .submit { + width: 100%; + position: absolute; + bottom: calc(-100% - 27px); + margin: 0 !important; +} +.subscriberContainer .form .content .submit :global(.vtex-button) { + width: 100%; + background: #000; + border: 0.6px solid #000; + border-radius: 0; + color: #fff; +} +.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) { + padding: 12px; + font-size: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label)::before { + content: "avise-me"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + padding: 12px; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 711d8df..2358719 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -11,7 +11,8 @@ margin-bottom: 32px; display: flex; flex-direction: row; - column-gap: 197.5px; + justify-content: space-around; + padding: 0 40px; } .listContainer::after { content: ""; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 34b6522..617257b 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -2,7 +2,8 @@ padding: 0 40px; :global(.vtex-store-components-3-x-productImageTag) { - max-height: 664px !important; + // max-height: 664px !important; + max-height: none; } } @@ -15,3 +16,8 @@ padding: 0 32px; } } + +.flexRowContent { + margin-bottom: 0; + padding-bottom: 0; +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 5bae733..5bddf9f 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -130,17 +130,20 @@ } } .paginationDotsContainer { + align-items: center; bottom: 113px; .paginationDot { width: 10px; height: 10px; background-color: #000; - border: 0.5px solid #000; } .paginationDot--isActive { background-color: #fff; + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000; } } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index d5f78e1..2d51094 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -44,11 +44,6 @@ line-height: 25px; color: #929292; width: 774px; - &::before { - content: 'Digite seu e-mail'; - font-size: 16px; - color: white; - } } } } @@ -71,8 +66,22 @@ } } -.productImageTag { - width: auto !important; +.productImagesGallerySlide { + width: 100%; + height: 100%; + + .productImage { + width: 100%; + height: 100%; + + .productImageTag { + @media (min-width: 1025px) { + width: 100% !important; + height: fit-content; + } + max-height: none !important; + } + } } .carouselGaleryThumbs { @@ -85,6 +94,7 @@ .productImagesThumb { width: 13.605%; height: fit-content !important; + max-height: 90px; margin: 0; } } @@ -108,36 +118,121 @@ display: flex; flex-direction: column-reverse; - .frameAround, - .skuSelectorInternalBox { + .frameAround { + width: 43px; + height: 43px; border-radius: 1.5rem; z-index: 3; padding: 0; + border-color: #000; + top: -3%; + left: -1px; + } + + .skuSelectorInternalBox { + border-radius: 50%; + } + + .skuSelectorSubcontainer--cor { + .skuSelectorNameContainer { + .skuSelectorTextContainer { + .skuSelectorName, + .skuSelectorSelectorImageValue { + font-size: 0; + } + .skuSelectorName::before { + content: 'OUTRAS CORES'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } } .skuSelectorSubcontainer--tamanho { - .skuSelectorItem { - height: 43px; - } + margin-bottom: 10px; - .frameAround { - width: 40px; - height: 40px; + .skuSelectorNameContainer { + margin: 0; - bottom: -0.25rem; - top: 0rem; - left: 0rem; - right: -0.25rem; - } - .valueWrapper { - padding: 10px 11px; - width: 40px; - height: 40px; - } - } + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + &::after { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: 'OUTROS TAMANHOS: '; + color: #929292; + } + } + } + .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; + .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; - .frameAround { - border-color: #000; + .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; + .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; + } + .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); + } + } + } + .skuSelectorItem--selected { + .skuSelectorInternalBox { + .skuSelectorItemTextValue { + color: #000000; + } + } + } + } + } } } @@ -149,6 +244,7 @@ :global(.vtex-address-form__postalCode) { display: flex; + padding-bottom: 16px; :global(.vtex-input) { display: flex; @@ -179,9 +275,20 @@ border-radius: 0; :global(.vtex-address-form-4-x-input) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; padding: 8px 0; } } + :global(.vtex-input__error) { + position: absolute; + bottom: 0; + } } :global(.vtex-address-form__postalCode-forgottenURL) { @@ -201,7 +308,7 @@ display: flex; width: 49px; height: 49px; - margin-bottom: 5px; + margin-top: 11px; background: #000; border: 1px solid #000; @@ -229,3 +336,163 @@ } } } + +.shippingTable { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + border: none; + + .shippingTableHead { + display: flex; + .shippingTableRow { + display: flex; + gap: 62px; + margin-bottom: 15px; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + + .shippingTableHeadDeliveryEstimate { + order: 2; + } + .shippingTableHeadDeliveryPrice { + font-size: 0; + } + .shippingTableHeadDeliveryPrice::before { + content: 'FRETE'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 19px; + } + } + } + + .shippingTableBody { + .shippingTableRow { + display: flex; + + .shippingTableCell { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + align-items: center; + color: #afafaf; + margin-bottom: 15px; + } + + .shippingTableCellDeliveryEstimate { + order: 2; + } + .shippingTableCellDeliveryPrice { + width: 108px; + } + .shippingTableCellDeliveryName { + width: 95px; + margin-right: 32px; + padding: 0; + + .shippingTableLabel { + .shippingTableRadioBtn { + display: none; + } + } + } + } + } +} + +.subscriberContainer { + .title { + font-size: 0; + margin-bottom: 0; + border: none; + } + .title::before { + content: 'Produto indisponível'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + + color: #868686; + } + .subscribeLabel { + font-size: 0; + } + .subscribeLabel::before { + content: 'Deseja saber quando estiver disponível?'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + + color: #868686; + } + .form { + .content { + position: relative; + display: flex; + height: 40px; + gap: 8px; + + .input { + margin: 0; + + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + border: 0.6px solid #989898; + border-radius: 0; + + :global(.vtex-styleguide-9-x-input) { + border-radius: 0; + } + } + } + } + .submit { + width: 100%; + position: absolute; + bottom: calc(-100% - 27px); + margin: 0 !important; + + :global(.vtex-button) { + width: 100%; + background: #000; + border: 0.6px solid #000; + border-radius: 0; + color: #fff; + + :global(.vtex-button__label) { + padding: 12px; + font-size: 0; + } + :global(.vtex-button__label)::before { + content: 'avise-me'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + padding: 12px; + } + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 966d427..558055b 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -2,7 +2,10 @@ margin-bottom: 32px; display: flex; flex-direction: row; - column-gap: 197.5px; + justify-content: space-around; + padding: 0 40px; + // column-gap: 197.5px; + &::after { content: ''; background-color: #bfbfbf; From 9cc7b166bc00096b263749bc9d82a06c2209db52 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Mon, 6 Feb 2023 16:54:22 -0300 Subject: [PATCH 08/14] 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) { From ba26c57cb08c1024e2be86c5eb413afdacd5b7c9 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Mon, 6 Feb 2023 17:24:34 -0300 Subject: [PATCH 09/14] =?UTF-8?q?feat:=20altera=C3=A7=C3=B5es=20product-ja?= =?UTF-8?q?son?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 32 +++++++++----------------------- 1 file changed, 9 insertions(+), 23 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0ee54f4..8d282b1 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,8 +5,6 @@ "condition-layout.product#availability", "tab-layout#desc", "flex-layout.row#specifications-title", - // "product-specification-group#table", - // "shelf.relatedProducts", "list-context.product-list#demo1", "product-questions-and-answers", "newsletter" @@ -82,25 +80,7 @@ "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"] }, @@ -135,7 +115,6 @@ "product-gifts", "availability-subscriber", "shipping-simulator" - // "share#default" ] }, @@ -333,7 +312,14 @@ }, "product-summary.shelf#demo1": { - "children": ["html#prateleira"] + "children": [ + "product-summary-name", + "product-summary-description", + "product-summary-image", + "product-summary-price", + "product-summary-sku-selector", + "product-summary-buy-button" + ] }, "slider-layout#demo-products": { From 0415e4e9c7230845bc4e7bf70deb8f592c30b71f Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Tue, 7 Feb 2023 10:52:20 -0300 Subject: [PATCH 10/14] =?UTF-8?q?feat:=20scss=20prateleira=20sujest=C3=B5e?= =?UTF-8?q?s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/style.css | 4 +-- store/blocks/pdp/product.jsonc | 27 ++++++++++++-- styles/css/vtex.flex-layout.css | 3 ++ styles/css/vtex.slider-layout.css | 33 +++++++++-------- styles/css/vtex.store-components.css | 4 +++ .../sass/pages/product/vtex.flex-layout.scss | 4 +++ .../pages/product/vtex.slider-layout.scss | 35 ++++++++++--------- .../pages/product/vtex.store-components.scss | 2 ++ .../sass/pages/product/vtex.tab-layout.scss | 1 - 9 files changed, 74 insertions(+), 39 deletions(-) diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 003005c..93d430b 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -1,11 +1,11 @@ -[class*='html'] { +[class*='html--Quantity-Button'] { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } -[class*='html'] > [class*='button'] { +[class*='html--Quantity-Button'] > [class*='button'] { width: 100%; height: 49px; background: #000; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 8d282b1..d5e78fa 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -58,7 +58,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#product-images", "product-bookmark", "product-specification-badges" ] @@ -81,9 +81,13 @@ } }, - "flex-layout.row#product-image": { + "html#product-images": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, + "product-images": { "props": { "aspectRatio": { @@ -118,6 +122,12 @@ ] }, + "shipping-simulator": { + "props": { + "testId": "shipping-simulator" + } + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -145,6 +155,9 @@ } }, "html#quantityAndButton": { + "props": { + "blockClass": "Quantity-Button" + }, "children": ["product-quantity", "add-to-cart-button"] }, @@ -322,6 +335,14 @@ ] }, + "product-summary-image": { + "props": { + "aspectRatio": { + "desktop": "1:1" + } + } + }, + "slider-layout#demo-products": { "props": { "itemsPerPage": { @@ -330,7 +351,7 @@ "phone": 2 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "always", "blockClass": "carousel" } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 2501f7c..ab2cb17 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -20,6 +20,9 @@ .flexColChild :global(.vtex-store-components-3-x-container) { padding: 0 32px; } +.flexColChild .agenciamagma-store-theme-5-x-html--Quantity-Button { + display: flex; +} .flexRowContent { margin-bottom: 0; diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 7216b8c..03890a2 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -8,19 +8,28 @@ /* Media Query M3 */ /* Grid breakpoints */ .sliderLayoutContainer { - padding: 16px 40px 113px; + padding: 0 40px 32px; + margin-bottom: 32px; +} +.sliderLayoutContainer .sliderLeftArrow { + left: 36px; + margin: 0; + padding: 0; +} +.sliderLayoutContainer .sliderRightArrow { + right: 36px; + margin: 0; + padding: 0; } .sliderLayoutContainer .sliderTrackContainer { - padding: 0 40px 36px; + margin: 0 auto; + width: 94%; } .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; @@ -28,22 +37,13 @@ .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: 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-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; + width: 100%; + height: 100%; } .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; @@ -138,7 +138,6 @@ } .sliderLayoutContainer .paginationDotsContainer { align-items: center; - bottom: 113px; } .sliderLayoutContainer .paginationDotsContainer .paginationDot { width: 10px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 6b60e6b..a0989dd 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,8 +9,12 @@ /* Media Query M3 */ /* Grid breakpoints */ .newsletter { + margin-top: 32px; background: black; } +.newsletter .container { + padding: 32px 0 16px 0; +} .newsletter .container .form .label { font-size: 0; display: flex; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 617257b..4fe41e9 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -15,6 +15,10 @@ :global(.vtex-store-components-3-x-container) { padding: 0 32px; } + + .agenciamagma-store-theme-5-x-html--Quantity-Button { + display: flex; + } } .flexRowContent { diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 36c3bb6..4efa614 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,42 +1,45 @@ .sliderLayoutContainer { - padding: 16px 40px 113px; + padding: 0 40px 32px; + margin-bottom: 32px; + + .sliderLeftArrow { + left: 36px; + margin: 0; + padding: 0; + } + + .sliderRightArrow { + right: 36px; + margin: 0; + padding: 0; + } .sliderTrackContainer { - padding: 0 40px 36px; + margin: 0 auto; + width: 94%; .sliderTrack { - width: 450% !important; gap: 16px; .slide { .slideChildrenContainer { :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: fit-content; :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; + width: 100%; + height: 100%; } } } @@ -149,7 +152,7 @@ } .paginationDotsContainer { align-items: center; - bottom: 113px; + // bottom: -32px; .paginationDot { width: 10px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 2d51094..c478808 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,6 +1,8 @@ .newsletter { + margin-top: 32px; background: black; .container { + padding: 32px 0 16px 0; .form { .label { font-size: 0; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 558055b..a1f9c43 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -4,7 +4,6 @@ flex-direction: row; justify-content: space-around; padding: 0 40px; - // column-gap: 197.5px; &::after { content: ''; From e19920424bf96520feba7d6790050fbc0d07d371 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Tue, 7 Feb 2023 15:33:19 -0300 Subject: [PATCH 11/14] =?UTF-8?q?feat:=20adi=C3=A7=C3=A3o=20tests=20id?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/Parcelamento.tsx | 3 - react/components/Html/style.css | 12 +- .../components/Parcelamento/Parcelamento.css | 3 - .../components/Parcelamento/Parcelamento.tsx | 32 ----- store/blocks/pdp/product.jsonc | 125 ++++++++++++++---- styles/css/vtex.flex-layout.css | 6 + styles/css/vtex.slider-layout.css | 50 ++----- styles/css/vtex.store-components.css | 6 + .../sass/pages/product/vtex.flex-layout.scss | 8 +- .../pages/product/vtex.slider-layout.scss | 104 ++++++--------- .../pages/product/vtex.store-components.scss | 4 + 11 files changed, 177 insertions(+), 176 deletions(-) delete mode 100644 react/Parcelamento.tsx delete mode 100644 react/components/Parcelamento/Parcelamento.css delete mode 100644 react/components/Parcelamento/Parcelamento.tsx diff --git a/react/Parcelamento.tsx b/react/Parcelamento.tsx deleted file mode 100644 index 3e42227..0000000 --- a/react/Parcelamento.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Parcelamento from './components/Parcelamento/Parcelamento' - -export default Parcelamento diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 93d430b..b04928c 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -5,10 +5,20 @@ margin-bottom: 16px; } -[class*='html--Quantity-Button'] > [class*='button'] { +[class*='html--Quantity-Button'] > [class*='html--addButton'] { width: 100%; +} + +[class*='html--Quantity-Button'] + > [class*='html--addButton'] + > [class*='button'] { height: 49px; background: #000; border: #000; border-radius: 0; } + +[class*='html--Prateleira'] { + display: flex; + flex-direction: column; +} diff --git a/react/components/Parcelamento/Parcelamento.css b/react/components/Parcelamento/Parcelamento.css deleted file mode 100644 index 27a561c..0000000 --- a/react/components/Parcelamento/Parcelamento.css +++ /dev/null @@ -1,3 +0,0 @@ -.ParcelaWrapper { - margin: 0 0 8px 0; -} diff --git a/react/components/Parcelamento/Parcelamento.tsx b/react/components/Parcelamento/Parcelamento.tsx deleted file mode 100644 index 9d9b6b9..0000000 --- a/react/components/Parcelamento/Parcelamento.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react' -import { useProduct } from 'vtex.product-context' -import { useCssHandles } from 'vtex.css-handles' - -import "./Parcelamento.css" - -const Parcelamento = () => { - const CSS_HANDLES = ['ParcelaWrapper'] - - const handles = useCssHandles(CSS_HANDLES) - const product = useProduct() - - const Installments = { - numberOfInstallments: - product?.selectedItem?.sellers[0].commertialOffer.Installments[3] - .NumberOfInstallments, - } - const Price = { - numberOfInstallments: - product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value, - } - console.log(product) - return ( -

- {Installments.numberOfInstallments} x de R$  - {Price.numberOfInstallments?.toFixed(2).toString().replace('.', ',')} sem - juros -

- ) -} - -export default Parcelamento diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d5e78fa..ae85142 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "tab-layout#desc", + "html#tab-layout#desc", "flex-layout.row#specifications-title", "list-context.product-list#demo1", "product-questions-and-answers", @@ -106,31 +106,55 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#codigo", "product-rating-summary", - "flex-layout.row#selling-price", - "Parcelamento", - "pix", - "sku-selector", + "html#selling-price", + "html#product-installments", + "html#pix", + "html#sku-selector", "html#quantityAndButton", "Placeholder", "product-assembly-options", "product-gifts", "availability-subscriber", - "shipping-simulator" + "html#shipping-simulator" ] }, - - "shipping-simulator": { + "html#selling-price": { "props": { - "testId": "shipping-simulator" - } + "testId": "product-price" + }, + "children": ["product-selling-price"] }, - "flex-layout.row#product-name": { + "html#product-installments": { "props": { - "marginBottom": 3 + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + "html#pix": { + "props": { + "testId": "pix-price", + "blockClass": "pix" + }, + "children": ["pix"] + }, + + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator", + "blockClass": "shippingSimulator" + }, + "children": ["shipping-simulator"] + }, + + "html#product-name": { + "props": { + "marginBottom": 3, + "testId": "product-name", + "blockClass": "productName" }, "children": ["vtex.store-components:product-name"] }, @@ -154,11 +178,31 @@ "showValueNameForImageVariation": true } }, + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, "html#quantityAndButton": { "props": { "blockClass": "Quantity-Button" }, - "children": ["product-quantity", "add-to-cart-button"] + "children": ["html#product-quantity", "html#add-to-cart-button"] + }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button", + "blockClass": "addButton" + }, + "children": ["add-to-cart-button"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] }, "flex-layout.row#product-availability": { @@ -180,12 +224,19 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", + "html#product-name", + "html#codigo", + "html#sku-selector", "flex-layout.row#availability" ] }, + "html#codigo": { + "props": { + "blockClass": "codigo", + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, "flex-layout.row#availability": { "props": { "blockClass": "message-availability" @@ -211,6 +262,14 @@ "children": ["product-description"] }, + "html#tab-layout#desc": { + "props": { + "testId": "product-description", + "blockClass": "tabDescription" + }, + "children": ["tab-layout#desc"] + }, + "tab-layout#desc": { "children": ["tab-list#home", "tab-content#desc"], "props": { @@ -321,18 +380,11 @@ "list-context.product-list#demo1": { "blocks": ["product-summary.shelf#demo1"], - "children": ["slider-layout#demo-products"] + "children": ["html#slider-layout"] }, "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#sliderPrateleira"] }, "product-summary-image": { @@ -343,6 +395,25 @@ } }, + "html#sliderPrateleira": { + "props": { + "testId": "vtex-product-summary", + "blockClass": "Prateleira" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-list-price", + "product-selling-price" + ] + }, + "html#slider-layout": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#demo-products"] + }, + "slider-layout#demo-products": { "props": { "itemsPerPage": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index ab2cb17..487946c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -10,6 +10,12 @@ :global(.vtex-store-components-3-x-container) { padding: 0 40px; } +@media (max-width: 1024px) { + :global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) { + display: flex; + flex-direction: column; + } +} :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) { max-height: none; } diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 03890a2..85e9db3 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -36,7 +36,6 @@ } .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; } .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; @@ -47,7 +46,6 @@ } .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; - order: 2; padding: 0; justify-content: center; } @@ -64,19 +62,13 @@ text-align: center; color: #000; } -.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-priceContainer) { - display: flex; - order: 3; - 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-priceContainer) :global(.vtex-store-components-3-x-listPrice) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) { display: flex; justify-content: center; align-items: center; - text-decoration-line: line-through; - gap: 1px; + margin: 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-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue) { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; @@ -84,11 +76,9 @@ line-height: 19px; text-align: center; color: #bababa; - text-transform: lowercase; - text-decoration: none; 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-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer) { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; @@ -96,23 +86,14 @@ line-height: 19px; text-align: center; color: #bababa; - text-decoration: none; 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-priceContainer) :global(.vtex-store-components-3-x-listPrice)::after { - content: "por"; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #bababa; -} -.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-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) { + display: flex; padding: 0; + justify-content: center; } -.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-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 700; @@ -121,21 +102,6 @@ text-align: center; color: #000; } -.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-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { - 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-priceContainer) :global(.vtex-store-components-3-x-installmentsPrice) { - 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-buyButtonContainer) { - 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-description) { - 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-SKUSelectorContainer) { - display: none; -} .sliderLayoutContainer .paginationDotsContainer { align-items: center; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index a0989dd..a7c5c0e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -133,6 +133,12 @@ .skuSelectorContainer .skuSelectorInternalBox { border-radius: 50%; } +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + margin-left: 0 !important; +} .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { font-size: 0; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 4fe41e9..2785ab7 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,8 +1,14 @@ :global(.vtex-store-components-3-x-container) { padding: 0 40px; + :global(.vtex-flex-layout-0-x-flexRowContent) { + @media (max-width: 1024px) { + display: flex; + flex-direction: column; + } + } + :global(.vtex-store-components-3-x-productImageTag) { - // max-height: 664px !important; max-height: none; } } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 4efa614..170d7fb 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -30,7 +30,6 @@ padding: 0; :global(.vtex-product-summary-2-x-imageContainer) { display: flex; - order: 1; :global(.vtex-store-components-3-x-discountContainer) { :global(.vtex-store-components-3-x-discountInsideContainer) { @@ -46,7 +45,6 @@ } :global(.vtex-product-summary-2-x-nameContainer) { display: flex; - order: 2; padding: 0; justify-content: center; @@ -65,44 +63,13 @@ color: #000; } } - :global(.vtex-product-summary-2-x-priceContainer) { + :global(.vtex-product-price-1-x-listPrice) { display: flex; - order: 3; - padding: 0; + justify-content: center; + align-items: center; + margin: 0; - :global(.vtex-store-components-3-x-listPrice) { - display: flex; - justify-content: center; - align-items: center; - text-decoration-line: line-through; - gap: 1px; - - :global(.vtex-store-components-3-x-listPriceLabel) { - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #bababa; - text-transform: lowercase; - text-decoration: none; - padding: 0; - } - :global(.vtex-store-components-3-x-listPriceValue) { - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #bababa; - text-decoration: none; - padding: 0; - } - } - :global(.vtex-store-components-3-x-listPrice)::after { - content: 'por'; + :global(.vtex-product-price-1-x-listPriceValue) { font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 400; @@ -110,39 +77,43 @@ line-height: 19px; text-align: center; color: #bababa; - } - - :global(.vtex-store-components-3-x-sellingPrice) { padding: 0; - - :global(.vtex-product-summary-2-x-currencyContainer) { - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 700; - font-size: 24px; - line-height: 33px; - text-align: center; - color: #000; - } - - :global(.vtex-store-components-3-x-sellingPriceLabel) { - display: none; - } } - - :global(.vtex-store-components-3-x-installmentsPrice) { - display: none; + :global(.vtex-product-price-1-x-currencyContainer) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding: 0; } } + // :global(.vtex-product-price-1-x-listPriceValue)::after { + // content: 'por'; + // font-family: 'Open Sans', sans-serif; + // font-style: normal; + // font-weight: 400; + // font-size: 14px; + // line-height: 19px; + // text-align: center; + // color: #bababa; + // } - :global(.vtex-product-summary-2-x-buyButtonContainer) { - display: none; - } - :global(.vtex-product-summary-2-x-description) { - display: none; - } - :global(.vtex-product-summary-2-x-SKUSelectorContainer) { - display: none; + :global(.vtex-product-price-1-x-sellingPrice) { + display: flex; + padding: 0; + justify-content: center; + :global(.vtex-product-price-1-x-sellingPriceValue) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; + } } } } @@ -152,7 +123,6 @@ } .paginationDotsContainer { align-items: center; - // bottom: -32px; .paginationDot { width: 10px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index c478808..f3172d8 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -137,6 +137,10 @@ .skuSelectorSubcontainer--cor { .skuSelectorNameContainer { + margin: 0; + .skuSelectorOptionsList { + margin-left: 0 !important; + } .skuSelectorTextContainer { .skuSelectorName, .skuSelectorSelectorImageValue { From 14f3177d732ea54a73f4bc631719055d8e99f649 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Tue, 7 Feb 2023 22:08:34 -0300 Subject: [PATCH 12/14] feat: css mobile --- react/components/Html/style.css | 21 ++++++- store/blocks/pdp/product.jsonc | 3 +- styles/css/vtex.flex-layout.css | 16 +++++ styles/css/vtex.product-identifier.css | 7 ++- styles/css/vtex.store-components.css | 63 +++++++++++++++++-- styles/css/vtex.tab-layout.css | 39 +++++++++++- .../sass/pages/product/vtex.flex-layout.scss | 19 ++++++ .../product/vtex.product-identifier.scss | 8 ++- .../pages/product/vtex.store-components.scss | 56 +++++++++++++++-- .../sass/pages/product/vtex.tab-layout.scss | 37 ++++++++++- 10 files changed, 250 insertions(+), 19 deletions(-) diff --git a/react/components/Html/style.css b/react/components/Html/style.css index b04928c..36dde0c 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -1,6 +1,5 @@ [class*='html--Quantity-Button'] { display: flex; - align-items: center; gap: 10px; margin-bottom: 16px; } @@ -22,3 +21,23 @@ display: flex; flex-direction: column; } + +[class*='html--codigo'] { + margin-bottom: 16px; +} + +[class*='html--product-installments'] { + margin-bottom: 8px; +} + +@media (max-width: 576px) { + [class*='html--Quantity-Button'] { + flex-direction: column; + } +} + +@media (min-width: 577px) { + [class*='html--Quantity-Button'] { + align-items: center; + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ae85142..15e6c60 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -130,7 +130,8 @@ "html#product-installments": { "props": { - "testId": "product-installments" + "testId": "product-installments", + "blockClass": "product-installments" }, "children": ["product-installments"] }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 487946c..083e71e 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -16,6 +16,9 @@ flex-direction: column; } } +:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselContainer) { + margin-bottom: 32px; +} :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) { max-height: none; } @@ -30,7 +33,20 @@ display: flex; } +@media (max-width: 1024px) { + .flexColChild--image-description :global(.vtex-store-components-3-x-imageElement) { + width: 100%; + } +} + .flexRowContent { margin-bottom: 0; padding-bottom: 0; +} + +@media (max-width: 1024px) { + .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 35e807c..7adbacc 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -9,7 +9,7 @@ /* Grid breakpoints */ .product-identifier { display: flex; - justify-content: flex-end; + justify-content: flex-start; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; @@ -18,6 +18,11 @@ text-align: right; color: rgba(146, 146, 146, 0.48); } +@media (min-width: 1025px) { + .product-identifier { + justify-content: flex-end; + } +} .product-identifier .product-identifier__label, .product-identifier .product-identifier__separator { display: none; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index a7c5c0e..5a58407 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -92,22 +92,30 @@ } } -.carouselGaleryThumbs :first-child { - height: 90px; +.carouselGaleryThumbs { + width: 47.67%; +} +@media (min-width: 1025px) { + .carouselGaleryThumbs { + width: 68.02%; + } } .carouselGaleryThumbs :first-child :first-child { gap: 16px !important; } .carouselGaleryThumbs :first-child :first-child .productImagesThumb { - width: 13.605%; height: fit-content !important; max-height: 90px; margin: 0; } +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg { + border-radius: 8px; + min-height: 90px; +} .productBrand { display: flex; - justify-content: flex-end; + justify-content: flex-start; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 300; @@ -115,10 +123,16 @@ line-height: 34px; color: #575757; } +@media (min-width: 1025px) { + .productBrand { + justify-content: flex-end; + } +} .skuSelectorContainer { display: flex; flex-direction: column-reverse; + margin: 16px 0; } .skuSelectorContainer .frameAround { width: 43px; @@ -133,12 +147,18 @@ .skuSelectorContainer .skuSelectorInternalBox { border-radius: 50%; } +.skuSelectorContainer .skuSelectorSubcontainer--cor { + margin: 0; +} .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer { margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { margin-left: 0 !important; } +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + margin: 0; +} .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { font-size: 0; @@ -235,6 +255,11 @@ display: flex; padding-bottom: 16px; } +@media (max-width: 376px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + flex-direction: column; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { display: flex; flex-direction: column; @@ -280,6 +305,12 @@ left: 312px; top: 41.5px; } +@media (max-width: 376px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + position: unset; + justify-content: right; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { color: #000; } @@ -325,7 +356,6 @@ margin-bottom: 15px; font-family: "Open Sans", sans-serif; font-style: normal; - font-weight: 400; font-size: 14px; line-height: 19px; color: #202020; @@ -333,6 +363,7 @@ } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { order: 2; + font-weight: 400 !important; } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { font-size: 0; @@ -344,6 +375,11 @@ font-weight: 400; line-height: 19px; } +.shippingTable .shippingTableBody { + display: flex; + flex-direction: column; + gap: 15px; +} .shippingTable .shippingTableBody .shippingTableRow { display: flex; } @@ -355,7 +391,6 @@ line-height: 16px; align-items: center; color: #afafaf; - margin-bottom: 15px; } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { order: 2; @@ -443,4 +478,20 @@ line-height: 25px; text-transform: uppercase; padding: 12px; +} + +@media (max-width: 1024px) { + .productDescriptionContainer { + position: relative; + padding: 16px 0; + } + .productDescriptionContainer::before { + content: ""; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: absolute; + bottom: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 2358719..7a7ef75 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -23,6 +23,25 @@ position: relative; bottom: 9px; } +@media (max-width: 1024px) { + .listContainer { + flex-direction: column; + padding: 0 40px 16px; + margin-bottom: 0px; + } + .listContainer::before { + content: ""; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + top: 0px; + } + .listContainer::after { + bottom: 0px; + } +} .listItem :global(.vtex-button) { background-color: white; @@ -37,14 +56,32 @@ border-radius: 0; } +@media (max-width: 1024px) { + .listItem { + margin: 0; + padding: 0; + } + .listItem :global(.vtex-button) { + margin: 0; + padding: 0; + } + .listItem :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; + } +} + .listItemActive :global(.vtex-button) { background-color: white; color: black; border: 0; - border-bottom: 2px black solid; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 38px; +} +@media (min-width: 1025px) { + .listItemActive :global(.vtex-button) { + border-bottom: 2px black solid; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 2785ab7..a413ca1 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -8,6 +8,10 @@ } } + :global(.vtex-store-components-3-x-carouselContainer) { + margin-bottom: 32px; + } + :global(.vtex-store-components-3-x-productImageTag) { max-height: none; } @@ -27,7 +31,22 @@ } } +.flexColChild--image-description { + :global(.vtex-store-components-3-x-imageElement) { + @media (max-width: 1024px) { + width: 100%; + } + } +} + .flexRowContent { margin-bottom: 0; padding-bottom: 0; } + +.stretchChildrenWidth { + @media (max-width: 1024px) { + width: 100% !important; + padding: 0; + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 8bcca6b..301439e 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,8 +1,8 @@ .product-identifier { display: flex; - justify-content: flex-end; + justify-content: flex-start; - font-family: "Open Sans", sans-serif; + font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 400; font-size: 14px; @@ -11,6 +11,10 @@ color: rgba(146, 146, 146, 0.48); + @media (min-width: 1025px) { + justify-content: flex-end; + } + .product-identifier__label, .product-identifier__separator { display: none; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f3172d8..4215edc 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -87,17 +87,25 @@ } .carouselGaleryThumbs { + width: 47.67%; + @media (min-width: 1025px) { + width: 68.02%; + } :first-child { - height: 90px; - :first-child { gap: 16px !important; .productImagesThumb { - width: 13.605%; height: fit-content !important; max-height: 90px; margin: 0; + + .figure { + .thumbImg { + border-radius: 8px; + min-height: 90px; + } + } } } } @@ -105,7 +113,7 @@ .productBrand { display: flex; - justify-content: flex-end; + justify-content: flex-start; font-family: 'Open Sans', sans-serif; font-style: normal; @@ -114,11 +122,16 @@ line-height: 34px; color: #575757; + + @media (min-width: 1025px) { + justify-content: flex-end; + } } .skuSelectorContainer { display: flex; flex-direction: column-reverse; + margin: 16px 0; .frameAround { width: 43px; @@ -136,10 +149,14 @@ } .skuSelectorSubcontainer--cor { + margin: 0; .skuSelectorNameContainer { margin: 0; .skuSelectorOptionsList { margin-left: 0 !important; + .skuSelectorItem { + margin: 0; + } } .skuSelectorTextContainer { .skuSelectorName, @@ -252,6 +269,10 @@ display: flex; padding-bottom: 16px; + @media (max-width: 376px) { + flex-direction: column; + } + :global(.vtex-input) { display: flex; flex-direction: column; @@ -303,6 +324,10 @@ padding: 0; left: 312px; top: 41.5px; + @media (max-width: 376px) { + position: unset; + justify-content: right; + } :last-child { color: #000; @@ -359,7 +384,6 @@ font-family: 'Open Sans', sans-serif; font-style: normal; - font-weight: 400; font-size: 14px; line-height: 19px; color: #202020; @@ -367,6 +391,7 @@ .shippingTableHeadDeliveryEstimate { order: 2; + font-weight: 400 !important; } .shippingTableHeadDeliveryPrice { font-size: 0; @@ -382,6 +407,10 @@ } .shippingTableBody { + display: flex; + flex-direction: column; + gap: 15px; + .shippingTableRow { display: flex; @@ -393,7 +422,6 @@ line-height: 16px; align-items: center; color: #afafaf; - margin-bottom: 15px; } .shippingTableCellDeliveryEstimate { @@ -502,3 +530,19 @@ } } } + +.productDescriptionContainer { + @media (max-width: 1024px) { + position: relative; + padding: 16px 0; + &::before { + content: ''; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: absolute; + bottom: 0; + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index a1f9c43..9c689eb 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -14,6 +14,24 @@ position: relative; bottom: 9px; } + @media (max-width: 1024px) { + flex-direction: column; + padding: 0 40px 16px; + margin-bottom: 0px; + + &::before { + content: ''; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + top: 0px; + } + &::after { + bottom: 0px; + } + } } .listItem :global(.vtex-button) { background-color: white; @@ -27,14 +45,31 @@ text-transform: capitalize; border-radius: 0; } +.listItem { + @media (max-width: 1024px) { + margin: 0; + padding: 0; + :global(.vtex-button) { + margin: 0; + padding: 0; + :global(.vtex-button__label) { + padding: 0; + } + } + } +} + .listItemActive :global(.vtex-button) { background-color: white; color: black; border: 0; - border-bottom: 2px black solid; font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 38px; + + @media (min-width: 1025px) { + border-bottom: 2px black solid; + } } From 141f4ced5436cf102978ac86f4564d1b37c4811f Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Wed, 8 Feb 2023 15:28:31 -0300 Subject: [PATCH 13/14] =?UTF-8?q?feat:=20adi=C3=A7=C3=A3o=20css=20layout?= =?UTF-8?q?=20mobile=20at=C3=A9=20280px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 6 +- styles/css/vtex.breadcrumb.css | 4 +- styles/css/vtex.store-components.css | 77 ++++++++++--- .../sass/pages/product/vtex.breadcrumb.scss | 5 +- .../pages/product/vtex.store-components.scss | 105 +++++++++--------- 5 files changed, 120 insertions(+), 77 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 15e6c60..6dd20f4 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -6,8 +6,8 @@ "html#tab-layout#desc", "flex-layout.row#specifications-title", "list-context.product-list#demo1", - "product-questions-and-answers", - "newsletter" + "product-questions-and-answers" + // "newsletter" ] }, "html#breadcrumb": { @@ -92,7 +92,7 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "1:1" }, "thumbnailsOrientation": "horizontal", "displayThumbnailsArrows": false, diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 006fdc2..8fff30f 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -9,7 +9,6 @@ /* Grid breakpoints */ .container { padding-left: 40px; - display: flex; align-items: center; } .container .homeLink .homeIcon { @@ -33,4 +32,7 @@ } .container .arrow--1 .link:hover::before { color: #0f3e99; +} +.container .term { + padding-right: 0; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5a58407..396b8c9 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -93,24 +93,36 @@ } .carouselGaleryThumbs { - width: 47.67%; + display: flex !important; + margin-top: 16px; } -@media (min-width: 1025px) { - .carouselGaleryThumbs { - width: 68.02%; - } +.carouselGaleryThumbs :first-child { + display: flex !important; + justify-content: flex-start; + margin: 0; } .carouselGaleryThumbs :first-child :first-child { gap: 16px !important; } .carouselGaleryThumbs :first-child :first-child .productImagesThumb { - height: fit-content !important; - max-height: 90px; + width: fit-content; + height: fit-content; margin: 0; } -.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg { +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure { + height: fit-content; + margin: 0; + padding: 0; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg, +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg--video { border-radius: 8px; - min-height: 90px; + width: 100%; + min-width: 90px; + height: 100%; + max-height: 90px; + padding: 0; + margin: 0; } .productBrand { @@ -193,7 +205,7 @@ .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { margin: 0; margin-left: 0; - column-gap: 16px; + gap: 16px; } .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { border-radius: 100%; @@ -254,10 +266,18 @@ .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; padding-bottom: 16px; + max-width: 280px; + width: 100%; } -@media (max-width: 376px) { +@media (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + margin-bottom: 16px; + } +} +@media (max-width: 500px) { .shippingContainer :global(.vtex-address-form__postalCode) { flex-direction: column; + padding-bottom: 24px; } } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { @@ -277,7 +297,7 @@ color: #929292; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { - width: 231px; + width: 100%; height: 49px; margin: 0; padding: 16.5px 0 16.5px 16px; @@ -302,17 +322,29 @@ display: flex; position: absolute; padding: 0; - left: 312px; - top: 41.5px; } -@media (max-width: 376px) { +@media (min-width: 501px) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { - position: unset; - justify-content: right; + left: 361px; + top: 41.5px; + } +} +@media (max-width: 500px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + width: inherit; + height: fit-content; + bottom: 16px; + top: none; + left: none; + justify-content: end; } } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { color: #000; + text-decoration: underline; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child :last-child { + display: none; } .shippingContainer :global(.vtex-button) { display: flex; @@ -324,6 +356,17 @@ border-radius: 0; cursor: pointer; } +@media (max-width: 1024px) { + .shippingContainer :global(.vtex-button) { + margin-top: 0; + margin-bottom: 5px; + } +} +@media (max-width: 500px) { + .shippingContainer :global(.vtex-button) { + margin-bottom: 13px; + } +} .shippingContainer :global(.vtex-button) :global(.vtex-button__label) { padding: 0; font-size: 0; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index ec9da1a..526aae0 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,8 +1,6 @@ .container { padding-left: 40px; - display: flex; align-items: center; - .homeLink { .homeIcon { display: none; @@ -29,4 +27,7 @@ color: #0f3e99; } } + .term { + padding-right: 0; + } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4215edc..c13b678 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -87,23 +87,32 @@ } .carouselGaleryThumbs { - width: 47.67%; - @media (min-width: 1025px) { - width: 68.02%; - } + display: flex !important; + margin-top: 16px; + :first-child { + display: flex !important; + justify-content: flex-start; + margin: 0; :first-child { gap: 16px !important; - .productImagesThumb { - height: fit-content !important; - max-height: 90px; + width: fit-content; + height: fit-content; margin: 0; - .figure { - .thumbImg { + height: fit-content; + margin: 0; + padding: 0; + .thumbImg, + .thumbImg--video { border-radius: 8px; - min-height: 90px; + width: 100%; + min-width: 90px; + height: 100%; + max-height: 90px; + padding: 0; + margin: 0; } } } @@ -114,15 +123,12 @@ .productBrand { display: flex; justify-content: flex-start; - font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 300; font-size: 20px; line-height: 34px; - color: #575757; - @media (min-width: 1025px) { justify-content: flex-end; } @@ -132,7 +138,6 @@ display: flex; flex-direction: column-reverse; margin: 16px 0; - .frameAround { width: 43px; height: 43px; @@ -143,11 +148,9 @@ top: -3%; left: -1px; } - .skuSelectorInternalBox { border-radius: 50%; } - .skuSelectorSubcontainer--cor { margin: 0; .skuSelectorNameContainer { @@ -178,10 +181,8 @@ .skuSelectorSubcontainer--tamanho { margin-bottom: 10px; - .skuSelectorNameContainer { margin: 0; - .skuSelectorTextContainer { .skuSelectorName { font-size: 0; @@ -199,13 +200,12 @@ .skuSelectorOptionsList { margin: 0; margin-left: 0; - column-gap: 16px; + gap: 16px; .skuSelectorItem { border-radius: 100%; width: 40px; height: 40px; margin: 0; - .frameAround--sku-selector { border-color: #000000; border-width: 2px; @@ -264,26 +264,26 @@ margin: 0; align-items: center; position: relative; - :global(.vtex-address-form__postalCode) { display: flex; padding-bottom: 16px; - - @media (max-width: 376px) { - flex-direction: column; + max-width: 280px; + width: 100%; + @media (max-width: 1024px) { + margin-bottom: 16px; + } + @media (max-width: 500px) { + flex-direction: column; + padding-bottom: 24px; } - :global(.vtex-input) { display: flex; flex-direction: column; - :global(.vtex-input__label) { font-size: 0; } - :global(.vtex-input__label)::before { content: 'CALCULAR FRETE:'; - font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 400; @@ -291,16 +291,13 @@ line-height: 19px; color: #929292; } - :global(.vtex-input-prefix__group) { - width: 231px; + width: 100%; height: 49px; margin: 0; padding: 16.5px 0 16.5px 16px; - border: 1px solid #cccccc; border-radius: 0; - :global(.vtex-address-form-4-x-input) { font-family: 'Open Sans', sans-serif; font-style: normal; @@ -322,36 +319,47 @@ display: flex; position: absolute; padding: 0; - left: 312px; - top: 41.5px; - @media (max-width: 376px) { - position: unset; - justify-content: right; + @media (min-width: 501px) { + left: 361px; + top: 41.5px; + } + @media (max-width: 500px) { + width: inherit; + height: fit-content; + bottom: 16px; + top: none; + left: none; + justify-content: end; } - :last-child { color: #000; + text-decoration: underline; + :last-child { + display: none; + } } } } - :global(.vtex-button) { display: flex; width: 49px; height: 49px; margin-top: 11px; - + @media (max-width: 1024px) { + margin-top: 0; + margin-bottom: 5px; + } + @media (max-width: 500px) { + margin-bottom: 13px; + } background: #000; border: 1px solid #000; border-radius: 0; - cursor: pointer; - :global(.vtex-button__label) { padding: 0; font-size: 0; } - :global(.vtex-button__label)::before { content: 'OK'; font-family: 'Open Sans', sans-serif; @@ -359,36 +367,30 @@ font-weight: 600; font-size: 14px; line-height: 19px; - display: flex; align-items: center; - color: #fff; } } } - .shippingTable { display: flex; flex-direction: column; padding: 0; margin: 0; border: none; - .shippingTableHead { display: flex; .shippingTableRow { display: flex; gap: 62px; margin-bottom: 15px; - font-family: 'Open Sans', sans-serif; font-style: normal; font-size: 14px; line-height: 19px; color: #202020; text-transform: uppercase; - .shippingTableHeadDeliveryEstimate { order: 2; font-weight: 400 !important; @@ -405,15 +407,12 @@ } } } - .shippingTableBody { display: flex; flex-direction: column; gap: 15px; - .shippingTableRow { display: flex; - .shippingTableCell { font-family: 'Open Sans', sans-serif; font-style: normal; @@ -423,7 +422,6 @@ align-items: center; color: #afafaf; } - .shippingTableCellDeliveryEstimate { order: 2; } @@ -434,7 +432,6 @@ width: 95px; margin-right: 32px; padding: 0; - .shippingTableLabel { .shippingTableRadioBtn { display: none; From 65bd1b75bd8e68ac05ef4076bb9607a49363af78 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Fri, 10 Feb 2023 10:44:40 -0300 Subject: [PATCH 14/14] =?UTF-8?q?feat:=20cria=C3=A7=C3=A3o=20do=20layout?= =?UTF-8?q?=202500+?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/style.css | 21 ++++ store/blocks/pdp/product.jsonc | 23 ++-- styles/css/agenciamagma.store-theme.css | 9 +- styles/css/vtex.breadcrumb.css | 5 +- styles/css/vtex.flex-layout.css | 30 +++++- styles/css/vtex.slider-layout.css | 98 ++++++++++++++++- styles/css/vtex.store-components.css | 73 ++----------- styles/css/vtex.tab-layout.css | 23 +++- .../product/agenciamagma.store-theme.scss | 6 -- .../sass/pages/product/vtex.breadcrumb.scss | 6 +- .../sass/pages/product/vtex.flex-layout.scss | 33 ++++-- .../pages/product/vtex.product-quantity.scss | 1 - .../pages/product/vtex.slider-layout.scss | 102 +++++++++++++----- .../pages/product/vtex.store-components.scss | 93 ++-------------- .../sass/pages/product/vtex.tab-layout.scss | 21 ++-- 15 files changed, 313 insertions(+), 231 deletions(-) diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 36dde0c..9827e81 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -15,6 +15,27 @@ background: #000; border: #000; border-radius: 0; + font-size: 0; +} + +[class*='html--Quantity-Button'] + > [class*='html--addButton'] + > [class*='button'] + > [class*='vtex-button__label'] { + width: 100%; + padding: 0; +} + +[class*='html--Quantity-Button'] + > [class*='html--addButton'] + > [class*='button'] + > [class*='vtex-button__label']::before { + content: 'ADICIONAR À SACOLA'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; } [class*='html--Prateleira'] { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6dd20f4..667708b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,7 +7,6 @@ "flex-layout.row#specifications-title", "list-context.product-list#demo1", "product-questions-and-answers" - // "newsletter" ] }, "html#breadcrumb": { @@ -112,13 +111,12 @@ "html#selling-price", "html#product-installments", "html#pix", + "availability-subscriber", "html#sku-selector", "html#quantityAndButton", - "Placeholder", - "product-assembly-options", "product-gifts", - "availability-subscriber", - "html#shipping-simulator" + "html#shipping-simulator", + "Placeholder" ] }, "html#selling-price": { @@ -227,8 +225,8 @@ "children": [ "html#product-name", "html#codigo", - "html#sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "html#sku-selector" ] }, "html#codigo": { @@ -262,7 +260,11 @@ "props": { "blockClass": "description" }, "children": ["product-description"] }, - + "product-description": { + "props": { + "collapseContent": false + } + }, "html#tab-layout#desc": { "props": { "testId": "product-description", @@ -408,6 +410,11 @@ "product-selling-price" ] }, + "product-list-price": { + "props": { + "markers": ["discount"] + } + }, "html#slider-layout": { "props": { "testId": "product-summary-list" diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index c16a50b..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,11 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html { - background-color: blueviolet; -} - -.html--pdp-breadcrumb { - background-color: black; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 8fff30f..dd3cefe 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,8 +8,9 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - padding-left: 40px; - align-items: center; + padding: 0 40px; + margin: 0 auto; + max-width: 96rem; } .container .homeLink .homeIcon { display: none; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 083e71e..f3c7cb1 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,6 +7,11 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.flexRow--message-availability { + display: flex; + order: 0; +} + :global(.vtex-store-components-3-x-container) { padding: 0 40px; } @@ -26,6 +31,27 @@ .flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) { margin-left: 32px; } +@media (min-width: 1920px) { + .flexColChild :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + } +} +.flexColChild :global(.vtex-store-components-3-x-productDescriptionText) { + margin-left: 32px; +} +@media (min-width: 1920px) { + .flexColChild :global(.vtex-store-components-3-x-productDescriptionText) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } +} .flexColChild :global(.vtex-store-components-3-x-container) { padding: 0 32px; } @@ -40,8 +66,8 @@ } .flexRowContent { - margin-bottom: 0; - padding-bottom: 0; + margin: 0 auto; + padding: 16px 0 0; } @media (max-width: 1024px) { diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 85e9db3..82dbcde 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -9,24 +9,55 @@ /* Grid breakpoints */ .sliderLayoutContainer { padding: 0 40px 32px; - margin-bottom: 32px; + margin: 0 auto 32px; + max-width: 96rem; } .sliderLayoutContainer .sliderLeftArrow { left: 36px; margin: 0; padding: 0; } +@media (max-width: 500px) { + .sliderLayoutContainer .sliderLeftArrow { + left: 33px; + } +} +@media (max-width: 374px) { + .sliderLayoutContainer .sliderLeftArrow { + left: 24px; + } +} .sliderLayoutContainer .sliderRightArrow { right: 36px; margin: 0; padding: 0; } +@media (max-width: 500px) { + .sliderLayoutContainer .sliderRightArrow { + right: 33px; + } +} +@media (max-width: 374px) { + .sliderLayoutContainer .sliderRightArrow { + right: 24px; + } +} .sliderLayoutContainer .sliderTrackContainer { margin: 0 auto; width: 94%; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack { - gap: 16px; + gap: 2px; +} +@media (min-width: 300px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 8px; + } +} +@media (min-width: 500px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 16px; + } } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) { margin: 0; @@ -42,6 +73,7 @@ } .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: 100%; + min-height: 94px; height: 100%; } .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) { @@ -52,7 +84,7 @@ .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) :global(.vtex-product-summary-2-x-productBrand) { display: flex; max-width: 282.4px; - height: 50px; + height: 132px; align-items: center; font-family: "Open Sans", sans-serif; font-style: normal; @@ -62,12 +94,27 @@ text-align: center; color: #000; } +@media (min-width: 500px) { + .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) :global(.vtex-product-summary-2-x-productBrand) { + height: 50px; + } +} +@media (max-width: 300px) { + .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) :global(.vtex-product-summary-2-x-productBrand) { + font-size: 16px; + } +} .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) { display: flex; justify-content: center; align-items: center; margin: 0; } +@media (max-width: 374px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) { + height: 38px; + } +} .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue) { font-family: "Open Sans", sans-serif; font-style: normal; @@ -79,6 +126,7 @@ padding: 0; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer) { + position: relative; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; @@ -88,6 +136,45 @@ color: #bababa; padding: 0; } +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer)::before { + content: ""; + position: absolute; + background: #bababa; + height: 1px; + width: 8px; + bottom: 7px; + left: -8px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-currencyContainer)::after { + content: ""; + position: absolute; + background: #bababa; + height: 1px; + width: 8px; + bottom: 7px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPriceValue)::before { + content: "de"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-right: 8px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-listPriceValue)::after { + content: "por"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-left: 8px; +} .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) { display: flex; padding: 0; @@ -102,6 +189,11 @@ text-align: center; color: #000; } +@media (max-width: 349px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) { + font-size: 18px; + } +} .sliderLayoutContainer .paginationDotsContainer { align-items: center; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 396b8c9..74c82ce 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,72 +8,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - margin-top: 32px; - background: black; -} -.newsletter .container { - padding: 32px 0 16px 0; -} -.newsletter .container .form .label { - font-size: 0; - display: flex; - flex-direction: column; - gap: 16px; -} -.newsletter .container .form .label::before { - content: "Assine nossa newsletter"; - font-size: 24px; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - line-height: 38px; - color: #ffffff; -} -.newsletter .container .form .label::after { - content: "Receba ofertas e novidades por e-mail"; - white-space: pre; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 25px; - color: #929292; -} -.newsletter .container .form .inputGroup { - display: flex; - justify-content: center; -} -.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) { - border: none; - border-bottom: 1px #929292 solid; - border-radius: 0; -} -.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { - background: black; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 25px; - color: #929292; - width: 774px; -} -.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) { - padding: 0; -} -.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) { - background: black; - border: none; - border-bottom: 3px gray solid; - border-radius: 0; - font-family: "Open Sans", sans-serif; - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; -} - .productImagesGallerySlide { width: 100%; height: 100%; @@ -166,6 +100,7 @@ margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { + gap: 16px; margin-left: 0 !important; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { @@ -404,6 +339,9 @@ color: #202020; text-transform: uppercase; } +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + font-weight: 400 !important; +} .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { order: 2; font-weight: 400 !important; @@ -450,6 +388,9 @@ display: none; } +.subscriberContainer { + padding-bottom: 56px; +} .subscriberContainer .title { font-size: 0; margin-bottom: 0; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 7a7ef75..90a380d 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -8,7 +8,8 @@ /* Media Query M3 */ /* Grid breakpoints */ .listContainer { - margin-bottom: 32px; + margin: 0 auto 32px; + max-width: 96rem; display: flex; flex-direction: row; justify-content: space-around; @@ -55,18 +56,24 @@ text-transform: capitalize; border-radius: 0; } +@media (min-width: 1920px) { + .listItem :global(.vtex-button) { + font-size: 24px; + line-height: 38px; + } +} @media (max-width: 1024px) { .listItem { margin: 0; - padding: 0; + padding: 8px 0; } .listItem :global(.vtex-button) { margin: 0; - padding: 0; + padding: 0 !important; } .listItem :global(.vtex-button) :global(.vtex-button__label) { - padding: 0; + padding: 0 !important; } } @@ -82,6 +89,12 @@ } @media (min-width: 1025px) { .listItemActive :global(.vtex-button) { - border-bottom: 2px black solid; + border-bottom: 3px black solid; + } +} +@media (min-width: 1920px) { + .listItemActive :global(.vtex-button) { + font-size: 24px; + line-height: 38px; } } \ 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 4e15541..8b13789 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,7 +1 @@ -.html { - background-color: blueviolet; -} -.html--pdp-breadcrumb { - background-color: black; -} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 526aae0..6bd8a23 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,6 +1,8 @@ .container { - padding-left: 40px; - align-items: center; + padding: 0 40px; + margin: 0 auto; + max-width: 96rem; + .homeLink { .homeIcon { display: none; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index a413ca1..7d82dbb 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,13 +1,16 @@ +.flexRow--message-availability { + display: flex; + order: 0; +} + :global(.vtex-store-components-3-x-container) { padding: 0 40px; - :global(.vtex-flex-layout-0-x-flexRowContent) { @media (max-width: 1024px) { display: flex; flex-direction: column; } } - :global(.vtex-store-components-3-x-carouselContainer) { margin-bottom: 32px; } @@ -16,21 +19,35 @@ max-height: none; } } - .flexColChild { :global(.vtex-store-components-3-x-productDescriptionTitle) { margin-left: 32px; + @media (min-width: 1920px) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + } } + :global(.vtex-store-components-3-x-productDescriptionText) { + margin-left: 32px; + @media (min-width: 1920px) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } + } :global(.vtex-store-components-3-x-container) { padding: 0 32px; } - .agenciamagma-store-theme-5-x-html--Quantity-Button { display: flex; } } - .flexColChild--image-description { :global(.vtex-store-components-3-x-imageElement) { @media (max-width: 1024px) { @@ -38,12 +55,10 @@ } } } - .flexRowContent { - margin-bottom: 0; - padding-bottom: 0; + margin: 0 auto; + padding: 16px 0 0; } - .stretchChildrenWidth { @media (max-width: 1024px) { width: 100% !important; diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 8b339ef..90370b1 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,6 +1,5 @@ .quantitySelectorContainer { margin: 0; - .quantitySelectorTitle { display: none; } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 170d7fb..2d91b18 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,36 +1,48 @@ .sliderLayoutContainer { padding: 0 40px 32px; - margin-bottom: 32px; - + margin: 0 auto 32px; + max-width: 96rem; .sliderLeftArrow { left: 36px; margin: 0; padding: 0; + @media (max-width: 500px) { + left: 33px; + } + @media (max-width: 374px) { + left: 24px; + } } - .sliderRightArrow { right: 36px; margin: 0; padding: 0; + @media (max-width: 500px) { + right: 33px; + } + @media (max-width: 374px) { + right: 24px; + } } - .sliderTrackContainer { margin: 0 auto; width: 94%; - .sliderTrack { - gap: 16px; - + gap: 2px; + @media (min-width: 300px) { + gap: 8px; + } + @media (min-width: 500px) { + gap: 16px; + } .slide { .slideChildrenContainer { :global(.vtex-product-summary-2-x-container) { margin: 0; - :global(.vtex-product-summary-2-x-element) { padding: 0; :global(.vtex-product-summary-2-x-imageContainer) { display: flex; - :global(.vtex-store-components-3-x-discountContainer) { :global(.vtex-store-components-3-x-discountInsideContainer) { display: none; @@ -38,6 +50,7 @@ :global(.vtex-product-summary-2-x-imageContainer) { :global(.vtex-product-summary-2-x-imageNormal) { width: 100%; + min-height: 94px; height: 100%; } } @@ -47,13 +60,11 @@ display: flex; padding: 0; justify-content: center; - :global(.vtex-product-summary-2-x-productBrand) { display: flex; max-width: 282.4px; - height: 50px; + height: 132px; align-items: center; - font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 400; @@ -61,6 +72,12 @@ line-height: 25px; text-align: center; color: #000; + @media (min-width: 500px) { + height: 50px; + } + @media (max-width: 300px) { + font-size: 16px; + } } } :global(.vtex-product-price-1-x-listPrice) { @@ -69,6 +86,10 @@ align-items: center; margin: 0; + @media (max-width: 374px) { + height: 38px; + } + :global(.vtex-product-price-1-x-listPriceValue) { font-family: 'Open Sans', sans-serif; font-style: normal; @@ -80,6 +101,7 @@ padding: 0; } :global(.vtex-product-price-1-x-currencyContainer) { + position: relative; font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 400; @@ -88,19 +110,47 @@ text-align: center; color: #bababa; padding: 0; + &::before { + content: ''; + position: absolute; + background: #bababa; + height: 1px; + width: 8px; + bottom: 7px; + left: -8px; + } + &::after { + content: ''; + position: absolute; + background: #bababa; + height: 1px; + width: 8px; + bottom: 7px; + } } } - // :global(.vtex-product-price-1-x-listPriceValue)::after { - // content: 'por'; - // font-family: 'Open Sans', sans-serif; - // font-style: normal; - // font-weight: 400; - // font-size: 14px; - // line-height: 19px; - // text-align: center; - // color: #bababa; - // } - + :global(.vtex-product-price-1-x-listPriceValue)::before { + content: 'de'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-right: 8px; + } + :global(.vtex-product-price-1-x-listPriceValue)::after { + content: 'por'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + padding-left: 8px; + } :global(.vtex-product-price-1-x-sellingPrice) { display: flex; padding: 0; @@ -113,6 +163,10 @@ line-height: 33px; text-align: center; color: #000; + + @media (max-width: 349px) { + font-size: 18px; + } } } } @@ -123,13 +177,11 @@ } .paginationDotsContainer { align-items: center; - .paginationDot { width: 10px; height: 10px; background-color: #000; } - .paginationDot--isActive { background-color: #fff; width: 17px !important; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index c13b678..3bf3522 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,81 +1,9 @@ -.newsletter { - margin-top: 32px; - background: black; - .container { - padding: 32px 0 16px 0; - .form { - .label { - font-size: 0; - display: flex; - flex-direction: column; - gap: 16px; - &::before { - content: 'Assine nossa newsletter'; - font-size: 24px; - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 400; - line-height: 38px; - color: #ffffff; - } - &::after { - content: 'Receba ofertas e novidades por e-mail'; - white-space: pre; - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 25px; - color: #929292; - } - } - .inputGroup { - display: flex; - justify-content: center; - :global(.vtex-input) { - :global(.vtex-input-prefix__group) { - border: none; - border-bottom: 1px #929292 solid; - border-radius: 0; - :global(.vtex-styleguide-9-x-input) { - background: black; - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 25px; - color: #929292; - width: 774px; - } - } - } - :global(.vtex-store-components-3-x-buttonContainer) { - padding: 0; - :global(.vtex-button) { - background: black; - border: none; - border-bottom: 3px gray solid; - border-radius: 0; - font-family: 'Open Sans', sans-serif; - font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; - } - } - } - } - } -} - .productImagesGallerySlide { width: 100%; height: 100%; - .productImage { width: 100%; height: 100%; - .productImageTag { @media (min-width: 1025px) { width: 100% !important; @@ -85,11 +13,9 @@ } } } - .carouselGaleryThumbs { display: flex !important; margin-top: 16px; - :first-child { display: flex !important; justify-content: flex-start; @@ -119,7 +45,6 @@ } } } - .productBrand { display: flex; justify-content: flex-start; @@ -133,7 +58,6 @@ justify-content: flex-end; } } - .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -156,6 +80,7 @@ .skuSelectorNameContainer { margin: 0; .skuSelectorOptionsList { + gap: 16px; margin-left: 0 !important; .skuSelectorItem { margin: 0; @@ -178,7 +103,6 @@ } } } - .skuSelectorSubcontainer--tamanho { margin-bottom: 10px; .skuSelectorNameContainer { @@ -258,7 +182,6 @@ } } } - .shippingContainer { display: flex; margin: 0; @@ -314,7 +237,6 @@ bottom: 0; } } - :global(.vtex-address-form__postalCode-forgottenURL) { display: flex; position: absolute; @@ -391,6 +313,9 @@ line-height: 19px; color: #202020; text-transform: uppercase; + .shippingTableHeadDeliveryName { + font-weight: 400 !important; + } .shippingTableHeadDeliveryEstimate { order: 2; font-weight: 400 !important; @@ -441,8 +366,9 @@ } } } - .subscriberContainer { + padding-bottom: 56px; + .title { font-size: 0; margin-bottom: 0; @@ -472,7 +398,6 @@ line-height: 19px; display: flex; align-items: center; - color: #868686; } .form { @@ -481,15 +406,12 @@ display: flex; height: 40px; gap: 8px; - .input { margin: 0; - :global(.vtex-input) { :global(.vtex-input-prefix__group) { border: 0.6px solid #989898; border-radius: 0; - :global(.vtex-styleguide-9-x-input) { border-radius: 0; } @@ -501,14 +423,12 @@ position: absolute; bottom: calc(-100% - 27px); margin: 0 !important; - :global(.vtex-button) { width: 100%; background: #000; border: 0.6px solid #000; border-radius: 0; color: #fff; - :global(.vtex-button__label) { padding: 12px; font-size: 0; @@ -527,7 +447,6 @@ } } } - .productDescriptionContainer { @media (max-width: 1024px) { position: relative; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 9c689eb..851d7a4 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,6 @@ .listContainer { - margin-bottom: 32px; + margin: 0 auto 32px; + max-width: 96rem; display: flex; flex-direction: row; justify-content: space-around; @@ -44,21 +45,24 @@ line-height: 38px; text-transform: capitalize; border-radius: 0; + @media (min-width: 1920px) { + font-size: 24px; + line-height: 38px; + } } .listItem { @media (max-width: 1024px) { margin: 0; - padding: 0; + padding: 8px 0; :global(.vtex-button) { margin: 0; - padding: 0; + padding: 0 !important; :global(.vtex-button__label) { - padding: 0; + padding: 0 !important; } } } } - .listItemActive :global(.vtex-button) { background-color: white; color: black; @@ -68,8 +72,11 @@ font-weight: 400; font-size: 18px; line-height: 38px; - @media (min-width: 1025px) { - border-bottom: 2px black solid; + border-bottom: 3px black solid; + } + @media (min-width: 1920px) { + font-size: 24px; + line-height: 38px; } }