WellingtonDuarteSantos/challenge-vtex-io-wellingtonduartesantos
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(produto): Ajustes Css do produto

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
manifest.json
View File

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

3
react/Example.tsx
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;

9
react/components/Example/Example.tsx
View File

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

79
react/components/Html/index.tsx
View File

@ -4,38 +4,49 @@ import { useCssHandles } from "vtex.css-handles";
const CSS_HANDLES = ["html"] as const;
type HtmlProps = {
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}</>;
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}</>;
};

15
react/components/PixComponent/PixComponent.css Normal file
View File

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

20
react/components/PixComponent/PixComponent.tsx Normal file
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;

27
store/blocks/footer/footer.json
View File

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

6
store/blocks/home/home.jsonc
View File

@ -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",

122
store/blocks/pdp/product.jsonc
View File

@ -3,10 +3,12 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
// "flex-layout.row#description",
// "flex-layout.row#specifications-title",
"tab-layout#home",
"newsletter",
// "product-specification-group#table",
// "shelf.relatedProducts",
"product-questions-and-answers"
]
},
@ -18,6 +20,115 @@
},
"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": {
"children": ["rich-text#specifications"]
},
@ -104,12 +215,13 @@
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"pix-component",
"product-installments",
"product-separator",
"product-identifier.product",
"sku-selector",
"product-quantity",
"product-assembly-options",
// "product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber",

3
store/interfaces.json
View File

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

25
styles/css/vtex.breadcrumb.css Normal file
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;
}

112
styles/css/vtex.flex-layout.css
View File

@ -1,98 +1,16 @@
.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 */
.flexRowContent {
width: 100%;
margin-left: 0 320px;
}
.flexRowContent .stretchChildrenWidth {
width: 50% !important;
}

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;
}

42
styles/css/vtex.store-components.css
View File

@ -8,5 +8,45 @@
/* Media Query M3 */
/* Grid breakpoints */
.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;
}

57
styles/css/vtex.tab-layout.css Normal file
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;
}

12
styles/css/vtex.telemarketing.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 */
.wrapper {
display: none;
}

21
styles/sass/pages/product/vtex.breadcrumb.scss Normal file
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;
}
}

8
styles/sass/pages/product/vtex.flex-layout.scss Normal file
View File

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

3
styles/sass/pages/product/vtex.shelf.scss Normal file
View File

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

84
styles/sass/pages/product/vtex.store-components.scss
View File

@ -1,3 +1,81 @@
.newsletter{
background: red;
}
.newsletter {
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;
}

59
styles/sass/pages/product/vtex.tab-layout.scss Normal file
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;
}

3
styles/sass/pages/product/vtex.telemarketing.scss Normal file
View File

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