Mudar layout da Loja

Olá FDF!

Achei muito útil esse sistema desenvolvido pelo @Daemon, [AddOn] Criar loja de ícones.

Gostaria de saber se é possível usar o mesmo código, mas, com um layout diferente. Estou pensando em algo parecido com isso ->



É possível inserir um formulário após o usuário clicar em "Concluir compra" e/ou adicionar outros usuários para receber a MP?


Até mais!

Saudações,
Sobre disso obrigado por me avisar sobre questão de outro lauyout de loja.
Infelizmente vai demorar uns dias pra criar esse tal de lauyout pra fixar tudo 100%
Eu compreendo que tenha paciência, por quê uma coisa dessa não é fácil.
Cordialmente,

Não entendi, quando disse, adicionar um formulário, lembrando que o pedido é enviado para o grupo de administradores,

E sim, é possivel alterar o layout da loja, poderia nos mandar o link de um exemplo do jeito que quer?

[]'s

Vughis escreveu:Saudações,
Sobre disso obrigado por me avisar sobre questão de outro lauyout de loja.
Infelizmente vai demorar uns dias pra criar esse tal de lauyout pra fixar tudo 100%
Eu compreendo que tenha paciência, por quê uma coisa dessa não é fácil.
Cordialmente,

Em questão de minutos da pra se fazer isso que ele deseja... poucas edições!


Hoje não dá, mas amanhã estarei modificando pra você, ok?

Até!

DeeW. escreveu:Não entendi, quando disse, adicionar um formulário, lembrando que o pedido é enviado para o grupo de administradores,

E sim, é possivel alterar o layout da loja, poderia nos mandar o link de um exemplo do jeito que quer?

[]'s

Deew, preciso inserir um formulário para que os clientes não cadastrados possam fazer o pedido com seus dados para contato.

O layout da página atual é parecido com o layout do "Mercado Livre"... (@Daemon, sem ofensas, sei que o código é v1.0...)    Então, estou sugerindo um novo layout em horizontal. Algo parecido com isso ->

---

@Daemon, obrigado pela ajuda! Por favor, não tenha preça preciso de mais um tempo para terminar meu fórum


Até mais!

Veja se assim está bem pra você:

Código:

<script type="text/javascript">
  $(function() {
  var produtos = {
 
 
    'Gold Star': {
        icone: 'http://i.imgur.com/taaL40o.png',
        preco: '200',
        descricao: 'Stars WHOA'
    },
 
    'Helmet': {
        icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
        preco: '250',
        descricao: 'Capacete de batalha'
    },
 
    'Charmander': {
        icone: 'http://i72.servimg.com/u/f72/18/07/42/17/shop_i33.png',
        preco: '250',
        descricao: 'Pokemón tipo fogo'
    }
 
 
  };
 
 
  var content = $('.itens');
      $.each(produtos, function (key, value) {
          content.append(
          '<li>' +
          ' <div class="item">' +
          '  <div class="icone"><img src="' + value.icone + '" /></div>' +
          '  <div><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</div>' +
          '  <div class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> ' + value.preco + ' pontos</div>' +
          '  <br />' +
          '  <div style="display: none;" class="addCart"><img src="http://www.lojaklamt.com.br/templates/klamt/images/botao-comprar.png" onclick="addToCart(this)" /></div>' +
          ' </div>' +
          '</li>'
          );
      });
      $.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>
<style type="text/css">
.itens {
  background: #fafafa;
  border: 1px solid #eaeaea;
  list-style-type: none;
  min-height: 370px;
  padding-bottom: 60px;
}
.addCart img {cursor: pointer;}
.itens:after {
  content: " ";
  display: table;
  clear: both;
}
.itens:before {
  content: " ";
  display: table;
}
.itens li {
  height: 338px;
  float: left;
  margin: 0 1% 0;
  width: 22.8%;
  position: relative;
  padding-top: 2px;
  text-align: center;
}
.itens .nome {font-size: 14px;}
.itens .icone img {
  cursor: pointer;
  width: 150px;
  height: 150px;
  border: 1px solid #EEE;
  box-shadow: 0 0 3px #EEE;
  padding: 5px;
  margin: 0 0 0 -1px;
}
.item {
  position: relative;
  padding: 5px;
  width: 96%;
}
.item:hover {
  border: 1px solid #DDD;
  box-shadow: 0 3px 4px #ccc;
  background: white;
  min-height: 80px;
  margin: -1px 0 0 -1px;
}
.item:hover .addCart {display: block !important;}
.item:hover .icone img {
  border: none;
  box-shadow: none;
  margin: 6px 0 0 -1px;
  padding: 0;
}
.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;}
.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;
}
.preco {
  margin-top: 5px;
  color: #900;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial,Helvetica,sans-serif
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<ul class="itens"></ul>
<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>

Até mais!

Perfeito, muito obrigado!

@Daemon, pode me informar se é possível adicionar um formulário de cadastro para que os usuários não registrados possam fazer pedido?

Saudações autor,

Como sua dúvida foi resolvida, estarei dando este tópico como resolvido.
Para perguntas, poderá contatar o Daemon por mensagem privada, é melhor.

Abraços.
Sennior