Detalhes da questão

Endereço do fórum: http://www.castelobruxorpg.com/
Versão do fórum: Invision

Descrição

Boa tarde,

Meu fórum utiliza um antigo código de loja para uma delas (tem duas), sendo um tanto chato de mexer, não impossível, só trabalhoso. Eu adaptei como precisava, contudo o novo código fornecido aqui no FdF é mais simples e direto, gostaria de saber se há como fazer a adaptação da minha outra loja para a nova, mantendo o formato de abas (é importante).

Aqui está minha loja atual: http://www.castelobruxorpg.com/h4-

Código para o qual gostaria que fosse adaptada: https://ajuda.forumeiros.com/t99911-

Relembrando, eu não quero simplesmente usar o outro código, quero manter o formato atual da loja, mas atualizar o script de código existente nela para esse do tutorial apresentado.

Vou entender se for muito trabalhoso. :p

Grata desde já.

Olá e boa noite!

Realmente, isto é algo extremamente trabalhoso. Porém, a senhora sabe que o sistema em si não muda absolutamente nada, né? Na teoria, a sua loja só tem um passo adicional: "Confirmar compra" - o que poderemos remover para ficar mais similar a loja, proposta pelo Daemon, o quê acha?

Aguardo a sua resposta,
MateusAnjos.

No caso o meu problema com o código é essa parte que diz respeito aos itens, que é bem mais complicado de se editar, eu vivo esquecendo de alterar uma ou outra coisa, em especial o valor, porque ele aparece de uma forma no campo visível, mas precisa ser preenchido em outro momento para ir para a MP:

Como é um item único na minha loja atual:

Código:

<tr id="pir_01" class="item">
<td class="rolw2" style="text-align:center;width:10%;margin:5px">
  <span><img nome="Kit básico de escrita" src="http://s19.postimg.org/nzgywl83j/pena.png" width="30px"></span>  
</td>
<td class="col_f_content" style="width:60%;">
<strong>Kit básico de escrita</strong><br />
<span class="desc lighter blend_links">Vem com 2 penas e 1 tinteiro mágico que nunca fica vazio.</span>  
</td>
<td class="col_f_post"><ul>
<li class="views desc points" data-myprice="5"> - Preço: 5 Peças</li>
<li class="views desc">- Estoque: <span class="dsp">326</span>  
</li><li class="views desc">
 <input type="button" class="addButton" data-item="pir_01" value="Encomendar" />  
</li></ul>
</td></tr>

Como é um item único na outra loja:

Código:

   'Token de Personagem': {
        icone: 'http://s19.postimg.org/74tzq0t33/personagem.png',
        preco: '1500',
        descricao: 'Permite que o jogador tenha outro personagem.'
    },

Essa complexidade também faz com que apenas eu possa editar a loja e não consiga dividir o trabalho da administração com outras pessoas.

Entende o que eu quero dizer?

Poderia deixar o html da sua loja atual?

Tive que upar porque ultrapassa o limite de caracteres do post:

http://pastebin.com/862sFrpx

Antes de qualquer coisa faça um backup da sua pagina,
Após isso troque sua pagina por essa:

Código:


<script type="text/javascript">
  $(function() {
  var produtos = {

    /* Aba Pirlimpimpim. */
   
    'Kit básico de escrita': {
        icone: 'http://s19.postimg.org/nzgywl83j/pena.png',
        preco: '200',
        descricao: 'Vem com 2 penas e 1 tinteiro mágico que nunca fica vazio.'
    },
 
    'Kit básico para poções': {
        icone: 'http://s19.postimg.org/box7400u7/kit_poc.png',
        preco: '250',
        descricao: 'Tigela para mistura de ingredientes, amassador, picador, dosador e espátula.'
    },
 
    'Pergaminho em branco': {
        icone: 'http://s19.postimg.org/xiqnq1vlr/pergaminho.png',
        preco: '250',
        descricao: 'Rolo de pergaminho em branco para escrever ou desenhar.'
    },
   
    'Caldeirão de estanho': {
        icone: 'http://s19.postimg.org/8dv1yw6rj/caldeirao.png',
        preco: '250',
        descricao: 'Caldeirão simples para poções.'
    },
   
   'Espelho da Concentração': {
        icone: 'http://s19.postimg.org/ljak500n3/vazio01.png',
        preco: '250',
        descricao: 'Encantado, pode aguentar de 500ml a 1L de poção.'
    },
      'Frasco para poções grandes': {
        icone: 'http://s19.postimg.org/4mq2qbigv/vazio02.png',
        preco: '250',
        descricao: 'Encantado, pode aguentar de 50ml a 500ml de poção.'
    }
    // 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 produtos2 = {

  /* Aba Empório dos Usados */
   
    'Kit básico de escrita usado': {
        icone: 'http://s19.postimg.org/c5ieqfolb/pena_velha.png',
        preco: '200',
        descricao: 'Vem com 2 penas e 1 tinteiro mágico que nunca fica vazio.'
    },
 
    'Kit básico para poções usado': {
        icone: 'http://s19.postimg.org/7r9xele0v/kit_poc_velho.png',
        preco: '250',
        descricao: 'Tigela para mistura de ingredientes, amassador, picador, dosador e espátula.'
    },
 
    'Caldeirão de estanho usado': {
        icone: 'http://s19.postimg.org/w2obze7gf/caldeirao_velho.png',
        preco: '250',
        descricao: 'Caldeirão simples para poções.'
    },
    
    'Frasco para poções grandes usado': {
        icone: 'http://s19.postimg.org/dcwcinepr/vazio01_velho.png',
        preco: '250',
        descricao: 'Encantado, pode aguentar de 500ml a 1L de poção.'
    },
    
    'Frasco para poções pequenas usado': {
        icone: 'http://s19.postimg.org/564cr2on3/vazio02_velho.png',
        preco: '250',
        descricao: 'Encantado, pode aguentar de 50ml a 500ml de poção..'
    }
    // 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 produtos3 = {

    /* Aba A Imprensa do Escriba */
   
    'Herbologia Básica para Qualquer Imbecil': {
        icone: 'http://s19.postimg.org/smw7pua7z/herb_01.png',
        preco: '200',
        descricao: 'Escrito por: Benedita Dourado'
    },
 
    'Poção e Pajelança - Um estudo dos preparos mágicos brasileiros': {
        icone: 'http://s19.postimg.org/4zl8ikh8f/poc_01.png',
        preco: '250',
        descricao: 'Escrito por: Nilson Navarro'
    },
 
    'A chuva da floresta: tradições e rituais bruxos na América do Sul': {
        icone: 'http://s19.postimg.org/pp4at98vz/xam_01.png',
        preco: '250',
        descricao: 'Escrito por: Tereza Huánuco, 1984'
    },
    
    'Olhe para o céu e veja, Um Guia Básico de Astronomia': {
        icone: 'http://s19.postimg.org/bw8fhemgv/ast_01.png',
        preco: '250',
        descricao: 'Escrito por: Hugo Soares, 2007'
    },
    
    'O Encantador Livro dos Encantos - Atravessando a Bruma': {
        icone: 'http://s19.postimg.org/czuxtb8sf/enc_01.png',
        preco: '250',
        descricao: 'Escrito por: Viviane Lago'
    },
    
    'Os Seres Que A Floresta Habita': {
        icone: 'http://s19.postimg.org/c1ekr0vgf/cri_01.png',
        preco: '250',
        descricao: 'Escrito por: J. C. Drummond'
    },
    
    'Estudos Avançados no Preparo de Poções': {
        icone: 'http://s19.postimg.org/h9alhdxkv/lex_01.png',
        preco: '250',
        descricao: 'Escrito por: Libatius Borage'
    },
    
    'Manual Prático de Magia Circular v. 1': {
        icone: 'http://s19.postimg.org/a3iuexohr/lex_03.png',
        preco: '250',
        descricao: 'Escrito por: Ubiracy Terra, 1832'
    },
    
    'Manual Prático de Magia Circular v. 2': {
        icone: 'http://s19.postimg.org/9cq495m4f/lex_04.png',
        preco: '250',
        descricao: 'Escrito por: Ubiracy Terra, 1832'
    },
    
    'Comogonias amazônicas: um estudo de caso': {
        icone: 'http://s19.postimg.org/vr7spdovz/lex_02.png',
        preco: '250',
        descricao: 'Escrito por: Annja Strauss, 1978'
    },
    
    'A Influência dos Astros na Magia': {
        icone: 'http://s19.postimg.org/jnp5fyqm7/lex_06.pnghttp://s19.postimg.org/jnp5fyqm7/lex_06.png',
        preco: '250',
        descricao: 'Escrito por: Hugo Soares, 2008'
    },
    
    'Como os Planetas Regem sua Vida': {
        icone: 'http://s19.postimg.org/sy19ji1bz/lex_05.png',
        preco: '250',
        descricao: 'Escrito por: Hugo Soares, 2008'
    },
    
    'Os Magos': {
        icone: 'http://s19.postimg.org/oerexxl4v/lex_08.png',
        preco: '250',
        descricao: 'Escrito por: Fillory Quentin'
    },
    
    'A Origem dos Guardiões': {
        icone: 'http://s19.postimg.org/e3f259tfj/lex_07.png',
        preco: '250',
        descricao: 'Escrito por: Henrique Fonseca'
    }
    // 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 produtos4 = {

    /* Aba Importadora Latoya */
   
    'Ágata das Névoas': {
        icone: 'http://s19.postimg.org/kluy4nadb/p_azul.png',
        preco: '200',
        descricao: 'Ao ser posicionada em frente ao olho ela se torna transparente e a pessoa pode enxergar através da névoa com clareza.'
    },
 
    'Bacia da Purificação': {
        icone: 'http://s19.postimg.org/8l9i3x2yn/bacia.png',
        preco: '250',
        descricao: 'Qualquer alimento  depositado dentro da bacia é purificado do mais variado tipos de veneno.'
    },
 
    'Moeda da Sorte': {
        icone: 'http://s19.postimg.org/rg58uc30f/moeda.png',
        preco: '250',
        descricao: 'O dono precisará carregá-la por um mês antes de utilizá-la, para que a magia o aceite. Depois disso, uma vez por dia pode-se jogar a moeda para o alto e fazer uma pergunta cuja resposta seja sim ou não. Cara é sim, coroa não.'
    },
   
    'Esfera das Sombras': {
        icone: 'http://s19.postimg.org/h7croieyn/esfera_negra.png',
        preco: '250',
        descricao: 'Ao ser apertada na mão cria uma sombra  ao redor do usuário que permite que o mesmo se camufle contra superfícies. Só funciona se usado à noite.'
    },
   
   'Espelho da Concentração': {
        icone: 'http://s19.postimg.org/v2b26z9dr/espelho.png',
        preco: '250',
        descricao: 'O usuário deve olhar em seus olhos pelo reflexo e dizer ao espelho que quer se concentrar e por quanto tempo. Não há limite máximo, caso seu dono desmaie de cansaço o mesmo permanecerá até o objeto ser destruído.'
    }
    // 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 + ' pontos</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
    '  </ul>' +
          '  </td>' +
          '</tr>'
          );
      });
     var content = $('.content .itens2');
      $.each(produtos2, 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 content = $('.content .itens3');
      $.each(produtos3, 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 content = $('.content .itens4');
      $.each(produtos4, 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>'
          );
      });
      $.ajax({
        url: '/u' + _userdata.user_id,
        type: 'GET',
        success: function(responseHtml)
        {
        var myPoints = $('#field_id-13 dd', responseHtml).text();
        $('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + myPoints + '</span>');
        },
        error: function(err)
        {
          console.log("AJAX error in request (Store points)");
        }
      });
  });
  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> pontos');
    $('.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> pontos');
    $(item).remove();
  }
  function resetItems() {
    $('.cart').empty();
    $total = 0;
    $('.total').empty();
  }
  function buyItems() {
    if(!$('.cart').is(':empty')) {
      var valPoints = parseInt($('.totalPoints').text());
      var valTotal = parseInt($('.totalVal').text());
      if(valPoints >= valTotal) {
      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 da loja',
            'message': texto
      }).done(function() {
        alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
        resetItems();
      });
      } else {
        alert("Você não tem pontos suficiente para efetuar a compra");
      }
    } else {
      alert("O carrinho está vazio");
    }
  }
</script>
<div align="center"><img src="http://s19.postimg.org/g2fwncmdf/logo.png"></div>
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
 <li class="TabbedPanelsTab" tabindex="0">Catálogo</li>
 <li class="TabbedPanelsTab" tabindex="0">Pirlimpimpim</li>
 <li class="TabbedPanelsTab" tabindex="0">Empório dos Usados</li>
 <li class="TabbedPanelsTab" tabindex="0">A Imprensa do Escriba</li>
 <li class="TabbedPanelsTab" tabindex="0">Importadora Latoya</li>
<!-- <li class="TabbedPanelsTab" tabindex="0">Ficha de Pedidos</li> -->
  </ul>
  <div class="TabbedPanelsContentGroup">
 <div class="TabbedPanelsContent"><div class="cat_box">
<span style="font-size: 20px; font-weight: bold;">Bem-vindos!</span><br><br>
<div style="text-align: justify;">
Votado pelo décimo ano concecutivo o melhor catálogo de compras do mundo bruxo, o Facilidades Mágicas está em suas mãos para seu deleite! Tudo o que há de novidade e clássicos à sua disposição apenas com o acenar da varinha! Esqueça o desconforto de sair às compras! Com nosso catálogo a entrega é garantida ou o seu dinheiro de volta!
</div><br>
<span style="font-size: 20px; font-weight: bold;">Lojas Cadastradas</span><br><br>
<div style="text-align: justify;">
<ol style="margin-left:20px;">
  <li><b>Pirlimpimpim Artigos Variados</b><br />
Busca algo específico? Tem dinheiro e gostaria de gastar? Deseja artigos de qualidade? Este é o seu lugar! Aceitamos encomendas e personalizações!
  <li><b>Empório dos Usados</b><br>Deseja itens em conta? Quer livrar-se daquela velharia? O lixo de uns é o tesouro de outros! Veja nosso catálogo!
<li><b>A Imprensa do Escriba</b><br>Escritos de qualidade e raridade incomparáveis, desde feitiços a jornais, manuais e obras de ficção, temos de tudo! Também publicamos seu livro!
<li><b>Importadora Latoya de Itens Mágicos</b><br />
  Procura algo que não é da sua região? Nós da Importadora Latoya achamos para você! Nossos buscadores vão até as terras mais longínquas só para satisfazer nossos clientes! Aceitamos encomendas!
</ol>
<br><br>
<span style="font-size: 20px; font-weight: bold;">Novidades</span><br><br>
<div style="text-align: justify;">09/03/16 - Novos Itens - A Imprensa do Escriba<br />
28/02/16 - Catálogo Publicado
</div><br>
</div>
</div></div>
 <div class="TabbedPanelsContent">
 <div class="cat_box">

<table class="content">
      <tbody class="itens"></tbody>
</table>
<div id="cart">
  <div class="cart"></div>
  <span class="myPoints"></span>
  <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>
 </div>
  </div>
 <div class="TabbedPanelsContent">
 <div class="cat_box">

<table class="content">
      <tbody class="itens2"></tbody>
</table>
<div id="cart">
  <div class="cart"></div>
  <span class="myPoints"></span>
  <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>
</div>
</div>
 <div class="TabbedPanelsContent">
 <div class="cat_box">

<table class="content">
      <tbody class="itens3"></tbody>
</table>
<div id="cart">
  <div class="cart"></div>
  <span class="myPoints"></span>
  <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>
</div>
 </div>
 <div class="TabbedPanelsContent">
 <div class="cat_box">

<table class="content">
      <tbody class="itens4"></tbody>
</table>
<div id="cart">
  <div class="cart"></div>
  <span class="myPoints"></span>
  <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>
</div>
 </div>
  <!--<div class="TabbedPanelsContent">
  <div class="cat_box">
  extra
  </div>
 </div> -->
  <div class="cat_box">
 <h2>Ficha de Pedidos</h2>
                          <div class="cartWrapper">
                         
                        <div class="cart" id="cartj">
                            
                           <div class="cart_body">
                               
                              <div class="cart_items">
                                  
                                 <ul class="theList">
                                     
                                 </ul>
                                  
                              </div>
                               
                           </div><span class="totaler"></span> 
                        </div>
                         
                        <form id="privatemessage" action="/privmsg" method="post" name="post">
                             <input name="username[]" type="text" style="display:none" value="Narrador" /><input value="Catálogo" style="display:none" maxlength="64" name="subject" type="text" class="usernameinput" /><textarea id="cartMessage" style="display:none" class="noThis" name="message"></textarea><span class="buttons"><input id="submitCart" type="submit" value="Confirmar compra" onclick="this.disabled = false;document.getElementById('sendingBut').disabled = false;return false;" /> Confirme seus produtos. <input type="submit" value="Enviar pedido" name="post" id="sendingBut" disabled="disabled" /></span> 
                        </form>
                           
     </div>
                      
                     <div id="checkout">
                          Para Encomendar basta confirmar suas escolhas e em seguida enviar o pedido. Num prazo máximo de 24 horas ele será atendido. Agradecemos a preferência! 
                     </div>
                        
   </div>
  </div>       
  </div>
</div>
</div>
<script type="text/javascript">
(function() { // BeginSpryComponent

if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.TabbedPanels = function(element, opts)
{
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;

Spry.Widget.TabbedPanels.setOptions(this, opts);

// If the defaultTab is expressed as a number/index, convert
// it to an element.

if (typeof (this.defaultTab) == "number")
{
if (this.defaultTab < 0)
this.defaultTab = 0;
else
{
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count)
this.defaultTab = (count > 1) ? (count - 1) : 0;
}

this.defaultTab = this.getTabs()[this.defaultTab];
}

// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.

if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);

this.attachBehaviors();
};

Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
{
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
};

Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
{
var children = [];
var child = element.firstChild;
while (child)
{
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
}
return children;
};

Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
{
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
{
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
if (!optionsObj)
return;
for (var optionName in optionsObj)
{
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
}
};

Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
{
if (this.element)
{
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
}
return null;
};

Spry.Widget.TabbedPanels.prototype.getTabs = function()
{
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
};

Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
{
if (this.element)
{
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
}
return null;
};

Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
{
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
};

Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
{
ele = this.getElement(ele);
if (ele && arr && arr.length)
{
for (var i = 0; i < arr.length; i++)
{
if (ele == arr[i])
return i;
}
}
return -1;
};

Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
{
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
};

Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
{
return this.currentTabIndex;
};

Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
{
return Math.min(this.getTabs().length, this.getContentPanels().length);
};

Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
{
try
{
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
}
catch (e) {}
};

Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
{
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;

return false;
};

Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{
this.showPanel(tab);
return this.cancelEvent(e);
};

Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
{
this.addClassName(tab, this.tabHoverClass);
return false;
};

Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
{
this.removeClassName(tab, this.tabHoverClass);
return false;
};

Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
{
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
};

Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
{
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
};

Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;



Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
{
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;

var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
{
var el = false;
if (key == this.previousPanelKeyCode && i > 0)
el = tabs[i-1];
else if (key == this.nextPanelKeyCode && i < tabs.length-1)
el = tabs[i+1];

if (el)
{
this.showPanel(el);
el.focus();
break;
}
}

return this.cancelEvent(e);
};

Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
{
var stopTraversal = false;
if (root)
{
stopTraversal = func(root);
if (root.hasChildNodes())
{
var child = root.firstChild;
while (!stopTraversal && child)
{
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null; }
}
}
}
return stopTraversal;
};

Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
{
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);

if (this.enableKeyboardNavigation)
{

var tabIndexEle = null;
var tabAnchorEle = null;

this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
{
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
{
tabIndexEle = node;
return true;
}
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
tabAnchorEle = node;
}
return false;
});

if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;

if (this.focusElement)
{
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
}
}
};

Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
{
var tpIndex = -1;

if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);

if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;

var tabs = this.getTabs();
var panels = this.getContentPanels();

var numTabbedPanels = Math.max(tabs.length, panels.length);

for (var i = 0; i < numTabbedPanels; i++)
{
if (i != tpIndex)
{
if (tabs[i])
this.removeClassName(tabs[i], this.tabSelectedClass);
if (panels[i])
{
this.removeClassName(panels[i], this.panelVisibleClass);
panels[i].style.display = "none";
}
}
}

this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";

this.currentTabIndex = tpIndex;
};

Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
{
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();

for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);

this.showPanel(this.defaultTab);
};

})(); // EndSpryComponent
</script>
<style type="text/css">
  .cat_box {
    margin: 15px;
    border: 1px dotted #000;
    padding: 10px;
}
.cart_items, #checkout{
    padding: 10px;
    border-radius: 3px;
    background: #B99C77;
    border: 1px solid #AD8F71;
    margin: 2px 10px;
}
.cartWrapper{width:100%;}
.statused li {list-style-type: none;}
.theList li {
    list-style-type: upper-hexadecimal;
    background: #6c6657;
    margin: 1px 3px;
    color: white;
    font: bold italic 12px helvetica;
    border-radius: 3px 5px 5px 3px;
    display: inline-block;
    padding: 2px 10px 2px 2px;
    cursor: pointer;
}
.theList li:before {
content: " ";
position: relative;
display: inline-block;
height: 1px;
width: 5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #6c6657;
left: -14px;
top: 1px;
}

  /*  transition: 0.5s ease-in-out;*/
 
.message {
    background: transparent;
    border-bottom: 1px dotted #000;
    color: #141823;
    line-height: 1.6;
    font-size: 15px;
    padding: 1px 3px;
    margin-bottom: 15px;
}
 
input[type="button"] {
 margin: 5px;
}
.myc {cursor: pointer;}
li.views.desc {
list-style: none !important;
}

@charset "UTF-8";

.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}


.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}

.TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    font: bold 0.7em sans-serif;
    list-style: none;
    cursor: pointer;
    box-shadow: inset rgba(105, 54, 5, 0.46) 0px 0px 40px;
}

.TabbedPanelsTabHover {

}

.TabbedPanelsTabSelected {
    box-shadow: none;
}

.TabbedPanelsTab a {
color: black;
text-decoration: none;
}

.TabbedPanelsContentGroup {
    clear: both;
    border: none;
}
.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
}

.TabbedPanelsContentVisible {
    background: url(http://s19.postimg.org/il1lo183n/fundo.jpg) 0% 100% !important;
    color: #000;
    font-family: 'Arvo', serif;
    font-size: 15px;
}
  li.TabbedPanelsTab {
    background: url(http://s19.postimg.org/il1lo183n/fundo.jpg) 0% 100% !important;
    color: #000;
    border: none;
    font-size: 15px;
    font-family: 'Lobster', cursive;
}
.VTabbedPanels {
overflow: hidden;
zoom: 1;
}

.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}

.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}

.VTabbedPanels .TabbedPanelsTabSelected {
box-shadow: inset #000 0px 0px 1px;
}

.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}

/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
}
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
}
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
}
.TabbedPanelsTab {
 overflow: visible !important;
 display: block !important;
 clear:both !important;
}
}
</style>
<style type="text/css">

table.content {
  background: #232323;
  color: #6F6F6F;
  border: 1px solid #232323;
  border-collapse: separate;
  empty-cells: show;
  table-layout: fixed;
  width: 100%;
}
.itens .nome, .itens2 .nome, .itens3 .nome, .itens4 .nome, .itens5 .nome  {font-size: 14px;}
.itens .icone, .itens2 .icone, .itens3 .icone, .itens4 .icone, .itens5 .icone {
text-align: center;
}
.itens .icone img, .itens2 .icone img, .itens3 .icone img, .itens4 .icone img, .itens5 .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: 5px;background: #1D1D1D;border-bottom: 1px solid #1D1D1D;}
.itens ul li, .itens2 ul li, .itens3 ul li, .itens4 ul li, .itens5 ul li
{list-style-type: none;}
.daemon {
    background: rgba(51, 51, 51, 0);
    text-align: center;
    padding: 10px;
}
#cart {
    background: rgba(240, 240, 240, 0);
    border: 1px dotted #000;
    margin-top: 5px;
    padding: 5px;
}
.cart {
    background: rgba(255, 255, 255, 0) 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-bottom: 1px dotted #000;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
.pun input {
    background: #232323;
    border: 0;
    border-radius: 2px;
    box-shadow: #0C0C0C 0 1px 1px;
    color: #929292;
    font-family: Verdana;
    padding: 2px 5px;    cursor: pointer;
}
</style>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>

Deixei comentados os campos para cada aba:

podutos = Pirlimpimpim
podutos2 = Empório dos Usados
podutos3 = A Imprensa do Escriba
podutos4 = Importadora Latoya

OBS: Quando for adicionar um novo produto adicione correspondente a area que deseja.

As abas pararam de funcionar :/ http://www.castelobruxorpg.com/h4-

Desative o gerenciamento de Javascript do fórum para ver se funciona. O script 99787 está apresentando problemas... Talvez se desativá-lo podemos saber se isso resolve.

Não tem esse script na minha lista. Mas eu notei que esse único script tem todos os scripts que eu pus no fórum.



http://www.castelobruxorpg.com/99787.js

É só ver, tem vários scripts diferentes aí

Sim, mas, neste caso quando você define vários scripts para todas as páginas ou para uma página só, eles se unificam em apenas uma URL de script para evitar lentidão no seu fórum. O ideal é desativar script por script e verificar se o problema se resolve.

Até mais

Testei sem javascripts e as abas das lojas não funcionam mais.

Edit: Descobri que o script que estava gerando uma série de erros contínuos é esse aqui. Mas não é ele o responsável pela quebra das abas da loja

Atualização no problema dos scripts, no meu fórum teste o script citado anteriormente não gera esses erros, só no meu fórum oficial.

E atualizando as informações do tópico, meu fórum agora é PunBB.

Pode fechar, vou ficar com a loja antiga.