From b04f601b37484b2b46e586dc5db40d0ce056d9d4 Mon Sep 17 00:00:00 2001
From: Eleonora Otz
Date: Thu, 8 Dec 2022 11:14:18 -0300
Subject: [PATCH] feat: Cria o header desktop
---
dev/controles-vtex/fullTextSearchBox.html | 2 +-
meta/loja.js | 12 +-
meta/pages/category.js | 26 ----
meta/pages/elementos-menu.js | 37 ------
meta/pages/institucional.js | 42 -------
meta/pages/product.js | 57 ---------
src/arquivos/sass/partials/_header.scss | 115 +++++++++++++++++-
src/arquivos/sass/utils/_variaveis.scss | 4 +-
src/arquivos/sprite/bag-icon.png | Bin 0 -> 847 bytes
src/arquivos/sprite/menu-icon.png | Bin 0 -> 737 bytes
src/arquivos/sprite/search-icon.png | Bin 0 -> 603 bytes
src/arquivos/sprite/user-icon.png | Bin 0 -> 770 bytes
src/template-pagina/eleonoraotz-home.html | 3 +-
.../sub-templates/eleonoraotz-header.html | 27 +++-
.../eleonoraotz-loads-header.html | 2 +-
src/template-pagina/template-404.html | 37 ------
src/template-pagina/template-500.html | 35 ------
src/template-pagina/template-buscavazia.html | 32 -----
src/template-pagina/template-categoria.html | 79 ------------
.../template-elementos-menu.html | 19 ---
.../template-institucional.html | 55 ---------
src/template-pagina/template-login.html | 35 ------
src/template-pagina/template-minha-conta.html | 39 ------
src/template-pagina/template-produto.html | 103 ----------------
24 files changed, 144 insertions(+), 617 deletions(-)
delete mode 100644 meta/pages/category.js
delete mode 100644 meta/pages/elementos-menu.js
delete mode 100644 meta/pages/institucional.js
delete mode 100644 meta/pages/product.js
create mode 100644 src/arquivos/sprite/bag-icon.png
create mode 100644 src/arquivos/sprite/menu-icon.png
create mode 100644 src/arquivos/sprite/search-icon.png
create mode 100644 src/arquivos/sprite/user-icon.png
delete mode 100644 src/template-pagina/template-404.html
delete mode 100644 src/template-pagina/template-500.html
delete mode 100644 src/template-pagina/template-buscavazia.html
delete mode 100644 src/template-pagina/template-categoria.html
delete mode 100644 src/template-pagina/template-elementos-menu.html
delete mode 100644 src/template-pagina/template-institucional.html
delete mode 100644 src/template-pagina/template-login.html
delete mode 100644 src/template-pagina/template-minha-conta.html
delete mode 100644 src/template-pagina/template-produto.html
diff --git a/dev/controles-vtex/fullTextSearchBox.html b/dev/controles-vtex/fullTextSearchBox.html
index f20519a..b8c3fb8 100644
--- a/dev/controles-vtex/fullTextSearchBox.html
+++ b/dev/controles-vtex/fullTextSearchBox.html
@@ -25,6 +25,6 @@
+ accesskey="b" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" value="OLÁ, O QUE DESEJA ENCONTRAR?" />
diff --git a/meta/loja.js b/meta/loja.js
index 1c4939c..67c2d9f 100644
--- a/meta/loja.js
+++ b/meta/loja.js
@@ -1,16 +1,6 @@
const home = require("./pages/home");
-const category = require("./pages/category");
-const product = require("./pages/product");
-const institucional = require("./pages/institucional");
-const menuElements = require("./pages/elementos-menu");
module.exports = {
accountName: "agenciamagma",
- pages: [
- { data: home, template: "eleonoraotz-home.html" },
- { data: category, template: "template-categoria.html" },
- { data: product, template: "template-produto.html" },
- { data: institucional, template: "template-institucional.html" },
- { data: menuElements, template: "template-elementos-menu.html" },
- ],
+ pages: [{ data: home, template: "eleonoraotz-home.html" }],
};
diff --git a/meta/pages/category.js b/meta/pages/category.js
deleted file mode 100644
index 29ca98e..0000000
--- a/meta/pages/category.js
+++ /dev/null
@@ -1,26 +0,0 @@
-module.exports = {
- contentPlaceHolders: [
- {
- // Registra o contentPlaceholder
- id: "htmlSeo",
- objects: [
- // Registra os objetos vtex
- {
- type: "html",
- name: "Html SEO",
- contents: [
- {
- name: "metaTag",
- active: true,
- content: ``,
- },
- ],
- },
- ],
- },
- ],
-
- // Ainda não implementado
- //Trocar pelo que for cadastrado na vtex
- searchResultLayoutID: "46b0e7f2-15ee-4789-a75e-280e389d2b8f",
-};
diff --git a/meta/pages/elementos-menu.js b/meta/pages/elementos-menu.js
deleted file mode 100644
index c92fd0f..0000000
--- a/meta/pages/elementos-menu.js
+++ /dev/null
@@ -1,37 +0,0 @@
-module.exports = {
- contentPlaceHolders: [
- {
- id: "banners-menu",
- objects: [
- {
- type: "banner",
- name: "menu camisa",
- contents: [
- {
- name: "banner principal mobile content",
- active: true,
- type: "image",
- file: "slide-principal-mobile.png",
- width: 500,
- height: 500,
- },
- ],
- },
- {
- type: "banner",
- name: "menu bolsa",
- contents: [
- {
- name: "banner principal mobile 2 content",
- active: true,
- type: "image",
- file: "slide-principal-mobile.png",
- width: 500,
- height: 500,
- },
- ],
- },
- ],
- },
- ],
-};
diff --git a/meta/pages/institucional.js b/meta/pages/institucional.js
deleted file mode 100644
index 47982fb..0000000
--- a/meta/pages/institucional.js
+++ /dev/null
@@ -1,42 +0,0 @@
-module.exports = {
- contentPlaceHolders: [
- {
- // Registra o contentPlaceholder
- id: "htmlSeo",
- objects: [
- // Registra os objetos vtex
- {
- type: "html",
- name: "Html SEO",
- contents: [],
- },
- ],
- },
- {
- id: "texto-institucional",
- objects: [
- {
- type: "html",
- name: "Conteudo institucional",
- contents: [
- {
- name: "Potilica de privacidade",
- active: true,
- content: `
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat lacus sapien, nec interdum ante sodales id. Vivamus eu mauris vel nibh pharetra aliquet. Donec nisl odio, feugiat sed laoreet non, venenatis in dolor. Nulla eget dolor nec mi congue volutpat. Maecenas non elementum dolor. Nam sollicitudin justo sed magna auctor, at condimentum quam aliquam. Ut luctus posuere quam, nec auctor orci sagittis at. Duis eget nibh sed lorem sollicitudin auctor cursus nec ipsum. In tempus ipsum libero, at ultricies lectus blandit sed. Cras in venenatis turpis. Praesent pellentesque augue nec iaculis mattis. Sed ante magna, vulputate sit amet pulvinar sed, iaculis ac massa. Nulla id turpis in enim aliquam auctor ut nec orci.
-
-Phasellus sit amet commodo lacus, eu dapibus lectus. Maecenas vitae justo lacus. Cras ornare hendrerit dictum. Sed quis iaculis lacus. Nunc egestas ipsum eget risus pulvinar sagittis. Nullam quis porttitor massa, a congue quam. Pellentesque ac mollis est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tincidunt, turpis quis pretium vehicula, leo erat lobortis velit, sed finibus nulla nunc sed lorem. Maecenas tellus nisi, tincidunt sed dolor vitae, accumsan euismod nisl. Cras dignissim placerat dapibus. Donec varius, sapien quis hendrerit dictum, lorem urna vestibulum eros, tempor aliquet ligula massa vel dui.
-
-In et rutrum erat. Duis dapibus, ligula eu luctus aliquet, nisi neque dapibus nisl, id laoreet nunc libero vitae augue. Integer vehicula ligula non risus vehicula, in venenatis nulla pulvinar. Nulla convallis elit sit amet massa euismod, quis cursus elit suscipit. Pellentesque semper dui sit amet ex efficitur tristique. Donec vitae porttitor augue, eget viverra ipsum. Sed volutpat, orci non hendrerit tempus, nisi nisl suscipit libero, at ultrices purus elit a massa. Nullam imperdiet blandit nunc, nec scelerisque libero gravida ac. Vestibulum ante velit, sodales blandit vehicula sed, ullamcorper eget dui. Fusce tempus ipsum sed lobortis pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus.
-
-Aenean at tempus arcu. Donec porta tempor nunc, id sollicitudin lectus egestas eu. Nullam posuere sollicitudin lectus sit amet suscipit. Curabitur quis urna quam. Ut sollicitudin dui sit amet risus rutrum convallis laoreet in tellus. Pellentesque porttitor nec velit a tempus. Cras quam massa, efficitur iaculis iaculis in, varius eget lorem.
-
-Duis ac egestas velit. Vivamus accumsan, metus vitae luctus iaculis, nisi ante mollis ipsum, non commodo augue orci nec dui. Cras dignissim venenatis viverra. Curabitur vitae ex turpis. Nullam pellentesque convallis enim, id accumsan velit laoreet nec. Quisque eget felis in turpis rhoncus maximus. In nec vehicula tortor. Maecenas consequat gravida dapibus.
- `,
- },
- ],
- },
- ],
- },
- ],
-};
diff --git a/meta/pages/product.js b/meta/pages/product.js
deleted file mode 100644
index 1621436..0000000
--- a/meta/pages/product.js
+++ /dev/null
@@ -1,57 +0,0 @@
-module.exports = {
- contentPlaceHolders: [
- {
- // Registra o contentPlaceholder
- id: "htmlSeo",
- objects: [
- // Registra os objetos vtex
- {
- type: "html",
- name: "Html SEO",
- contents: [],
- },
- ],
- },
- {
- id: "prateleira-padrao",
- objects: [
- {
- type: "Produtos Relacionados",
- name: "prateleira",
- properties: {
- layout: "prateleira-padrao",
- type: "QuemViuViuTambem",
- "number-of-columns": 12,
- "number-of-items": 12,
- },
- },
- ],
- },
- // EXEMPLO DE PRATELEIRA COMUM
- // {
- // id: "prateleira-padrao",
- // objects: [
- // {
- // type: "colecao",
- // name: "prateleira",
- // properties: {
- // layout: "prateleira-padrao",
- // "number-of-columns": 12,
- // "number-of-items": 12,
- // "show-unavailable": false,
- // //sim random está escrito errado e é culpa da vtex
- // ramdom: false,
- // paged: false,
- // },
- // contents: [
- // {
- // name: "praleira",
- // active: true,
- // clusterId: 158,
- // },
- // ],
- // },
- // ],
- // },
- ],
-};
diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss
index 15ca6df..f64e4f4 100644
--- a/src/arquivos/sass/partials/_header.scss
+++ b/src/arquivos/sass/partials/_header.scss
@@ -1,3 +1,116 @@
.page-header {
- background-color: $black-500 ;
+ padding: 28px 0;
+ background: $black-500;
+
+ &__wrapper {
+ display: grid;
+ grid-template-columns: 2fr 1fr 2fr;
+ align-items: center;
+ }
+
+ &__logo {
+ display: block;
+ margin: 0 auto;
+ }
+
+ .user-items {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ .busca {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ max-width: 212px;
+ margin: 0;
+ padding: 8px 0;
+ border-bottom: 1px solid $white-500;
+
+ legend,
+ label,
+ select {
+ display: none;
+ }
+
+ .fulltext-search-box {
+ flex: 1;
+ height: 23px;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ line-height: 12px;
+ font-size: 10px;
+ color: $white-500;
+ background: transparent;
+ }
+
+ .btn-buscar {
+ width: 23px;
+ height: 23px;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 0;
+ background-color: transparent;
+
+ @extend .sprite;
+ @extend .sprite-search-icon;
+ }
+ }
+
+ &__account-link {
+ display: flex;
+ align-items: center;
+
+ &::before,
+ &::after {
+ content: "";
+ width: 1px;
+ height: 19px;
+ margin: 0 24px;
+ background: $white-500;
+ }
+ }
+
+ &__minicart-button {
+ position: relative;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ background: transparent;
+
+ .portal-totalizers-ref{
+ .title,
+ .amount-products,
+ .amount-items strong,
+ .amount-kits,
+ .total-cart {
+ display: none;
+ }
+ }
+ }
+
+ .cart-info {
+ margin: 0;
+ }
+
+ .amount-items-em {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ top: 4px;
+ right: -4px;
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ line-height: 11px;
+ font-size: 9px;
+ font-weight: bold;
+ font-style: normal;
+ color: $white-500;
+ background: $blue-500;
+ }
+ }
}
diff --git a/src/arquivos/sass/utils/_variaveis.scss b/src/arquivos/sass/utils/_variaveis.scss
index 1692fde..540c2a5 100644
--- a/src/arquivos/sass/utils/_variaveis.scss
+++ b/src/arquivos/sass/utils/_variaveis.scss
@@ -1,6 +1,7 @@
// fonts
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
-$font-family: "Roboto", sans-serif;
+$font-family: "Inter", sans-serif;
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-heavy: 700;
@@ -10,6 +11,7 @@ $font-height: 1.5;
$black-500: #000000;
$white-500: #ffffff;
+$blue-500: #00C8FF;
// Grid breakpoints
diff --git a/src/arquivos/sprite/bag-icon.png b/src/arquivos/sprite/bag-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..de679e7410edf3a52203046b1e16a4ad5b8187d8
GIT binary patch
literal 847
zcmV-V1F-ywP)MEodg@m*(55Kjw<10F`(ZW~+nj%Gd3h4bx
zRW151_zwF>uaI5>`WaG5w7FzJ*{`f4`e~cK3*5fVj-JNUUwOr?%N3i
ziJ)f)X^{d`_4O&SR_Bj
zLO3%~c4b?-o=YKJG=}B4BY5Y2D0vs~JDzZ?1@b@i{j;*$b$*9fVcmv!@*}$~Y(Rxn!g;=0Hw|7{d~e*8t?Xg)%I0BZb-l-g$DYf#AjF
z9wTtHy~k?6LVh@Zn2AHIgbWe7XpM!^2)TtkVf`Q3CCC&q#CJXX=Ko%>#G9^EI*@Y#
zGq}BJQal&|$QLJtd~Xr3#0?AN&+E-)!QJBjwwHm6x9Lcw0~~>hC}$Y{AXDf!+zAyRiZHfdbkRS*;sjBK15p7vkv@8tEb;1TX@RyX9N%@JEH}ft>1N2E|Coa
z00000ESk<_h?5&R+l!P*l9aJ^ow8H3>hf>X)rVV$%TfxAua8~|beL6^*B*6uT6gDZ
ze+swmwU%uHedL;Px@8AfkEhLV)tfb+eWw1bL;+i|2-L{}&vKS$Pr31w-EvZcbrZ_8&KT@f*T(0!V-jNkdHH*mzn*6@Q>J5yr@A3F#k-ha5z>&6fMRBI^pHhs7b6qB+_9V67WeN_KCU
zl0W*n3)Bg@QoV>s;W=iLtCy|H1Pt)jXl4zY3fsM*nN
literal 0
HcmV?d00001
diff --git a/src/arquivos/sprite/search-icon.png b/src/arquivos/sprite/search-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..761c0eb1607857f52dc6fa32e814ae9674cecef9
GIT binary patch
literal 603
zcmV-h0;K(kP)({?MBo7;DmpCL&SX^-MQ8XeNWhY8Lv|pmv73@CBa2}!Sjcuj1P+Kxz=LQ&OiYK2
zOc}Q>Q$%*+Ykgl&-Krx^PPU`ztY8Wx=A~oQ2Q5-pttUq5s&IA8YANuAr$};iT^Hn^
z1`)*-kmP+8vB;&2Y8{<&btK4PBAin`5PO&4y(}>VqND1{CP+C4xrxd}?pK?DLg0rk2!xYJeUb=TF>aTE%2vNY6_T-LY%8Ur-gCz6Xrwi1|IsH
z7RGfAcSZ}U#PuWG87)Yb@(JcciSyp2vEZFv)drzw@3KI?PKrLKb`8CY-!?E0&*Hoo
z^fdZSus$a8C(ikeH)#q1!RuW_VjC12{bmIL!0Qd4TlFd6O$Ot{u8+67Pq#ja%~wWg
zh;nYWoM&%{Ie-s%yK~fJw$l77%CHx05o7wX!vJbKowW4AmM@k1NBqjeH+>@Zw_b=)X
phzioKLWwFd@CT|lx-#u+;tLovFN>)eTEqYV002ovPDHLkV1icY0TciL
literal 0
HcmV?d00001
diff --git a/src/arquivos/sprite/user-icon.png b/src/arquivos/sprite/user-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..15dc1816171fc082d08d5eac7d5fa2aa42e7790f
GIT binary patch
literal 770
zcmV+d1O5DoP)fr!J3%~xM#u(sCull>y+ONy+X?JUAZ=iE0+gr#2WAwLkf|hphodC}
z2R;YvHXB23rL=VH({WVwFWX46qK(M!otS+y0aJ(PwTfZ94k-)S2tiO4(7VCR+H3QB=b4q*>QkPX{z
zbM!w!9z3^yz>cS=kE_TfBzxuvc8HD3QBD$y_RIiw463iYlya_zZh>hMZ$ZceE1_ik
zN#JivAxS8N{a!uJA=Ie8lFOItp+4^10LN|C3C$%W@#hQJanJ3XkTH$u3h)NIW~r-#
z60(!^`k?D#k;|1k->BI>WazJzehW(g#}rkto=QX5o8Oh5$vf7J(S?SV%<(Ha#`
zekOt*p2GvZ{~Cpkvf#vPhiPmvBaw??^$-nE(~Q|$EnJ2I@))HXJJzANH5B&{?~ApX
zeQpYS-fvI>iij?II?PC8*|v-9T9^YI17S?Wyf0qaZyop3q>RNI9lpdKZzyG$*nXm4
zA?KzHVj|?7M=V%VDUY2dh&ip;Ma$xG#*sCWTjAw$9^{W!y-Z#S3lP)euXN3IfOmr0
zUt7wD9KWAabCtrmb|XS^{CaplNb*+ejB!rQRT}k&EQ7=|iyrd?WbA6(%bmzI5CI1QU(sj^pkQIH__*j
zg
+
M3 - Eleonora Otz
@@ -28,7 +29,7 @@
-
+
-
-
-
-
-
-
-
Página não encontrada.
-
A página que vocês está tentando acessar está indisponível.
-
voltar
-
-
-
-
-
-
-
-
diff --git a/src/template-pagina/sub-templates/eleonoraotz-header.html b/src/template-pagina/sub-templates/eleonoraotz-header.html
index d8e8e7b..b0feb1b 100644
--- a/src/template-pagina/sub-templates/eleonoraotz-header.html
+++ b/src/template-pagina/sub-templates/eleonoraotz-header.html
@@ -1,11 +1,28 @@
diff --git a/src/template-pagina/sub-templates/eleonoraotz-loads-header.html b/src/template-pagina/sub-templates/eleonoraotz-loads-header.html
index 9148c1e..65447e9 100644
--- a/src/template-pagina/sub-templates/eleonoraotz-loads-header.html
+++ b/src/template-pagina/sub-templates/eleonoraotz-loads-header.html
@@ -3,4 +3,4 @@
-
+
diff --git a/src/template-pagina/template-404.html b/src/template-pagina/template-404.html
deleted file mode 100644
index 8b7d3e7..0000000
--- a/src/template-pagina/template-404.html
+++ /dev/null
@@ -1,37 +0,0 @@
-
-
-
-