1

Gostaria da seguinte estrutura para minha página:

<div id="ProdutosSeller" class="col-md-3 col-sm-6 hero-feature">
            <div class="thumbnail">
                <img src="imagem" alt="">
                <div class="caption">
                    <div class="name" title="<?php echo $produto['name']; ?>">
                        nome do produto
                    </div>
                    <br>
                    <div class="price">
                        <span class="price-old"><strong>R$ preço do produto</strong></span>
                    </div>
                    <br>
                    <p>
                        descricao do produto
                    </p>
                    <p>
                        <a href="index.php?route=product/product&product_id=id do produto" class="btn btn-primary">Comprar</a>
                    </p>
                </div>
            </div>
            <br>
        </div>

Meu Script está assim:

<script type="text/javascript">

    var count = 0;



    function verMaisProdutos() {
        count = count + 4;

                $.ajax({
                    url : "index.php?route=customerpartner/profile/getAjaxProducts&id=58&offset=" + count, //Página PHP que seleciona postagens
                    type : 'POST', // método post, GET ...
                    dataType: 'html',
                    success : function(data) {// sucesso de retorno executar função
                        $('#ProdutosSeller').append(data);
                        // adiciona o resultado na div #conteudo
                    } // fim success
                }); // fim ajax

    }
</script>

E as informações do array data estão vindo assim:

[{"product_id":"112","model":"A-744362K","sku":"744362K","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"1","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"53","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"113","model":"I-502165","sku":"502165","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"54","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"114","model":"L-201150","sku":"201150","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"55","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"115","model":"B-207191","sku":"207191","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"56","customer_id":"58","seller_price":"8.5","currency_code":"BRL"}]
1
  • Faz $('#ProdutosSeller').html(data); Commented 18/05/2017 às 14:19

3 Respostas 3

1

Você precisa percorrer o JSON e montar a estrutura com os dados de cada produto, veja um exemplo:

var response = [{"product_id":"112","model":"A-744362K","sku":"744362K","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"https://placeholdit.imgix.net/~text?txtsize=24&txt=150%C3%97150&w=150&h=150","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"1","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"53","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"113","model":"I-502165","sku":"502165","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"https://placeholdit.imgix.net/~text?txtsize=24&txt=150%C3%97150&w=150&h=150","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"54","customer_id":"58","seller_price":"8.5","currency_code":"BRL"}];
//loop nos objetos do JSON
$.each(response,function(){
  var produto = $(this).get(0);//seleciona o produto
  $thumb = $('<div class="thumbnail"></div>');//cria a div principal
  $thumb.html('<img src="'+produto.image+'"/>'); //imagem
  $thumb.append('<div class="name" title="' + produto.model + '">' + produto.model + '</div>');//name
  $thumb.append('<br>');
  $thumb.append('<div class="price"><span class="price-old"><strong>R$ '+produto.price+'</strong></span></div>'); //price
  $thumb.append('<br>');
  $thumb.append('<p>'+produto.model+'</p>');//descrição
  $thumb.append('<p><a href="index.php?route=product/product&product_id='+produto.product_id+'" class="btn btn-primary">Comprar</a></p>');//link para comprar
  $('#ProdutosSeller').append($thumb);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="ProdutosSeller" class="col-md-3 col-sm-6 hero-feature text-center">
    <div class="thumbnail">
        <img src="https://placeholdit.imgix.net/~text?txtsize=24&txt=150%C3%97150&w=150&h=150" alt="">
        <div class="caption">
            <div class="name" title="Titulo">
                nome do produto
            </div>
            <br>
            <div class="price">
                <span class="price-old"><strong>R$ preço do produto</strong></span>
            </div>
            <br>
            <p>
                descricao do produto
            </p>
            <p>
                <a href="index.php?route=product/product&product_id=id do produto" class="btn btn-primary">Comprar</a>
            </p>
        </div>
    </div>
    <br>
</div>

3
  • Consegui da forma que vc passou porem a imagem não aparece, o que pode ser? o caminho esta me retornando assim : catalog/tensionamento-de-correias-gates.jpg do BD
    – user76855
    Commented 18/05/2017 às 17:55
  • @user76855 Muito provavelmente o caminho não existe, tente inspecionar o elemento e pedir para abrir a imagem numa nova aba para verificar se a mesma existe.
    – abfurlan
    Commented 18/05/2017 às 17:56
  • Consegui faltava um caminho da imagem, valeu!!!!!
    – user76855
    Commented 18/05/2017 às 18:00
0

Opa, tendo o json fica mais facil :D vamos lá

insira o código aq

let val = [{"product_id":"112","model":"A-744362K","sku":"744362K","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"1","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"53","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"113","model":"I-502165","sku":"502165","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"54","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"114","model":"L-201150","sku":"201150","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"55","customer_id":"58","seller_price":"8.5","currency_code":"BRL"},{"product_id":"115","model":"B-207191","sku":"207191","upc":"","ean":"","jan":"","isbn":"","mpn":"","location":"","quantity":"67","stock_status_id":"0","image":"catalog\/tensionamento-de-correias-gates.jpg","manufacturer_id":"20","shipping":"1","price":"8.5","points":"0","tax_class_id":"9","date_available":"2017-04-24","weight":"1.00000000","weight_class_id":"1","length":"1.00000000","width":"1.00000000","height":"1.00000000","length_class_id":"1","subtract":"1","minimum":"1","sort_order":"1","status":"1","viewed":"0","date_added":"2017-05-15 13:29:41","date_modified":"0000-00-00 00:00:00","id":"56","customer_id":"58","seller_price":"8.5","currency_code":"BRL"}]

let oi = val.map(function(valor){
  $('body').append('<h1>'+valor.id+'</h1>');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1
  • ai é so ir passando os outros valores como nome e etc, e ir colocando as div conforme preferir Commented 18/05/2017 às 14:22
0

Meu script ficou assim:

insira o código aqui var count = 0;

function verMaisProdutos() {
    count = count + 4;
            $.ajax({
                url : "index.php?route=customerpartner/profile/getAjaxProducts&id=58&offset="+ count, //Página PHP que seleciona postagens
                type : 'POST', // método post, GET ...
                dataType : 'html',
                success : function(data) {// sucesso de retorno executar função
                    var response = JSON.parse(data);
                    var i = 0;
                            $.each(response,function() {
                                        var produto = $(this).get(0);//seleciona o produto
                                        $thumb = $('<div class="col-md-3 col-sm-6 hero-feature"></div>');//cria a div principal
                                        $thumb.append('<div class="thumbnail"></div>');
                                        $thumb.html('<img src="'+produto.image+'">'); //imagem
                                        $thumb.append('<div class="caption"></div>');
                                        $thumb.append('<div class="name" title="' + produto.name + '">'+ produto.name+ '</div>');//name
                                        $thumb.append('<br>');
                                        $thumb.append('<div class="price"><span class="price-old"><strong>R$ '+ produto.price + '</strong></span></div>'); //price
                                        $thumb.append('<br>');
                                        $thumb.append('<p>' + produto.description + '</p>');//descrição
                                        $thumb.append('<p><a href="index.php?route=product/product&product_id='+ produto.product_id + '" class="btn btn-primary">Comprar</a></p>');//link para comprar
                                        $('#ProdutosSeller').append($thumb);
                                    });// adiciona o resultado na div #conteudo
                            } // fim success
            }); // fim ajax

}

porem a imagem não aparece, o que pode ser? o caminho esta me retornando assim : catalog/tensionamento-de-correias-gates.jpg do BD

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .