Campo especial na Loja HTML

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Campo especial na Loja HTML

Mensagem por IsmaelS. em 22/05/15, 05:19 pm

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: http://ajuda.forumeiros.com/t99911-addon-criar-loja-de-icones

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. em 24/05/15, 08:34 am


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Campo especial na Loja HTML

Mensagem por Diapt em 24/05/15, 09:45 am

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

Diapt
Nível 8

Masculino
Inscrito dia : 24/05/2015
Mensagens : 128
Pontos Ativos : 190

Ver perfil do usuário http://www.temas.forumeiros.com

Resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. em 24/05/15, 10:17 am

Olá!

Expliquei bem, mas queria deixar desta forma +/-:

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Campo especial na Loja HTML

Mensagem por Diapt em 24/05/15, 10:21 am

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
avatar

Diapt
Nível 8

Masculino
Inscrito dia : 24/05/2015
Mensagens : 128
Pontos Ativos : 190

Ver perfil do usuário http://www.temas.forumeiros.com

Resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. em 24/05/15, 10:29 am

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.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Campo especial na Loja HTML

Mensagem por Daemon em 24/05/15, 12:29 pm

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


Até!
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1688

Ver perfil do usuário http://bestskins.forumeiros.com/

Resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. em 24/05/15, 12:43 pm

@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!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. em 26/05/15, 02:29 pm


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. em 28/05/15, 02:34 pm


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. em 31/05/15, 11:00 am


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. em 02/06/15, 02:51 pm


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. em 05/06/15, 04:36 am


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. em 08/06/15, 02:27 pm


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/
  • 0

Resolvido Re: Campo especial na Loja HTML

Mensagem por MateusA em 11/06/15, 02:36 pm

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:



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
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt
  • 0

Resolvido Re: Campo especial na Loja HTML

Mensagem por IsmaelS. em 11/06/15, 03:10 pm

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ê

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Campo especial na Loja HTML

Mensagem por Rafael em 11/06/15, 03:16 pm

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

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

Ver perfil do usuário http://maisforum.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum