DEV LOJA CÂMBIO
Agora você pode testar nossa vitrine da lojaCâmbio em seu site de forma simples, altere o CSS, JS e HTML.
Loja responsiva e com todas as funcionalidades.
Insira este código no header da sua loja
Copiar
Para "construir" a vitrine em seu site, será necessario inserir o codigo 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:
placeholder {
margin-left: 20px !important;
font-size: 25px !important;
}
.row {
align-items: center;
-webkit-align-items: center;
}
.vitrine-produtos {
margin-left: 10px !important;
}
.btn {
border-radius: 0 !important;
}
.btn-custom:hover {
color: #fff !important;
background: transparent !important;
border-color: #fff !important;
}.vitrine {
margin-top: 100px;
}
.texto-banner {
margin-top: 100px;
}
.disableVitrine {
display: none;
}
.box-vitrine-estatico {
left: 0;
bottom: 0;
right: 0;
margin: 0 auto;
display: block;
margin-top: 10%;
}
.box-vitrine-button btn:hover {
transform: none;
}
.box-vitrine-button {
border-bottom: 1px solid white;
padding-bottom: 3%;
padding-top: 3%;
margin: 0;
border-radius: 0;
font-size: 10pt;
padding-left: 0;
padding-right: 0;
}
.label-vitrine {
color: white;
font-size: 10pt;
}
.check {
background-color: black !important;
border-color: black !important;
}
.hide {
display: none;
}
.box-vitrine-custom {
background-color: rgba(192, 192, 192, 0.3);
padding-left: 2%;
padding-bottom: 2%;
padding-right: 2%;
}
.custom-form-control {
border-radius: 0;
font-size: 10pt;
}
.itemMoeda {
list-style: none;
cursor: pointer;
padding-top: 10px;
border-bottom: 1px solid #f5f5f5;
text-align: left;
height: 100%;
padding-bottom: 10px;
}
.dropdown-moeda img {
max-height: 20px !important;
max-width: 30px !important;
margin-right: 5px;
}
.itemMoeda img {
position: relative;
margin-left: 10px;
margin-right: 10px;
max-height: 50px !important;
max-width: 50px !important;
}
.box-moeda {
width: 100%;
padding-right: 10px;
position: absolute;
top: 90%;
z-index: 1000;
background-color: white;
list-style-type: none;
padding: 0;
}
.scrollable {
max-height: 15em;
overflow: auto;
width: 93.3%;
top: 4.6em;
}
.notShowMoeda {
display: none;
}
.bootstrap-datetimepicker-widget {
background-color: white;
}
.btn-comprar-agora {
font-size: 10pt;
width: 100% !important;
}
@media (min-width: 1199px) {
.cutom-button {
padding-top: 4%;
padding-bottom: 4%;
}
}
select option {
color: black;
}
.primecaseForm {
padding: 1em !important;
}
.distanciaBanner {
margin-top: 5.0em;
}
.vitrine-seguro-viagem {
background-color: rgba(0, 0, 0, 0.7);
padding: 1% 4% 5% 4%;
}
.espacoPerguntas {
color: #fff !important;
margin-right: 10px !important;
}
@media (max-width: 767.98px) {
.distanciaBanner {
margin-top: 3em;
}
.container {
padding-left: 0px !important;
padding-right: 0px !important;
overflow-x: hidden !important;
}
.box-vitrine-button {
width: 100% !important;
white-space: nowrap !important;
}
.box-vitrine-estatico {
margin-top: 0% !important;
margin-bottom: 15% !important;
}
.vitrine {
margin-top: 75px;
}
}
.dropdown-moeda {
text-align: left !important;
}
@media (min-width: 576px) and (max-width:798px) {
.col-sm-12 {
-ms-flex: 0 0 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
Copiar
Calma, depois de ter inserido os codigos Html para construir o esqueleto e o css, precisamos agora inserir o javaScript para todo o mecanismo funcionar.
Insira esse codigo 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
Mande um e-mail para: contato@primecase.com.br
Essa vitrine é apenas um modelo demonstrativo, sendo assim, ela não irá realizar operações !!