Campo especial na Loja HTML

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

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

Olá!

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

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é.

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é.

Olá!

Não ainda não vi isso, por isso é que desejava esse efeito.

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


Até!

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!

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.

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

Obrigado @MateusA