(11) 2124-3027
Central de atendimento

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.


Espécie
Cartão
Remessa

USD
    • 1,00 = R$

    • Valor IOF: % = R$
    BRL



    Antes de tudo.

    Insira este código no header da sua loja

    .Head

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    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:&nbsp;</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:&nbsp;</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("https://hlg-pri-ljc-web.primecase.com.br/");</script>

    Copiar

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

    contato@primecase.com.br


    FALE CONOSCO


    (11)2124-3027