Insira este código no header da sua loja
Copiar
Para "construir" a vitrine em seu site, será necessário inserir o código abaixo:
Copiar
Mas não basta só o html, ela precisa de cor, customização. Para isso acontecer, você deve inserir o css abaixo, sofisticando a vitrine:
.dropdown-moeda img {
width: 25px;
}
ul {
list-style: none;
}
.label-vitrine {
font-size: 12px;
}
.vitrine {
margin: auto;
}
.descricao_taxa {
font-size: 13px;
color: #666;
}
.check {
background-color: black !important;
}
.box-vitrine-button {
border-radius: 0 !important;
}
#quantidadeMoedaEstrangeira {
font-weight: 500;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
}
#quantidadeMoedaNacional {
font-weight: 500;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
}
[data-tooltip] {
position: relative;
font-weight: 500;
}
[data-tooltip]:before {
border: 10px solid transparent;
border-right-color: #000;
content: "";
left: 0px;
top: 0;
visibility: hidden;
position: absolute;
transition: all 200ms ease;
}
[data-tooltip]:after {
content: attr(data-tooltip);
width: 17em !important;
visibility: hidden;
position: absolute;
bottom: 0em;
z-index: 1000;
padding: 20px;
left: 1.3em;
border-radius: 12px;
background-color: #000;
color: #fff;
font-size: 13px !important;
text-shadow: 0 0 .1em #fff;
transition: all 200ms ease;
}
[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
visibility: visible;
}
.iconeTaxa {
padding-bottom: 3px;
border-radius: 50%;
background-color: #000;
padding-left: 10px;
padding-right: 10px;
color: white;
fill: rgb(42, 8, 69);
font-size: 12px;
padding-top: 3px !important;
left: 0em;
}
#btn-processar {
background-color: #000;
}
#seletorMoedas {
cursor: pointer;
position: absolute;
background-color: #ccc;
width: 100%;
}
.notShowMoeda {
display: none;
}
.line {
align-items: flex-end;
}
Copiar
Após inserir o código HTML para construir o esqueleto e o CSS, precisamos agora inserir o JAVASCRIPT para todo o mecanismo funcionar.
Insira esse código no final do body.
<div id="ConfiguracaoVitrine"></div>
<script src="https://hlg-pri-ljc-web.primecase.com.br/Scripts/GeradordeChamadasVitrine.min.js"></script>
<script>configurandoVitrine("https://hlg-pri-ljc-web.primecase.com.br/");</script>
Copiar
Copiado !!