From 67c3ed3c7f769a5844dd6c58e17d06239237ec8f Mon Sep 17 00:00:00 2001 From: Tamires-Escobar Date: Tue, 6 Feb 2024 18:17:39 -0300 Subject: [PATCH 1/3] =?UTF-8?q?develop:=20cria=C3=A7=C3=A3o=20ambiente=20d?= =?UTF-8?q?evelop,=20feature=20shelfCustom=20e=20readme=20atualizado?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.MD | 23 +++ manifest.json | 14 +- react/ShelfCustom.jsx | 2 + react/components/ShelfCustom/ShelfCustom.jsx | 183 ++++++++++++++++++ react/components/readme.md | 34 ++++ react/graphql/query/getProduct.gql | 22 +++ react/package.json | 6 + .../styles/components/ShelfCustom/styles.css | 156 +++++++++++++++ react/styles/readme.md | 5 + react/yarn.lock | 4 + store/blocks/home/deals.json | 2 +- store/blocks/home/home.jsonc | 41 ++-- store/interfaces.json | 5 + 13 files changed, 477 insertions(+), 20 deletions(-) create mode 100644 README.MD create mode 100644 react/ShelfCustom.jsx create mode 100644 react/components/ShelfCustom/ShelfCustom.jsx create mode 100644 react/components/readme.md create mode 100644 react/graphql/query/getProduct.gql create mode 100644 react/package.json create mode 100644 react/styles/components/ShelfCustom/styles.css create mode 100644 react/styles/readme.md create mode 100644 react/yarn.lock create mode 100644 store/interfaces.json diff --git a/README.MD b/README.MD new file mode 100644 index 00000000..5cb3088f --- /dev/null +++ b/README.MD @@ -0,0 +1,23 @@ +### STORE-THEME CORELABIZ ### + +- todas as features custom, estão atreladas a branch develop. +Todas as branchs devem ser criadas partindo da develop. +As demais branchs devem ser atualizadas com a develop. + +***- Testar atualizações.*** +Em caso de teste em todas as ramificações, testar na banch develop. +Usar ws: https://updateDevelop--corelabiz.myvtex.com + +***- Vendor and name:*** +Foi gerado novas configurações para o uso. +o vendor permanece vinculado a corebizlab. + +name: tratado com store-tami e version 0.0.0 + +*** O uso da ws update reflete no teste, devido a mudança do name.*** +Sempre que usar uma nova ws, será necessário consigurar as páginas +no /admin para corelabiz.store-tami@0.x:store.custom#nome-da-pagina + +Se existir alguma página com erro de carregamento, verificar no admin a configuração +da pagina que deseja testar. +ex: corelabiz.store-tami@0.x:store.custom#nome-da-pagina. \ No newline at end of file diff --git a/manifest.json b/manifest.json index ff01a151..60b337ec 100644 --- a/manifest.json +++ b/manifest.json @@ -1,12 +1,13 @@ { - "vendor": "vtex", - "name": "store-theme", - "version": "5.1.0", + "vendor": "corelabiz", + "name": "store-tamii", + "version": "0.0.0", "builders": { "styles": "2.x", "store": "0.x", "sitemap": "0.x", - "docs": "0.x" + "docs": "0.x", + "react": "3.x" }, "mustUpdateAt": "2018-09-05", "scripts": { @@ -62,7 +63,10 @@ "vtex.product-specifications": "1.x", "vtex.tab-layout": "0.x", "vtex.condition-layout": "2.x", - "vtex.css-handles": "1.x" + "vtex.css-handles": "1.x", + "vtex.search-graphql": "0.x", + "vtex.format-currency": "0.x", + "vtex.device-detector": "0.x" }, "peerDependencies": { "vtex.reviews-and-ratings": "3.x" diff --git a/react/ShelfCustom.jsx b/react/ShelfCustom.jsx new file mode 100644 index 00000000..49ae2cdd --- /dev/null +++ b/react/ShelfCustom.jsx @@ -0,0 +1,2 @@ +import ShelfCustom from "./components/ShelfCustom/ShelfCustom"; +export default ShelfCustom \ No newline at end of file diff --git a/react/components/ShelfCustom/ShelfCustom.jsx b/react/components/ShelfCustom/ShelfCustom.jsx new file mode 100644 index 00000000..60bb3418 --- /dev/null +++ b/react/components/ShelfCustom/ShelfCustom.jsx @@ -0,0 +1,183 @@ +// import ProductsDetails from "./products/index"; +import React, { useEffect, useState } from "react"; +import getProducts from "../../graphql/query/getProduct.gql"; +import { useApolloClient } from "react-apollo"; +import SliderLayout from "vtex.slider-layout/SliderLayout"; +import { FormattedCurrency } from "vtex.format-currency"; +import { useDevice } from "vtex.device-detector"; + +import styles from "../../styles/components/ShelfCustom/styles.css"; + +const ShelfCustom = ({ items }) => { + const [colectSchemaInfos, setColectSchemaInfos] = useState(items); + const client = useApolloClient(); + const [productId, setProductId] = useState(""); + console.log("🚀 ~ ShelfCustom ~ productId:", productId); + + const { device } = useDevice(); + console.log("🚀 ~ ShelfCustom ~ device:", device); + + useEffect(() => { + setColectSchemaInfos(items); + }, [items]); + + useEffect(() => { + const colection_id_schema = colectSchemaInfos.collectionId; + const category_id_schema = colectSchemaInfos.categoryId; + + if ( + (colection_id_schema && category_id_schema) || + productId.length >= 6 || + (colection_id_schema && !category_id_schema) || + productId.length >= 6 + ) { + client + .query({ + query: getProducts, + variables: { collection: colection_id_schema }, + }) + .then(({ data }) => { + const products = data?.products; + setProductId(products); + }); + } else if ( + (category_id_schema && !colection_id_schema) || + productId.length >= 6 + ) { + client + .query({ + query: getProducts, + variables: { category: category_id_schema }, + }) + .then(({ data }) => { + const products = data?.products; + setProductId(products); + }); + } + if (colection_id_schema === "" && category_id_schema === "") { + client + .query({ + query: getProducts, + variables: { collection: "141" }, + }) + .then(({ data }) => { + const products = data?.products; + console.log("🚀 ~ .then ~ products:", products); + setProductId(products); + }); + } + }, [items]); + + return ( + <> +
+ + {productId && + productId.map((item) => ( +
  • +
    + +
    + +
    +     + + +
    +
    {item.items[0].name}
    +
    +     + +
    +
    + De: +
    + +
    +
    + +
    + Por: +
    + +
    + EconomizeR4 xx,xx +
    +
    + +
    + +
    +
    +
    • + ))} +     +
    + + ); +}; + +ShelfCustom.schema = { + title: "Shelf Custom", + type: "object", + properties: { + items: { + properties: { + title: { + title: "Titulo para Vitrine", + type: "string", + default: "", + }, + sobTitle: { + title: "Sob Title", + type: "string", + default: "", + }, + // selectOptionByshel: { + // title: "Select shelf option", + // type: "string", + // enum: ["opt1", "opt2"], // Define os valores + // enumNames: ["Category option", "Collection Option "], // Define os textos + // widget: { + // "ui:widget": "radio", + // }, + // }, + + categoryId: { + title: "CategoryId", + type: "string", + description: "inserir Id da categoria", + default: "", + }, + collectionId: { + title: "CollectionId", + type: "string", + description: "inserir Id da coleção", + default: "", + }, + }, + }, + }, +}; + +export default ShelfCustom; diff --git a/react/components/readme.md b/react/components/readme.md new file mode 100644 index 00000000..a91c5be5 --- /dev/null +++ b/react/components/readme.md @@ -0,0 +1,34 @@ +*** COMPONENTES CUSTOM *** + +- todas as features custom, estão atreladas a branch develop. +Todas as branchs devem ser criadas partindo da develop. +As demais branchs devem ser atualizadas com a develop. + +***- Testar atualizações.*** +Em caso de teste em todas as ramificações, testar na banch develop. +Usar ws: https://updateDevelop--corelabiz.myvtex.com + +***- Vendor and name:*** +Foi gerado novas configurações para o uso. +o vendor permanece vinculado a corebizlab. + +name: tratado com store-tami e version 0.0.0 + +*** O uso da ws update reflete no teste, devido a mudança do name.*** +Sempre que usar uma nova ws, será necessário consigurar as páginas +no /admin para corelabiz.store-tami@0.x:store.custom#nome-da-pagina + +Se existir alguma página com erro de carregamento, verificar no admin a configuração +da pagina que deseja testar. +ex: corelabiz.store-tami@0.x:store.custom#nome-da-pagina. + + *** COMPONENTS### + +*** ShelfCustom *** +***-componente responsável por renderizar a vitrine custom, localizada acima do footer -*** +** Recursos utilizados para desenvlvimento do componente** +graphql - query +useApolloClient - client react +SliderLayout - slider vtex"; +FormattedCurrency - format vtex; +useDevice - detector responsive vtex \ No newline at end of file diff --git a/react/graphql/query/getProduct.gql b/react/graphql/query/getProduct.gql new file mode 100644 index 00000000..6e09596a --- /dev/null +++ b/react/graphql/query/getProduct.gql @@ -0,0 +1,22 @@ +query getProduct($collection: String, $category: String) { + products(collection: $collection, category: $category) { + productId, + categoryId, + link + items { + name + itemId + images { + imageUrl + } + } + priceRange { + sellingPrice { + highPrice + } + listPrice { + highPrice + } + } + } +} diff --git a/react/package.json b/react/package.json new file mode 100644 index 00000000..bea1afd1 --- /dev/null +++ b/react/package.json @@ -0,0 +1,6 @@ +{ + "name": "react", + "version": "1.0.0", + "main": "index.js", + "license": "MIT" +} diff --git a/react/styles/components/ShelfCustom/styles.css b/react/styles/components/ShelfCustom/styles.css new file mode 100644 index 00000000..8955cc5b --- /dev/null +++ b/react/styles/components/ShelfCustom/styles.css @@ -0,0 +1,156 @@ + + +.slyder_custom_contain{ + display: flex; + padding: 0 50px; + margin: 20px 0; +} +.list_shelf{ + box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.432); + border-radius: 8px; + list-style: none; + display: flex; + max-width: 300px; + max-height: 500px; + + + position: relative; + background: #fff; + height: 500px; +} +.slider_custom_content{ + padding: 0 2px; +} +.image_contain{ + content: 'contain'; + aspect-ratio: 1/1; + display: flex; + justify-content: center; + align-items: center; + max-height: 300px; + height: 100%; + width: 300px; + padding: 15px; + +} +@media(max-width:450px){ + .image_contain{ + width: 195px !important; + } +} +.url_product{ + text-decoration: none; +} +.image__product{ + height: 100%; + width: 100%; +} +.info_card_content{ + padding: 0 5px; + font-weight: 600; + font-size: 18px; + color: #2E2E2E; + font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; + text-transform: none; + letter-spacing: 0; + height: 60px; +} +.info_card_content div{ + -webkit-line-clamp: 2; + text-align: center; +} +.infos_card_prices{ + display: block; + justify-content: center; + height: 90px; + max-height: 90px; + text-align: end; + padding: 5px; + letter-spacing: 1px; +} +@media(max-width: 450px){ + .infos_card_prices{ + text-align: start; + } +} +.contentPrices{ + display: flex; + font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; + align-items: flex-end; + font-size: 16px; + font-weight: 600; + color: #2E2E2E; + gap: 5px; +} +@media(max-width: 450px){ + .contentPrices{ + display: block; + } +} +.contentPricesList{ + font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; + font-size: 15px; + display: flex; + color: #727273; +} +.listPrice{ + text-decoration: line-through; +} +.contentBadgePrice{ + background-color: #8BC34A; + color: #FFFF; + border-radius: 10px; + align-items: center; + display: flex; + padding-left: 2px; + padding-right: 2px; + font-size: 13px; + font-weight: 600; + vertical-align: baseline; + height: 24px; + +} +.buttonAddtoCart{ + display: flex; + justify-content: center; + /* top: 5%; */ + padding: 0 5px; + position: relative; +} +.buttonAddtoCart button{ + background-color: #0F3E99; + color: #fff; + font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; + text-transform: uppercase; + letter-spacing: 0; + min-height: 2.5rem; + box-sizing: border-box; + width: 100%; + border-radius: 8px; + border: solid; + + +} +.buttonAddtoCart button:hover{ + background-color: #052b75; + cursor: pointer; +} + + +/* Ajustes SliderLayout */ +:global(.corelabiz-store-tamii-0-x-sliderTrack){ + display: flex; + gap: 10px; +} +:global(.corelabiz-store-tamii-0-x-sliderRightArrow){ + margin: 0 -40px; +} +:global(.corelabiz-store-tamii-0-x-sliderLeftArrow){ + margin: 0 -40px; +} +:global(.corelabiz-store-tamii-0-x-paginationDotsContainer){ + margin: -15px 0 !important; +} +:global(.corelabiz-store-tamii-0-x-paginationDot--isActive){ + background-color: #0F3E99; +} \ No newline at end of file diff --git a/react/styles/readme.md b/react/styles/readme.md new file mode 100644 index 00000000..fee85d71 --- /dev/null +++ b/react/styles/readme.md @@ -0,0 +1,5 @@ +#### Css COMPONENTS CUSTOM #### + +*** shelf custom *** +**** estilização do componente da vitrine, localizada acima do footer **** + diff --git a/react/yarn.lock b/react/yarn.lock new file mode 100644 index 00000000..fb57ccd1 --- /dev/null +++ b/react/yarn.lock @@ -0,0 +1,4 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + diff --git a/store/blocks/home/deals.json b/store/blocks/home/deals.json index 2473f98c..e655ead3 100644 --- a/store/blocks/home/deals.json +++ b/store/blocks/home/deals.json @@ -61,7 +61,7 @@ }, "rich-text#deal3": { "props": { - "text": "Pick up in store", + "text": "Pick up in store tami", "blockClass": "deals" } }, diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index 2b6e202a..fdd3f644 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -4,19 +4,22 @@ "list-context.image-list#demo", /* You can make references to blocks defined in other files. * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ - "flex-layout.row#deals", - "__fold__", - "rich-text#shelf-title", - "flex-layout.row#shelf", - "info-card#home", + "flex-layout.row#deals", + "__fold__", + "rich-text#shelf-title", + "flex-layout.row#shelf", + "info-card#home", + "flex-layout.row#shelfCustom", "rich-text#question", "rich-text#link", "newsletter" ] }, - + "list-context.image-list#demo": { - "children": ["slider-layout#demo-images"], + "children": [ + "slider-layout#demo-images" + ], "props": { "height": 570, "preload": true, @@ -44,7 +47,6 @@ "blockClass": "carousel" } }, - "rich-text#shelf-title": { "props": { "text": "## Summer", @@ -52,11 +54,17 @@ } }, "flex-layout.row#shelf": { - "children": ["list-context.product-list#demo1"] + "children": [ + "list-context.product-list#demo1" + ] }, "list-context.product-list#demo1": { - "blocks": ["product-summary.shelf"], - "children": ["slider-layout#demo-products"], + "blocks": [ + "product-summary.shelf" + ], + "children": [ + "slider-layout#demo-products" + ], "props": { "orderBy": "OrderByTopSaleDESC" } @@ -73,7 +81,6 @@ "blockClass": "shelf" } }, - "info-card#home": { "props": { "id": "info-card-home", @@ -88,17 +95,23 @@ } }, + // shelf custom + "flex-layout.row#shelfCustom": { + "children": [ + "shelf-custom" + ], + "title": "Shelf custom" + }, "rich-text#question": { "props": { "text": "**This is an example store built using the VTEX platform.\nWant to know more?**", "blockClass": "question" } }, - "rich-text#link": { "props": { "text": "\n**Reach us at**\nwww.vtex.com.br", "blockClass": "link" } } -} +} \ No newline at end of file diff --git a/store/interfaces.json b/store/interfaces.json new file mode 100644 index 00000000..48e50ab3 --- /dev/null +++ b/store/interfaces.json @@ -0,0 +1,5 @@ +{ + "shelf-custom": { + "component": "ShelfCustom" + } +} \ No newline at end of file From e58341b355a6d6cf71a82946bc501a94f31fe073 Mon Sep 17 00:00:00 2001 From: Tamires-Escobar Date: Wed, 14 Feb 2024 11:11:09 -0300 Subject: [PATCH 2/3] =?UTF-8?q?feature/buttonAddtoCart:=20inicio=20impleme?= =?UTF-8?q?nta=C3=A7=C3=A3o=20do=20btn=20add=20no=20carrinho=20com=20quant?= =?UTF-8?q?ity=20stepper.=20n=C3=A3o=20finalizado?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.MD | 5 +- manifest.json | 4 +- react/ButtonAddtoCart.jsx | 2 + react/components/ButtonAddtoCart/index.jsx | 123 ++++++++++++++++ react/components/ShelfCustom/ShelfCustom.jsx | 139 ++++++++++++------ react/components/readme.md | 6 +- react/graphql/mutation/mutationAddItem.gql | 8 + react/graphql/query/getProduct.gql | 11 ++ .../components/ButtonAddtoCart/styles.css | 39 +++++ .../styles/components/ShelfCustom/styles.css | 43 +++--- store/blocks/home/home.jsonc | 7 +- .../product-summary/product-summary.jsonc | 7 + store/interfaces.json | 3 + styles/css/search/vtex.product-summary.css | 1 + 14 files changed, 326 insertions(+), 72 deletions(-) create mode 100644 react/ButtonAddtoCart.jsx create mode 100644 react/components/ButtonAddtoCart/index.jsx create mode 100644 react/graphql/mutation/mutationAddItem.gql create mode 100644 react/styles/components/ButtonAddtoCart/styles.css diff --git a/README.MD b/README.MD index 5cb3088f..13f4916f 100644 --- a/README.MD +++ b/README.MD @@ -20,4 +20,7 @@ no /admin para corelabiz.store-tami@0.x:store.custom#nome-da-pagina Se existir alguma página com erro de carregamento, verificar no admin a configuração da pagina que deseja testar. -ex: corelabiz.store-tami@0.x:store.custom#nome-da-pagina. \ No newline at end of file +ex: corelabiz.store-tami@0.x:store.custom#nome-da-pagina. + +*** VTEX LINK *** +Para testar loja atualizada, rodar vtex link na ws: https://updateDevelop--corelabiz.myvtex.com \ No newline at end of file diff --git a/manifest.json b/manifest.json index 60b337ec..8e0268d1 100644 --- a/manifest.json +++ b/manifest.json @@ -66,7 +66,9 @@ "vtex.css-handles": "1.x", "vtex.search-graphql": "0.x", "vtex.format-currency": "0.x", - "vtex.device-detector": "0.x" + "vtex.device-detector": "0.x", + "vtex.product-context": "0.x", + "vtex.order-manager": "0.x" }, "peerDependencies": { "vtex.reviews-and-ratings": "3.x" diff --git a/react/ButtonAddtoCart.jsx b/react/ButtonAddtoCart.jsx new file mode 100644 index 00000000..2690631c --- /dev/null +++ b/react/ButtonAddtoCart.jsx @@ -0,0 +1,2 @@ +import ButtonAddtoCart from "./components/ButtonAddtoCart"; +export default ButtonAddtoCart \ No newline at end of file diff --git a/react/components/ButtonAddtoCart/index.jsx b/react/components/ButtonAddtoCart/index.jsx new file mode 100644 index 00000000..ce7bcc64 --- /dev/null +++ b/react/components/ButtonAddtoCart/index.jsx @@ -0,0 +1,123 @@ +import React, { useEffect, useState } from "react"; + +import { Button } from "vtex.styleguide"; +import { NumericStepper } from "vtex.styleguide"; +// import { useOrderForm } from 'vtex.order-manager/OrderForm'; +// import {useApolloClient} from "react-apollo"; +// import addItem from '../../graphql/mutation/mutationAddItem.gql' +import styles from "../../styles/components/ButtonAddtoCart/styles.css"; + +const ButtonAddtoCart = ({ valor }) => { + const [addItem, setAddItem] = useState({ isLoading2: false }); + const [numericStepper, setNumericStepper] = useState({ + quantityNumericStepper: 1, + }); + + const [showNumeriStepper, setShowNumericStepper] = useState(false); + const [showButton, setShowButton] = useState(true); + const [label, setLabel] = useState({ labelText: `Item` }); + + const [productDetailsItem, setProductDetailsItem] = useState({}); + const selectedItemQuantity = numericStepper.quantityNumericStepper; + + + + + useEffect(() => { + if (showNumeriStepper === true) { + setAddItem({ isLoading2: false }); + setShowButton(false); + } + }, [showNumeriStepper]); + + // controle de exibição do btn add + useEffect(() => { + if (numericStepper.quantityNumericStepper === 0) { + setShowButton(true); + setShowNumericStepper(false); + setNumericStepper({ quantityNumericStepper: 1 }); + } + }, [numericStepper.quantityNumericStepper]); + + // modifica texto do label ao add quantidade de item > 1 + useEffect(() => { + const itemsText = "Items"; + if (numericStepper.quantityNumericStepper > 1) { + setLabel({ labelText: `${itemsText}` }); + } else if (numericStepper.quantityNumericStepper <= 0) { + setLabel({ labelText: `Item` }); + } + }, [numericStepper.quantityNumericStepper]); + + // ************** add item ****** + const updateItem = { + productDetailsItem + + }; + + // const { orderForm } = useOrderForm() + // const client = useApolloClient(); + +// const add = () => { +// const orderFormId = orderForm.id + +// client +// .mutate({ +// mutation: addItem, +// variables: {orderFormId: orderFormId , items:[{ +// "id": 194, +// "quantity": 6, +// "seller": 1 +// }]} +// }) +// .then(() => { +// console.log('***aaaa*****'); + +// }) +// .catch((error) => console.log(error)) +// } + + + return ( + <> +
    + +
    + {showButton && ( +
    + +
    + )} +
    +
    + {showNumeriStepper && ( +
    +
    + + setNumericStepper({ quantityNumericStepper: event.value }) + } + /> +
    +
    + )} + + ); +}; +export default ButtonAddtoCart; diff --git a/react/components/ShelfCustom/ShelfCustom.jsx b/react/components/ShelfCustom/ShelfCustom.jsx index 60bb3418..94a93d8c 100644 --- a/react/components/ShelfCustom/ShelfCustom.jsx +++ b/react/components/ShelfCustom/ShelfCustom.jsx @@ -5,72 +5,85 @@ import { useApolloClient } from "react-apollo"; import SliderLayout from "vtex.slider-layout/SliderLayout"; import { FormattedCurrency } from "vtex.format-currency"; import { useDevice } from "vtex.device-detector"; +import { Button } from "vtex.styleguide"; + +import ButoonAddToCart from "../ButtonAddtoCart/index"; import styles from "../../styles/components/ShelfCustom/styles.css"; + const ShelfCustom = ({ items }) => { const [colectSchemaInfos, setColectSchemaInfos] = useState(items); const client = useApolloClient(); const [productId, setProductId] = useState(""); - console.log("🚀 ~ ShelfCustom ~ productId:", productId); const { device } = useDevice(); - console.log("🚀 ~ ShelfCustom ~ device:", device); useEffect(() => { setColectSchemaInfos(items); }, [items]); useEffect(() => { - const colection_id_schema = colectSchemaInfos.collectionId; - const category_id_schema = colectSchemaInfos.categoryId; + const colection_id_schema = colectSchemaInfos?.collectionId; + const category_id_schema = colectSchemaInfos?.categoryId; if ( (colection_id_schema && category_id_schema) || - productId.length >= 6 || - (colection_id_schema && !category_id_schema) || - productId.length >= 6 + (colection_id_schema && !category_id_schema) ) { client .query({ query: getProducts, variables: { collection: colection_id_schema }, }) - .then(({ data }) => { - const products = data?.products; + .then(async({ data }) => { + const products = await data?.products; setProductId(products); }); - } else if ( - (category_id_schema && !colection_id_schema) || - productId.length >= 6 - ) { + } else if (category_id_schema && !colection_id_schema) { client .query({ query: getProducts, variables: { category: category_id_schema }, }) - .then(({ data }) => { - const products = data?.products; + .then(async ({ data }) => { + const products = await data?.products; setProductId(products); }); } - if (colection_id_schema === "" && category_id_schema === "") { + if ( + items.collectionId === undefined || + items.collectionId === "" || + (!items.collectionId && items.categoryId === undefined || items.categoryId === '' || !items.categoryId) + ) { client .query({ query: getProducts, variables: { collection: "141" }, }) - .then(({ data }) => { - const products = data?.products; - console.log("🚀 ~ .then ~ products:", products); + .then(async ({ data }) => { + const products = await data?.products; setProductId(products); }); } }, [items]); + return ( <>
    + {items !== undefined ? ( +
    {items.title}
    + ) : ( + "" + )} + + {items !== undefined ? ( +
    {items.sobTitle}
    + ) : ( + "" + )} + { > {productId && productId.map((item) => ( -
  • +
  • @@ -104,29 +127,61 @@ const ShelfCustom = ({ items }) => {
    -
    -
    - De: -
    - + {/* start of displaying prices on products with stock */} + {item.items[0]?.sellers[0]?.commertialOffer + ?.AvailableQuantity > 0 && ( +
    +
    + De: +
    + +
    -
    -
    - Por: -
    - +
    + Por: +
    + +
    + + EconomizeR4 xx,xx +
    - EconomizeR4 xx,xx
    -
    + )} + {/* end of displaying prices on products with stock */} + {/* start available and unavailable button contro*/}
    - + {item.items[0]?.sellers[0]?.commertialOffer + .AvailableQuantity > 0 ? ( + + ) : ( + + )} + {/* end available and unavailable button contro */}
    • @@ -153,16 +208,6 @@ ShelfCustom.schema = { type: "string", default: "", }, - // selectOptionByshel: { - // title: "Select shelf option", - // type: "string", - // enum: ["opt1", "opt2"], // Define os valores - // enumNames: ["Category option", "Collection Option "], // Define os textos - // widget: { - // "ui:widget": "radio", - // }, - // }, - categoryId: { title: "CategoryId", type: "string", diff --git a/react/components/readme.md b/react/components/readme.md index a91c5be5..400432e7 100644 --- a/react/components/readme.md +++ b/react/components/readme.md @@ -31,4 +31,8 @@ graphql - query useApolloClient - client react SliderLayout - slider vtex"; FormattedCurrency - format vtex; -useDevice - detector responsive vtex \ No newline at end of file +useDevice - detector responsive vtex + +*** ButtonAddtoCart *** +***- componente responsável por add item ao carrinho, em vitrine custom -*** +** Falta tratar as mutations e update no carrinho ** \ No newline at end of file diff --git a/react/graphql/mutation/mutationAddItem.gql b/react/graphql/mutation/mutationAddItem.gql new file mode 100644 index 00000000..51ddecb2 --- /dev/null +++ b/react/graphql/mutation/mutationAddItem.gql @@ -0,0 +1,8 @@ +mutation addItem($orderFormId: ID!, $items: [ItemInput]) { + addToCart(orderFormId: $orderFormId, items: $items) { + items { + skuName + productId + } + } +} diff --git a/react/graphql/query/getProduct.gql b/react/graphql/query/getProduct.gql index 6e09596a..3f68bffe 100644 --- a/react/graphql/query/getProduct.gql +++ b/react/graphql/query/getProduct.gql @@ -6,9 +6,20 @@ query getProduct($collection: String, $category: String) { items { name itemId + ean images { imageUrl } + sellers { + sellerId + addToCartLink + sellerDefault + commertialOffer { + AvailableQuantity + Price + ListPrice + } + } } priceRange { sellingPrice { diff --git a/react/styles/components/ButtonAddtoCart/styles.css b/react/styles/components/ButtonAddtoCart/styles.css new file mode 100644 index 00000000..306b1121 --- /dev/null +++ b/react/styles/components/ButtonAddtoCart/styles.css @@ -0,0 +1,39 @@ +.content_btnAddToCart_custom Button{ + background-color: #0F3E99; + color: #fff; + font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; + text-transform: uppercase; + letter-spacing: 0; + min-height: 2.5rem; + box-sizing: border-box; + width: 100%; + border-radius: 50px; + border: solid; + +} + +:global(.vtex-numeric-stepper__plus-button), +:global(.vtex-numeric-stepper__minus-button){ + background-color: #0F3E99; + color: #fff; + font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; + text-transform: uppercase; + letter-spacing: 0; + min-height: 2.5rem; + box-sizing: border-box; + width: 100%; + border-radius: 50px !important; + border: solid; +} +:global(.vtex-numeric-stepper-container){ + display: flex; + align-items: center; +} +:global(.vtex-numeric-stepper__input){ + color: #0F3E99; + font-weight: 600; +} +:global(.vtex-numeric-stepper__label){ + font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; + color: #0F3E99; +} diff --git a/react/styles/components/ShelfCustom/styles.css b/react/styles/components/ShelfCustom/styles.css index 8955cc5b..f8869444 100644 --- a/react/styles/components/ShelfCustom/styles.css +++ b/react/styles/components/ShelfCustom/styles.css @@ -1,10 +1,27 @@ .slyder_custom_contain{ - display: flex; padding: 0 50px; margin: 20px 0; } +.title__shelf_custom{ + display: flex; + justify-content: center; + font-size: 50px; + font-weight: 500; + color: #0F3E99; + font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; + +} +.sobtitle__shelf_custom{ + display: flex; + justify-content: center; + font-size: 35px; + font-weight: 500; + color: #727273; + font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; + +} .list_shelf{ box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.432); border-radius: 8px; @@ -113,29 +130,17 @@ .buttonAddtoCart{ display: flex; justify-content: center; - /* top: 5%; */ + top: -3%; padding: 0 5px; position: relative; } -.buttonAddtoCart button{ - background-color: #0F3E99; - color: #fff; - font-family: San Francisco,-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; - text-transform: uppercase; - letter-spacing: 0; - min-height: 2.5rem; - box-sizing: border-box; - width: 100%; - border-radius: 8px; - border: solid; - +:global(.vtex-button:disabled){ + color: #0F3E99; + border: 1px solid #0F3E99; + border-radius: 50px; + top: 100px; } -.buttonAddtoCart button:hover{ - background-color: #052b75; - cursor: pointer; -} - /* Ajustes SliderLayout */ :global(.corelabiz-store-tamii-0-x-sliderTrack){ diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index fdd3f644..a4245eb6 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -9,7 +9,7 @@ "rich-text#shelf-title", "flex-layout.row#shelf", "info-card#home", - "flex-layout.row#shelfCustom", + "flex-layout.row#shelfCustom-one", "rich-text#question", "rich-text#link", "newsletter" @@ -96,12 +96,13 @@ }, // shelf custom - "flex-layout.row#shelfCustom": { + "flex-layout.row#shelfCustom-one": { "children": [ "shelf-custom" ], - "title": "Shelf custom" + "title": "Shelf custom one" }, + "rich-text#question": { "props": { "text": "**This is an example store built using the VTEX platform.\nWant to know more?**", diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee36..432abcd7 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -9,8 +9,15 @@ "flex-layout.row#selling-price-savings", "product-installments#summary", "add-to-cart-button" + + // "flex-layout.row#buttom-custom" ] }, + + // "flex-layout.row#buttom-custom":{ + // "children":["button-add-to-cart-custom"] + + // }, "flex-layout.col#productRating": { "props": { "blockClass": "productRating" diff --git a/store/interfaces.json b/store/interfaces.json index 48e50ab3..cfff6410 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -1,5 +1,8 @@ { "shelf-custom": { "component": "ShelfCustom" + }, + "button-add-to-cart-custom":{ + "component": "ButtonAddtoCart" } } \ No newline at end of file diff --git a/styles/css/search/vtex.product-summary.css b/styles/css/search/vtex.product-summary.css index f160ecaa..a2ba9c69 100644 --- a/styles/css/search/vtex.product-summary.css +++ b/styles/css/search/vtex.product-summary.css @@ -29,3 +29,4 @@ min-width: 140px; height: inherit !important; } + From 1a7714d56703bef934bfc9e85652fbd3e8ccbf27 Mon Sep 17 00:00:00 2001 From: Tamires-Escobar Date: Thu, 15 Feb 2024 15:12:10 -0300 Subject: [PATCH 3/3] feature/buttonAddToCart: add item to cart, remove item to cart, new minicart --- manifest.json | 7 +- react/components/ButtonAddtoCart/index.jsx | 83 ++++---- react/components/ShelfCustom/ShelfCustom.jsx | 10 +- react/graphql/mutation/mutationAddItem.gql | 2 +- react/graphql/query/getProduct.gql | 16 +- store/blocks/home/home.jsonc | 3 +- store/blocks/minicart.jsonc | 191 ++++++++++++++++++- styles/css/_variables/_colors.scss | 18 ++ styles/css/vtex.checkout-summary.css | 12 ++ styles/css/vtex.flex-layout.css | 19 ++ styles/css/vtex.minicart.css | 73 +++++++ styles/css/vtex.product-list.css | 87 +++++++++ styles/css/vtex.store-icons.css | 8 + 13 files changed, 475 insertions(+), 54 deletions(-) create mode 100644 styles/css/_variables/_colors.scss create mode 100644 styles/css/vtex.checkout-summary.css create mode 100644 styles/css/vtex.minicart.css create mode 100644 styles/css/vtex.product-list.css diff --git a/manifest.json b/manifest.json index 8e0268d1..11b23a3d 100644 --- a/manifest.json +++ b/manifest.json @@ -45,6 +45,10 @@ "vtex.telemarketing": "2.x", "vtex.order-placed": "2.x", "vtex.checkout-summary": "0.x", + "vtex.checkout": "1.x", + "vtex.checkout-graphql": "0.x", + "vtex.checkout-cart": "0.x", + "vtex.checkout-resources": "0.x", "vtex.product-list": "0.x", "vtex.add-to-cart-button": "0.x", "vtex.product-bookmark-interfaces": "1.x", @@ -68,7 +72,8 @@ "vtex.format-currency": "0.x", "vtex.device-detector": "0.x", "vtex.product-context": "0.x", - "vtex.order-manager": "0.x" + "vtex.order-manager": "0.x", + "vtex.order-items": "0.x" }, "peerDependencies": { "vtex.reviews-and-ratings": "3.x" diff --git a/react/components/ButtonAddtoCart/index.jsx b/react/components/ButtonAddtoCart/index.jsx index ce7bcc64..e2f4a847 100644 --- a/react/components/ButtonAddtoCart/index.jsx +++ b/react/components/ButtonAddtoCart/index.jsx @@ -2,11 +2,10 @@ import React, { useEffect, useState } from "react"; import { Button } from "vtex.styleguide"; import { NumericStepper } from "vtex.styleguide"; -// import { useOrderForm } from 'vtex.order-manager/OrderForm'; -// import {useApolloClient} from "react-apollo"; -// import addItem from '../../graphql/mutation/mutationAddItem.gql' import styles from "../../styles/components/ButtonAddtoCart/styles.css"; +import { useOrderItems } from "vtex.order-items/OrderItems"; + const ButtonAddtoCart = ({ valor }) => { const [addItem, setAddItem] = useState({ isLoading2: false }); const [numericStepper, setNumericStepper] = useState({ @@ -18,11 +17,9 @@ const ButtonAddtoCart = ({ valor }) => { const [label, setLabel] = useState({ labelText: `Item` }); const [productDetailsItem, setProductDetailsItem] = useState({}); + console.log("🚀 ~ ButtonAddtoCart ~ productDetailsItem:", productDetailsItem); const selectedItemQuantity = numericStepper.quantityNumericStepper; - - - useEffect(() => { if (showNumeriStepper === true) { setAddItem({ isLoading2: false }); @@ -49,39 +46,59 @@ const ButtonAddtoCart = ({ valor }) => { } }, [numericStepper.quantityNumericStepper]); - // ************** add item ****** - const updateItem = { - productDetailsItem - + // add item + const { addItems } = useOrderItems(); + const skuItem = [ + { + id: valor[0]?.itemId, + seller: "1", + quantity: 1, + }, + ]; + const addToCartItem = async () => { + try { + await addItems(skuItem); + } catch (error) { + console.error("erro ao add produti", error); + } }; - // const { orderForm } = useOrderForm() - // const client = useApolloClient(); - -// const add = () => { -// const orderFormId = orderForm.id + // remover item + const skuItemRemove = [ + { + id: valor[0]?.itemId, + seller: "1", + quantity: -1, + }, + ]; + const removerCartItem = async () => { + try { + await addItems(skuItemRemove); + } catch (error) { + console.error("erro ao add produti", error); + } + }; -// client -// .mutate({ -// mutation: addItem, -// variables: {orderFormId: orderFormId , items:[{ -// "id": 194, -// "quantity": 6, -// "seller": 1 -// }]} -// }) -// .then(() => { -// console.log('***aaaa*****'); - -// }) -// .catch((error) => console.log(error)) -// } + // precisa tratar update quantity + const skuItemUpdate = [ + { + id: valor[0]?.itemId, + seller: "1", + quantity: +1, + }, + ]; + const updateCartItems = async() => { + try{ + await addItem(skuItemUpdate) + }catch (error) { + console.error("erro ao add produti", error); + } + } return ( <>
    -
    {showButton && (
    @@ -90,7 +107,8 @@ const ButtonAddtoCart = ({ valor }) => { onClick={() => { setAddItem({ isLoading2: !addItem.isLoading2 }); setShowNumericStepper(true); - setProductDetailsItem({...valor, selectedItemQuantity}); + setProductDetailsItem({ ...valor, selectedItemQuantity }); + addToCartItem(); }} isLoading={addItem.isLoading2} > @@ -113,6 +131,7 @@ const ButtonAddtoCart = ({ valor }) => { onChange={(event) => setNumericStepper({ quantityNumericStepper: event.value }) } + onClick={numericStepper.quantityNumericStepper < 1 ? removerCartItem() : updateCartItems()} />
    diff --git a/react/components/ShelfCustom/ShelfCustom.jsx b/react/components/ShelfCustom/ShelfCustom.jsx index 94a93d8c..fc532d39 100644 --- a/react/components/ShelfCustom/ShelfCustom.jsx +++ b/react/components/ShelfCustom/ShelfCustom.jsx @@ -12,6 +12,7 @@ import ButoonAddToCart from "../ButtonAddtoCart/index"; import styles from "../../styles/components/ShelfCustom/styles.css"; + const ShelfCustom = ({ items }) => { const [colectSchemaInfos, setColectSchemaInfos] = useState(items); const client = useApolloClient(); @@ -52,17 +53,18 @@ const ShelfCustom = ({ items }) => { }); } if ( - items.collectionId === undefined || - items.collectionId === "" || - (!items.collectionId && items.categoryId === undefined || items.categoryId === '' || !items.categoryId) + items?.collectionId === undefined || + items?.collectionId === "" || + (!items?.collectionId && items?.categoryId === undefined || items?.categoryId === '' || !items?.categoryId) ) { client .query({ query: getProducts, - variables: { collection: "141" }, + variables: { collection: "141" }, }) .then(async ({ data }) => { const products = await data?.products; + setProductId(products); }); } diff --git a/react/graphql/mutation/mutationAddItem.gql b/react/graphql/mutation/mutationAddItem.gql index 51ddecb2..a64a1ca4 100644 --- a/react/graphql/mutation/mutationAddItem.gql +++ b/react/graphql/mutation/mutationAddItem.gql @@ -1,5 +1,5 @@ mutation addItem($orderFormId: ID!, $items: [ItemInput]) { - addToCart(orderFormId: $orderFormId, items: $items) { + addToCart(orderFormId: $orderFormId, items: $items) @context(provider: "vtex.checkout-graphql") { items { skuName productId diff --git a/react/graphql/query/getProduct.gql b/react/graphql/query/getProduct.gql index 3f68bffe..7208fbc9 100644 --- a/react/graphql/query/getProduct.gql +++ b/react/graphql/query/getProduct.gql @@ -1,7 +1,13 @@ -query getProduct($collection: String, $category: String) { - products(collection: $collection, category: $category) { - productId, - categoryId, +query getProduct( + $collection: String + $category: String +) { + products( + collection: $collection + category: $category + ) { + productId + categoryId link items { name @@ -10,7 +16,7 @@ query getProduct($collection: String, $category: String) { images { imageUrl } - sellers { + sellers { sellerId addToCartLink sellerDefault diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4245eb6..1ae65c9f 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,8 +2,7 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ + "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c26..4734f4aa 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -1,15 +1,188 @@ { - "add-to-cart-button": { + "minicart.v2": { + "title": "Minicart", "props": { - "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "MinicartIcon": "icon-cart", + "blockClass": "mini-icon", + "itemCountMode": "total" + }, + "children": [ + "minicart-base-content" + + ] + }, + + "minicart-base-content": { + "blocks": [ + "minicart-empty-state" + ], + "children": [ + "minicart-product-list", "flex-layout.row#footer-minicart" + ], + "props":{ + "blockClass": "minicart-content" } }, - - "minicart.v2": { - "props": { - "customPixelEventId": "add-to-cart-button" + "flex-layout.row#footer-minicart":{ + "props":{ + "blockClass":"minicart-footer" }, - "children": ["minicart-base-content"] + "children":["flex-layout.col#minicart-footer"] + }, + "flex-layout.col#minicart-footer":{ + "children":[ + "minicart-summary", + "minicart-checkout-button" + ], + "props":{ + "blockClass": "minicart-footerCol" + } + }, + + "minicart-summary":{ + "blocks":["checkout-summary.compact#minicart-footer"] + }, + "minicart-checkout-button":{ + "props":{ + "label":"FINALIZAR PEDIDO", + "finishShoppingButtonLink": "/checkout/#/orderform", + "blockClass": "button-add-minicart" + } + }, + "checkout-summary.compact#minicart-footer":{ + "children":[ + "summary-totalizers#minicart", + "summary-installments" + ], + "props":{ + "totalizersToShow": ["Items", "Discounts"], + "total": "visibleTotalizers" + } + }, + "summary-installments":{ + "props": { + "message": "Ou Parcelas em até {installmentsNumber}x de {installmentValue} com juros. Por: {installmentsTotalValue}", + "markers": [], + "hasInterest": true + } + }, + "summary-totalizers#minicart":{ + "props":{ + "showTotal": true, + "showDeliveryTotal": false, + "showOriginalTotal": false + } + }, + // + "minicart-product-list":{ + "blocks":[ "product-list#minicart"], + "props":{ + "itemCountMode": "total" + } + }, + "product-list#minicart":{ + "blocks":["product-list-content-desktop"] + }, + "product-list-content-desktop": { + "children": [ + "flex-layout.row#list-row.mobile" + ] + }, + "flex-layout.row#list-row.mobile": { + "children": [ + "flex-layout.col#image.mobile", + "flex-layout.col#main-container.mobile" + ], + "props": { + "blockClass": [ + "grid" + ] + } + }, + "flex-layout.col#image.mobile": { + "children": ["product-list-image"], + "props": { + "marginRight": "4", + "blockClass": "product-list-image--mobile" + } + }, + "flex-layout.col#main-container.mobile": { + "children": [ + "flex-layout.row#minicar-product-name", + + "flex-layout.row#brand-and-remove-minicart", + "flex-layout.row#top.mobile", + "flex-layout.row#bottom.mobile" + // "flex-layout.row#message.mobile" + ], + "props": { + "blockClass": [ + "main-container" + ] + } + }, + "flex-layout.row#minicar-product-name":{ + "children":["vtex.product-list:product-name"], + "props":{ + "blockClass": "minicart-productName" + } + }, + "flex-layout.row#brand-and-remove-minicart":{ + "children":[ + "flex-layout.col#product-brand", + "flex-layout.col#remove-button.mobile" + ], + "props":{ + "blockClass": "miniCart-row-brand-and-buttonRemove" + } + }, + "flex-layout.col#product-brand":{ + "children":[ "vtex.product-list:product-brand"] + }, + + "flex-layout.row#top.mobile": { + "children": [ + + "flex-layout.col#quantity-selector.mobile" + // "flex-layout.col#remove-button.desktop" + ], + "props": { + "blockClass": [ + "top" + ] + } + }, + "flex-layout.col#quantity-selector.mobile":{ + "children":["quantity-selector"] + }, + "quantity-selector":{ + "props":{ + "mode": "stepper" + } + }, + "flex-layout.row#bottom.mobile": { + "children": [ + "flex-layout.col#price-info.mobile" + ], + "props": { + "blockClass": [ + "bottom" + ] + } + }, + "flex-layout.col#price-info.mobile": { + "children": [ + "price#mobile" + ] + }, + "price#mobile":{ + "props":{ + "textAlign": "left" + } } -} + + + + + +} \ No newline at end of file diff --git a/styles/css/_variables/_colors.scss b/styles/css/_variables/_colors.scss new file mode 100644 index 00000000..bf7a2c72 --- /dev/null +++ b/styles/css/_variables/_colors.scss @@ -0,0 +1,18 @@ +$color-brand-primary-00:#0067A0; +$color-brand-primary-10: #A4DBE8; +$color-brand-primary-20:#00358E; +$color-brand-secundary-00: #00AFD7; +$color-brand-secundary-10: #7C878E; +$color-brand-secundary-20: #D0D3D4; +$color-brand-support-00:#514689; +$color-brand-support-10: #006F44; +$color-brand-support-20: #FA4616; +$color-brand-support-30:#DE1B73; +$color-brand-support-40:#FFB500; +$color-brand-support-50:#9063CD; +$color-brand-support-60:#47D7AC; +$color-brand-support-70:#FF8F1C; +$color-neutral-white:#FFFFFF; +$color-neutral-black:#000000; +$color-neutral-00:#333333; +$color-badge-00: #47D7AC; \ No newline at end of file diff --git a/styles/css/vtex.checkout-summary.css b/styles/css/vtex.checkout-summary.css new file mode 100644 index 00000000..2729f9d0 --- /dev/null +++ b/styles/css/vtex.checkout-summary.css @@ -0,0 +1,12 @@ + +.summaryItemContainer :first-child{ + color: #0068a0d8; + font-weight: 600; +} +.summaryItemPrice :last-child{ + color: #0067A0; + font-weight: 700; +} +.installments, .summarySmallDisclaimer{ + color: #7C878E; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732a..1cb16135 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -96,3 +96,22 @@ .flexRow--addToCartRow { padding-bottom: 1rem; } + +/* minicart items */ +.flexRow--grid{ + border-bottom: 1px solid #a4aaadbe; + margin: 2px 0; + padding: 5px; +} +.flexColChild--main-container{ + margin: 8px 0; +} +.flexRowContent--miniCart-row-brand-and-buttonRemove{ + display: flex; + align-items: baseline; +} +.flexRow--minicart-footer{ + background: rgba(226, 226, 226, 0.562); + border-radius: 8px 0; + box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.904); +} diff --git a/styles/css/vtex.minicart.css b/styles/css/vtex.minicart.css new file mode 100644 index 00000000..29853f01 --- /dev/null +++ b/styles/css/vtex.minicart.css @@ -0,0 +1,73 @@ + +.openIconContainer{ + display: flex; + align-items: baseline; + background-color: #0067A0; + border-color: #0067A0; + border: 1px solid #0067A0; +} +@media(max-width: 639px){ + .openIconContainer{ + display: flex !important; + align-items: baseline; + } +} +.openIconContainer:hover{ + background-color: #00358E; +} +.openIconContainer--mini-icon :global(.vtex-button):hover{ + color: #FFF !important; + background: #00358E; +}.openIconContainer--mini-icon::before{ + content: "Carrinho"; + color: #FFF !important; + font-weight: 500; +} + + +.minicartQuantityBadge{ + background-color:#00AFD7; + color: #FFFFFF; + font-weight: 600; +} +/* close minicart */ +.closeIconButton--mini-icon{ + color:#7C878E; +} +/* title minicart */ +.minicartTitle--minicart-content::before{ + content: "Meu "; + color: #0067A0; +} +.minicartTitle--minicart-content{ + color: #0067A0; +} +/* mini cart items */ +.flexRow--grid{ + border: 1px solid; +} + + + +/* botão finalizar pedido */ +.minicartCheckoutButton--button-add-minicart :global(.vtex-button__label){ + visibility: hidden; + width: 100%; + +} +.minicartCheckoutButton--button-add-minicart :global(.vtex-button__label)::after{ + content: "Finalizar pedido"; + visibility: visible; + align-items: center; + display: flex; + margin-left: -150px; + color: #FFFFFF; + font-weight: 600; +} +.minicartCheckoutButton--button-add-minicart :global(.vtex-button){ + background-color: #00AFD7; + border-color: #00AFD7; +} + + + diff --git a/styles/css/vtex.product-list.css b/styles/css/vtex.product-list.css new file mode 100644 index 00000000..1067cf1d --- /dev/null +++ b/styles/css/vtex.product-list.css @@ -0,0 +1,87 @@ +/* product name minicart */ +.productName{ + color: #7C878E; + font-weight: 600; + font-family: sans-serif; + font-size: 14px; +} +.productBrandName{ + color: #7C878E; + text-transform: uppercase; + +} +.removeButtonContainer{ + display: flex; + justify-content: end; + align-items: baseline; +} +.deleteIcon{ + color: #FA4616; +} +.removeButtonContainer::before{ + content: "Excluir item"; + visibility: visible; + font-size: 9px; + color: #7C878E; + +} + +.inputContainer{ + width: 5rem; + border: none; + color: #00AFD7 !important; +} +.inputContainer :first-child{ + color: #7C878E; + font-weight: 600; +} +.inputContainer :last-child{ + color: #7C878E; +} +.quantitySelectorButton{ + border-radius: 50%; + background-color: #0067A0; + color: #D0D3D4; +} +.quantitySelectorButton:hover{ + border-radius: 50%; + background-color: #00358E; + color: #D0D3D4; +} + +/* prices */ +.productPriceContainer{ + width: 100%; + display: inline-grid; +} +.productPriceCurrency{ + display: flex; + justify-content: center; + border: 1px solid #D0D3D4; + border-radius: 0 8px 0 0; + border-bottom: none; + background-color: #D0D3D4; + color: #7C878E; + height: 20px; + font-weight: 700; + align-items: center; +} +.productPrice{ + display: flex; + justify-content: end; + border: 1px solid #00AFD7; + border-radius: 0 0 0 8px; + border-top: none; + background-color: #00AFD7; + color: #fff; + height: 20px; + font-weight: 600; + align-items: center; + margin-top: -5px; + +} +@media(max-width: 639px){ + .productPrice{ + justify-content: center; + } +} \ No newline at end of file diff --git a/styles/css/vtex.store-icons.css b/styles/css/vtex.store-icons.css index a237d713..30d9af87 100644 --- a/styles/css/vtex.store-icons.css +++ b/styles/css/vtex.store-icons.css @@ -1,3 +1,11 @@ .expandIcon { color: #727273; +} +.cartIcon{ + color: #FFF !important; + background: #0067A0; +} +.cartIcon--minicart-empty-state{ + color: #727273 !important; + background: transparent; } \ No newline at end of file