NathaliaSardou/m3-academy-template-checkout-NathaliaSardou
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

em desenvolvimento

Browse Source
This commit is contained in:
Nathalia Sardou 2022-12-17 01:31:06 -03:00
parent b9457463a6
commit 679519c9a6
5 changed files with 189 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

245
checkout/src/arquivos/js/components/Footer.js
View File

@ -99,142 +99,127 @@ export default class Footer {
});
}
}
createPaymentsIcons() {
this.payments.innerHTML = `
<ul class="payments-icons-wrapper">
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
alt=""
/>
</figure>
</li>
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
alt=""
/>
</figure>
</li>
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
alt=""
/>
</figure>
</li>
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
alt=""
/>
</figure>
</li>
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"
alt=""
/>
</figure>
</li>
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
alt=""
/>
</figure>
</li>
<li>
<figure>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
alt=""
/>
</figure>
</li>
</ul>
`;
}
createVtexpciIcon() {
this.vtexpci.innerHTML = `
<figure class="vtex-icon">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png"
alt=""
/>
</figure>
`;
}
createDevIcons() {
this.devIncons.innerHTML = `
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<figure>
<img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="">
</figure>
</a>
</li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
<figure>
<img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="">
</figure>
</a>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png"
alt=""
/>
</li>
`;
}
async fetchApi() {
this.titulo.innerHTML = `
<h3 class="title_slick">Você também pode gostar:</h3>
`;
fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
)
.then((response) => response.json())
.then((data) => {
const ul = document.createElement("ul");
ul.classList.add("slick-list");
this.listaPrateleira.appendChild(ul);
data.map((item) => {
let cores = "";
for (let i = 0; i < item.items.length; i++) {
cores += `<p>${item.items[i].name}</p>`;
}
const li = document.createElement("li");
li.setAttribute("name", item.itemId);
li.classList.add("slick-list__itemList");
li.innerHTML = `
<figure class="img-container">
<img class="itemImg" src="${item.items[0].images[0].imageUrl}">
</figure>
<figcaption class="itemtName">${item.productName}</figcaption>
<div class="itemSku">
${cores}
</div>
<a class="itemLink" type="button" href="${item.link}">VER PRODUTO</a>
`;
ul.appendChild(li);
this.listaPrateleira.classList.add("fetch");
});
})
.then(() => {
this.addCarrossel();
});
}
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png"
alt=""
/>
</li>
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png"
alt=""
/>
</li>
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png"
alt=""
/>
</li>
<li>
<img class="img-payments"
src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png"
alt=""
/>
</li>
<li>
<img
src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png"
alt=""
/>
</li>
</ul>
</div>
`;
}
createVtexpciIcon() {
this.vtexpci.innerHTML = `
<figure class="vtex-icon">
<img
src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png"
alt=""
/>
</figure>
`;
}
createDevIcons() {
this.devIncons.innerHTML = `
<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<figure>
<img class="vtex-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="">
</figure>
</a>
</li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
<figure>
<img class="m3-icon" src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="">
</figure>
</a>
</li>
`;
}
async fetchApi() {
this.titulo.innerHTML = `
<h3 class="title_slick">Você também pode gostar:</h3>
`;
fetch(
"https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"
)
.then((response) => response.json())
.then((data) => {
const ul = document.createElement("ul");
ul.classList.add("slick-list");
this.listaPrateleira.appendChild(ul);
data.map((item) => {
let cores = "";
for (let i = 0; i < item.items.length; i++) {
cores += `<p>${item.items[i].name}</p>`;
}
const li = document.createElement("li");
li.setAttribute("name", item.itemId);
li.classList.add("slick-list__itemList");
li.innerHTML = `
<figure class="img-container">
<img class="itemImg" src="${item.items[0].images[0].imageUrl}">
</figure>
<figcaption class="itemtName">${item.productName}</figcaption>
<div class="itemSku">
${cores}
</div>
<a class="itemLink" type="button" href="${item.link}">VER PRODUTO</a>
`;
ul.appendChild(li);
this.listaPrateleira.classList.add("fetch");
});
})
.then(() => {
this.addCarrossel();
});
}
}

91
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -111,10 +111,9 @@
}
th {
color: $color-black;
padding: 0 0 16px;
font-style: normal;
font-weight: bold;
font-weight: 400;
font-family: $font-family-secundary;
font-size: 14px;
line-height: 16px;
@ -124,6 +123,7 @@
display: none;
}
}
}
.product-image {
@ -155,9 +155,10 @@
}
a {
color: $color-blue;
font-style: normal;
font-weight: normal;
color: $color-black;
cursor: pointer;
font-family: $font-family-secundary;
font-weight: 400;
font-size: 12px;
line-height: 14px;
transition: ease-in 0.22s all;
@ -178,10 +179,18 @@
}
}
td.shipping-date {
color: $color-gray2;
font-size: 12px;
line-height: 14px;
th.shipping-date {
display: flex;
color: transparent;
&::after{
content: "Frete";
color: $color-black;
font-size: 14px;
font-family: $font-family-secundary;
line-height: 14px;
position: relative;
right: 18px;
}
@include mq(md, max) {
display: none;
@ -215,6 +224,17 @@
}
}
th.product-price{
color: transparent;
&::after{
content: "Unidade";
color: $color-black;
font-size: 14px;
font-family: $font-family-secundary;
line-height: 14px;
}
}
td.quantity {
align-items: center;
border: 1px solid $color-gray3;
@ -253,10 +273,13 @@
.icon-plus-sign,
.icon-minus-sign {
&::before {
color: $color-black;
display: block;
color: $color-white;
display:flex;
font-weight: 500;
padding: 1px 12px;
background-color: $color-blue-2;
border-radius: 50%;
height: 16px;
width: 16px;
}
}
@ -264,13 +287,19 @@
&:before {
content: "-";
font-size: 16px;
align-items: flex-end;
justify-content: center;
cursor: pointer;
}
}
.icon-plus-sign {
&:before {
content: "+";
font-size: 14px;
font-size: 16px;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
@ -301,6 +330,8 @@
font-size: 14px;
line-height: 16px;
color: $color-black;
font-weight: 700;
font-family: $font-family;
}
}
@ -315,7 +346,7 @@
top: 0;
}
.icon::before {
color: $color-gray4;
color: $color-gray6;
font-size: 15px;
@include mq(md, max) {
@ -351,12 +382,14 @@
}
.srp-main-title {
font-family: $font-family;
margin: 32px 0 12px;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
color: $color-gray2;
font-weight: 400;
color: $color-black;
@include mq(md, max) {
margin-top: 0;
@ -371,10 +404,13 @@
}
button.shp-open-options {
background-color: $color-gray5;
font-family: $font-family;
font-weight: 400;
cursor: pointer;
background-color: $color-gray7;
border: none;
border-radius: 5px;
color: $color-gray2;
color: $color-black;
font-size: 16px;
letter-spacing: 0.05em;
line-height: 19px;
@ -396,6 +432,8 @@
.srp-data {
width: 280px;
@include mq(cstm, max) {
width: calc(100vw - 32px);
}
@ -405,9 +443,9 @@
}
.srp-pickup-my-location__button {
background-color: $color-black;
background-color: $color-blue-2;
border: none;
border-radius: 5px;
border-radius: 8px;
color: $color-white;
outline: none;
width: 100%;
@ -444,7 +482,7 @@
}
&__current {
border: 1px solid $color-blue;
border: 1px solid $color-black;
border-radius: 100px;
}
@ -462,6 +500,9 @@
}
.srp-postal-code {
.ship-country{
display: none;
}
.ship-postalCode {
label {
font-family: $font-family;
@ -485,9 +526,10 @@
}
& ~ button {
background-color: $color-black;
background-color: $color-blue-2;
border: none;
border-radius: 5px;
border-radius: 8px;
cursor: pointer;
color: $color-white;
font-size: 12px;
height: 36px;
@ -497,7 +539,8 @@
right: -150px;
top: 36px;
transition: all 0.2s linear;
width: 96px;
width: 100px;
height: 36px;
text-transform: uppercase;
&:hover {

3
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -13,9 +13,6 @@
}
}
.cart-title{
display: none;
}
&-title {
font-size: 24px;

6
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -73,10 +73,10 @@ body {
#cart-title,
#orderform-title {
color: $color-gray2;
color: $color-black;
font-family: $font-family;
font-weight: 500;
font-size: 36px;
font-weight: 700;
font-size: 24px;
line-height: 42px;
margin: 40px 0 30px;
letter-spacing: 0.1em;

4
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -14,8 +14,12 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #8d8d8d;
$color-gray5: #e5e5e5;
$color-gray6: #c4c4c4;
$color-gray7: #ededed;
$color-blue: #4267b2;
$color-blue-2: #00C8FF;;
$color-green: #4caf50;