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

feature/pagina-de-produto #1

Merged
EleonoraOtz merged 21 commits from feature/pagina-de-produto into master 2023-02-03 20:04:20 +00:00
Conversation 0 Commits 21 Files Changed 54 +90 -42
10 changed files with 90 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 50eaf17c02 - Show all commits

8
react/components/Pix/Pix.tsx
View File

@ -1,8 +1,14 @@
import React from "react";
import React, { useEffect } from "react";
import { useProduct } from "vtex.product-context";
import styles from "./style.module.css";
const Pix = () => {
useEffect(() => {
const cepInput = document.querySelector(".vtex-address-form-4-x-input");
cepInput?.setAttribute("placeholder", "Digite seu CEP");
});
const productValue = useProduct();
const priceProduct =

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

@ -163,8 +163,8 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"flex-layout.row#availability",
"sku-selector"
]
},
"flex-layout.row#availability": {

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

@ -8,11 +8,12 @@
/* Media Query M3 */
/* Grid breakpoints */
.container {
padding: 16px 36px;
padding: 14px 36px;
}
@media screen and (min-width: 112.5em) {
@media screen and (min-width: 1920px) and (max-width: 2560px) {
.container {
margin: 0px 356px;
padding: 14px 0;
}
}
.container .link,

11
styles/css/vtex.product-summary.css
View File

@ -59,15 +59,14 @@
content: " por";
}
:global(.vtex-slider-layout-0-x-sliderRightArrow) :global(.vtex-slider-layout-0-x-caretIcon)::after {
display: block;
:global(.vtex-slider-layout-0-x-sliderRightArrow) {
visibility: hidden;
}
:global(.vtex-slider-layout-0-x-sliderRightArrow)::after {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
}
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
}
:global(.vtex-slider-layout-0-x-paginationDotsContainer) :global(.vtex-slider-layout-0-x-paginationDot--shelf) {
color: #000000;
}

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

@ -10,10 +10,12 @@
/* Grid breakpoints */
.container {
padding: 0 40px;
margin: 0;
}
@media screen and (min-width: 112.5em) {
@media screen and (min-width: 1920px) and (max-width: 2560px) {
.container {
margin: 6px 356px;
margin: 6px 360px;
padding: 0;
}
}
@ -27,6 +29,7 @@
.productImageTag--main {
max-height: max-content !important;
max-width: max-content;
}
.carouselGaleryThumbs {
@ -175,6 +178,15 @@
border-radius: 0;
border: 1px solid #cccccc;
}
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
padding: 16.5px 16px;
}
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #AFAFAF;
}
.shippingContainer :global(.vtex-input__label) {
font-size: 0;
}

12
styles/css/vtex.tab-layout.css
View File

@ -9,6 +9,13 @@
/* Grid breakpoints */
:global(.vtex-tab-layout-0-x-container) {
padding: 0 40px;
margin: 0;
}
@media screen and (min-width: 1920px) and (max-width: 2560px) {
:global(.vtex-tab-layout-0-x-container) {
margin: 6px 360px;
padding: 0;
}
}
:global(.vtex-tab-layout-0-x-container) .listContainer--tabList {
border-bottom: 1px solid #bfbfbf;
@ -55,8 +62,13 @@
align-items: flex-start;
padding: 32px 32px 16px;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem .productImagesContainer {
width: 50%;
max-width: 50%;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
width: inherit !important;
max-width: 632px;
display: block;
}
:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-heading) {

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

@ -1,8 +1,9 @@
.container {
padding: 16px 36px;
padding: 14px 36px;
@media screen and (min-width: 112.5em) {
@media screen and (min-width: 1920px) and (max-width: 2560px) {
margin: 0px 356px;
padding: 14px 0;
}
.link,

29
styles/sass/pages/product/vtex.product-summary.scss
View File

@ -1,6 +1,15 @@
// :global(.vtex-slider-layout-0-x-slide--shelf) {
// width: 300px;
// }
// :global(.vtex-slider-layout-0-x-sliderLayoutContainer) {
// margin: 0 40px;
// // margin: 0 auto;
// @media screen and (min-width: 1920px) and (max-width: 2560px) {
// margin: 6px 360px;
// padding: 0;
// }
// }
:global(.vtex-slider-layout-0-x-slideChildrenContainer) {
width: 314px;
@ -63,15 +72,11 @@
}
:global(.vtex-slider-layout-0-x-sliderRightArrow) {
// display: none;
visibility: hidden;
:global(.vtex-slider-layout-0-x-caretIcon) {
// display: none;
&::after {
display: block;
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
}
&::after {
visibility: visible;
content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
}
}
@ -79,8 +84,6 @@
display: none;
}
:global(.vtex-slider-layout-0-x-paginationDotsContainer) {
:global(.vtex-slider-layout-0-x-paginationDot--shelf) {
color: $black;
}
}
// .paginationDot--container {
// color: $black;
// }

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

@ -1,8 +1,10 @@
.container {
padding: 0 40px;
margin: 0;
@media screen and (min-width: 112.5em) {
margin: 6px 356px;
@media screen and (min-width: 1920px) and (max-width: 2560px) {
margin: 6px 360px;
padding: 0;
}
}
@ -16,6 +18,7 @@
.productImageTag--main {
max-height: max-content !important;
max-width: max-content;
// max-width: 664px;
}
@ -191,6 +194,17 @@
height: 49px;
border-radius: 0;
border: 1px solid $gray-1000;
:global(.vtex-address-form-4-x-input) {
padding: 16.5px 16px;
&::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: $gray-400;
}
}
}
:global(.vtex-input__label) {

24
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -1,5 +1,11 @@
:global(.vtex-tab-layout-0-x-container) {
padding: 0 40px;
margin: 0;
@media screen and (min-width: 1920px) and (max-width: 2560px) {
margin: 6px 360px;
padding: 0;
}
.listContainer--tabList {
border-bottom: 1px solid $gray-100;
@ -63,8 +69,14 @@
// max-width: 100%;
// }
.productImagesContainer {
width: 50%;
max-width: 50%;
}
:global(.vtex-store-components-3-x-productImageTag) {
width: inherit !important;
max-width: 632px;
display: block;
// max-width: 872px;
}
@ -86,16 +98,4 @@
}
}
}
// .contentItem {
// display: flex;
// flex-direction: row;
// .productImageTag {
// width: 50%;
// }
// }
// .carouselGaleryThumbs {
// display: none;
// }
}