Este código no rodapé

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

Atendido / Resolvido Este código no rodapé

Mensagem por Omaiyomai em 21.02.18 12:23

Detalhes da questão


Endereço do fórum: http://roleplayarkbr.forumeiros.com
Versão do fórum: phpBB2

Descrição


Olá, bom dia.

Como faço para inserir este código no rodapé do forum? (Não necessariamente no rodapé, mas em widget não consigo coloca-lo no final do forum, só nas laterais...)

Código:
<script type="text/javascript">
  $(function() {
  var produtos = {
 
    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
   
    'Doação': {
        icone: 'https://pt.seaicons.com/wp-content/uploads/2016/04/coins-icon.png',
        preco: '5',
        descricao: 'Você pode doar R$5,00 ou mais para ajudar a manter o servidor. Receberá uma Tag no forum de Colaborador, e seu nome ficará em destaque.'
    },
 
    'Tek Armor of Mastercraft': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/2/21/Tek_Chestpiece.png',
        preco: '12',
        descricao: 'Tek Armor é uma armadura Fabrica pelos Hotulhems. Uma armadura que oferece a melhor proteção física e proteção moderada contra o frio. Quando usada com o conjunto Tek completo, ele proporcionará a melhor proteção contra o calor e o frio, devido ao bônus definido.'
    },
 
    'Lymantria': {
        icone: 'http://www.dododex.com/media/creature/lymantria.png',
        preco: '20',
        descricao: 'Uma das grande invenções do Dr. Julm. Em combate a Lymantria lança uma névoa verde de esporos, que retarda seu inimigo, e drena a resistência em 90%. Enquanto seu oponente esta distraído, ela tem a chance de escapar.'
    },

    'Flame Arrow (3 unidades)': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/thumb/d/dc/Flame_Arrow_%28Scorched_Earth%29.png/128px-Flame_Arrow_%28Scorched_Earth%29.png',
        preco: '3',
        descricao: 'Oferece danos na flecha regulares no impacto, causando danos de queimaduras por cerca de 8 segundos, causando aproximadamente 22 pontos por segundo em Humanos. Muito eficaz contra grandes criaturas e carnívoros. Oferece danos reduzidos aos herbívoros.'
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
 
 
  };
 
 
  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 + ' Reais</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 = parseInt($(item).parents('.item').find('.preco').attr('data-myprice'));
    $total += getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    $('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt($(item).attr('data-myprice'));
    $total -= getPrice;
    $('.total').html('Valor total: <span class="totalVal">' + $total + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    $(item).remove();
  }
  function resetItems() {
    $('.cart').empty();
    $total = 0;
    $('.total').empty();
  }
  function buyItems() {
    if(!$('.cart').is(':empty')) {
      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 + " reais\n";
        total += preco;
      });
      texto += '\n\n[b]Valor total:[/b] ' + total + ' reais';
      $.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Dentro de 24h a Administração estará lhe enviando por mensagem privada no fórum ou pelo seu email de cadastro, o link para efetuar o pagamento.");
        resetItems();
      });
    } 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;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
                   <span style="color: white;font-size: 28px;font-weight: bold;">Ofertas do laboratório do Dr. Julm</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" />  <input onclick="resetItems()" value="Esvaziar carrinho" type="button" />
</div>
Omaiyomai

Omaiyomai
Nível 10

Masculino
Inscrito dia : 21/11/2011
Mensagens : 259
Pontos Ativos : 411

Ver perfil do usuário http://http://roleplayarkbr.forumeiros.com https://www.facebook.com/brucelee.leal

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Chanp em 21.02.18 15:33

Olá,

Isso pode ser feito com códigos CSS ou Javascript. Tentarei te trazer uma solução.

o/


Última edição por Chanp em 21.02.18 15:51, editado 2 vez(es)
Chanp

Chanp
Nível 9

Masculino
Inscrito dia : 04/01/2018
Mensagens : 195
Pontos Ativos : 228

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

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Omaiyomai em 21.02.18 15:46

Com CSS? mas ai é extremamente difícil né ? kkkkk
Omaiyomai

Omaiyomai
Nível 10

Masculino
Inscrito dia : 21/11/2011
Mensagens : 259
Pontos Ativos : 411

Ver perfil do usuário http://http://roleplayarkbr.forumeiros.com https://www.facebook.com/brucelee.leal

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Chanp em 21.02.18 15:51

Olá novamente,
Creio que isso solucionará seu problema.

Aceda à:

Painel de Controle Seta Módulos Seta HTML & Javascript Seta Gestão dos Códigos Javascript

E crie um novo código Javascript.
Título: À seu critério.
Investimento: No índice.
Código:

Código:
$(function(){
    var nomedoforum = ''; // {NOME COMPLETO DO WIGET}
    $('.module:contains("' + nomedoforum + '")').css('width', '80%').detach().appendTo('.forabg');

Obs: Onde tem escrito {NOME COMPLETO DO WIDGET}, o senhor deverá apagar e colocar como solicitado na frase, o nome por completo do widget em que o código está salvo.

Resulta?
o/

---

CSS? kkk. Isso é difícil, né?

É não!
Apenas é complicado de entender pois CSS não tem uma certa lógica, rs.


Última edição por Chanp em 21.02.18 16:15, editado 1 vez(es)
Chanp

Chanp
Nível 9

Masculino
Inscrito dia : 04/01/2018
Mensagens : 195
Pontos Ativos : 228

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

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Omaiyomai em 21.02.18 15:55

Nesta região
Código:
nomedoforum
preencho com o correspondente ?
Omaiyomai

Omaiyomai
Nível 10

Masculino
Inscrito dia : 21/11/2011
Mensagens : 259
Pontos Ativos : 411

Ver perfil do usuário http://http://roleplayarkbr.forumeiros.com https://www.facebook.com/brucelee.leal

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Chanp em 21.02.18 16:14

Olá,

Nesta região preencho com o correspondente?

Não.
Isto faz parte do próprio código Javascript. Não é alterável. Explicando a funcionalidade, esta parte do código "instrui" o código em si que a funcionalidade é aplicada com base no que está programado no widget que você colocar em {NOME COMPLETO DO WIDGET}. Um pouco complexo, não?

Peço que siga apenas o que eu deixei na observação.

Até mais!
o/
Chanp

Chanp
Nível 9

Masculino
Inscrito dia : 04/01/2018
Mensagens : 195
Pontos Ativos : 228

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

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Omaiyomai em 21.02.18 16:20

Bastante complexo Muito feliz 

Beem... não surtiu efeito Triste
Omaiyomai

Omaiyomai
Nível 10

Masculino
Inscrito dia : 21/11/2011
Mensagens : 259
Pontos Ativos : 411

Ver perfil do usuário http://http://roleplayarkbr.forumeiros.com https://www.facebook.com/brucelee.leal

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Chanp em 21.02.18 16:47

Certo,
Peço que me informe o código presente no Widget que você registrou no código Javascript que te passei e que me informe também o nome.

o/
Chanp

Chanp
Nível 9

Masculino
Inscrito dia : 04/01/2018
Mensagens : 195
Pontos Ativos : 228

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

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Omaiyomai em 21.02.18 17:33

O código do widget é o mesmo código html que uso '-' Acho que rolou algo errado kkkk

O que eu fiz: Peguei o codigo HTML e botei no widget.
O que eu fiz parte2: Peguei o código que voce me passou, e inseri no Painel de Controle Este código no rodapé 633772 Módulos Este código no rodapé 633772 HTML & Javascript Este código no rodapé 633772 Gestão dos Códigos Javascript com o nome do widget inserido: 
Código:
$(function(){
    var nomedoforum = ''; // {Laboratorio do Dr. Julm}
    $('.module:contains("' + nomedoforum + '")').css('width', '80%').detach().appendTo('.forabg');
Omaiyomai

Omaiyomai
Nível 10

Masculino
Inscrito dia : 21/11/2011
Mensagens : 259
Pontos Ativos : 411

Ver perfil do usuário http://http://roleplayarkbr.forumeiros.com https://www.facebook.com/brucelee.leal

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Hancki em 21.02.18 22:09

Olá!

Vamos tentar deixar as coisas mais simples Mostrando a lingua

Crie um novo widget, de forma tradicional, mas desta forma: http://prntscr.com/ii0vrc
Respeitando isso, no campo do código (chamado "Fonte do widget *"), coloque o seguinte código:
Código:
<div id="lojaHancki">
   <script type="text/javascript">
  jQuery(function() {
  var produtos = {
 
    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
 
    'Doação': {
        icone: 'https://pt.seaicons.com/wp-content/uploads/2016/04/coins-icon.png',
        preco: '5',
        descricao: 'Você pode doar RjQuery5,00 ou mais para ajudar a manter o servidor. Receberá uma Tag no forum de Colaborador, e seu nome ficará em destaque.'
    },
 
    'Tek Armor of Mastercraft': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/2/21/Tek_Chestpiece.png',
        preco: '12',
        descricao: 'Tek Armor é uma armadura Fabrica pelos Hotulhems. Uma armadura que oferece a melhor proteção física e proteção moderada contra o frio. Quando usada com o conjunto Tek completo, ele proporcionará a melhor proteção contra o calor e o frio, devido ao bônus definido.'
    },
 
    'Lymantria': {
        icone: 'http://www.dododex.com/media/creature/lymantria.png',
        preco: '20',
        descricao: 'Uma das grande invenções do Dr. Julm. Em combate a Lymantria lança uma névoa verde de esporos, que retarda seu inimigo, e drena a resistência em 90%. Enquanto seu oponente esta distraído, ela tem a chance de escapar.'
    },
 
    'Flame Arrow (3 unidades)': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/thumb/d/dc/Flame_Arrow_%28Scorched_Earth%29.png/128px-Flame_Arrow_%28Scorched_Earth%29.png',
        preco: '3',
        descricao: 'Oferece danos na flecha regulares no impacto, causando danos de queimaduras por cerca de 8 segundos, causando aproximadamente 22 pontos por segundo em Humanos. Muito eficaz contra grandes criaturas e carnívoros. Oferece danos reduzidos aos herbívoros.'
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
 
 
  };
 
 
  var content = jQuery('.content .itens');
      jQuery.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 + ' Reais</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var jQuerytotal = 0;
  function addToCart(item) {
    var getItem = jQuery(item).parents('.item').find('.nome').text();
    var getPrice = parseInt(jQuery(item).parents('.item').find('.preco').attr('data-myprice'));
    jQuerytotal += getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt(jQuery(item).attr('data-myprice'));
    jQuerytotal -= getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery(item).remove();
  }
  function resetItems() {
    jQuery('.cart').empty();
    jQuerytotal = 0;
    jQuery('.total').empty();
  }
  function buyItems() {
    if(!jQuery('.cart').is(':empty')) {
      var texto = '';
      var total = 0;
      jQuery('.item-cart').each(function() {
        var item = jQuery(this).text();
        var preco = parseInt(jQuery(this).attr('data-myprice'));
        texto += '<strong>' + item.charAt(0).toUpperCase() + item.slice(1)
        //add line break at the end
        + ':</strong> ' + preco + " reais\n";
        total += preco;
      });
      texto += '\n\n<strong>Valor total:</strong> ' + total + ' reais';
      jQuery.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Dentro de 24h a Administração estará lhe enviando por mensagem privada no fórum ou pelo seu email de cadastro, o link para efetuar o pagamento.");
        resetItems();
      });
    } 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;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
   <div class="daemon">
                          <span style="color: white;font-size: 28px;font-weight: bold;">Ofertas do laboratório do Dr. Julm</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="Esvaziar carrinho" onclick="resetItems()" />
   </div>
</div><script>
jQuery(document).ready(function() {
    jQuery('#lojaHancki').prependTo('#page-footer');
});
</script>
Após isso, clicar em salvar.

O que o código faz é basicamente criar um widget exatamente com o código da loja fornecido e depois do código ter sido executado pelo navegador, outro trecho do código vai movê-lo para cima do rodapé no fundo da página. De lembrar que ele vai aparecer onde os widgets também aparecem.
De qualquer das formas, caso queira que ele apareça apenas no início do fórum, é só dizer que adiciono uma exceção.

E caso não queira ter widgets no fórum, podemos fazer exatamente o que eu lhe disse, mas podemos simplesmente esconder a coluna dos widgets com recurso a CSS.

Hancki
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8113
Pontos Ativos : 12117

Ver perfil do usuário https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Omaiyomai em 21.02.18 22:26

Muito show Hancki !!!
Só um porém, ta aparecendo o conteúdo dobrado :/ 

2 coisas na verdade estão rolando... o rodapé constando os usuarios online esta dividido do widget, como organizo isso? Este código no rodapé 0PGaiVN

Este código no rodapé MJk8d53
Omaiyomai

Omaiyomai
Nível 10

Masculino
Inscrito dia : 21/11/2011
Mensagens : 259
Pontos Ativos : 411

Ver perfil do usuário http://http://roleplayarkbr.forumeiros.com https://www.facebook.com/brucelee.leal

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Hancki em 21.02.18 22:46

Para resolver a questão de aparecer dobrado, substitua todo o código por este:
Código:
<div id="lojaHancki">
   <script type="text/javascript">
  jQuery(function() {
  var produtos = {
 
    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
 
    'Doação': {
        icone: 'https://pt.seaicons.com/wp-content/uploads/2016/04/coins-icon.png',
        preco: '5',
        descricao: 'Você pode doar RjQuery5,00 ou mais para ajudar a manter o servidor. Receberá uma Tag no forum de Colaborador, e seu nome ficará em destaque.'
    },
 
    'Tek Armor of Mastercraft': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/2/21/Tek_Chestpiece.png',
        preco: '12',
        descricao: 'Tek Armor é uma armadura Fabrica pelos Hotulhems. Uma armadura que oferece a melhor proteção física e proteção moderada contra o frio. Quando usada com o conjunto Tek completo, ele proporcionará a melhor proteção contra o calor e o frio, devido ao bônus definido.'
    },
 
    'Lymantria': {
        icone: 'http://www.dododex.com/media/creature/lymantria.png',
        preco: '20',
        descricao: 'Uma das grande invenções do Dr. Julm. Em combate a Lymantria lança uma névoa verde de esporos, que retarda seu inimigo, e drena a resistência em 90%. Enquanto seu oponente esta distraído, ela tem a chance de escapar.'
    },
 
    'Flame Arrow (3 unidades)': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/thumb/d/dc/Flame_Arrow_%28Scorched_Earth%29.png/128px-Flame_Arrow_%28Scorched_Earth%29.png',
        preco: '3',
        descricao: 'Oferece danos na flecha regulares no impacto, causando danos de queimaduras por cerca de 8 segundos, causando aproximadamente 22 pontos por segundo em Humanos. Muito eficaz contra grandes criaturas e carnívoros. Oferece danos reduzidos aos herbívoros.'
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
 
 
  };
 
 
  var content = jQuery('.content .itens');
      jQuery.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 + ' Reais</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var jQuerytotal = 0;
  function addToCart(item) {
    var getItem = jQuery(item).parents('.item').find('.nome').text();
    var getPrice = parseInt(jQuery(item).parents('.item').find('.preco').attr('data-myprice'));
    jQuerytotal += getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt(jQuery(item).attr('data-myprice'));
    jQuerytotal -= getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery(item).remove();
  }
  function resetItems() {
    jQuery('.cart').empty();
    jQuerytotal = 0;
    jQuery('.total').empty();
  }
  function buyItems() {
    if(!jQuery('.cart').is(':empty')) {
      var texto = '';
      var total = 0;
      jQuery('.item-cart').each(function() {
        var item = jQuery(this).text();
        var preco = parseInt(jQuery(this).attr('data-myprice'));
        texto += '<strong>' + item.charAt(0).toUpperCase() + item.slice(1)
        //add line break at the end
        + ':</strong> ' + preco + " reais\n";
        total += preco;
      });
      texto += '\n\n<strong>Valor total:</strong> ' + total + ' reais';
      jQuery.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Dentro de 24h a Administração estará lhe enviando por mensagem privada no fórum ou pelo seu email de cadastro, o link para efetuar o pagamento.");
        resetItems();
      });
    } else {
      alert("O carrinho está vazio");
    }
  }
</script><style type="text/css">
#lojaHancki > table > tbody > tr.item:nth-child(1),#lojaHancki > table > tbody > tr.item:nth-child(2), #lojaHancki > table > tbody > tr.item:nth-child(3), #lojaHancki > table > tbody > tr.item:nth-child(4) { display:none !important;}
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;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
   <div class="daemon">
                          <span style="color: white;font-size: 28px;font-weight: bold;">Ofertas do laboratório do Dr. Julm</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="Esvaziar carrinho" onclick="resetItems()" />
   </div>
</div><script>
jQuery(document).ready(function() {
    jQuery('#lojaHancki').prependTo('#page-footer');
});
</script>

A segunda parte é que não entendi. Deseja que a loja fique noutro sítio ou apenas quer dar espaço entre o quadro dos usuários online e a loja?

Hancki
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8113
Pontos Ativos : 12117

Ver perfil do usuário https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Omaiyomai em 21.02.18 22:48

Perfeito, não esta dobrado mais XD

Agora... a questão é que, ele ficou após o rodapé, o que torna muito fora de cena, entende? confira al a imagem que consta os Usuário registrados... Tantos usuarios Registrados... Os nossos membros postaram um total de 15 mensagens

Triste
Omaiyomai

Omaiyomai
Nível 10

Masculino
Inscrito dia : 21/11/2011
Mensagens : 259
Pontos Ativos : 411

Ver perfil do usuário http://http://roleplayarkbr.forumeiros.com https://www.facebook.com/brucelee.leal

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Hancki em 21.02.18 23:10

Já percebi! Agora vai ficar melhor!
Use este código:
Código:
<div id="lojaHancki">
  <script type="text/javascript">
  jQuery(function() {
  var produtos = {
 
    /* Ícones da loja abaixo.
    Lembre-se de adicionar uma vírgula ao final de cada novo ítem adicionado.
    Não adicione vírgula após o último ítem adicionado. */
 
    'Doação': {
        icone: 'https://pt.seaicons.com/wp-content/uploads/2016/04/coins-icon.png',
        preco: '5',
        descricao: 'Você pode doar RjQuery5,00 ou mais para ajudar a manter o servidor. Receberá uma Tag no forum de Colaborador, e seu nome ficará em destaque.'
    },
 
    'Tek Armor of Mastercraft': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/2/21/Tek_Chestpiece.png',
        preco: '12',
        descricao: 'Tek Armor é uma armadura Fabrica pelos Hotulhems. Uma armadura que oferece a melhor proteção física e proteção moderada contra o frio. Quando usada com o conjunto Tek completo, ele proporcionará a melhor proteção contra o calor e o frio, devido ao bônus definido.'
    },
 
    'Lymantria': {
        icone: 'http://www.dododex.com/media/creature/lymantria.png',
        preco: '20',
        descricao: 'Uma das grande invenções do Dr. Julm. Em combate a Lymantria lança uma névoa verde de esporos, que retarda seu inimigo, e drena a resistência em 90%. Enquanto seu oponente esta distraído, ela tem a chance de escapar.'
    },
 
    'Flame Arrow (3 unidades)': {
        icone: 'https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/thumb/d/dc/Flame_Arrow_%28Scorched_Earth%29.png/128px-Flame_Arrow_%28Scorched_Earth%29.png',
        preco: '3',
        descricao: 'Oferece danos na flecha regulares no impacto, causando danos de queimaduras por cerca de 8 segundos, causando aproximadamente 22 pontos por segundo em Humanos. Muito eficaz contra grandes criaturas e carnívoros. Oferece danos reduzidos aos herbívoros.'
    }
    // Perceba que não existe vírgula após o último ítem. Caso queira adicionar mais ítens após o último, adicione uma vírgula logo após a chave "}". Lembre-se de deixar apenas o último ítem sem vírgula ao final.
 
 
  };
 
 
  var content = jQuery('.content .itens');
      jQuery.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 + ' Reais</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
  });
  var jQuerytotal = 0;
  function addToCart(item) {
    var getItem = jQuery(item).parents('.item').find('.nome').text();
    var getPrice = parseInt(jQuery(item).parents('.item').find('.preco').attr('data-myprice'));
    jQuerytotal += getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
  }
  function removeFromCart(item) {
    var getPrice = parseInt(jQuery(item).attr('data-myprice'));
    jQuerytotal -= getPrice;
    jQuery('.total').html('Valor total: <span class="totalVal">' + jQuerytotal + '</span> Reais. Clicando em Concluir compra, a administração estará sendo informada na mesma hora, e dentro de 24h será enviado um link na sua caixa de mensagens do forum, para efetuar o pagamento.');
    jQuery(item).remove();
  }
  function resetItems() {
    jQuery('.cart').empty();
    jQuerytotal = 0;
    jQuery('.total').empty();
  }
  function buyItems() {
    if(!jQuery('.cart').is(':empty')) {
      var texto = '';
      var total = 0;
      jQuery('.item-cart').each(function() {
        var item = jQuery(this).text();
        var preco = parseInt(jQuery(this).attr('data-myprice'));
        texto += '<strong>' + item.charAt(0).toUpperCase() + item.slice(1)
        //add line break at the end
        + ':</strong> ' + preco + " reais\n";
        total += preco;
      });
      texto += '\n\n<strong>Valor total:</strong> ' + total + ' reais';
      jQuery.post('/privmsg', {
            'mode': 'post',
            'post': '1',
            'folder': 'inbox',
            'usergroup': '1',
            'subject': 'Pedido da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Dentro de 24h a Administração estará lhe enviando por mensagem privada no fórum ou pelo seu email de cadastro, o link para efetuar o pagamento.");
        resetItems();
      });
    } else {
      alert("O carrinho está vazio");
    }
  }
</script><style type="text/css">
#lojaHancki > table > tbody > tr.item:nth-child(1),#lojaHancki > table > tbody > tr.item:nth-child(2), #lojaHancki > table > tbody > tr.item:nth-child(3), #lojaHancki > table > tbody > tr.item:nth-child(4) { display:none !important;}
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;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
  <div class="daemon">
                          <span style="color: white;font-size: 28px;font-weight: bold;">Ofertas do laboratório do Dr. Julm</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="Esvaziar carrinho" onclick="resetItems()" />
  </div>
</div><script>
jQuery(document).ready(function() {
    jQuery('#lojaHancki').appendTo('#content-container #content-main');
});
</script>

Hancki
Hancki

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8113
Pontos Ativos : 12117

Ver perfil do usuário https://ajuda.forumeiros.com/

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Omaiyomai em 21.02.18 23:15

Sem palavras... ficou nota 1000 !

Super resolvido, brigadão amigo !
Omaiyomai

Omaiyomai
Nível 10

Masculino
Inscrito dia : 21/11/2011
Mensagens : 259
Pontos Ativos : 411

Ver perfil do usuário http://http://roleplayarkbr.forumeiros.com https://www.facebook.com/brucelee.leal

Atendido / Resolvido Re: Este código no rodapé

Mensagem por Luiz em 22.02.18 9:53

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

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 23/04/2016
Mensagens : 6625
Pontos Ativos : 7518

Ver perfil do usuário https://luizfelipe.dev

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


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