feat(produto): Ajustes Css do produto

This commit is contained in:
Wellington Duarte 2023-02-10 21:52:47 -03:00
parent c9a06914fb
commit 47e0f152d2
23 changed files with 549 additions and 177 deletions

View File

@ -15,7 +15,6 @@
"postreleasy": "vtex publish --verbose" "postreleasy": "vtex publish --verbose"
}, },
"dependencies": { "dependencies": {
"agenciamagma.store-theme": "5.x",
"vtex.store": "2.x", "vtex.store": "2.x",
"vtex.store-header": "2.x", "vtex.store-header": "2.x",
"vtex.product-summary": "2.x", "vtex.product-summary": "2.x",

View File

@ -1,3 +0,0 @@
import Example from "./components/Example/Example";
export default Example;

3
react/PixComponent.tsx Normal file
View File

@ -0,0 +1,3 @@
import PixComponent from "./components/PixComponent/PixComponent";
export default PixComponent;

View File

@ -1,9 +0,0 @@
import React from 'react'
const Example = () => {
return (
<div>Example</div>
)
}
export default Example

View File

@ -4,37 +4,48 @@ import { useCssHandles } from "vtex.css-handles";
const CSS_HANDLES = ["html"] as const; const CSS_HANDLES = ["html"] as const;
type HtmlProps = { type HtmlProps = {
children?: ReactNode, children?: ReactNode;
/** /**
* Qual tag Html que deseja que seja usar * Qual tag Html que deseja que seja usar
* *
* @default div * @default div
*/ */
tag?: keyof React.ReactHTML tag?: keyof React.ReactHTML;
/** /**
* Classes CSS extras que deseja adicionar. * Classes CSS extras que deseja adicionar.
* Feito para uso de [classes do tachyons](https://tachyons.io/) * Feito para uso de [classes do tachyons](https://tachyons.io/)
*/ */
tachyonsClasses?: string tachyonsClasses?: string;
/** /**
* Se caso quiser usar esse componente * Se caso quiser usar esse componente
* para adicinar um texto simples * para adicinar um texto simples
*/ */
text?: string text?: string;
/** /**
* Tag ID para * Tag ID para
*/ */
testId?: string testId?: string;
} };
export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { export const Html = ({
children = null,
tag = "div",
text = "",
tachyonsClasses: classes = "",
testId,
}: HtmlProps) => {
const { handles } = useCssHandles(CSS_HANDLES); const { handles } = useCssHandles(CSS_HANDLES);
const props = { const props = {
className: `${handles.html} ${classes}`, className: `${handles.html} ${classes}`,
"data-testid": testId "data-testid": testId,
}; };
const Children = <>{children}{text}</>; const Children = (
<>
{children}
{text}
</>
);
const Element = React.createElement(tag, props, Children); const Element = React.createElement(tag, props, Children);
return <>{Element}</>; return <>{Element}</>;

View File

@ -0,0 +1,15 @@
.wrapperPix:after {
display: none;
}
.wrapperPix:before {
display: none;
}
.wrapperPixImage {
width: 40%;
}
.wrapperPrices {
width: 60%;
}

View File

@ -0,0 +1,20 @@
import React from "react";
import { useProduct } from "vtex.product-context";
import "./PixComponent.css";
const pixComponent = () => {
const product = useProduct();
return (
<div className="wrapperPix">
<div className="wrapperPrices">
<p className="wrapperTitle">
{(product?.product?.priceRange.sellingPrice.highPrice || 0) * 0.9}
</p>
<p className="wrapperSubtitle">10 % de desconto</p>
</div>
</div>
);
};
export default pixComponent;

View File

@ -1,9 +1,6 @@
{ {
"footer": { "footer": {
"blocks": [ "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
"footer-layout.desktop",
"footer-layout.mobile"
]
}, },
"footer-layout.desktop": { "footer-layout.desktop": {
"children": [ "children": [
@ -50,26 +47,18 @@
} }
}, },
"flex-layout.row#footer-2-desktop": { "flex-layout.row#footer-2-desktop": {
"children": [ "children": ["accepted-payment-methods"],
"accepted-payment-methods"
],
"props": { "props": {
"blockClass": "payment-methods" "blockClass": "payment-methods"
} }
}, },
"accepted-payment-methods": { "accepted-payment-methods": {
"props": { "props": {
"paymentMethods": [ "paymentMethods": ["MasterCard", "Visa", "Diners Club"]
"MasterCard",
"Visa",
"Diners Club"
]
} }
}, },
"flex-layout.row#footer-3-desktop": { "flex-layout.row#footer-3-desktop": {
"children": [ "children": ["rich-text#footer"],
"rich-text#footer"
],
"props": { "props": {
"blockClass": "credits" "blockClass": "credits"
} }
@ -87,9 +76,7 @@
] ]
}, },
"flex-layout.row#2-footer-mobile": { "flex-layout.row#2-footer-mobile": {
"children": [ "children": ["flex-layout.col#footer-1-mobile"],
"flex-layout.col#footer-1-mobile"
],
"props": { "props": {
"blockClass": "payment-methods", "blockClass": "payment-methods",
"paddingTop": 4, "paddingTop": 4,
@ -114,9 +101,7 @@
"paddingTop": 4, "paddingTop": 4,
"paddingBottom": 4 "paddingBottom": 4
}, },
"children": [ "children": ["vtex.menu@2.x:menu#footer-mobile"]
"vtex.menu@2.x:menu#footer-mobile"
]
}, },
"rich-text#footer-mobile": { "rich-text#footer-mobile": {
"props": { "props": {

View File

@ -2,9 +2,9 @@
"store.home": { "store.home": {
"blocks": [ "blocks": [
"list-context.image-list#demo", "list-context.image-list#demo",
"example-component", /* You can make references to blocks defined in other files. "example-component",
* For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ /* You can make references to blocks defined in other files.
"flex-layout.row#deals", * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals",
"__fold__", "__fold__",
"rich-text#shelf-title", "rich-text#shelf-title",
"flex-layout.row#shelf", "flex-layout.row#shelf",

View File

@ -3,10 +3,12 @@
"children": [ "children": [
"html#breadcrumb", "html#breadcrumb",
"condition-layout.product#availability", "condition-layout.product#availability",
"flex-layout.row#description", // "flex-layout.row#description",
"flex-layout.row#specifications-title", // "flex-layout.row#specifications-title",
"product-specification-group#table", "tab-layout#home",
"shelf.relatedProducts", "newsletter",
// "product-specification-group#table",
// "shelf.relatedProducts",
"product-questions-and-answers" "product-questions-and-answers"
] ]
}, },
@ -18,6 +20,115 @@
}, },
"children": ["breadcrumb"] "children": ["breadcrumb"]
}, },
// Description
"tab-layout#home": {
"children": ["tab-list#description", "tab-content#description"],
"props": {
"blockClass": "description",
"defaultActiveTabId": "description1"
}
},
// Abas
"tab-list#description": {
"children": [
"tab-list.item#description1",
"tab-list.item#description2",
"tab-list.item#description3",
"tab-list.item#description4",
"tab-list.item#description5"
]
},
"tab-list.item#description1": {
"props": {
"tabId": "description1",
"label": "Descrição",
"defaultActiveTab": true,
"blockClass": "description"
}
},
"tab-list.item#description2": {
"props": {
"tabId": "description2",
"label": "Descrição",
"blockClass": "description"
}
},
"tab-list.item#description3": {
"props": {
"tabId": "description3",
"label": "Descrição",
"blockClass": "description"
}
},
"tab-list.item#description4": {
"props": {
"tabId": "description4",
"label": "Descrição",
"blockClass": "description"
}
},
"tab-list.item#description5": {
"props": {
"tabId": "description5",
"label": "Descrição",
"blockClass": "description"
}
},
// Conteudos
"tab-content#description": {
"children": [
"tab-content.item#description1",
"tab-content.item#description2",
"tab-content.item#description3",
"tab-content.item#description4",
"tab-content.item#description5"
]
},
"tab-content.item#description1": {
"children": ["product-description"],
"props": {
"tabId": "description1",
"blockClass": "descriptionContent"
}
},
"tab-content.item#description2": {
"children": ["product-description"],
"props": {
"tabId": "description2",
"blockClass": "descriptionContent"
}
},
"tab-content.item#description3": {
"children": ["product-description"],
"props": {
"tabId": "description3",
"blockClass": "descriptionContent"
}
},
"tab-content.item#description4": {
"children": ["product-description"],
"props": {
"tabId": "description4",
"blockClass": "descriptionContent"
}
},
"tab-content.item#description5": {
"children": ["product-description"],
"props": {
"tabId": "description5",
"blockClass": "descriptionContent"
}
},
"flex-layout.row#specifications-title": { "flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"] "children": ["rich-text#specifications"]
}, },
@ -104,12 +215,13 @@
"product-rating-summary", "product-rating-summary",
"flex-layout.row#list-price-savings", "flex-layout.row#list-price-savings",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"pix-component",
"product-installments", "product-installments",
"product-separator", "product-separator",
"product-identifier.product", "product-identifier.product",
"sku-selector", "sku-selector",
"product-quantity", "product-quantity",
"product-assembly-options", // "product-assembly-options",
"product-gifts", "product-gifts",
"flex-layout.row#buy-button", "flex-layout.row#buy-button",
"availability-subscriber", "availability-subscriber",

View File

@ -5,5 +5,8 @@
"html": { "html": {
"component": "html", "component": "html",
"composition": "children" "composition": "children"
},
"pix-component": {
"component": "PixComponent"
} }
} }

View File

@ -0,0 +1,25 @@
/*
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 */
.homeLink .homeIcon {
display: none;
}
.homeLink::before {
content: "Home";
font-size: 16px;
}
.arrow--1 .Link {
font-size: 0;
}
.arrow--1 .Link::before {
content: "Sapatos";
font-size: 16px;
}

View File

@ -1,98 +1,16 @@
.flexRowContent--menu-link, /*
.flexRowContent--main-header { 0 - 600PX: Phone
padding: 0 0.5rem; 600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.flexRowContent {
width: 100%;
margin-left: 0 320px;
} }
.flexRowContent .stretchChildrenWidth {
@media screen and (min-width: 40em) { width: 50% !important;
.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;
} }

12
styles/css/vtex.shelf.css Normal file
View File

@ -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 */
.container {
display: none;
}

View File

@ -8,5 +8,45 @@
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.newsletter { .newsletter {
background: red; background: black;
color: white;
}
.container .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .swiperPaginationClickable {
display: none;
}
.container .carouselContainer .flexColChild .productBrand {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right !important;
color: #575757;
}
.flexCol .flexColChild .flexRowContent {
justify-content: end !important;
display: none;
}
.productBrand--quickview {
display: flex;
justify-content: end;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
}
.productImageTag {
height: 664px;
width: 664px;
}
.sellingPriceValue {
display: none;
} }

View File

@ -0,0 +1,57 @@
@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 */
.container .listContainer .listItem {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
color: #bfbfbf;
}
.container .listContainer .listItemActive {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 32px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
color: #000000;
}
.container .contentContainer .contentItem .productDescriptionContainer {
padding: 100px;
}
.container .contentContainer .contentItem .productDescriptionContainer .productDescriptionTitle {
display: block;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.container .contentContainer .contentItem .productDescriptionContainer .productDescriptionText {
content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.descriptionContent {
padding: 100px;
}

View File

@ -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 {
display: none;
}

View File

@ -0,0 +1,21 @@
.homeLink {
.homeIcon {
display: none;
}
}
.homeLink::before {
content: "Home";
font-size: 16px;
}
.arrow--1 {
.Link {
font-size: 0;
}
.Link::before {
content: "Sapatos";
font-size: 16px;
}
}

View File

@ -0,0 +1,8 @@
.flexRowContent {
width: 100%;
margin-left: 0 320px;
// Wrapper do produto
.stretchChildrenWidth {
width: 50% !important;
}
}

View File

@ -0,0 +1,3 @@
.container {
display: none;
}

View File

@ -1,3 +1,81 @@
.newsletter{ .newsletter {
background: red; background: black;
color: white;
}
// Bloco do produto
.container {
.product-images {
// display: block;
}
// Bloco das imagens
.carouselContainer {
// Bloco das miniaturas
.carouselGaleryThumbs {
// Miniaturas individuais
.productImagesThumb {
}
}
.carouselGaleryCursor {
// width: 50% !important;
// order: 1;
.productImagesGallerySwiperContainer {
.productImagesGallerySlide {
.productImage {
.productImageTag--main {
}
}
}
}
.productImagesGallerySwiperContainer {
.swiperPaginationClickable {
display: none;
}
}
}
.flexColChild {
.productBrand {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right !important;
color: #575757;
}
}
}
}
.flexCol {
.flexColChild {
.flexRowContent {
justify-content: end !important;
display: none;
}
}
}
.productBrand--quickview {
display: flex;
justify-content: end;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
}
.productImageTag {
height: 664px;
width: 664px;
}
.sellingPriceValue {
display: none;
} }

View File

@ -0,0 +1,59 @@
.container {
// display: none;
.listContainer {
.listItem {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
color: #bfbfbf;
}
.listItemActive {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 32px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
color: #000000;
}
}
// Descrição
.contentContainer {
.contentItem {
.productDescriptionContainer {
padding: 100px;
.productDescriptionTitle {
display: block;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.productDescriptionText {
content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
}
}
}
}
.descriptionContent {
padding: 100px;
}

View File

@ -0,0 +1,3 @@
.wrapper {
display: none;
}