Campo especial na Loja HTML

5 participantes

Ir para baixo

Tópico resolvido Campo especial na Loja HTML

Mensagem por IsmaelS. 22.05.15 21:19

Olá!

Eu quero colocar uma função no campo de "Texto + Cor de Rank" ou seja colocar um campo de texto com um limite de de caracteres (10) e queria colocar um seleccionador de cor ou seja apenas 5 cores disponíveis poderão colocar as que desejarem depois eu altero.

Depois do utilizador concluir a compra, na mensagem privada apareça:

Texto + Cor do Rank: TEXTO + #????????

Código da Loja:
Código:
<script type="text/javascript">
  $(function() {
  var produtos = {
  
    // Nota: Adicione uma vírgula ao final de cada nova entrada
  
     'Mascote - Nerd': {
         icone: 'http://png-4.findicons.com/files/icons/2169/picnic/70/todo8.png',
         preco: '200',
         descricao: 'Stars WHOA'
     },
  
     'Mascote - TV': {
         icone: 'http://png-2.findicons.com/files/icons/2169/picnic/70/mxtube.png',
         preco: '250',
         descricao: 'Capacete de batalha'
     },
  
     'Mascote - Jedi': {
         icone: 'http://png-5.findicons.com/files/icons/2169/picnic/70/jedi.png',
         preco: '250',
         descricao: 'Pokemón tipo fogo'
     },
  
     'Mascote - Blue': {
         icone: 'http://png-5.findicons.com/files/icons/2169/picnic/70/categories2.png',
         preco: '250',
         descricao: 'Pokemón tipo fogo'
     },
  
  'Mascote - I ❤ SD!': {
    icone: 'http://i19.servimg.com/u/f19/18/07/03/67/sdlove11.png',
    preco: '200',
    descricao: 'Stars WHOA'
},
  
    'Texto + Cor do Rank': {
    icone: 'http://i19.servimg.com/u/f19/18/07/03/67/rt10.png',
    preco: '200',
    descricao: 'Stars WHOA'
}
  
  
  };
  
  
  var content = $('.content .itens');
      $.each(produtos, function (key, value) {
          content.append(
           '<tr class="item">' +
           '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
           '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
           '  <td>' +
           '   <ul>' +
           '   <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
           '   <br />' +
           '   <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
      '   </ul>' +
           '  </td>' +
           '</tr>'
          );
      });
  });
  var $total = 0;
  function addToCart(item) {
    var getItem = $(item).parents('.item').find('.nome').text();
    var getPrice = parseFloat($(item).parents('.item').find('.preco').attr('data-myprice'));
    $total += getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
    $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseFloat($(item).attr('data-myprice'));
    $total -= getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
    $(item).remove();
  }
  function resetItems() {
    $('.cart').empty();
    $total = 0;
    $('.total').empty();
  }
  function buyItems() {
    if(!$('.cart').is(':empty')) {
    $.ajax({
     url: '/u' + _userdata.user_id,
     type: 'GET',
     success: function(responseHtml)
     {
      var myPoints = parseInt($('#field_id-13 dd', responseHtml).text());
      var checkTotal = parseInt($('.totalVal').text());
      if(myPoints > checkTotal) {
      var texto = '';
      var total = 0;
      $('.item-cart').each(function() {
        var item = $(this).text();
        var preco = parseInt($(this).attr('data-myprice'));
        texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
        //add line break at the end
        + ':[/b] ' + preco + " pontos\n";
        total += preco;
      });
      texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
      $.post('/privmsg', {
             'mode': 'post',
             'post': '1',
             'folder': 'inbox',
             'usergroup': '1',
             'subject': 'Pedido de Loja - SD',
             'message': texto
      }).done(function() {
         alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
      });
      } else {
         alert("Você não tem pontos suficiente para efetuar a compra");
      }
     },
     error: function(err)
     {
        console.log("AJAX error in request (Store points)");
     }
    });
    } else {
       alert("O carrinho está vazio");
    }
  }
</script>
<style type="text/css">
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total {font-size: 13px;margin-top: 5px;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
  <span style="color: white;font-size: 20px;font-weight: bold;">Suporte Design - Loja</span>
</div>
<table class="content">
       <tbody class="itens"></tbody>
</table>
<div id="cart">
  <div class="cart"></div>
  <span class="total"></span>
</div>
<div class="daemon">
  <input type="button" value="Concluir Compra" onclick="buyItems()" />
  <input type="button" value="Resetar Ítens" onclick="resetItems()" />
</div>

Basicamente a Loja é deste tutorial: https://ajuda.forumeiros.com/t99911-addon-criar-loja-de-icones
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. 24.05.15 12:34

avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por Diapt 24.05.15 13:45

Saudações,
Não entendi direito querido usuário IsmaelS.
Dá pra explicar direito com um preview.
Até,
Louco
Diapt
Diapt
***

Membro desde : 24/05/2015
Mensagens : 128
Pontos : 190

http://www.temas.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. 24.05.15 14:17

Olá!

Expliquei bem, mas queria deixar desta forma +/-:
Campo especial na Loja HTML Vcv1a9
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por Diapt 24.05.15 14:21

Saudações,
Você já viu este efeito em um lugar?
Poderá me mostrar pra tentar no meu painel de programação.
Se não viu.
Então eu acho simplesmente não existe uma lista de cores só que você querem.
Se já viu.
Acho que é JAVASCRIPT.
Até. Em choque Em choque
Diapt
Diapt
***

Membro desde : 24/05/2015
Mensagens : 128
Pontos : 190

http://www.temas.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. 24.05.15 14:29

Vughis escreveu:Saudações,
Você já viu este efeito em um lugar?
Poderá me mostrar pra tentar no meu painel de programação.
Se não viu.
Então eu acho simplesmente não existe uma lista de cores só que você querem.
Se já viu.
Acho que é JAVASCRIPT.
Até. Em choque Em choque

Olá!

Não ainda não vi isso, por isso é que desejava esse efeito.
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por Daemon 24.05.15 16:29

Você poderia me dizer como gostaria que o código respondesse? Por ex: "Texto x + Cor y"? Algo desse tipo?


Até!
Daemon
Daemon
Super Membro

Membro desde : 02/03/2012
Mensagens : 1132
Pontos : 1825

http://bestskins.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. 24.05.15 16:43

Daemon escreveu:Você poderia me dizer como gostaria que o código respondesse? Por ex: "Texto x + Cor y"? Algo desse tipo?


Até!

Olá!

Sim amigo pode ser assim!
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. 26.05.15 18:29

avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. 28.05.15 18:34

avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. 31.05.15 15:00

avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. 02.06.15 18:51

avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. 05.06.15 8:36

avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. 08.06.15 18:27

avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por MateusA 11.06.15 18:36

Boa tarde IsmaelS!

Eu confesso que foi um tanto "chato" de se fazer esse seu código, mas enfim... Eu creio que está tudo ok.
Vou lhe explicar: eu removi o modo que o Daemon projetou, neste último campo, assim, ele será posto por javascript! Sendo posto por javascript, eu removi as funções dele nativas(você deve saber quais) e assim, tive que recria-las etc... Uma coisa essencial para não bugar o código, foi implantar o if que, checa se o rank já se encontra lá, assim(supondo que você não deixe a pessoa comprar dois ranks, afinal, é impossível), a loja não buga.

Esse foi o código final:
Código:
 $(window).load(function(){  $('.item:last').after('<tr class="item"><td class="icone" style="width: 10%;"><img src="http://i19.servimg.com/u/f19/18/07/03/67/rt10.png" /></td><td style="width: 50%;"><strong  id="rank">Texto + Cor do rank</strong><br /><br />Star WHOA</td><td><ul><li class="" data-myprice="200" id="separetteus"><img src="http://i.imgur.com/qdiucii.png" /> Preço: 200 pontos</li><br /><li><input type="button" id="mateushsop" onclick="" value="Adicionar ao carrinho" /></li></ul></td></tr>');   
 
 $('#main-content > table > tbody > tr:nth-child(6) > td:nth-child(3) > ul').prepend('<input type=color name="teste" style="padding: 1px;width: 25px;border: 1px solid gray;background: none"></input><input type="text" id="rankteus" value=""></input>'); 
 $('#main-content > table > tbody > tr:nth-child(6) > td:nth-child(3) > ul > li:nth-child(5) > input[type="button"]').on('click', function(){
    if($('#itemteus').text() == "Texto + Cor do rank"){alert("Remova o item antes de comprar novamente!");
    return false}else {
    var ttt = $('input[type="color"]').val();
    var tt = $('#rankteus').val();
    texto += '\n\n [b]Texto + Cor do rank:[/b] Cor: ' + ttt + ' Rank: ' +  tt + '\n'; 
    }
 });
      
      
      $(document).on('click', '#mateushsop', function(){
         
              $('.cart').append('<span class="item-cart2" id="itemteus" onclick="$(this).remove(); $total -= 200;">Texto + Cor do rank</span>');
           $total += 200;
         setInterval(function(){  $('.total').html('Valor total: ' + $total + ' pontos');}, 1000);
                              
         
         });
         

         
         
         
         
   

   
         
   

     });

Ficou bem complexo, então, se quiser que eu mesmo edito, você pode fornecer.
Capturas screen:
Campo especial na Loja HTML UwdOTgH
Campo especial na Loja HTML C20Bow5

Código final(página HTML):
Código:
<script type="text/javascript">
    texto = '';
  final = '';
      total = 0;
  $(function() {
 
 
 
 var produtos = {
 
    // Nota: Adicione uma vírgula ao final de cada nova entrada
 
    'Mascote - Nerd': {
        icone: 'http://png-4.findicons.com/files/icons/2169/picnic/70/todo8.png',
        preco: '200',
        descricao: 'Stars WHOA'
    },
 
    'Mascote - TV': {
        icone: 'http://png-2.findicons.com/files/icons/2169/picnic/70/mxtube.png',
        preco: '250',
        descricao: 'Capacete de batalha'
    },
 
    'Mascote - Jedi': {
        icone: 'http://png-5.findicons.com/files/icons/2169/picnic/70/jedi.png',
        preco: '250',
        descricao: 'Pokemón tipo fogo'
    },
 
    'Mascote - Blue': {
        icone: 'http://png-5.findicons.com/files/icons/2169/picnic/70/categories2.png',
        preco: '250',
        descricao: 'Pokemón tipo fogo'
    },
 
  'Mascote - I ❤ SD!': {
    icone: 'http://i19.servimg.com/u/f19/18/07/03/67/sdlove11.png',
    preco: '200',
    descricao: 'Stars WHOA'
}
 
  };
 
 
 
 
  var content = $('.content .itens');
      $.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
          '  <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
          '  <td>' +
          '  <ul>' +
          '  <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
      '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var $total = 0;
  function addToCart(item) {
    var getItem = $(item).parents('.item').find('.nome').text();
    var getPrice = parseFloat($(item).parents('.item').find('.preco').attr('data-myprice'));
    $total += getPrice;
    $('.total').html('Valor total: ' + $total + ' pontos');
    $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseFloat($(item).attr('data-myprice'));
    $total -= getPrice;
    $('.total').html('Valor total: ' + $total + ' pontos');
    $(item).remove();
  }
  function buyItems() {


    $('.item-cart').each(function() {
      var item = $(this).text();
      var preco = parseInt($(this).attr('data-myprice'));
      texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
      //add line break at the end
      + ':[/b] ' + preco + " pontos\n";
      total += preco;
    });
 final = texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
    jQuery.post('/privmsg', {
                'mode': 'post',
                'post': '1',
                'folder': 'inbox',
                'usergroup': '1',
                'subject': 'Pedido da loja',
                'message': texto
    }).done(function() {
      alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
    });

  }
 
  $(window).load(function(){  $('.item:last').after('<tr class="item"><td class="icone" style="width: 10%;"><img src="http://i19.servimg.com/u/f19/18/07/03/67/rt10.png" /></td><td style="width: 50%;"><strong  id="rank">Texto + Cor do rank</strong><br /><br />Star WHOA</td><td><ul><li class="" data-myprice="200" id="separetteus"><img src="http://i.imgur.com/qdiucii.png" /> Preço: 200 pontos</li><br /><li><input type="button" id="mateushsop" onclick="" value="Adicionar ao carrinho" /></li></ul></td></tr>');   
 
 $('#main-content > table > tbody > tr:nth-child(6) > td:nth-child(3) > ul').prepend('<input type=color name="teste" style="padding: 1px;width: 25px;border: 1px solid gray;background: none"></input><input type="text" id="rankteus" value=""></input>'); 
 $('#main-content > table > tbody > tr:nth-child(6) > td:nth-child(3) > ul > li:nth-child(5) > input[type="button"]').on('click', function(){
    if($('#itemteus').text() == "Texto + Cor do rank"){alert("Remova o item antes de comprar novamente!");
    return false}else {
    var ttt = $('input[type="color"]').val();
    var tt = $('#rankteus').val();
    texto += '\n\n [b]Texto + Cor do rank:[/b] Cor: ' + ttt + ' Rank: ' +  tt + '\n'; 
    }
 });
      
      
      $(document).on('click', '#mateushsop', function(){
         
              $('.cart').append('<span class="item-cart2" id="itemteus" onclick="$(this).remove(); $total -= 200;">Texto + Cor do rank</span>');
           $total += 200;
         setInterval(function(){  $('.total').html('Valor total: ' + $total + ' pontos');}, 1000);
                              
         
         });
         

         
         
         
         
   

   
         
   

     });
 
 
</script>
<style type="text/css">
table.content {
  background: #fafafa;
  border: 1px solid #eaeaea;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome, #rank {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
  height: 50px;
  width: 50px;
}
.item-cart {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
  .item-cart2 {
  background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
  margin: 3px 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  padding-left: 25px;
  color: white;
  border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
  background: #333;
  text-align: center;
  padding: 10px;
}
#cart {
  background: #f0f0f0;
  border: 1px solid #e0e0e0;
  margin-top: 5px;
  padding: 5px;
}
.cart {
  background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
  min-height: 50px;
  padding-left: 55px;
  border: 1px solid #ddd;
}
.total {font-size: 13px;margin-top: 5px;display: block;font-style: italic;font-weight: bold;}
</style><div class="daemon">
  <span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
      <tbody class="itens"></tbody>
</table><div id="cart">
  <div class="cart"></div>
  <span class="total"></span>
</div><div class="daemon">
  <input type="button" value="Concluir compra" onclick="buyItems()" />
</div>

Execute o código acima na página e verifique. o\


Atenciosamente,
MateusA. Muito feliz
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. 11.06.15 19:10

Olá!

Amigo não sabe o quanto agradeço sinceramente não estava mesmo a espera daquele seleccionador de cor ficou mais que perfeito!! Muito obrigado amigo Eu amo você
avatar
IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Campo especial na Loja HTML

Mensagem por RafaelS. 11.06.15 19:16

Obrigado @MateusA Feliz

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos