4

Estou criando uma tabela de preços para meu site, e preciso que quando a pessoa alterar o ciclo de pagamento, seja alterado o link <a> (CONTRATAR) para ir ao carrinho.

Exemplo: Se a pessoa selecionar o ciclo Mensal, o link mude para:

http://meusite.com/carrinho.php?produto=1&periodo=mensal

Se a pessoa escolher Trimestral, o link mude para:

http://meusite.com/carrinho.php?produto=1&periodo=trimestral

Se a pessoa escolher Semestral, o link mude para:

http://meusite.com/carrinho.php?produto=1&periodo=semestral

E se a pessoa escolher Anual, o link mude para:

http://meusite.com/carrinho.php?produto=1&periodo=anual

EXEMPLO NO JSFiddle

3 Respostas 3

4

Cara fiz umas alterações no seu Fiddle para funcionar da uma olhada lá. Achei um pouco confuso porque você ja estava utilizando o value dos options dos combos para controlar a escrita do valor, por isso tive que criar um atributo nos options chamado "data-opt" com os valores {M,T,S,A}. Outra alteração que tive que fazer foi colocar id nos links e em cada select criei um atributo data-link para fazer a correspondência de cada combo com o seu respectivo link.

Não foi o jeito mais correto de fazer mais esta funcionando.

4
  • Ficou muito bom, porém, esqueci de mencionar uma coisa... Cada tabela dessa é um produto diferente, ou seja, 3 tabelas diferentes. Então tem que fazer uma alteração nesse jQuery. Ex: http://meusite.com/carrinho.php?produto=1&periodo=mensal e http://meusite.com/carrinho.php?produto=2&periodo=mensal e http://meusite.com/carrinho.php?produto=3&periodo=mensal 7/09/2014 às 23:00
  • Alterei o link do Fiddle la na resposta, criei mais um atributo data-produto no combo, então para cada produto vc tem que alimentar esse atributo.
    – Euler01
    7/09/2014 às 23:06
  • Olha isso: jsfiddle.net/AlexandreBR/23met8eu/5 fiz algumas alterações no HTML que você esqueceu. Estavam todos como produto1 7/09/2014 às 23:11
  • Parece que ficou perfeito, vou fazer alguns testes, se tudo ocorrer bem, venho aqui e dou como melhor resposta. :D Obrigado! 7/09/2014 às 23:14
2

Acho que complicaram demais, o select deve lhe fornecer o valor que você realmente precisa, que é a periodicidade, e o preço é que deve vir como um data atribute, e apenas o valor sem formatação...

Recomendo algo assim:

HTML: (apenas as modificações)

Mudar o atributo value para a periodicidade e criar o atributo data-preco com o preço:

                <select class="select-ciclos" name="select">
                    <option value="mensal" selected="selected" data-preco="6,99">Mensal</option>
                    <option value="trimestral" data-preco="28,77">Trimestral -4%</option>
                    <option value="semestral" data-preco="54,14">Semestral -8%</option>
                    <option value="anual" data-preco="99,99">Anual -16%</option>
                </select>

Jquery:

$(".select-ciclos").heapbox({
    'onChange': function (value, src) {
        $(src).closest('.pricing-column').find('.trans').animate({
            opacity: 0
        }, 250, function () {
            $(this).children('span').html($(src).find("option:selected").attr("data-preco"));
            if (value == 'mensal') var ciclo = '/mês';
            if (value == 'anual') var ciclo = '/ano';
            $(this).html( $(this).html().replace(/<\/span>.*/g, '</span>' + (ciclo ? ciclo : '')) );
            $(this).animate({
                opacity: 1
            }, 250)
        })
        var elementolink = $(src).closest('.pricing-column').find('.pricing-footer a');
        var link = elementolink.attr("href");
        elementolink.attr("href", link.replace(/periodo\=(.+?)(&|$)/g, 'periodo=' + value + '&').replace(/&$/g, ''));
    }
});

Veja funcionando no JSFiddle

11
  • Seu Fiddle tem 2 problemas: na primeira tabela não muda a URL do link (Isso eu já arrumei: jsfiddle.net/z04dp5ds/1). Eu utilizei o código no value justamente por isso, porque quando você muda o ciclo de pagamento continua o nome "/mês" ao lado do preço (em branco). 10/09/2014 às 6:01
  • Exemplo - código que eu estava usando: <option value="<sup>R$</sup><span>6,99</span>/mês" 10/09/2014 às 6:05
  • Seu código ficou excepcional, porém, o único problema é esse "/mês, /ano, etc." 10/09/2014 às 6:08
  • @AlexandreLopes No primeiro link eu modifiquei propositalmente a ordem dos parâmetros (de: carrinho.php?produto=1&periodo=mensal para carrinho.php?periodo=mensal&produto=1) para testar a regex de substituição, e acabo de testar no IE, FF e CH e todos fazem a substituição corretamente, tem certeza que não esta mudando? que navegador você usa? Quanto ao /mês e /ano realmente não tinha percebido, acabo de editar a reposta com uma possível solução, o jsfiddle também foi editado. 10/09/2014 às 11:30
  • Agora a 1° tabela tá funcionando normal :D, é porque você esqueceu de colocar produto= no seu primeiro fiddle. Só que agora tem um probleminha @Jader os nomes "/mês, /ano, etc." devem ficar depois de </span> (6,99</span>/mês) ex: <div class="trans"><sup>R$</sup><span>6,99</span>/mês</div>. No seu exemplo fica tudo junto (6,99/mês): <div class="trans"><sup>R$</sup><span>6,99/mês</span></div> 10/09/2014 às 18:39
2

Você pode fazer assim:

$(".select-ciclos").heapbox({
'onChange':function(value,src){

    var mostrador = $(src).closest('.pricing-column').find('.trans');
    var val = value;
    mostrador.animate({
        opacity: 0
    }, 250, function () {
        if (val == "<sup>R$</sup><span>6,99</span>/mês")
        {
        $("#cont").attr("href", "http://meusite.com/carrinho.php?produto=1&periodo=mensal");
        }
        else if (val == "<sup>R$</sup><span>28,77</span>")
        {
        $("#cont").attr("href", "http://meusite.com/carrinho.php?periodo=trimestral");
        }
        else if (val == "<sup>R$</sup><span>54,14</span>")
        {
        $("#cont").attr("href", "http://meusite.com/carrinho.php?produto=1&periodo=semestral");
        }
        else if (val == "<sup>R$</sup><span>99,99</span>/ano")
        {
        $("#cont").attr("href", "http://meusite.com/carrinho.php?produto=1&periodo=anual");
        }
        mostrador.html(val);
        mostrador.animate({
            opacity: 1
        }, 250)
    })
    }
});


$(document).ready(function() {
   $(".select-ciclos").heapbox();
 });

Tambem tem que alterar o html do link "CONTRATAR", adicionando um id:

<a href="http://meusite.com/carrinho.php?periodo=mensal" id="cont">

JSFiddle

1
  • Cada tabela dessa é um produto diferente, ou seja, 3 tabelas diferentes. Então tem que fazer uma alteração nesse jQuery. Ex: http://meusite.com/carrinho.php?produto=1&periodo=mensal e http://meusite.com/carrinho.php?produto=2&periodo=mensal e http://meusite.com/carrinho.php?produto=3&periodo=mensal 7/09/2014 às 23:13

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 .