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

refactor:estilizando os botoes de product-buy

Browse Source
This commit is contained in:
Victor Cardoso de Souza 2023-02-03 16:03:10 -03:00
parent 667985d0f6
commit 036c504d69
10 changed files with 245 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
assets/pix-image.svg → assets/pix-image-victor_souza.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

4
react/components/Example/paymentWithPix.tsx
View File

@ -7,12 +7,12 @@ console.log("props",props);
const product = useProduct();
let imagePix = "https://agenciamagma.vtexassets.com/arquivos/pix-image-victor_souza.svg"
return (
<div>
{/* <img src= alt="" /> */}
<img src={imagePix} alt="Imagem do icone do pix" />
<p>{(product?.product?.priceRange.sellingPrice.highPrice || 0) * 0.9}</p>
<p>10 % de desconto</p>
</div>

0
react/Example.tsx → react/paymentWithPix.tsx
View File

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

@ -116,10 +116,10 @@
"product-separator",
"product-identifier.product",
"sku-selector",
"product-quantity",
"flex-layout.row#box-buy",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
// "flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator",
"share#default"
@ -183,7 +183,7 @@
"share#default": {
"props": {
"social": {
"Facebook": true,
"Facebook": false,
"WhatsApp": true,
"Twitter": false,
"Pinterest": true
@ -271,6 +271,27 @@
"props": {
"tabId":"description1"
}
},
"flex-layout.row#box-buy" : {
"props":{
"blockClass": "box-buy"
},
"children":[ "product-quantity#1","flex-layout.col#button-2"]
},
// "flex-layout.col#button-1":{
// "children": ["product-quantity#1"]
// },
"flex-layout.col#button-2":{
"children": ["flex-layout.row#buy-button"]
},
"product-quantity#1":{
"props":{
"width":"25%"
}
}
}

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

@ -29,4 +29,8 @@
.flexCol--right-col {
padding-right: 40px;
}
.stretchChildrenWidth {
width: 0;
}

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

@ -0,0 +1,15 @@
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap");
/*font*/
/*colors*/
/* Grid breakpoints */
.quantitySelectorTitle {
display: none;
}

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

@ -73,4 +73,96 @@
.productImagesThumb {
width: 15%;
}
.shippingTableHead {
display: grid;
margin-bottom: 15px;
}
.shippingTableHeadDeliveryName {
display: flex;
}
.shippingTableHeadDeliveryEstimate {
display: flex;
}
.shippingTableHeadDeliveryPrice {
display: flex;
}
.shippingTableRow {
display: grid;
grid-template-columns: 110px 110px 130px;
grid-template-areas: "t p d ";
}
.shippingTableHead {
display: flex;
gap: 60px;
}
.shippingTableRadioBtn {
display: none;
}
.shippingTableCellDeliveryName {
grid-area: t;
padding: 0;
margin-bottom: 15px;
}
.shippingTableCellDeliveryEstimate {
grid-area: d;
padding: 0;
}
.shippingTableCellDeliveryPrice {
grid-area: p;
padding: 0;
}
.shareContainer {
display: none;
}
.shippingContainer :global(.vtex-button) {
width: 49px;
height: 49px;
background-color: black;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
content: "Ok";
color: white;
font-size: 10px;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
content: "CALCULAR FRETE:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer :global(.vtex-input-prefix__group) {
width: 280px;
position: relative;
height: 49px;
border-radius: 0;
}
.shippingContainer :global(.vtex-button) {
position: absolute;
top: 731.1px;
right: 563px;
}

5
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -18,3 +18,8 @@
.flexCol--right-col {
padding-right: 40px;
}
.stretchChildrenWidth {
width:0;
}

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

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

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

@ -14,8 +14,6 @@
margin:0;
}
.label {
font-family: 'Open Sans';
font-style: normal;
@ -63,3 +61,103 @@
.productImagesThumb {
width: 15%;
}
// estilização do frete
//estilização dos topicos
.shippingTableHead {
display: grid;
margin-bottom: 15px;
}
.shippingTableHeadDeliveryName {
display: flex;
}
.shippingTableHeadDeliveryEstimate {
display: flex;
}
.shippingTableHeadDeliveryPrice {
display: flex;
}
//estilização das colunas
.shippingTableRow {
display: grid;
grid-template-columns: 110px 110px 130px;;
grid-template-areas: "t p d ";
}
.shippingTableHead {
display: flex;
gap: 60px ;
}
.shippingTableRadioBtn {
display: none;
}
.shippingTableCellDeliveryName {
grid-area: t;
padding: 0;
margin-bottom: 15px;
}
.shippingTableCellDeliveryEstimate {
grid-area:d;
padding: 0;
}
.shippingTableCellDeliveryPrice {
grid-area: p;
padding: 0;
}
.shareContainer {
display: none;
}
.shippingContainer {
:global(.vtex-button) {
width: 49px;
height: 49px;
background-color: black;
:global(.vtex-button__label ){
font-size: 0;
&::after {
content: "Ok";
color:white;
font-size: 10px;
}
}
}
}
.shippingContainer {
:global(.vtex-input) {
:global(.vtex-input__label ){
font-size: 0;
&::after {
content: "CALCULAR FRETE:";
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
}
}
.shippingContainer {
:global(.vtex-input-prefix__group) {
width: 280px;
position: relative;
height: 49px;
border-radius: 0;
}
}
.shippingContainer {
:global(.vtex-button) {
position: absolute;
top: 731.1px;
right: 563px;
}
}