From 679519c9a643eec1b84c468ec9d4f6998dd93210 Mon Sep 17 00:00:00 2001 From: Nathalia Sardou Date: Sat, 17 Dec 2022 01:31:06 -0300 Subject: [PATCH] em desenvolvimento --- checkout/src/arquivos/js/components/Footer.js | 245 ++++++++---------- .../sass/checkout/_checkout-carrinho.scss | 91 +++++-- .../sass/checkout/_checkout-vazio.scss | 3 - .../src/arquivos/sass/checkout/_checkout.scss | 6 +- .../src/arquivos/sass/utils/_variaveis.scss | 4 + 5 files changed, 189 insertions(+), 160 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 11d461d..bab3f28 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -99,142 +99,127 @@ export default class Footer { }); } } - createPaymentsIcons() { this.payments.innerHTML = ` - `; - } - - createVtexpciIcon() { - this.vtexpci.innerHTML = ` -
- + -
- `; - } - - createDevIcons() { - this.devIncons.innerHTML = ` -
  • - - Powered By -
    - -
    -
    • -
  • - - Developed By -
    - -
    -     +
    • - `; - } - - async fetchApi() { - this.titulo.innerHTML = ` -

    Você também pode gostar:

    - `; - - 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 += `

    ${item.items[i].name}

    `; - } - const li = document.createElement("li"); - li.setAttribute("name", item.itemId); - li.classList.add("slick-list__itemList"); - - li.innerHTML = ` -
    - -
    -
    ${item.productName}
    -
    - ${cores} -
    - VER PRODUTO - `; - ul.appendChild(li); - this.listaPrateleira.classList.add("fetch"); - }); - }) - .then(() => { - this.addCarrossel(); - }); - } +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + + +`; +} +createVtexpciIcon() { + this.vtexpci.innerHTML = ` +
    + +
    + `; +} + +createDevIcons() { + this.devIncons.innerHTML = ` +
  • + + Powered By +
    + +
    +     +
    • + +
  • + + Developed By +
    + +
    +     +
    • + `; +} + +async fetchApi() { + this.titulo.innerHTML = ` +

    Você também pode gostar:

    + `; + + 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 += `

    ${item.items[i].name}

    `; + } + const li = document.createElement("li"); + li.setAttribute("name", item.itemId); + li.classList.add("slick-list__itemList"); + + li.innerHTML = ` +
    + +
    +
    ${item.productName}
    +
    + ${cores} +
    + VER PRODUTO + `; + ul.appendChild(li); + this.listaPrateleira.classList.add("fetch"); + }); + }) + .then(() => { + this.addCarrossel(); + }); +} } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..69b0654 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -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 { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index cd7d2af..b831a01 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -13,9 +13,6 @@ } } - .cart-title{ - display: none; - } &-title { font-size: 24px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index ae63483..1b41379 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -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; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..ab84f5b 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -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;