Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Bug nos tópicos
Hoje à(s) 11:58 am por Kyo Panda

» Niveis de usuarios
Hoje à(s) 11:58 am por Luiz

» Logo do fórum
Hoje à(s) 11:40 am por Fatalisss

» Caixa de resposta rápida nos tópicos
Hoje à(s) 11:35 am por Fatalisss

» Categoria do fórum
Hoje à(s) 11:14 am por PrisoN†BreaK

» Melhorar a aparência desta caixa
Hoje à(s) 11:13 am por Harleen

» Categorias
Hoje à(s) 11:02 am por Harleen

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
Fatalisss
 
Luiz
 
JulioPais
 
Holkis
 
Shek
 
APOllO
 
Forumpw
 
Flames
 

Quem está conectado
257 usuários online :: 9 usuários cadastrados, Nenhum Invisível e 248 Visitantes :: 2 Motores de busca

Ace, Ana Beatriz Do Vale, Holkis, Kyo Panda, MtX, Pedxz, Sapinho, Shek, Tiago João

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Ajustar Loja de HTML

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

Resolvido Ajustar Loja de HTML

Mensagem por IsmaelS. em 02/11/15, 05:13 pm

Detalhes da questão


Endereço do fórum: http://master-publicitario.forumeiros.com/
Versão do fórum: PhpBB3

Descrição


Olá!

Gostaria de uns ajustes na minha loja HTML o código que estou a usar é este:
Código:
<script type="text/javascript">
    texto = '';
  final = '';
      total = 0;
  $(function() {
 
 
 
 var produtos = {
 
    // Nota: Adicione uma vírgula ao final de cada nova entrada
 
    'Divulgação por Mensagem Privada': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/attachment_add.png',
        preco: '550',
        descricao: ''
    },
 
    'Divulgação por Assinatura': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/profile_edit.png',
        preco: '600',
        descricao: ''
    },
 
    'Divulgação no Final dos Tópicos': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/bar_chart_add.png',
        preco: '650',
        descricao: ''
    },

 
  };
 
 
 
 
  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': 'Master Publicitário - 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 /></td><td><ul><li class="" data-myprice="200" id="separetteus"><img src="http://i.imgur.com/qdiucii.png" /> Preço: 1500 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;}
  .warn {
  background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
  border: 1px solid #e599aa;
  margin: 3px 0;
  padding: 1em;
  }
  fieldset.form-div dt {
  padding: 5px 0;
  }
  fieldset.form-div dt {
  float: left;
  font: 15px bold arial, tahoma, georgia;
  width: 13em;
  }
  fieldset.form-div dd {
  margin-left: 10em;
  }
  fieldset.form-div dl:nth-child(odd) {
  background: #f5f8fa !important;
  }
  fieldset.form-div dl:nth-child(even) {
  background: #fff;
  }
  fieldset.form-div input {
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  outline: none;
  border: 1px solid #f0f0f0;
  padding: 5px;
  }
  #countitle {
  background: white;
  color: #D60B8C;
  border: 1px solid #e0e0e0;
  padding: 5px;
  border-radius: 3px;
  }
  fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
  fieldset.form-div dl:after {
  clear: both;
  content: '.';
  display: block;
  height: 0px;
  visibility: hidden;
  }
  #form-send .area .buttons {
  -moz-background-clip: padding;
  -moz-border-radius: 3px 3px 0 0;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-background-clip: padding-box;
  -webkit-border-radius: 3px 3px 0 0;
  -webkit-user-select: none;
  background: #f7f7f7;
  background-clip: padding-box;
  border: 1px solid silver;
  border-radius: 3px 3px 0 0;
  line-height: 0;
  width: 100%;
  overflow: hidden;
  padding: 3px 5px 2px;
  }
  #form-send .area {
  display: inline-block;
  min-height: 330px;
  z-index: 3;
  width: 63%;
  }
  #form-send .description {
  display: inline-block;
  z-index: 3;
  min-height: 200px;
  position: absolute;
  background: white;
  margin: 0 0 0 20px;
  line-height: 18px;
  color: #000000;
  font-family: Calibri, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  padding: 1em;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid silver;
  width: 17%;
  }
  #form-send .area .buttons .button2 {
  background: white;
  cursor: pointer;
  outline: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  padding: 3px;
  }
  #form-send .area .buttons .button2:hover {border-color: #707070;}
  #form-send .textarea_nc #textarea {
  min-height: 200px;
  color: #111;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  overflow: auto;
  border: 0;
  outline: none;
  width: 100%;
  }
  #form-send .btns {
  background: #f5f5f5;
  border-top: 1px solid #d7d7d7;
  padding: 10px;
  text-align: center;
  }
  #form-send .area .textarea_nc {
  background: white;
  min-height: 200px;
  cursor: se-resize;
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  overflow: hidden;
  padding: 3px 5px 2px;
  border: 1px solid silver;
  border-top: 0;
  width: 100%;
  }
  #pr-modal {
  position: fixed;
  background-color: #3e3e3e;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 100;
  opacity: 0.5;
  }
  #pr-questao {
  background-color: #464646;
  background-color: rgba(70, 70, 70, 0.6);
  padding: 4px;
  -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7 );
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: absolute;
  z-index: 101;
  width: 70%;
  left: 14.5%;
  top: 50%;
  margin-top: -58px;
  }
  #pr-questao .postm {
  background: #fff;
  border: 1px solid #eee;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  }
  #pr-questao .pr-clo {
  background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
  cursor: pointer;
  height: 16px;
  width: 16px;
  float: right;
  }
</style>  <div class="warn">
Ao realizar compras na nossa loja tem alguns aspectos fundamentais a ter conhecimento:<br><br>
• Antes de efetuar a sua compra leia a seguinte <strong><a href="#">FAQ</a></strong> para não ter dúvidas;<br>
• Só poderá comprar apenas <strong>um tipo de divulgação</strong>;<br>
• Depois o tempo de divulgação ter expirado, só poderá realizar novamente outra compra passado <strong>1 mês</strong> da última compra;<br><br>
Caso tenha alguma dúvida contate a equipa de moderação.
</div><br><div class="daemon">
  <span style="color: white;font-size: 28px;font-weight: bold;">Master Publicitário - 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>

Basicamente queria agora retirar aquele campo que esta em vermelho "Texto + Cor do rank" sem danificar o código porque já estive a tentar e não consegui:


E depois queria colocar por baixo dos títulos como "Divulgação por Mensagem Privada; Divulgação por Assinatura; Divulgação no Final dos Tópicos" uma pequena descrição por baixo algo como:

- http://ajuda.forumeiros.com/t99911-addon-criar-loja-de-icones

Deixo aqui a página HTML da Loja: http://master-publicitario.forumeiros.com/h1-master-publicitario-loja

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Ajustar Loja de HTML

Mensagem por Ace em 02/11/15, 06:20 pm

Olá,

Então você quer tirar totalmente o Texo + cor e deixar Divulgação no Final dos Tópicos como a última opção, certo? E depois a descrição você já pode adicionar no espaço correspondente. Apenas me confirme se é isso mesmo que eu entendi que eu finalizo o código.

Att.
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11603

http://ajuda.forumeiros.com

Resolvido Re: Ajustar Loja de HTML

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

@Ace quero retirar como esta na print aquele campo do "Texto + Cor" e colocar em cada título por baixo uma pequena descrição percebeu?

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/
  • 0

Resolvido Re: Ajustar Loja de HTML

Mensagem por Wamki em 02/11/15, 07:02 pm

@Edit:
Altere pra este código
Código:
<script type="text/javascript">
    texto = '';
  final = '';
      total = 0;
  $(function() {
 
 
 
 var produtos = {
 
    // Nota: Adicione uma vírgula ao final de cada nova entrada
 
    'Divulgação por Mensagem Privada': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/attachment_add.png',
        preco: '550',
        descricao: ''
    },
 
    'Divulgação por Assinatura': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/profile_edit.png',
        preco: '600',
        descricao: ''
    },
 
    'Divulgação no Final dos Tópicos': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/bar_chart_add.png',
        preco: '650',
        descricao: ''
    },

 
  };
 
 
 
 
  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': 'Master Publicitário - Pedido da Loja',
                'message': texto
    }).done(function() {
      alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
    });

  }     
</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;}
  .warn {
  background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
  border: 1px solid #e599aa;
  margin: 3px 0;
  padding: 1em;
  }
  fieldset.form-div dt {
  padding: 5px 0;
  }
  fieldset.form-div dt {
  float: left;
  font: 15px bold arial, tahoma, georgia;
  width: 13em;
  }
  fieldset.form-div dd {
  margin-left: 10em;
  }
  fieldset.form-div dl:nth-child(odd) {
  background: #f5f8fa !important;
  }
  fieldset.form-div dl:nth-child(even) {
  background: #fff;
  }
  fieldset.form-div input {
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  outline: none;
  border: 1px solid #f0f0f0;
  padding: 5px;
  }
  #countitle {
  background: white;
  color: #D60B8C;
  border: 1px solid #e0e0e0;
  padding: 5px;
  border-radius: 3px;
  }
  fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
  fieldset.form-div dl:after {
  clear: both;
  content: '.';
  display: block;
  height: 0px;
  visibility: hidden;
  }
  #form-send .area .buttons {
  -moz-background-clip: padding;
  -moz-border-radius: 3px 3px 0 0;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-background-clip: padding-box;
  -webkit-border-radius: 3px 3px 0 0;
  -webkit-user-select: none;
  background: #f7f7f7;
  background-clip: padding-box;
  border: 1px solid silver;
  border-radius: 3px 3px 0 0;
  line-height: 0;
  width: 100%;
  overflow: hidden;
  padding: 3px 5px 2px;
  }
  #form-send .area {
  display: inline-block;
  min-height: 330px;
  z-index: 3;
  width: 63%;
  }
  #form-send .description {
  display: inline-block;
  z-index: 3;
  min-height: 200px;
  position: absolute;
  background: white;
  margin: 0 0 0 20px;
  line-height: 18px;
  color: #000000;
  font-family: Calibri, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  padding: 1em;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid silver;
  width: 17%;
  }
  #form-send .area .buttons .button2 {
  background: white;
  cursor: pointer;
  outline: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  padding: 3px;
  }
  #form-send .area .buttons .button2:hover {border-color: #707070;}
  #form-send .textarea_nc #textarea {
  min-height: 200px;
  color: #111;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  overflow: auto;
  border: 0;
  outline: none;
  width: 100%;
  }
  #form-send .btns {
  background: #f5f5f5;
  border-top: 1px solid #d7d7d7;
  padding: 10px;
  text-align: center;
  }
  #form-send .area .textarea_nc {
  background: white;
  min-height: 200px;
  cursor: se-resize;
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  overflow: hidden;
  padding: 3px 5px 2px;
  border: 1px solid silver;
  border-top: 0;
  width: 100%;
  }
  #pr-modal {
  position: fixed;
  background-color: #3e3e3e;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 100;
  opacity: 0.5;
  }
  #pr-questao {
  background-color: #464646;
  background-color: rgba(70, 70, 70, 0.6);
  padding: 4px;
  -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7 );
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: absolute;
  z-index: 101;
  width: 70%;
  left: 14.5%;
  top: 50%;
  margin-top: -58px;
  }
  #pr-questao .postm {
  background: #fff;
  border: 1px solid #eee;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  }
  #pr-questao .pr-clo {
  background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
  cursor: pointer;
  height: 16px;
  width: 16px;
  float: right;
  }
</style> 
<div class="warn">
    Ao realizar compras na nossa loja tem alguns aspectos fundamentais a ter conhecimento:<br /><br />• Antes de efetuar a sua compra leia a seguinte <strong><a href="#">FAQ</a></strong> para não ter dúvidas;<br />• Só poderá comprar apenas <strong>um tipo de divulgação</strong>;<br />• Depois o tempo de divulgação ter expirado, só poderá realizar novamente outra compra passado <strong>1 mês</strong> da última compra;<br /><br />Caso tenha alguma dúvida contate a equipa de moderação.
</div><br />
<div class="daemon">
     <span style="color: white;font-size: 28px;font-weight: bold;">Master Publicitário - 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>

Seria este resultado:
http://supersupport.forumeiros.com/h1-lojajaja
avatar

Wamki
Usuário avançado

Masculino
Inscrito dia : 22/10/2015
Mensagens : 332
Pontos Ativos : 450

http://infostyle.forumbrasil.net

Resolvido Re: Ajustar Loja de HTML

Mensagem por IsmaelS. em 02/11/15, 07:30 pm

Resultou mas falta colocar as descrições por baixo é possível?

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/
  • 0

Resolvido Re: Ajustar Loja de HTML

Mensagem por Wamki em 02/11/15, 07:33 pm

Olá senhor,
Assim que deseja?
http://supersupport.forumeiros.com/h1-lojajaja
Se quer assim, altere o código pra baixo:
Código:
<script type="text/javascript">
    texto = '';
  final = '';
      total = 0;
  $(function() {
 
 
 
 var produtos = {
 
    // Nota: Adicione uma vírgula ao final de cada nova entrada
 
    'Divulgação por Mensagem Privada': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/attachment_add.png',
        preco: '550',
        descricao: 'testeeeeeeeeeeee'
    },
 
    'Divulgação por Assinatura': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/profile_edit.png',
        preco: '600',
        descricao: 'testeeeeeeeeeeeeeeee'
    },
 
    'Divulgação no Final dos Tópicos': {
        icone: 'https://cdn2.iconfinder.com/data/icons/UII_Icons/48x48/bar_chart_add.png',
        preco: '650',
        descricao: 'testeeeeeeeeeeee'
    },

 
  };
 
 
 
 
  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': 'Master Publicitário - Pedido da Loja',
                'message': texto
    }).done(function() {
      alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
    });

  }     
</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;}
  .warn {
  background: #f3e3e6 url(http://i55.servimg.com/u/f55/18/71/50/00/highli10.png) repeat-x 0 0;
  border: 1px solid #e599aa;
  margin: 3px 0;
  padding: 1em;
  }
  fieldset.form-div dt {
  padding: 5px 0;
  }
  fieldset.form-div dt {
  float: left;
  font: 15px bold arial, tahoma, georgia;
  width: 13em;
  }
  fieldset.form-div dd {
  margin-left: 10em;
  }
  fieldset.form-div dl:nth-child(odd) {
  background: #f5f8fa !important;
  }
  fieldset.form-div dl:nth-child(even) {
  background: #fff;
  }
  fieldset.form-div input {
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  outline: none;
  border: 1px solid #f0f0f0;
  padding: 5px;
  }
  #countitle {
  background: white;
  color: #D60B8C;
  border: 1px solid #e0e0e0;
  padding: 5px;
  border-radius: 3px;
  }
  fieldset.form-div dl {padding: 11px;border-bottom: 1px solid #F3F3F3;}
  fieldset.form-div dl:after {
  clear: both;
  content: '.';
  display: block;
  height: 0px;
  visibility: hidden;
  }
  #form-send .area .buttons {
  -moz-background-clip: padding;
  -moz-border-radius: 3px 3px 0 0;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-background-clip: padding-box;
  -webkit-border-radius: 3px 3px 0 0;
  -webkit-user-select: none;
  background: #f7f7f7;
  background-clip: padding-box;
  border: 1px solid silver;
  border-radius: 3px 3px 0 0;
  line-height: 0;
  width: 100%;
  overflow: hidden;
  padding: 3px 5px 2px;
  }
  #form-send .area {
  display: inline-block;
  min-height: 330px;
  z-index: 3;
  width: 63%;
  }
  #form-send .description {
  display: inline-block;
  z-index: 3;
  min-height: 200px;
  position: absolute;
  background: white;
  margin: 0 0 0 20px;
  line-height: 18px;
  color: #000000;
  font-family: Calibri, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  padding: 1em;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid silver;
  width: 17%;
  }
  #form-send .area .buttons .button2 {
  background: white;
  cursor: pointer;
  outline: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
  padding: 3px;
  }
  #form-send .area .buttons .button2:hover {border-color: #707070;}
  #form-send .textarea_nc #textarea {
  min-height: 200px;
  color: #111;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  overflow: auto;
  border: 0;
  outline: none;
  width: 100%;
  }
  #form-send .btns {
  background: #f5f5f5;
  border-top: 1px solid #d7d7d7;
  padding: 10px;
  text-align: center;
  }
  #form-send .area .textarea_nc {
  background: white;
  min-height: 200px;
  cursor: se-resize;
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  overflow: hidden;
  padding: 3px 5px 2px;
  border: 1px solid silver;
  border-top: 0;
  width: 100%;
  }
  #pr-modal {
  position: fixed;
  background-color: #3e3e3e;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 100;
  opacity: 0.5;
  }
  #pr-questao {
  background-color: #464646;
  background-color: rgba(70, 70, 70, 0.6);
  padding: 4px;
  -webkit-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.7 );
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: absolute;
  z-index: 101;
  width: 70%;
  left: 14.5%;
  top: 50%;
  margin-top: -58px;
  }
  #pr-questao .postm {
  background: #fff;
  border: 1px solid #eee;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  }
  #pr-questao .pr-clo {
  background: url(http://i.imgur.com/qRr3WvV.png) no-repeat;
  cursor: pointer;
  height: 16px;
  width: 16px;
  float: right;
  }
</style> 
<div class="warn">
     Ao realizar compras na nossa loja tem alguns aspectos fundamentais a ter conhecimento:<br /><br />• Antes de efetuar a sua compra leia a seguinte <strong><a href="#">FAQ</a></strong> para não ter dúvidas;<br />• Só poderá comprar apenas <strong>um tipo de divulgação</strong>;<br />• Depois o tempo de divulgação ter expirado, só poderá realizar novamente outra compra passado <strong>1 mês</strong> da última compra;<br /><br />Caso tenha alguma dúvida contate a equipa de moderação.
</div><br />
<div class="daemon">
       <span style="color: white;font-size: 28px;font-weight: bold;">Master Publicitário - 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 onclick="buyItems()" value="Concluir compra" type="button" />
</div>
Cumprimentos.
Cutie Tuteur
avatar

Wamki
Usuário avançado

Masculino
Inscrito dia : 22/10/2015
Mensagens : 332
Pontos Ativos : 450

http://infostyle.forumbrasil.net

Resolvido Re: Ajustar Loja de HTML

Mensagem por IsmaelS. em 02/11/15, 07:34 pm

Perfeito amigo obrigado e resolvido.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2768
Pontos Ativos : 3863

http://master-publicitario.forumeiros.com/

Resolvido Re: Ajustar Loja de HTML

Mensagem por Fraise em 03/11/15, 05:16 pm

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

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

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