Vitrine Customizável para 
adicionar onde quiser.

Moeda
Espécie
Cartão Internacional
Tranferência Internacional

1,00 = R$
Tarifa Administrativa R$:
Dólar (USD)
     VET: R$

    Para iniciar

    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

    HTML

    Para "construir" a vitrine em seu site, será necessário inserir o código abaixo:

    .Html

    <div class="col-md-5 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-4 col-lg-4 check" data-tipo="1"> Espécie </div> <div id="btn-cartao" class="btn btn-primary box-vitrine-button col-4 col-lg-4" data-tipo="2"> Cartão </div> <div id="btn-remessa" class="btn btn-primary box-vitrine-button col-4 col-lg-4" 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="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="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 line"> <div class="col-lg-4" style=" padding-right: 0 !important; "> <div id="upnlLojaCambioMoeda" class="bloco_moedas"> <div class="vitrine-produtos form-group" style="box-shadow: 0 0 9px 0 rgba(0,3,9,.22);position:relative;z-index:2;"> <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">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="col-lg-8"> <div class="vitrine-produtos form-group bloco_quantidade_moedas"> <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> <div class="row"> <ul class="descricao_taxa"> <li> <span data-tooltip="Cotação da moeda de sua operação, sem taxas ou impostos"> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 30 30" style=" fill:#000000;"> <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,21h-2v-7h2V21z M15,11.5 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S15.828,11.5,15,11.5z"> </path> </svg></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."> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 30 30" style=" fill:#000000;"> <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,21h-2v-7h2V21z M15,11.5 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S15.828,11.5,15,11.5z"> </path> </svg> </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."> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 30 30" style=" fill:#000000;"> <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,21h-2v-7h2V21z M15,11.5 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S15.828,11.5,15,11.5z"> </path> </svg> </span> <span>&nbsp;VET: R$</span> <span id="valorVet" style=" font-family:montserrat !important;color:white;"></span> </b> </li> <li id="ListCampoIOF"> <br> <span data-tooltip="IOF significa Imposto sobre ''Operações Financeiras''.Essa tarifa é retida pela Receita Federal e, para transferências de mesma titularidade."> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 30 30" style=" fill:#000000;"> <path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,21h-2v-7h2V21z M15,11.5 c-0.828,0-1.5-0.672-1.5-1.5s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S15.828,11.5,15,11.5z"> </path> </svg> </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 line"> <div class="col-lg-4" style="padding-right: 0 !important;"> <div class="bloco_moedas"> <div class="vitrine-produtos form-group" style="box-shadow: 0 0 14px 0 rgba(0,3,9,.22); z-index:0;"> <span 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="col-md-8"> <div class="vitrine-produtos form-group bloco_quantidade_moedas"><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-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

    css

    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

    .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

    js

    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.

    .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

    Copiado !!

    Siga a Primecase



    FALE CONOSCO

       Contato rápido

       contato@primecase.com.br