8

É possível eu pegar uma valor dentro de uma tag <span></span>? Ex: <span> 5% </span> e fazer o cálculo de um desconto em um valor?

Exemplo:

Cálculo Porcentagem

Quero pegar o valor de 5% que se encontra na tag <span>, subtrair pelo valor do produto e exibir o valor atualizado do produto. Tem como fazer isso com jQuery?

Meu código:

  #set($id = $product.Id)
#set($uri = $product.Uri)
#set($escapedName = $product.HtmlEscapedName)
#set($evaluationRate = $product.EvaluationRate) 

<!-- class: shelf prateleira vitrine home -->
<div class="shelfImageWrapper">
    <div class="shelfButtonWrapper">
        <div class="shelfAmountInCart">
            $product.AmountInCart
        </div>
        <!--<div class="shelfBuyButtomWrapper">
            $product.BottomBuyAsynchronous
        </div>-->
    </div>
    <a class="shefImage" title="$escapedName" rel="nofollow" href="$uri">
        <div class="shelfImage-1">$product.GetImageTag(235,235)</div>
    
    </a>
</div>

<div class="shelfInformationWrapper">
    <input type="hidden" value="$product.BestPrice" class="qd_productPrice" />
    <input type="hidden" value="$product.ListPrice" class="qd_productOldPrice" />
    <input type="hidden" value="$product.NumbersOfInstallment" class="qd_sp_installments" />
    <h3><a title="$escapedName" href="$uri" rel="nofollow">$product.Name</a></h3>
    #if ($product.IsInStock)
        <div class="yv-review-quickreview" value="$id"></div>
        <p class="shelfPriceWrapper">
            <a title="$escapedName" rel="nofollow" href="$uri">
                #if ($product.HasBestPrice)
                    <span class="shelfOldPriceWrapper">De $product.ListPrice</span>
                    <br/>
                #end
            Por <span class="shelfNewPriceWrapper">$product.BestPrice </span> <span>à vista</span>
                <br/>
                <span class="installmentWrapper">
                    #if ($product.NumbersOfInstallment > 1)
                        em até
                        <strong class="installment"> ${product.NumbersOfInstallment}x </strong> 
                        de
                        <strong class="InstallmentValue"> $product.InstallmentValue </strong> 
                        <span>s/juros</span>
                    #end
                </span>
                    #if ($product.HasBestPrice)
                        <span class="saveAmount">economize <span class="qd_saveAmount">R$ </span> <small>(</small><span class="qd_saveAmountPercent">%</span><small>)</small></span>
                    #end
            </a>
             $product.BottomBuyAsynchronous
        </p>
    #else
        <p class="outOfStock">Produto Indisponível</p> 
    #end
</div>
#if ($product.IsInStock)
    <div class="shelfStampsWrapper">
        <a title="Clique para ver as condições de frete" class="highlightWrapper" rel="nofollow" href="#" data-reveal-id="frete-gratis-vitrine" data-animation="fade">$product.HightLight</a>
        <a title="$escapedName" class="highlightWrapper" rel="nofollow" href="$uri">$product.DiscountHightLight</a>
    </div>
#end

4
  • 1
    Qual é essa tag ? um label, um span, um input text ? Commented 15/09/2015 às 12:33
  • A tag que vai ter o valor retornado é um <span>, ambas as tags são <span> Commented 15/09/2015 às 12:55
  • Poderia postar o HTML dessa BOX? Para que possamos analisar melhor? Commented 15/09/2015 às 13:05
  • Então, não sei se irá entender muito bem, o html é baseado na plataforma que usamos aqui na empresa pra programar a loja, mas mesmo assim irei postar, editei a pergunta com o HTML Commented 15/09/2015 às 13:07

3 Respostas 3

3

Na imagem da pergunta o span possui texto, dessa forma para extrair apenas o conteúdo numérico da string pode usar expressão regular.

Não esqueça de converter o valor do produto para monetário no padrão internacional fazendo replace alterando , para .

Outra informação importante é converter os valores capturados para float antes de executar o cálculo.

var price = $('#price').html().replace('R$ ', '').replace(',', '.'); //trocar , por .
var discount = $('#info').html().replace(/[^0-9]/g, ''); //replace com regex
var cal; // váriaval que retornará o calculo

cal = (parseFloat(price) - (parseFloat(price) * (parseFloat((discount)) / 100))).toFixed(2);

var total = String(cal.replace('.', ','));

$('#amount').html('R$ ' + total);
.box {
  border: 1px solid #ccc;
  max-width: 50%;
  padding: 15px;
  color: #187586;
}

#amount {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Calcular desconto usando valor contido no texto</p>
<div class="box">
  <label>
valor do Sapato:
<span id="price">R$ 199,99</span>
</label>
  <br><br>
  <label>
Informações:
<span id="info">Valores a vista tem 5% desconto</span>
</label>
</div>
<br>
<br>
<br>
<label>
valor a vista
<span id="amount"></span>
</label>

2

Basicamente você pode fazer campos escondidos com a as variáveis desejadas, pelo que percebi você precisa do preço do produto e do valor do desconto, portanto ficaria assim:

<input type="hidden" value="$product.BestPrice" id="productValue" />
<input type="hidden" value="$product.DiscountHightLight" id="porcentageValue" />

e depois no javascript você faria assim (o calculo não ficou esclarecido):

var desconto = $("#productValue").val() / $("#porcentageValue").val() * 0,5;

e então colocar no campo ou span da porcentagem esse valor:

 $(".qd_saveAmountPercent").text(desconto);

ou

document.getElementsByClassName("qd_saveAmountPercent").value = desconto;
2
  • Beleza ! Vou testar ! Vlw! Commented 15/09/2015 às 14:04
  • beleza, só fiz uma edição que pra garantir que vai funcionar. Commented 15/09/2015 às 14:13
2

Tem como fazer isso sim, porém não é recomendável fazer isso tudo em JavaScript. Isso tem cara de regra de negócio, e regras de negócio não devem ficar expostas assim no JavaScript.

Mas, vamos lá. Para pegar qualquer texto de qualquer tag em jQuery você deve fazer assim.

$('span').text()

Isso retorna o texto da tag. Para manipular o valor do produto é o mesmo principio. Dê uma olhada nos seletores jQuery.

No seu caso, para editar o valor, pegue pela classe do elemento:

$('span.shelfNewPriceWrapper').text(); //pega o valor
$('span.shelfNewPriceWrapper').text(novoValor); //seta o valor

Aqui vai um exemplo de como fazer isso sem mexer em NADA do html ou da lógica da geração dos componentes - porém, seria MUITO melhor e MUITO mais seguro mudar como o desconto é calculado antes de ser exibido no HTML.

Fiz vários passos para ficar explicativo.

var expressaoNumero = /\d+/g; //expressão regular para pegar número

var numeros = $("p[class*='desconto-a-vista']").text().match(expressaoNumero); //retorna um array com todos os numeros que tem na string

var valorDesconto = parseFloat(numeros[0]); //aqui pega o valor do numero

var valorTexto = $("span.shelfNewPriceWrapper").text().replace('R$', '').replace(',', '.'); //pega o valor e muda para o formato americano para conversão

var valorTotal = parseFloat(valorTexto);

var valorComDesconto = (valorDesconto / 100) * valorTotal; valor calculador do desconto

Outro detalhe, esse exemplo funciona apenas se o valor exibido for em real, se for possível exibir em outras moedas, dólares, euro ou etc., recomendo FORTEMENTE que esse cálculo de desconto não seja feito unicamente no JavaScript manipulando as tags HTML.

5
  • Não sei se entendi muito bem haha E que assim preciso pegar o valor que está na flag de desconto 5% e multiplicar o valor do preço do produto que está em "verde" por 0,5 pra poder exibir o valor com o desconto a vista. Commented 15/09/2015 às 13:18
  • @JulioSantos consegue postas o HTML da tag de desconto? Ela não está presente no HTML que vc postou. Poste a tag que tem exatamente o que você quer, aquela que está em cinza na foto escrito "Desconto à vista 5%" Commented 15/09/2015 às 13:22
  • Olá Erick, a tag é gerada por esse Html: <a title="Clique para ver as condições de frete" class="highlightWrapper" rel="nofollow" href="#" data-reveal-id="frete-gratis-vitrine" data-animation="fade">$product.HightLight</a> Mais o retorno dela é esse: <p class="flag desconto-a-vista-5-">Desconto à vista 5%</p> Commented 15/09/2015 às 13:24
  • @JulioSantos veja a segunda edição Commented 15/09/2015 às 13:43
  • Beleza ! Vou testar ! Vlw! Commented 15/09/2015 às 14:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .