Tech Mais

O Tech Mais é um fórum que aborda vários temas atuais, de cultura e arte até programação e tecnologia.


Você não está conectado. Conecte-se ou registre-se

 » Programação » Cascading Style Sheet (CSS) » Arquivo: Resolvido » 

Alterar aparência da loja

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

iLuciano
iLuciano
Ativo

em Seg Set 16, 2019 10:15 pm
Minha questão:
Olá pessoal, quero tentar mudar a aparência da minha loja no meu fórum. Deixarei exemplos e o código para ver se uma modificação pode ser adicionada.

Spoiler:
Alterar aparência da loja Tienda10
Código:
<script type="text/javascript">
  $(function() {
  var produtos = {
 
    'NICK STYLISH': {
        icone: 'https://i.servimg.com/u/f13/19/81/07/80/sin_tz26.png',
        preco: '500',
        descricao: 'Agrega estilo al nick del usuario'
    },
 'FIRMA': {
        icone: 'https://i.servimg.com/u/f13/19/81/07/80/icon10.png',
        preco: '250',
        descricao: 'Agrega tu firma'
    }

 };
 
 
 
  var content = $('.content .itens');
      $.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 15%;"><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="https://i.imgur.com/qdiucii.png" /> Precio: ' + value.preco + ' puntos</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Agregar al carrito" /></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('Mi saldo de puntos: <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> puntos');
    $('.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> puntos');
    $(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': 'Orden de la tienda',
            'message': texto
      }).done(function() {
        alert("Su pedido ha sido enviado! Espera a que un administrador agregue tus artículos");
        resetItems();
      });
      } else {
        alert("No tienes suficientes puntos para realizar la compra.");
      }
    } else {
      alert("El carrito esta vacio");
    }
  }
</script><style type="text/css">
table.content {
  background: #fffff;
  border: 0px 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: 60px;
  width: 140px;
}
.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, .myPoints {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;">Tienda de Puntos</span>
</div>
<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="Comprar" onclick="buyItems()" />  <input type="button" value="Restablecer elementos" onclick="resetItems()" />
</div>


Endereço do meu fórum:
http://

http://lucianomicle.foroactivo.com/
RafaelS.
RafaelS.
Administrador

em Seg Set 16, 2019 11:04 pm
Olá!

Não entendi o que deseja alterar na aparência da loja, poderia explicar?

Até mais!



Olá Convidado!
Leia as regras e disposições gerais do Tech Mais.
Caso tenha alguma dúvida poderá contactar a nossa equipe..
Nos lhe desejamos uma ótima estadia em nosso fórum.
RafaelS. — Fundador
https://www.tech-mais.com
iLuciano
iLuciano
Ativo

em Ter Set 17, 2019 2:12 am
Olá É o que estou dizendo, quero mudar a aparência da loja.
Não gosto da aparência e da visualização.
Algo como sua loja. Porque por si só é realizada em uma mesa feia e eu quero que seja mais impressionante.
Saudações!

http://lucianomicle.foroactivo.com/
RafaelS.
RafaelS.
Administrador

em Ter Set 17, 2019 7:58 am
Sim, eu entendi que você quer alterar a aparência da loja.
Porém, eu não posso adivinhar como você quer que fique.

Seja especifico nas alterações que quer fazer. Feliz



Olá Convidado!
Leia as regras e disposições gerais do Tech Mais.
Caso tenha alguma dúvida poderá contactar a nossa equipe..
Nos lhe desejamos uma ótima estadia em nosso fórum.
RafaelS. — Fundador
https://www.tech-mais.com
iLuciano
iLuciano
Ativo

em Ter Set 17, 2019 8:35 am
Olá
Faça com que pareça mais moderno e um elemento abaixo do outro.

http://lucianomicle.foroactivo.com/
RafaelS.
RafaelS.
Administrador

em Ter Set 17, 2019 8:59 am
Olá @iLuciano,

Bem tentei fazer algo, para que fique com uma aparência "moderna":

Código:
<script type="text/javascript">
  $(function() {
  var produtos = {
 
    'NICK STYLISH': {
        icone: 'https://i.servimg.com/u/f13/19/81/07/80/sin_tz26.png',
        preco: '500',
        descricao: 'Agrega estilo al nick del usuario'
    },
 'FIRMA': {
        icone: 'https://i.servimg.com/u/f13/19/81/07/80/icon10.png',
        preco: '250',
        descricao: 'Agrega tu firma'
    }
 
 };
 
 
 
  var content = $('.content .itens');
      $.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 15%;"><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="https://i.imgur.com/qdiucii.png" /> Precio: ' + value.preco + ' puntos</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Agregar al carrito" /></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('Mi saldo de puntos: <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> puntos');
    $('.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> puntos');
    $(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': 'Orden de la tienda',
            'message': texto
      }).done(function() {
        alert("Su pedido ha sido enviado! Espera a que un administrador agregue tus artículos");
        resetItems();
      });
      } else {
        alert("No tienes suficientes puntos para realizar la compra.");
      }
    } else {
      alert("El carrito esta vacio");
    }
  }
</script><style type="text/css">
table.content {
  background: #fffff;
  border: 0px 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: 60px;
  width: 140px;
}
.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, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
.itens tr.item {
    display: inline-block;
    width: 32%;
    border: 1px solid #d6d6d6;
    margin: 5px;
    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.itens tr.item td {
    background: white;
    border:0;
}
</style>
<div class="daemon">
                <span style="color: white;font-size: 28px;font-weight: bold;">Tienda de Puntos</span>
</div>
<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="Comprar" onclick="buyItems()" />  <input type="button" value="Restablecer elementos" onclick="resetItems()" />
</div>

Até mais! Feliz



Olá Convidado!
Leia as regras e disposições gerais do Tech Mais.
Caso tenha alguma dúvida poderá contactar a nossa equipe..
Nos lhe desejamos uma ótima estadia em nosso fórum.
RafaelS. — Fundador
https://www.tech-mais.com
iLuciano
iLuciano
Ativo

em Ter Set 17, 2019 9:03 am
Olá @RafaelS.

Spoiler:
Alterar aparência da loja Miraaa10

http://lucianomicle.foroactivo.com/
RafaelS.
RafaelS.
Administrador

em Ter Set 17, 2019 9:09 am
Olá!

Código:
<script type="text/javascript">
  $(function() {
  var produtos = {
 
    'NICK STYLISH': {
        icone: 'https://i.servimg.com/u/f13/19/81/07/80/sin_tz26.png',
        preco: '500',
        descricao: 'Agrega estilo al nick del usuario'
    },
 'FIRMA': {
        icone: 'https://i.servimg.com/u/f13/19/81/07/80/icon10.png',
        preco: '250',
        descricao: 'Agrega tu firma'
    }
 
 };
 
 
 
  var content = $('.content .itens');
      $.each(produtos, function (key, value) {
          content.append(
          '<tr class="item">' +
          '  <td class="icone" style="width: 15%;"><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="https://i.imgur.com/qdiucii.png" /> Precio: ' + value.preco + ' puntos</li>' +
          '  <br />' +
          '  <li><input type="button" onclick="addToCart(this)" value="Agregar al carrito" /></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('Mi saldo de puntos: <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> puntos');
    $('.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> puntos');
    $(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': 'Orden de la tienda',
            'message': texto
      }).done(function() {
        alert("Su pedido ha sido enviado! Espera a que un administrador agregue tus artículos");
        resetItems();
      });
      } else {
        alert("No tienes suficientes puntos para realizar la compra.");
      }
    } else {
      alert("El carrito esta vacio");
    }
  }
</script><style type="text/css">
table.content {
  background: #fffff;
  border: 0px 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: 60px;
  width: 140px;
}
.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, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
.itens tr.item {
    display: inline-block;
    width: 48%;
    border: 1px solid #d6d6d6;
    margin: 5px;
    background: white;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
}
 
.itens tr.item td {
    background: white;
    border:0;
}
</style>
<div class="daemon">
                <span style="color: white;font-size: 28px;font-weight: bold;">Tienda de Puntos</span>
</div>
<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="Comprar" onclick="buyItems()" />  <input type="button" value="Restablecer elementos" onclick="resetItems()" />
</div>



Olá Convidado!
Leia as regras e disposições gerais do Tech Mais.
Caso tenha alguma dúvida poderá contactar a nossa equipe..
Nos lhe desejamos uma ótima estadia em nosso fórum.
RafaelS. — Fundador
https://www.tech-mais.com
iLuciano
iLuciano
Ativo

em Ter Set 17, 2019 9:12 am
Excelente novamente! Obrigada

http://lucianomicle.foroactivo.com/
RafaelS.
RafaelS.
Administrador

em Ter Set 17, 2019 9:16 am
[sucesso="Questão resolvida"]O autor do tópico deu a sua questão como resolvida, e assim sendo o tópico será enviado para o arquivo.[/sucesso]



Olá Convidado!
Leia as regras e disposições gerais do Tech Mais.
Caso tenha alguma dúvida poderá contactar a nossa equipe..
Nos lhe desejamos uma ótima estadia em nosso fórum.
RafaelS. — Fundador
https://www.tech-mais.com
Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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