Uma vitrine customizável para adicionar no site
da sua empresa


Simples e Seguro.

Escolha o tipo:

5,2687 Taxa da Moeda

USD
Moeda dolar

    Todas as moedas

BRL
Comprar

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-12 col-sm-12 grid-Custom col-lg-5"> <div class="mt-3 vitrine justify-content-end"> <form action="index.html" name="primecase_box_vitrine" id="container-vitrine" class="containerVitrine" > <div class="row botoes"> <div class="col-12 tiposOperacao justify-content-center"> <div class="line"> <button class="btn disabled check prime-button" data-tipo="1" disabled id="button-especie" > Espécie </button> <button class="btn disabled prime-button" data-tipo="2" disabled id="button-cartao" > Cartão </button> </div> <div class="line"> <button class="btn disabled prime-button" data-tipo="3" disabled id="button-remessa" > Remessa </button> <button class="btn disabled prime-button" data-tipo="4" disabled id="button-ouro" > Ouro </button> </div> </div> </div> <div id="isLoading-controll" class="isloadingVitrine"> <span class="loader"></span> </div> <input type="hidden" id="primecase-hidden-url" value="https://hlg-ecommerce-par-web.primecase.com.br/Login" /> <input type="hidden" id="primecase-hidden-tipo-operacao" value /> <input type="hidden" id="primecase-hidden-idItem-Vitrine" value /> <input type="hidden" id="primecase-hidden-idVitrine" value /> <input type="hidden" id="primecase-hidden-idPraca" value /> <input type="hidden" id="primecase-hidden-finalidade" value /> <input type="hidden" id="primecase-idHotsite" value="0" /> <input type="hidden" id="primecase-caminho-bandeira" value="/images/Bandeiras/" /> <input type="hidden" id="primecase-hidden-sigla-loja" value="par" /> <div class="alert alert-danger hide-primecase" style="margin-top: 1rem; margin-bottom: -0.3rem" id="primecase-message-error" ></div> <div class="row"> <div class="col-12 "> <div class="form-floating"> <label for="floatingSelect">Selecione o Tipo de Operação</label> <select class="form-select" id="primecase-controller-tipoOperacao" aria-label="Floating label select example" name="primecase-tipoOperacao" ></select> </div> </div> </div> <div class="row"> <div class="col-12 mt-2"> <div class="form-floating" id="primecase-box-praca"> <label for="floatingSelect">Qual a sua região?</label> <select class="form-select" id="primecase-controller-praca" aria-label="Floating label select example" name="primecase-praca" ></select> </div> </div> </div> <div class="row"> <div class="col-12 mt-3"> <div class="form-floating" id="primecase-box-finalidade"> <label for="floatingSelect">Qual a sua Finalidade?</label> <select class="form-select" id="primecase-controller-finalidade" aria-label="Floating label select example" name="primecase-finalidade" ></select> </div> </div> </div> <div class="col-12 mt-3 taxa" > <p class="primecase-box-impostos"> <span> <span class="fa fa-circle-o-notch mbr-iconfont" style="color: rgb(77, 191, 65)" ></span> <span id="primecase-info-taxa">5,2687</span> </span ><span id="primecase-info-taxa-descricao">Taxa da Moeda </span> </p> </div> <div class="primecase-tarifas" id="primecase-tarifas"></div> <div class="row rowReal"> <div class="col-5"> <div class="input-group flex-nowrap"> <span class="input-group-text" id="addon-wrapping">USD</span> <input type="text" class="form-control" id="primecase-input-moeda-me" value="100,00" aria-label="Username" aria-describedby="addon-wrapping" /> </div> </div> <div class="col-sm-7 moeda"> <box class="form-control custom-box-moeda" id="primecase-moeda"> <img class="custom-box-img" id="selected-moeda-img" src="https://hlg-ecommerce-par-web.primecase.com.br//images/Bandeiras/978.svg" alt="Moeda" style="width: auto !important" /> <span id="selected-moeda-descricao">dolar</span> <span mbr-icon class="mbr-iconfont sli-arrow-down" style=" margin-left: auto; font-size: 14px; color: rgb(53, 53, 53); fill: rgb(53, 53, 53); " ></span> </box> <ul class="card custom-box-list-moeda hide-primecase" id="primcase-list-moeda" > <p>Todas as moedas</p> </ul> </div> </div> <div class="row rowReal"> <div class="col-5"> <div class="input-group flex-nowrap"> <!-- <span class="input-group-text" id="addon-wrapping">R$</span> --> <input type="text" class="form-control" value="100,00" aria-label="Username" aria-describedby="addon-wrapping" id="primecase-input-moeda-mn" /> </div> </div> <div class="col-sm-7 moeda"> <box class="form-control custom-box-moeda" id="primecase-moeda"> <img src="file:///C:/Users/ellen/AppData/Local/Mobirise.com/Mobirise/eduardo_0040primecase_002ecom_002ebr/userblocks/cryptom5/header05_1" id="img-moeda-real" class alt /> <span id="selected-moeda-descricao">BRL</span> </box> </div> </div> <div class="col-12 mt-3 d-grid"> <button class="btn" id="btn-Comprar">Comprar</button> </div> </form> </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

#primecase-info-taxa-descricao {
cursor: pointer;
}


#primecase-multiplicador-value {
padding: 0px 10px;
}


.primecase-box-impostos {
display: flex;
cursor: pointer;
padding: 0px 10px;
font-size: 15px;
flex-direction: row;
width: 100%;
justify-content: space-between;
}


.primecase-box-impostos span {
font-weight: 500;
}


.primecase-custom-tooltip {
cursor: pointer;
--bs-tooltip-bg: #e08e3e;
--bs-tooltip-color: #fff;
}


.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}


.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}


.tooltip:hover .tooltiptext {
visibility: visible;
}


.botoes {
min-width: 180px;
margin: 20px 10px 0px 0px;
display: block;
}


.tiposOperacao {
display: flex;

}


#img-moeda-real {
width: 30px;
}


.mbr-section-title {
color: #98dee8;
}


#selected-moeda-descricao {
font-weight: 500;
}


.input-group-text {
display: none;
}


.mbr-fallback-image.disabled {
display: none;
}


.hide-primecase {
visibility: hidden;
position: fixed;
top: -100vh;
}


.containerVitrine {
position: relative;
z-index: 1;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
background: white;
padding: 16px 24px;
border-radius: 15px;
max-width: 415px;
}


.card {
z-index: 1;
}


.prime-button {
opacity: .7;
width: 100%;
margin-left: auto;
background: #000 !important;
color: white !important;
font-size: 14px !important;
display: flex;
border-radius: 0 !important;
margin: 0px;
border: 1px solid #fff;
padding: 12px 5px !important;
}


.check {
opacity: 1;
}


.custom-box-moeda {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: 0.4rem;
}


.custom-box-moeda:hover {
cursor: pointer;
}


.custom-box-img {
height: 1.2rem;
}


.custom-box-img-list {
height: 1rem;
width: 30px;
}


.custom-box-list-moeda {
list-style: none;
position: absolute !important;
width: 300px;
z-index: 2;
padding: 0;
margin: 0;
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
background-color: #ffffff;
}


.custom-box-list-moeda li {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
align-items: center;
gap: 0.4rem;
color: #333;
height: 50px;
border-bottom: 1px solid #f2f2f2;
box-sizing: border-box;
padding-left: 16px;
padding-top: 8px;
padding-bottom: 8px;
}


.custom-box-list-moeda li:hover {
background-color: rgba(242, 242, 242, 0.4);
cursor: pointer;
}


.custom-box-list-moeda li:last-child {
border: none;
}


.primecase-tarifas {
height: auto;
width: 100%;
}


.more-view {
cursor: pointer;
}


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

<script src="https://hlg-ecommerce-par-web.primecase.com.br/scripts/vitrineExterna.js"></script>

Copiar

Copiado

Interessado em nossos produtos e serviços?