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.

Moeda
Espécie

Cartão
Viagem

Remessas
Internacionais

Seguro
Viagem

Escolha o tipo Operação

Escolha sua região

Escolha sua moeda

Quantia desejada

Total em reais

1,00 = R$

*Taxa calculada sem IOF

Origem

Destino

Adultos

Crianças

Idosos

Data de
embarque:

Data de
desembarque:

Antes de tudo.

Insira este código no header da sua loja

.Head

Copiar

Como funciona?

Para "construir" a vitrine em seu site, será necessario inserir o codigo abaixo:

.Html

<div class="row"> <div class="col-md-5 col-lg-6 col-sm-12 vitrine"> <div class="container custom-container"> <div action="MeuCarrinho.aspx" class="box-vitrine-estatico" id="__primecase_vitrine" method="post"> <div class="box-vitrine-custom bg-dark"> <div class="row" style="padding: 0 6.5px 0 6.5px;"> <div id="btn-especie" class="btn btn-primary box-vitrine-button col check" data-tipo="1"> Moeda<br>Espécie </div> <div id="btn-cartao" class="btn btn-primary box-vitrine-button col" data-tipo="2"> Cartão<br>Viagem </div> <div id="btn-remessa" class="btn btn-primary box-vitrine-button col" data-tipo="3"> Remessas<br>Internacionais </div> <div id="btn-seguroViagem" style="position: absolute; top:-10em; " class=" invisible btn btn-primary box-vitrine-button col" data-tipo="4"> Seguro<br>Viagem </div> </div> <br> <div id="__primecase_form" class="primecaseForm"> <input type="hidden" name="idTipoOperacao" id="hidTipoOperacao"> <input type="hidden" name="isRecarga" id="hidIsRecarga" value="false"> <div class="row"> <div class="col-md-12"> <div class="vitrine-produtos form-group"> <label class="label-vitrine">Escolha o tipo Operação</label> <select name="agrupadorTipoOperacao" id="agrupadorTipoOperacao" class="form-control custom-form-control"> </select> </div> </div> </div> <div class="row"> <div id="upnlLojaCambioPraca" class="col-md-6"> <div class="vitrine-produtos form-group"> <label class="label-vitrine">Escolha sua região</label> <select name="pracas" id="pracas" class="form-control custom-form-control"> </select> <input type="hidden" name="idPraca" id="idPracaSelect"> </div> </div> <div id="upnlLojaCambioMoeda" class="col"> <div class="vitrine-produtos form-group"> <label class="label-vitrine">Escolha sua moeda</label> <span id="campo-moeda-selecionada" class="form-control custom-form-control dropdown-moeda"> <img id="img-moeda-selecionada" src="false"> <span id="descricao-moeda-selecionada">Dolar Australiano</span> </span> <select id="moedas" class="form-control custom-form-control" style="display: none"></select> <input type="hidden" name="idItemVitrine" id="hidItemVitrine"> </div> <ul id="seletorMoedas" class="box-moeda scrollable notShowMoeda"> </ul> </div> </div> <div class="row"> <div class="col-md-6"> <div class="vitrine-produtos form-group"> <label class="label-vitrine">Quantia desejada</label> <input id="quantidadeMoedaEstrangeira" type="text" class="form-control especie-valorME" placeholder="100,00" maxlength="16" name="quantidadeMe"> </div> </div> <div class="col-md-6"> <div class="vitrine-produtos form-group"> <label class="label-vitrine">Total em reais</label> <input id="quantidadeMoedaNacional" name="quantidade-moeda-nacional" type="text" class="form-control especie-valorMN" placeholder="390,86" maxlength="16"> </div> </div> </div> <div class="row"> <div class="col-md-12 text-center label-vitrine"> <b> <span id="lblSiglaMoeda" class="lblSiglaMoeda"></span> 1,00 = R$ <span id="lblTaxaMoeda"></span> </b> </div> </div> <div class="row"> <div class="col-md-12 text-center"> <span id="spanExplicaTaxa" class="label-vitrine">*Taxa calculada sem IOF</span> </div> <div class="col-md-12"> <input type="submit" name="botaoComprar" id="btn-processar" value="QUERO COMPRAR" class="btn btn-secondary btn-comprar-agora center" style> </div> </div> </div> </div> </div> <div action="CheckoutSeguroViagem.aspx" id="__primecase_seguroviagem_form" class="disableVitrine vitrine-seguro-viagem" method="post"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="label-vitrine">Origem</label> <select name="idOrigem" id="origemSeguroViagem" class="form-control custom-form-control"> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="label-vitrine">Destino</label> <select name="idDestino" id="destinoSeguroViagem" class="form-control custom-form-control"> </select> </div> </div> </div> <br> <div class="row"> <div class="col-md-4"> <div class="form-group"> <label class="label-vitrine">Adultos</label> <select name="quantidadePassageirosAdulto" id="numeroPassageirosAdultos" class="form-control custom-form-control"> </select> <label id="idadeAdulto" class="labelIdade"></label> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="label-vitrine">Crianças</label> <select name="quantidadePassageirosCrianca" id="numeroPassageirosCriancas" class="form-control custom-form-control"> </select> <label id="idadeCrianca" class="labelIdade"></label> </div> </div> <div class="col-md-4"> <div class="form-group"> <label class="label-vitrine">Idosos</label> <select name="quantidadePassageirosIdoso" id="numeroPassageirosIdosos" class="form-control custom-form-control"> </select> <label id="idadeIdoso" class="labelIdade"></label> </div> </div> </div> <br> <div class="row "> <div class="col-md-6"> <div class="input-group date vitrine-produtos form-group" id="datetimepicker1"> <label class="label-vitrine">Data de<br> embarque: </label> <input type="text" data-date-format="DD/MM/YYYY" id="dataInicioViagem" class="form-control custom-form-control font-vitrine" name="dataInicioSeguroViagem"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div class="col-md-6"> <div class="input-group date vitrine-produtos form-group" id="datetimepicker2"> <label class="label-vitrine">Data de<br> desembarque: </label> <input type="text" data-date-format="DD/MM/YYYY" id="dataFimViagem" class="form-control custom-form-control font-vitrine" name="dataFimSeguroViagem"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div id="espacoPerguntas" class="espacoPerguntas"> </div> <br> <div class="row"> <div class="col-md-12"> <input type="submit" name="botaoComprarSeguroViagem" id="btnComprarSeguroViagem" value="COMPRAR AGORA" class="btn-block btn btn-secondary btn-comprar-agora center"> </div> </div> </div> </div> </div> </div>

Copiar

Deixando a Vitrine estilizada

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:

.CSS

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

Não funciona, e agora?

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.

.JS

<div id="ConfiguracaoVitrine"></div>
<script src="https://hlg-pri-ljc-web.primecase.com.br/Scripts/GeradordeChamadasVitrine.min.js"></script> <script>configurandoVitrine();</script>

Copiar

Quer contratar?

Mande um e-mail para: contato@primecase.com.br

PRIMECASE TECNOLOGIA

13 anos trabalhando com sistemas de alta complexidade para o mercado financeiro, transportes, saúde ou projetos específicos.

contato@primecase.com.br

DEV LOJA CÂMBIO

Antes de tudo.

.Head

Como funciona?

.Html

Deixando a Vitrine estilizada

.CSS

Não funciona, e agora?

.JS

Quer contratar?

PRIMECASE TECNOLOGIA

São Paulo, Av. Paulista, 1159

55 11 2367-2970

DEV LOJA CÂMBIO

Antes de tudo.

.Head

Como funciona?

.Html

Deixando a Vitrine estilizada

.CSS

Não funciona, e agora?

.JS

Quer contratar?

PRIMECASE TECNOLOGIA

São Paulo, Av. Paulista, 1159

55 11 2367-2970

Atenção