(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$

    • Tarifa Administrativa R$:

    •  VET: 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="mbr-col-md-5 mbr-col-sm-12 vitrine"> <div action="index.html" class="box-vitrine-estatico" id="__primecase_vitrine" method="post"> <div class="box-vitrine-custom"> <div class="row botoes"> <div id="btn-especie" class="btn btn-primary box-vitrine-button col-3 mbr-col-lg-2 check" data-tipo="1"> Espécie </div> <div id="btn-cartao" class="btn btn-primary box-vitrine-button col-3 mbr-col-lg-2" data-tipo="2"> Cartão </div> <div id="btn-remessa" class="btn btn-primary box-vitrine-button col-3 mbr-col-lg-2" data-tipo="3"> Remessa </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"> <input type="hidden" id="hidNomenclaturaMoeda" value="true"> <input type="hidden" name="Letras" id="hidQuanLetras" value="7"> <input type="hidden" name="idNaturezaOperacao" id="hiddenTextIOFTooltip" value="Valor cobrado para realizar as remessas para o exterior. A taxa varia de acordo com o banco."> <input type="hidden" name="isTarifaAdmEnvioRecebimento" id="hiddenIsTarifaAdmEnvioRecebimento" value="true"> <input type="hidden" name="IsVetValue" id="hiddenIsVetValue" value="true"> <div class="row" style="margin-bottom:1em;"> <div class="mbr-col-lg-6"> <div class="vitrine-produtos form-group"> <label class="label-vitrine mobile-label" style="margin-top:0em !important;">Tipo da Operação </label> <select name="agrupadorTipoOperacao" id="agrupadorTipoOperacao" class="form-control custom-form-control"></select> </div> </div> <div id="upnlLojaCambioPraca" class="mbr-col-lg-6"> <div class="vitrine-produtos form-group"> <label class="label-vitrine mobile-label" style="margin-top:0em !important;"><span>Escolha sua Região</span></label> <select name="pracas" id="pracas" class="form-control custom-form-control"></select> <input type="hidden" name="idPraca" id="idPracaSelect"> <input type="hidden" name="hidUrlChamada" id="hidUrlChamada" value="https://prd-est-ljc-web.primecase.com.br/"> <input type="hidden" name="Letras" id="hidQuanLetras" value="7"> </div> </div> </div> <div class="row"> <div class="mbr-col-lg-4" style=" padding-right: 0 !important; "> <div id="upnlLojaCambioMoeda" class="bloco_moedas"> <div class="vitrine-produtos form-group" style="border-top-left-radius:50px !important; border-bottom-left-radius:50px; box-shadow: 0 0 9px 0 rgba(0,3,9,.22);position:relative;z-index:2;"> <span id="campo-moeda-selecionada" style="border-top-left-radius:50px !important; border-bottom-left-radius:50px;" class="form-control custom-form-control dropdown-moeda"> <img id="img-moeda-selecionada" src="false"> <span id="descricao-moeda-selecionada">USD</span> </span> <select id="moedas" class="form-control custom-form-control" style="display: none"></select> <input type="hidden" name="idItemVitrine" id="hidItemVitrine"> <input type="hidden" name="hidUrlChamada" id="hidUrlChamada" value="https://prd-est-ljc-web.primecase.com.br/"> <input type="hidden" name="Letras" id="hidQuanLetras" value="7"> <ul id="seletorMoedas" class="box-moeda scrollable notShowMoeda"></ul> </div> </div> </div> <div class="mbr-col-lg-8" style="padding-left: 0 !important;"> <div class="vitrine-produtos form-group bloco_quantidade_moedas" style="border-top-right-radius:50px !important; border-bottom-right-radius:50px; box-shadow: 0 0 14px 0 rgba(0,3,9,.22);position:relative;z-index:0;"> <label class="label-vitrine" style="color:#8b8989 !important; position:absolute; left: 9px; top:7px;">Quantia desejada</label> <input id="quantidadeMoedaEstrangeira" style=" border-top-right-radius:50px !important; border-bottom-right-radius:50px; color: #444343 !important; font-weight:600; border:none;" type="text" class="form-control especie-valorME" placeholder="100,00" maxlength="16" name="quantidadeMe"> </div> </div> </div> <div class="row"> <ul class="descricao_taxa"> <li> <span mbr-icon class="mbr-iconfont iconeTaxa icon54-v4-check-2 mbri-success"></span> <b class="primeiralinha" style="padding-left: 0.3em;"> <span id="lblSiglaMoeda" class="lblSiglaMoeda"></span> 1,00 = R$ <span id="lblTaxaMoeda"></span> </b> </li> <li id="paragrafo-tarifaAdministrativa" class="hide" > <br> <b class="spacing primeiralinha"> <span data-tooltip="Valor cobrado para realizar as remessas para o exterior. A taxa varia de acordo com o banco."> <span mbr-icon class="mbr-iconfont iconeTaxa fa-info fa" style="padding-bottom: 3px; border-radius: 50%; background-color: #2a0845; padding-left: 10px; padding-right: 10px; color:white; fill: rgb(42, 8, 69); font-size: 12px; padding-top: 3px !important; left: 0em !important;"> </span> </span> <span> Tarifa Administrativa R$: </span> <span id="valorTaxaAdministrativa" style=" font-family: montserrat !important;color:white;"></span> </b> </li> <li id="paragrafo-vetValue" > <br> <b class="spacing primeiralinha"> <span data-tooltip="O Valor Efetivo Total (VET) representa o custo de uma operação de câmbio em reais por moeda estrangeira, englobando a taxa de câmbio, as tarifas e tributos incidentes sobre essa operação."> <span mbr-icon class="mbr-iconfont iconeTaxa fa-info fa" style="padding-bottom: 3px; border-radius: 50%; background-color: #2a0845; padding-left: 10px; padding-right: 10px; color:white; fill: rgb(42, 8, 69); font-size: 12px; padding-top: 3px !important; left: 0em !important;"></span> </span> <span>&nbsp;VET: R$</span> <span id="valorVet" style=" font-family:montserrat !important;color:white;"></span> </b> </li> <li id="ListCampoIOF"> <br> <span mbr-icon class="mbr-iconfont iconeTaxa icon54-v4-check-2 mbri-success"></span> <b style="padding-left: 0.3em;"> <span id="compoExplicativoIOF"> Valor IOF: <span id="lblIOF"></span>% = R$ <span id="lblvalorAdIOF"></span> </span> </b> </li> </ul> </div> <div class="row"> <div class="mbr-col-lg-4" style="padding-right: 0 !important;"> <div class="bloco_moedas"> <div class="vitrine-produtos form-group" style="border-top-left-radius:50px !important; border-bottom-left-radius:50px; box-shadow: 0 0 14px 0 rgba(0,3,9,.22); z-index:0;"> <span style="border-top-left-radius:50px !important; border-bottom-left-radius:50px; " class="brasil form-control custom-form-control dropdown-moeda"> <img style=" margin-top:0 !important; max-height: 30px;" src="assets/images/790a-40x40.png" alt title> <span>BRL</span> </span> </div> </div> </div> <div class="mbr-col-md-8" style="padding-left: 0 !important;"> <div class="vitrine-produtos form-group bloco_quantidade_moedas" style="border-top-right-radius:50px !important; border-bottom-right-radius:50px;box-shadow: 0 0 14px 0 rgba(0,3,9,.22); position:relative;z-index:0;"> <label class="label-vitrine" style="color:#8b8989 !important; position:absolute; left:9px; top:7px;">Total em reais</label> <input id="quantidadeMoedaNacional" style="border-top-right-radius:50px !important; border-bottom-right-radius:50px; color: #444343 !important; font-weight:600; border:none;" name="quantidade-moeda-nacional" type="text" class="form-control especie-valorMN" placeholder="390,86" maxlength="16"> </div> </div> </div> <div class="row"> <div class="mbr-col-lg-12 align-center"> <input type="submit" name="botaoComprar" id="btn-processar" value="QUERO COMPRAR" class="btn btn-secondary btn-comprar-agora center btn-block" style> </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

    #agrupadorTipoOperacao {
        color: white;
        background-color: transparent !important;
    }
    .botoes {
        padding: 0 0px 0 40px;
    }
    .bg-dark {
        background-color: #343a40 !important;
    }
    .invisible {
        visibility: hidden !important;
    }
    .mbr-col-md-6 {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    .content {
        max-width: 450px;
    }
    .vitrine {
        margin-top: -4rem !important;
    }
    .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 {
        letter-spacing: 1px;
        font-family: 'Lato' !important;
        box-shadow: none !important;
        text-align: center !important;
        border-bottom: 0px solid white;
        padding-bottom: 3%;
        padding-top: 3%;
        margin: 0;
        border-radius: 0;
        font-size: 12pt;
         padding-left: 0;
         padding-right: 0;
        font-weight: 500;
         color: #ccc !important;
         border: none !important;
        background: transparent !important;
    }
    .label-vitrine {
        font-family: 'Lato' !important;
        color: white;
        font-size: 10pt;
        left: 9px;
    }
    .check {
        font-family: 'Lato';
        color: white !important;
        font-weight: 600;
        border: none !important;
        border-bottom: 3px solid green !important;
         background-color: transparent !important;
         border-color: none !important;
    }
    .hide {
        display: none;
    }
    .box-vitrine-custom {
         padding-left: 2%;
        padding-bottom: 2%;
         padding-right: 2%;
    }
    .custom-form-control {
        font-size: 15px;
        display: flex;
        padding: 1rem;
        line-height: 1.8;
        width: 100%;
        background: transparent;
        border: none;
        color: #000000;
        padding-left: 0;
    }
    .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 {
        margin-top: 3px;
        max-height: 22px;
        max-width: 37px;
        margin-right: 5px;
    }
    .itemMoeda img {
        position: relative;
        margin-left: 10px;
        margin-right: 10px;
        max-height: 1.3em !important;
        max-width: 50px !important;
    }
    .box-moeda {
        width: 100%;
        padding-right: 10px;
        position: absolute;
        top: 90%;
        z-index: 1000;
        background-color: #e5e2e2;
        list-style-type: none;
        padding: 0;
    }
    .scrollable {
        max-height: 18em;
        overflow: auto;
        width: 9em;
        top: 4.6em;
    }
    .notShowMoeda {
        display: none;
    }
    .bootstrap-datetimepicker-widget {
        background-color: white;
    }
    .btn-comprar-agora {
        margin-left: 11px;
        letter-spacing: 1px;
        font-family: 'Lato' !important;
        border-radius: 20px;
        margin-top: 2em;
         background-color: #5ba533 !important;
        font-size: 11pt;
        width: 95% !important;
        padding: 1.3em;
        box-shadow: none;
        border: none;
    }
    @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;
    }
    .btn:hover {
        cursor: pointer;
    }
    @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;
    }
    .box-ajuste-button {
        padding: 0 6.5px 0 6.5px !important;
    }
    .col-sm-12 {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        position: relative !important;
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    .bloco-text-custom {
        margin-top: 4rem;
    }
    .row-custom {
        margin-top: 1rem !important;
    }
    @media (max-width: 796px) {
        padding-top: (@paddingTop * 2px);
        padding-bottom: (@paddingBottom * 5px);
    .bloco-text-custom {
         margin-top: 0rem !important;
    }
    .vitrine {
        margin-top: -1rem !important;
        margin-bottom: -2rem !important;
    }
    }
    @media (min-width: 1400px) {
    .box-ajuste-button {
         padding: 0 0.8rem 0 1rem !important;
    }
    }
    .row {
        display: flex !important;
    }
    form input {
        border: none;
        background-color: transparent !important;
    }
    .descricao_taxa {
         margin-top: 26px;
         margin-bottom: 30px;
        list-style-type: none;
    li {
        font-family: 'Lato' !important;
        color: #fff !important;
        font-size: 13px !important;
    }
    }
    descricao_taxa:after {
         height: 37%;
         width: 1px;
         position: absolute;
         bottom: 8em;
         background-color: #f9cf0f !important;
    }
    .descricao-taxa, .parafroIOF {
         margin-top: 15px !important;
         font-weight: 400 !important;
         color: #000 !important;
         font-size: 14px !important;
    }
    .iconeTaxa {
        width: 18px;
        height: 18px;
        content: '';
         background-color: #0a682a !important;
         color: white !important;
         font-weight: bold;
         border: 1px #fff solid;
         border-radius: 50%;
         border-color: #0a682a !important;
         padding: 3px;
         z-index: 2;
         font-size: 10px;
         margin-left: -10px;
    }
    .gdpr-block {
        display: none;
    }
    .form-control {
        font-family: 'Lato';
         background-color: white !important;
         min-height: 3.7em !important;
         font-size: 16px !important;
         padding: 0.3em .5em;
         height: 60px;
    }
    .especie-valorME {
         padding-top: 25px ;
    }
    #campo-moeda-selecionada {
        padding-top: 16px;
    }
    #quantidadeMoedaNacional {
        padding-top: 16px;
         font-family: 'Lato' !important;
        width: 100% !important;
    }
    #quantidadeMoedaEstrangeira {
        width: 100% !important;
    }
    .brasil {
         padding-top: 16px;
    }
    @media (max-width: 768px) {
    .btn-comprar-agora {
         width: 20em !important;
    }
    #quantidadeMoedaEstrangeira {
        width: 100% !important;
    }
    #quantidadeMoedaNacional {
         width: 100% !important;
    }
    .descricao_taxa {
        margin-left: -20px !important;
    }
    .brasil {
         width: 6.2em ;
    }
    .botoes {
        padding: 0 0px 0 0px;
    }
    .vitrine {
         margin-top: 2em !important;
    }
    .mbr-row {
         margin-top: 7em;
    }
    }
    .mbr-section-title {
        color: #ffffff;
    }
    .mbr-text, .mbr-section-btn {
        color: #ffffff;
    }
    #pracas {
        color: white;
        background-color: transparent !important;
    }
    [data-tooltip] {
        font-family: 'arial';
        position: relative;
        font-weight: 500;
    }
    [data-tooltip]:before {
        border: 10px solid transparent;
        border-right-color: #5ba533;
        content: "";
        left: 0px;
        top: -0.4em;
        visibility: hidden;
         position: absolute;
        transition: all 200ms ease;
    }
    [data-tooltip]:after {
        content: attr(data-tooltip);
         width: 17em !important;
        visibility: hidden;
        position: absolute;
         bottom: -10em;
         z-index: 1000;
         padding: 20px;
         left: 1.3em;
         background-color: #5ba533;
         color: #fff;
         font-size: 15px !important;
        text-shadow: 0 0 .1em #fff;
        box-shadow: 0 0 10px #5ba533;
         transition: all 200ms ease;
    }
    [data-tooltip]:hover:after,[data-tooltip]:hover:before {
        visibility: visible;
    }
    strong {
        padding-left: .3em;
    }

    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