Mudar layout da Loja

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

Resolvido Mudar layout da Loja

Mensagem por Troubleshoot em 28/05/15, 10:59 am

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! Feliz
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2197
Pontos Ativos : 2940

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Mudar layout da Loja

Mensagem por Troubleshoot em 02/06/15, 11:45 am

avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2197
Pontos Ativos : 2940

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Mudar layout da Loja

Mensagem por Diapt em 02/06/15, 01:56 pm

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,
avatar

Diapt
Nível 8

Masculino
Inscrito dia : 24/05/2015
Mensagens : 128
Pontos Ativos : 190

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

Resolvido Re: Mudar layout da Loja

Mensagem por DeeW. em 03/06/15, 10:56 pm

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
avatar

DeeW.
Nível 10

Masculino
Inscrito dia : 27/05/2014
Mensagens : 271
Pontos Ativos : 389

Ver perfil do usuário http://webpixel.forum-pro.net https://www.facebook.com/headbanger.d
  • 0

Resolvido Re: Mudar layout da Loja

Mensagem por Daemon em 04/06/15, 12:08 am

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é!
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1688

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

Resolvido Re: Mudar layout da Loja

Mensagem por Troubleshoot em 05/06/15, 10:00 am

@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...)  Rindo  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 Dormir


Até mais! Muito feliz
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2197
Pontos Ativos : 2940

Ver perfil do usuário http://guiatecnico.ativo-forum.com/
  • 0

Resolvido Re: Mudar layout da Loja

Mensagem por Daemon em 05/06/15, 11:20 am

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!
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1688

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

Resolvido Re: Mudar layout da Loja

Mensagem por Troubleshoot em 05/06/15, 11:33 am

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?
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2197
Pontos Ativos : 2940

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Mudar layout da Loja

Mensagem por Sennior em 09/06/15, 01:35 pm

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. Muito feliz

Abraços.
Sennior

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

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

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