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

feat: criação da descrição do produto e estilização do pix

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2023-01-31 18:43:03 -03:00
parent 0aa0ee0f14
commit d3bd6e5795
36 changed files with 1001 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintignore Normal file
View File

@ -0,0 +1,3 @@
node_modules/
coverage/
*.snap.ts

7
.eslintrc Normal file
View File

@ -0,0 +1,7 @@
{
"extends": "vtex",
"root": true,
"env": {
"node": true
}
}

1
.prettierrc Normal file
View File

@ -0,0 +1 @@
"@vtex/prettier-config"

39
package.json
View File

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

3
react/Parcelamento.tsx Normal file
View File

@ -0,0 +1,3 @@
import Parcelamento from './components/Parcelamento/Parcelamento'
export default Parcelamento

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

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

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

@ -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}</>
}

14
react/components/Html/style.css Normal file
View File

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

3
react/components/Parcelamento/Parcelamento.css Normal file
View File

@ -0,0 +1,3 @@
.ParcelaWrapper {
margin: 0 0 8px 0;
}

32
react/components/Parcelamento/Parcelamento.tsx Normal file
View File

@ -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 (
<p className={handles.handles.ParcelaWrapper}>
{Installments.numberOfInstallments}&nbsp;x&nbsp;de&nbsp;R$&nbsp;
{Price.numberOfInstallments?.toFixed(2).toString().replace('.', ',')} sem
juros
</p>
)
}
export default Parcelamento

23
react/components/pix/pix.css Normal file
View File

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

38
react/components/pix/pix.svg Normal file
View File

@ -0,0 +1,38 @@
<svg width="66" height="24" viewBox="0 0 66 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_10145_11253)">
<path d="M27.2383 22.41V8.64487C27.2383 7.42877 27.7106 6.26248 28.5512 5.40257C29.3918 4.54266 30.532 4.05957 31.7209 4.05957L35.6936 4.06524C36.8793 4.06768 38.0157 4.55127 38.8533 5.40988C39.6908 6.26848 40.1611 7.43193 40.1609 8.64487V11.5742C40.1609 12.7903 39.6887 13.9567 38.848 14.8167C38.0074 15.6768 36.8673 16.16 35.6783 16.1602H30.0632" stroke="#939598" stroke-width="0.545336" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M41.2734 4.05884H42.9969C43.4849 4.05884 43.9529 4.25712 44.2979 4.61007C44.6429 4.96302 44.8368 5.44171 44.8368 5.94086V16.2225" stroke="#939598" stroke-width="0.545336" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M44.4659 2.46597L43.6845 1.66597C43.6384 1.61885 43.6018 1.5629 43.5769 1.50132C43.5519 1.43973 43.5391 1.37373 43.5391 1.30706C43.5391 1.2404 43.5519 1.17439 43.5769 1.11281C43.6018 1.05123 43.6384 0.99528 43.6845 0.948163L44.4659 0.148871C44.5591 0.0535465 44.6856 0 44.8174 0C44.9493 0 45.0757 0.0535465 45.169 0.148871L45.9497 0.948163C45.9958 0.99528 46.0323 1.05123 46.0573 1.11281C46.0822 1.17439 46.0951 1.2404 46.0951 1.30706C46.0951 1.37373 46.0822 1.43973 46.0573 1.50132C46.0323 1.5629 45.9958 1.61885 45.9497 1.66597L45.1655 2.46597C45.1194 2.51314 45.0646 2.55057 45.0044 2.5761C44.9441 2.60163 44.8795 2.61478 44.8143 2.61478C44.7491 2.61478 44.6845 2.60163 44.6242 2.5761C44.564 2.55057 44.5092 2.51314 44.4631 2.46597" fill="#32BCAD"/>
<path d="M48.1445 4.04956H49.8535C50.7325 4.04919 51.5757 4.40603 52.1976 5.04159L56.1953 9.13087C56.3184 9.25692 56.4645 9.35691 56.6254 9.42513C56.7863 9.49335 56.9587 9.52847 57.1329 9.52847C57.307 9.52847 57.4795 9.49335 57.6404 9.42513C57.8012 9.35691 57.9474 9.25692 58.0705 9.13087L62.0536 5.05718C62.3613 4.74244 62.7267 4.49283 63.1288 4.32261C63.5309 4.15239 63.9619 4.0649 64.3971 4.06515H65.7866" stroke="#939598" stroke-width="0.545336" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M48.1445 16.1326H49.8535C50.7325 16.1329 51.5757 15.7761 52.1976 15.1406L56.1953 11.0513C56.444 10.7971 56.7813 10.6543 57.1329 10.6543C57.4845 10.6543 57.8217 10.7971 58.0705 11.0513L62.0536 15.1257C62.6753 15.7612 63.5182 16.118 64.3971 16.1177H65.7866" stroke="#939598" stroke-width="0.545336" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.05 18.7443C16.6284 18.7459 16.2106 18.6619 15.8209 18.4974C15.4311 18.3328 15.0771 18.0909 14.7793 17.7856L11.4993 14.4283C11.3833 14.3148 11.229 14.2515 11.0684 14.2515C10.9079 14.2515 10.7536 14.3148 10.6376 14.4283L7.34647 17.7948C7.04884 18.1006 6.69493 18.343 6.30518 18.508C5.91543 18.6731 5.49757 18.7575 5.07574 18.7564H4.43359L8.5899 23.0079C9.21326 23.6442 10.0579 24.0015 10.9386 24.0015C11.8192 24.0015 12.6638 23.6442 13.2872 23.0079L17.4518 18.7471L17.05 18.7443Z" fill="#32BCAD"/>
<path d="M5.07644 6.87964C5.49827 6.87849 5.91614 6.96287 6.30589 7.12792C6.69565 7.29296 7.04956 7.53539 7.34716 7.8412L10.6383 11.2084C10.7527 11.3251 10.9076 11.3906 11.0691 11.3906C11.2307 11.3906 11.3856 11.3251 11.5 11.2084L14.7793 7.85395C15.0767 7.54777 15.4305 7.30504 15.8203 7.13985C16.2101 6.97467 16.6281 6.89031 17.0501 6.89169H17.4449L13.2803 2.63163C12.9719 2.31606 12.6057 2.06573 12.2028 1.89493C11.7998 1.72414 11.3678 1.63623 10.9316 1.63623C10.4954 1.63623 10.0635 1.72414 9.66049 1.89493C9.2575 2.06573 8.89136 2.31606 8.58297 2.63163L4.43359 6.87964H5.07644Z" fill="#32BCAD"/>
<path d="M20.8892 10.4162L18.3726 7.8419C18.3158 7.86563 18.2552 7.87814 18.1938 7.87875H17.0495C16.454 7.88027 15.8831 8.12219 15.4611 8.55191L12.1817 11.9043C11.8864 12.2058 11.4862 12.3752 11.0689 12.3752C10.6516 12.3752 10.2514 12.2058 9.95605 11.9043L6.66426 8.53916C6.2423 8.10918 5.67145 7.867 5.07586 7.86529H3.67103C3.61313 7.86395 3.55591 7.8522 3.502 7.83057L0.969429 10.4162C0.347392 11.0539 -0.00195312 11.9179 -0.00195312 12.8187C-0.00195312 13.7195 0.347392 14.5835 0.969429 15.2212L3.49646 17.8061C3.55026 17.7841 3.60754 17.7723 3.66548 17.7714H5.07586C5.67144 17.7696 6.24226 17.5274 6.66426 17.0975L9.95535 13.731C10.5504 13.123 11.5874 13.123 12.1817 13.731L15.4611 17.0848C15.8831 17.5145 16.454 17.7564 17.0495 17.7579H18.1938C18.2552 17.7584 18.3159 17.7709 18.3726 17.7948L20.8892 15.2205C21.1977 14.905 21.4424 14.5305 21.6094 14.1183C21.7764 13.706 21.8623 13.2642 21.8623 12.818C21.8623 12.3718 21.7764 11.9299 21.6094 11.5177C21.4424 11.1055 21.1977 10.731 20.8892 10.4155" fill="#32BCAD"/>
<path d="M30.6567 21.2399C30.4487 21.2493 30.2422 21.2813 30.0409 21.3356V22.1746C30.1949 22.2298 30.357 22.2576 30.5202 22.2568C30.9317 22.2568 31.1264 22.115 31.1264 21.7445C31.1264 21.3958 30.9671 21.2399 30.6567 21.2399ZM29.9023 22.7988V21.1386H30.0153L30.027 21.2095C30.2369 21.1524 30.4518 21.1171 30.6685 21.1039C30.8187 21.0931 30.9677 21.1373 31.089 21.2286C31.2275 21.3462 31.2746 21.5361 31.2746 21.743C31.2746 21.9499 31.2053 22.1639 31.0114 22.2766C30.8634 22.3522 30.6995 22.3894 30.5341 22.385C30.3669 22.3839 30.2007 22.3579 30.0409 22.3078V22.796L29.9023 22.7988Z" fill="#939598"/>
<path d="M32.3051 21.2351C31.8943 21.2351 31.7107 21.3669 31.7107 21.7375C31.7107 22.0954 31.8915 22.2569 32.3051 22.2569C32.7186 22.2569 32.8974 22.1266 32.8974 21.7567C32.8974 21.3988 32.7166 21.2351 32.3051 21.2351ZM32.8343 22.2569C32.6958 22.3576 32.5143 22.3866 32.3051 22.3866C32.0959 22.3866 31.9082 22.3554 31.7745 22.2569C31.6242 22.1485 31.5625 21.9735 31.5625 21.7475C31.5625 21.5214 31.6242 21.3457 31.7745 21.2351C31.9082 21.1366 32.0917 21.1055 32.3051 21.1055C32.5184 21.1055 32.6979 21.1366 32.8343 21.2351C32.9867 21.3457 33.0456 21.5257 33.0456 21.7446C33.0456 21.9636 32.9846 22.1485 32.8343 22.2569Z" fill="#939598"/>
<path d="M34.7809 22.3525L34.3223 21.3456H34.3133L33.8617 22.3525H33.7349L33.25 21.1387H33.4024L33.809 22.1576H33.8187L34.2607 21.1387H34.3874L34.8405 22.1576H34.8502L35.2471 21.1387H35.3974L34.9084 22.3525H34.7809Z" fill="#939598"/>
<path d="M36.2814 21.2321C35.9004 21.2321 35.7715 21.4058 35.748 21.6573H36.8148C36.803 21.3809 36.6644 21.2321 36.2814 21.2321ZM36.2765 22.3864C36.0486 22.3864 35.9004 22.3524 35.7826 22.2518C35.6441 22.1292 35.5977 21.9514 35.5977 21.7473C35.5977 21.5432 35.6607 21.3455 35.8186 21.2279C35.9568 21.139 36.1184 21.0962 36.2814 21.1053C36.4475 21.095 36.6128 21.136 36.7559 21.2229C36.927 21.3406 36.9602 21.5475 36.9602 21.7827H35.7445C35.7494 22.0329 35.829 22.2539 36.2897 22.2539C36.4956 22.2484 36.7008 22.2247 36.9027 22.1831V22.3106C36.6974 22.3538 36.4888 22.3787 36.2793 22.385" fill="#939598"/>
<path d="M37.3594 22.3525V21.1387H37.4716L37.4834 21.2096C37.7348 21.1444 37.8526 21.104 38.0736 21.104H38.0902V21.2386H38.0569C37.8713 21.2386 37.7584 21.2649 37.4979 21.3343V22.3511L37.3594 22.3525Z" fill="#939598"/>
<path d="M38.8946 21.2321C38.5143 21.2321 38.3848 21.4058 38.3613 21.6573H39.428C39.4163 21.3809 39.2777 21.2321 38.8946 21.2321ZM38.8898 22.3864C38.6619 22.3864 38.5144 22.3524 38.3966 22.2518C38.258 22.1292 38.2109 21.9514 38.2109 21.7473C38.2109 21.5432 38.2747 21.3455 38.4319 21.2279C38.5701 21.1392 38.7317 21.0964 38.8946 21.1053C39.0608 21.095 39.2261 21.136 39.3692 21.2229C39.541 21.3406 39.577 21.5475 39.577 21.7827H38.3564C38.3613 22.0329 38.4409 22.2539 38.9016 22.2539C39.1078 22.2484 39.3131 22.2247 39.5153 22.1831V22.3106C39.31 22.3538 39.1014 22.3787 38.8919 22.385" fill="#939598"/>
<path d="M41.0931 21.3167C40.939 21.2617 40.7769 21.2341 40.6137 21.2352C40.2023 21.2352 40.0076 21.3769 40.0076 21.7475C40.0076 22.0982 40.1676 22.252 40.4773 22.252C40.6852 22.2421 40.8915 22.2106 41.0931 22.1578V21.3167ZM41.1194 22.3526L41.107 22.2818C40.8972 22.3394 40.6823 22.375 40.4655 22.388C40.3151 22.3996 40.1657 22.3551 40.045 22.2626C39.9065 22.145 39.8594 21.9551 39.8594 21.7489C39.8594 21.5321 39.9286 21.328 40.1226 21.2175C40.2708 21.1402 40.4357 21.1021 40.602 21.1069C40.7683 21.1093 40.9336 21.135 41.0931 21.1834V20.6272H41.2316V22.3526H41.1194Z" fill="#939598"/>
<path d="M43.2641 21.2401C43.0561 21.2495 42.8497 21.2815 42.6483 21.3358V22.1726C42.802 22.2294 42.9643 22.258 43.1277 22.257C43.5391 22.257 43.7338 22.1152 43.7338 21.7446C43.7338 21.396 43.5745 21.2401 43.2641 21.2401ZM43.6188 22.2782C43.471 22.3537 43.3074 22.3909 43.1422 22.3866C42.9615 22.3855 42.7821 22.3546 42.6109 22.2952L42.604 22.3526H42.5098V20.6272H42.6483V21.2061C42.8539 21.1523 43.0641 21.1186 43.2759 21.1055C43.4261 21.0947 43.5751 21.1389 43.6964 21.2302C43.8349 21.3478 43.882 21.5377 43.882 21.7446C43.882 21.9516 43.8128 22.1655 43.6188 22.2782Z" fill="#939598"/>
<path d="M44.0663 22.8165V22.6848C44.1356 22.6918 44.1979 22.6968 44.2423 22.6968C44.4141 22.6968 44.5194 22.6458 44.6136 22.4467L44.6586 22.3503L44.0352 21.1365H44.1959L44.7272 22.1845H44.7362L45.2412 21.1365H45.3991L44.7313 22.4998C44.6094 22.7471 44.4778 22.8286 44.2354 22.8286C44.1781 22.8283 44.121 22.8243 44.0642 22.8165" fill="#939598"/>
<path d="M47.3137 21.6603H46.8538V22.0855H47.3137C47.631 22.0855 47.7509 22.0493 47.7509 21.8729C47.7509 21.683 47.586 21.6603 47.311 21.6603H47.3137ZM47.2279 20.9744H46.8524V21.4066H47.2306C47.543 21.4066 47.6677 21.3684 47.6677 21.1884C47.6677 20.9956 47.5098 20.9758 47.2279 20.9758V20.9744ZM47.9427 22.2428C47.773 22.3533 47.5687 22.3576 47.1953 22.3576H46.4922V20.7065H47.1787C47.5008 20.7065 47.6982 20.7108 47.8624 20.8121C47.9169 20.8454 47.9613 20.8936 47.9904 20.9514C48.0196 21.0091 48.0323 21.074 48.0272 21.1388C48.0272 21.3117 47.958 21.4272 47.773 21.5044V21.5136C47.9808 21.5618 48.1138 21.6702 48.1138 21.9034C48.119 21.9699 48.1057 22.0367 48.0755 22.0958C48.0452 22.155 47.9992 22.2042 47.9427 22.2378" fill="#939598"/>
<path d="M49.5179 21.8432C49.3793 21.8311 49.2408 21.824 49.0905 21.824C48.8487 21.824 48.7635 21.8743 48.7635 21.9877C48.7635 22.1011 48.8328 22.1507 49.0198 22.1507C49.1878 22.145 49.3548 22.1213 49.5179 22.0798V21.8432ZM49.5872 22.3526L49.5781 22.2818C49.3681 22.3423 49.1519 22.378 48.9339 22.3881C48.808 22.3967 48.6824 22.3656 48.5744 22.2988C48.528 22.2589 48.4919 22.2079 48.4695 22.1503C48.447 22.0927 48.4389 22.0303 48.4457 21.9687C48.4526 21.9071 48.4742 21.8482 48.5088 21.7972C48.5433 21.7462 48.5897 21.7048 48.6437 21.6766C48.7684 21.6164 48.9353 21.6115 49.0884 21.6115C49.2124 21.6115 49.3793 21.6185 49.5179 21.6285V21.6065C49.5179 21.4166 49.396 21.3542 49.0621 21.3542C48.9332 21.3542 48.7753 21.3613 48.625 21.3755V21.1303C48.7919 21.1161 48.9803 21.1069 49.1355 21.1069C49.3433 21.1069 49.556 21.1232 49.6897 21.2196C49.8234 21.316 49.8518 21.4556 49.8518 21.6355V22.3541L49.5872 22.3526Z" fill="#939598"/>
<path d="M51.399 22.3525V21.6829C51.399 21.4618 51.2888 21.3825 51.0914 21.3825C50.9275 21.3899 50.7649 21.4156 50.6065 21.459V22.3533H50.2754V21.1387H50.5455L50.5573 21.216C50.7639 21.1538 50.9768 21.1167 51.1919 21.1054C51.3379 21.0935 51.483 21.138 51.5985 21.2301C51.692 21.3166 51.7273 21.437 51.7273 21.6099V22.3525H51.399Z" fill="#939598"/>
<path d="M52.6648 22.3866C52.5117 22.3866 52.3448 22.3646 52.2229 22.2591C52.0774 22.1386 52.0352 21.9494 52.0352 21.7446C52.0352 21.5526 52.0961 21.3428 52.2769 21.2252C52.4252 21.1267 52.608 21.1055 52.7985 21.1055C52.9371 21.1055 53.0687 21.1147 53.2142 21.1289V21.3889C53.0943 21.3769 52.9509 21.3676 52.8359 21.3676C52.5207 21.3676 52.3725 21.4683 52.3725 21.7475C52.3725 22.0089 52.4833 22.1223 52.7417 22.1223C52.9092 22.1167 53.0759 22.0958 53.2398 22.0599V22.3094C53.0502 22.3545 52.8567 22.3804 52.6621 22.3866" fill="#939598"/>
<path d="M54.2203 21.3599C53.9051 21.3599 53.7666 21.4612 53.7666 21.7375C53.7666 22.0139 53.9051 22.1315 54.2203 22.1315C54.5355 22.1315 54.6692 22.033 54.6692 21.7567C54.6692 21.4803 54.5355 21.3599 54.2203 21.3599ZM54.7891 22.2591C54.6436 22.3597 54.4531 22.3866 54.2203 22.3866C53.9876 22.3866 53.7929 22.3576 53.6495 22.2591C53.4847 22.1485 53.4258 21.9657 53.4258 21.7475C53.4258 21.5292 53.4847 21.3428 53.6495 21.2323C53.7929 21.1338 53.9827 21.1055 54.2203 21.1055C54.4579 21.1055 54.6436 21.1338 54.7891 21.2323C54.9532 21.3428 55.01 21.5285 55.01 21.7446C55.01 21.9607 54.9511 22.1485 54.7891 22.2591Z" fill="#939598"/>
<path d="M56.9229 22.3864C56.7234 22.3864 56.5073 22.3524 56.3452 22.2157C56.1526 22.052 56.0938 21.7997 56.0938 21.5283C56.0938 21.2853 56.1693 20.9969 56.42 20.829C56.6154 20.6993 56.8571 20.6724 57.1017 20.6724C57.2804 20.6724 57.4639 20.6844 57.6634 20.7014V20.9969C57.4923 20.9827 57.2804 20.9707 57.1162 20.9707C56.6576 20.9707 56.463 21.1485 56.463 21.5283C56.463 21.9081 56.6438 22.0881 56.9818 22.0881C57.2234 22.0796 57.4636 22.0466 57.6988 21.9896V22.283C57.4441 22.3432 57.1842 22.3779 56.9229 22.3864Z" fill="#939598"/>
<path d="M58.673 21.3215C58.3959 21.3215 58.292 21.4228 58.2705 21.605H59.0699C59.0602 21.408 58.9473 21.3215 58.673 21.3215ZM58.6231 22.3844C58.4284 22.3844 58.2518 22.3603 58.1202 22.2498C57.9886 22.1392 57.9297 21.9493 57.9297 21.7424C57.9297 21.5575 57.9886 21.3506 58.1534 21.2301C58.2989 21.1245 58.4846 21.1033 58.673 21.1033C58.842 21.1033 59.0415 21.1224 59.187 21.2259C59.3775 21.3626 59.3948 21.5745 59.3948 21.8239H58.2684C58.2754 22.0096 58.3716 22.1293 58.7055 22.1293C58.9176 22.1246 59.129 22.1037 59.338 22.067V22.305C59.1021 22.3509 58.8631 22.3774 58.6231 22.3844Z" fill="#939598"/>
<path d="M60.8697 22.3525V21.6829C60.8697 21.4618 60.7595 21.3825 60.5621 21.3825C60.3982 21.3899 60.2357 21.4156 60.0772 21.459V22.3533H59.7461V21.1387H60.0163L60.028 21.216C60.2346 21.1538 60.4475 21.1167 60.6626 21.1054C60.8086 21.0935 60.9537 21.138 61.0692 21.2301C61.1627 21.3166 61.198 21.437 61.198 21.6099V22.3525H60.8697Z" fill="#939598"/>
<path d="M62.1438 22.3866C61.9837 22.3866 61.8383 22.3405 61.7586 22.213C61.6933 22.1027 61.6628 21.9745 61.6713 21.8459V21.391H61.4316V21.1388H61.6713L61.7067 20.771H61.999V21.1388H62.4666V21.391H61.999V21.7807C61.9946 21.8592 62.0056 21.9378 62.0315 22.0117C62.0669 22.0932 62.1444 22.1244 62.2483 22.1244C62.3278 22.1229 62.4071 22.1149 62.4853 22.1003V22.3434C62.3725 22.3683 62.2577 22.3828 62.1424 22.3866" fill="#939598"/>
<path d="M62.791 22.3525V21.1387H63.0612L63.073 21.2159C63.2625 21.1501 63.4604 21.1128 63.6604 21.1054C63.6744 21.1045 63.6886 21.1045 63.7026 21.1054V21.3994C63.6652 21.3994 63.6202 21.3994 63.5876 21.3994C63.4305 21.4001 63.2741 21.421 63.1221 21.4618V22.3582L62.791 22.3525Z" fill="#939598"/>
<path d="M64.9084 21.8432C64.7698 21.8311 64.6313 21.824 64.4803 21.824C64.2385 21.824 64.154 21.8743 64.154 21.9877C64.154 22.1011 64.2233 22.1507 64.4096 22.1507C64.5778 22.145 64.745 22.1213 64.9084 22.0798V21.8432ZM64.9776 22.3526L64.9679 22.2818C64.7579 22.3423 64.5417 22.378 64.3237 22.3881C64.1978 22.3967 64.0722 22.3656 63.9642 22.2988C63.9205 22.2646 63.8857 22.2199 63.8628 22.1688C63.8398 22.1177 63.8295 22.0616 63.8326 22.0054C63.8294 21.9363 63.8468 21.8678 63.8826 21.8091C63.9183 21.7504 63.9707 21.7042 64.0328 21.6766C64.1575 21.6164 64.3237 21.6115 64.4768 21.6115C64.6015 21.6115 64.7684 21.6185 64.907 21.6285V21.6065C64.907 21.4166 64.7844 21.3542 64.4512 21.3542C64.3216 21.3542 64.1644 21.3613 64.0141 21.3755V21.1303C64.181 21.1161 64.3687 21.1069 64.5239 21.1069C64.7317 21.1069 64.9444 21.1232 65.0781 21.2196C65.2118 21.316 65.2402 21.4556 65.2402 21.6355V22.3541L64.9776 22.3526Z" fill="#939598"/>
<path d="M65.6641 20.6272H65.9959V22.3526H65.6641V20.6272Z" fill="#939598"/>
</g>
<defs>
<clipPath id="clip0_10145_11253">
<rect width="66" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

34
react/components/pix/pix.tsx Normal file
View File

@ -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 (
<>
<section className={handles.handles.pixwrapper}>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/pixgabrielFerraz.svg"
alt="image-pix"
/>
<div className={handles.handles.pixPrice}>
R$&nbsp;{descontoPixValue.toFixed(2).toString().replace('.', ',')}
<p>10 % de desconto</p>
</div>
</section>
</>
)
}
export default Pix

34
react/package.json
View File

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

3
react/pix.tsx Normal file
View File

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

10
react/tsconfig.json
View File

@ -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"
]
}

120
react/yarn.lock
View File

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

24
store/blocks/pdp/product-assembly.jsonc
View File

@ -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": {

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

@ -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": {

12
store/blocks/product-price.jsonc
View File

@ -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"]
}
}

4
store/blocks/product-summary/product-summary.jsonc
View File

@ -81,9 +81,7 @@
},
"product-price-savings#summary": {
"props": {
"markers": [
"discount"
],
"markers": ["discount"],
"blockClass": "summary"
}
}

7
store/interfaces.json
View File

@ -5,5 +5,12 @@
"html": {
"component": "html",
"composition": "children"
},
"pix": {
"component": "pix"
},
"Parcelamento": {
"component": "Parcelamento"
}
}

13
styles/css/vtex-numeric-stepper.css Normal file
View File

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

13
styles/css/vtex.address-form.css Normal file
View File

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

9
styles/css/vtex.address.css Normal file
View File

@ -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 */

9
styles/css/vtex.breadcrumb.css
View File

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

12
styles/css/vtex.numeric-stepper.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 {
height: 80px;
}

45
styles/css/vtex.product-quantity.css Normal file
View File

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

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

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

49
styles/css/vtex.tab-layout.css Normal file
View File

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

17
styles/sass/pages/product/vtex.breadcrumb.scss
View File

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

3
styles/sass/pages/product/vtex.numeric-stepper.scss Normal file
View File

@ -0,0 +1,3 @@
.wrapper {
height: 80px;
}

42
styles/sass/pages/product/vtex.product-quantity.scss Normal file
View File

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

0
styles/sass/pages/product/vtex.rich-text.scss
View File

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

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

38
styles/sass/pages/product/vtex.tab-layout.scss Normal file
View File

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