JavaScript - owlCarousel - Mostrar itens relacionados

[violin101 0]

Caros amigos, saudações...

 

Tenho uma rotina para mostrar ao usuário todos os produtos Relacionados com um determinado Produto.

 

Exemplo:

Caderno ---> relacionado com: lápis, borracha, caneta, apontador e etc.

 

O problema que estou enfrentando é o seguinte:

==> o produto caderno se estiver relacionado com mais de 4 produtos não ocorre o erro.

 

Quando mostro o relacionamento se o produto estiver relacionado com apenas 3 ou menos produto, o CAROUSEL fica repetindo o 1º ou 2º item.

 

Como faço para isso não acontecer ?

 

Abaixo posto como está o JavaScript.

$(".produto_relaciona").owlCarousel({
  loop: true,
  nav: true,
  items: 4,
  dots: false,
  navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
  smartSpeed: 1200,
  autoplayTimeout: 5000,        
  autoHeight: false,
  autoplay: true,
  responsive: {
    0: {
      items: 1
    },
    480: {
      items: 2
    },
    768: {
      items: 3
    },
    992: {
      items: 4
    }
  }
});

 

 

Grato,

 

Cesar

[wanderval 19]

1 ponto: Você deveria ter colocado tb o html

2 ponto: no seu script você define claramente 4 items, então acredito que o que esteja ocorrendo e apenas exibir as imagesn novamente devido o loop.

 

Obs: não ficou muito clara sua dúvida, você quer exibir 4 imagens diferentes tendo menos de 4?

 

JsBin: https://jsbin.com/jerahopipe/edit?html,js,output

 

 

$(".owl-carousel").owlCarousel({
  loop: true,
  nav: true,
  items: 4, // Define o numero de items
  dots: false,
  navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
  smartSpeed: 1200,
  autoplayTimeout: 5000,        
  autoHeight: false,
  autoplay: true,
  responsive: {
    // acredito que defina o espaçamento entre os itens, logo se houver apenas 2 imagesn e no attributo items for igual 2(items:2) a biblioteca ira considerar essa definiçao agora se essa definiçao não existir passa a vvalor o valor de (items) seguindo a configuracao da biblioteca para exibir a cada loop o numero igual aos itens definidos
    0: {
      items: 1
    },
    480: {
      items: 2
    },
    768: {
      items: 3
    },
    992: {
      items: 4
    }
  }
});

 

[violin101 0]

Olá amigo, Wanderval

 

saudações...

 

Vou tentar te explicar melhor.

 

O produto CADERNO:  tem 4 produtos relacionados a ele.

O produto CANETA...:  tem 3 produtos relacionados a ele.

 

A quantidade de relacionamento para CADA produto, depende da quantidade de relacionamento cadastro pelo o usuário.

 

Observação:

1 - a quantidade de itens relacionado pode variar.

2 - não foi defini o ESPAÇAMENTO entre os itens, pois é nessa parte que estou errando.

 

A rotina que escrevi para mostrar está assim:

<?php if (!$relaks) { ?>
<!--Não Mostra nada-->
<?php } else  { ?>    	
<section class="product-area li-laptop-product pt-10 pb-50">
  <div class="container">
    <div class="row">
      <!-- Begin Li's Section Area -->
      <div class="col-lg-12">
        <div class="li-section-title">
          <h2>
            <span>Produto(s) Relacionado(s)</span>
          </h2>
        </div>
        <div class="row">
          <div class="product-relat owl-carousel">
            <?php foreach ($relaks as $pr) { ?>
            <div class="col-lg-12">
              <div class="single-product-wrap">
                <div class="product-image">
                  <?php if ($pr->imagemCapa != null) { ?>
                  <img src="<?php echo $pr->imagemCapa; ?>" alt="">
                  <?php } else { ?>
                  <img src="<?php echo base_url() ?>assets/img/semImg.jpg"
                       alt="">
                  <?php } ?>
                  <div class="product-label">
                    <?php if($pr->desc_promocao != "" && $pr->desc_promocao != 0){ ?>
                    <span class="dscprd">-<?php echo $pr->desc_promocao; ?>%</span>
                    <?php } 
					if($pr->novo != "2"){ ?>
                    <span class="newprd">NOVO</span> 
                    <?php } ?>
                  </div>
                </div>

                <div class="product_desc">
                  <div class="product_desc_info">
                    <div class="product-review">
                      <h5 class="manufacturer">
                        <p><?php echo $pr->mrc_descr; ?></p>
                      </h5>
                      <div class="rating-box">
                        <?php 
                          $codProd = $pr->idProdutos;
                          $codClie = $pr->id_clientes;
                          $average = 0;
                          $pontoNumber = 0; 
                          $count = 0;                 
                          //Executa SQL no Mysql
                          $sqls = $this->db->query("SELECT avaliacao.*, produtos.*, clientes.*
                          FROM avaliacao 
                          INNER JOIN produtos ON produtos.idProdutos = avaliacao.avl_idProdutos
                          INNER JOIN clientes ON clientes.idClientes = avaliacao.avl_idClientes
                          WHERE avl_idClientes = $codClie
                          AND avl_idProdutos = $codProd ");

                          foreach($sqls->result() as $al) {
                          $pontoNumber += $al->avl_ponto;
                          $count += 1;                         
                          } 

                          if($pontoNumber && $count) {
                          $average = $pontoNumber/$count;
                          }                                                 
                          $averageRating = round($average, 0);

                          if($averageRating == 0){ ?>
                        <div style="color:#FFFFFF;">-</div>
                        <?php } else {
                          for ($i = 1; $i <= 5; $i++) {

                          if($i <= $averageRating) {
                          $ratingClass = "<i class='fa fa-star'></i>";
                          } else {
                          $ratingClass = "<i class='fa fa-star-o empty'></i>";
                          }//Fim do IF ?>

                        <i class="fa fa-star <?php echo $ratingClass; ?>"></i>

                        <?php }//Fim do FOR
                          }//Fim do IF
                        ?>
                      </div>
                    </div>
                    <h4>
                      <p class="produto_name">
                        <?php echo $pr->descricao; ?>
                      </p>
                    </h4>
                    <div class="price-box">
                      <?php 
                        if($pr->valor_venda != 0) {
                        $vlrvda = $pr->valor_venda;
                        } else {
                        $vlrvda = $pr->valor_ultcpra;
                        }

                        if($pr->desc_promocao != "" && $pr->desc_promocao != 0){
                        //Converte
                        $valor = floatval(str_replace(",",".",$vlrvda));
                        $desc  = floatval(str_replace(",",".",$pr->desc_promocao));
                        //Calcular
                        $calc = ($valor * $desc)/100;
                        $result = $valor - $calc; ?>
                      <span class="new-price new-price-2">
                        R$ <?php echo number_format($result, 2, ",", ".");?>
                      </span>
                      <span class="old-price">
                        R$ <?php echo number_format($vlrvda, 2, ",", "."); ?>
                      </span>
                      <?php } else { ?>
                      <span class="new-price new-price-2">
                        R$ <?php echo number_format($vlrvda, 2, ",", "."); ?>
                      </span>                                                  
                      <?php } ?>                                                 
                    </div>
                  </div>
                  <div class="product_categ pt-5">
                    <label class="prdCateg">Categoria</label>
                    <label class="lblCateg"><?php echo $pr->categoria; ?></label>
                  </div>                                            
                  <div class="add-actions">
                    <form method="post" action="<?php echo base_url();?>site/produtos/dadosProdutos/<?php echo $pr->idProdutos; ?>">                
                      <button class="add-to-cart-btn">
                        <i class="fa fa-search"></i>Visualizar
                      </button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <?php }//Fim do Foreach ?>	                                
          </div>
        </div>                        
      </div>
      <!-- Li's Section Area End Here -->
    </div>
  </div>
</section>  
<?php } ?>

 

Grato,

 

Cesar

[Omar~ 87]

@violin101

Entendi seu problema e é fácil de resolver.

Porém desde já: Desconheço completamente o comportamento de owlCarousel

 

A questão é simples o PHP gera o HTML que por sua vez pode conter uma quantidade de elementos sendo 1,2,3,4,5.... porém no javascript você interpreta apenas 4 desses.

Basta apenas indicar ao script quantas voltas de loop existem.

E você já tem solução aí em seu código:

Agora, violin101 disse:

$count += 1;

 

Assim sendo acredito que isso já possa solucionar. Ou seja indicando ao script o que o html possui de elementos.

7 horas atrás, violin101 disse:

nav: true,

items: <?= $count ?>,

dots: false,

 

Entretanto me intriga esse objeto, justamente porque não sei como funciona o owlCarousel:

7 horas atrás, violin101 disse:

responsive: {

Se for o que penso... que seja somente algo de renderização de escala não será necessário intervir, porém se tiver algo a mais.

Você pode está usando o PHP para escrever essa parte do javascript de acordo com o loop.

 

 

Citar

NOTA*

Para que códigos php sejam escrito no javascript, é necessário que o script esteja no mesmo documento onde o código php está sendo gerado.

 

[violin101 0]

Caros amigos, saudações...

 

Consegui resolver o problema que estava enfrentando.

 

Ficou assim:

$(".produto_relaciona").owlCarousel({
  loop: true,
  nav: true,
  items: 4, //aqui mantive para o sistema saber e configurar quantos ITENS desejo mostrar no site
  dots: false,
  navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
  smartSpeed: 1200,
  autoplayTimeout: 5000,        
  autoHeight: false,
  autoplay: true
  
  /*---[ eliminei essas linhas abaixo e mantive acima conforme esta
  responsive: {
    0: {
      items: 1
    },
    480: {
      items: 2
    },
    768: {
      items: 3
    },
    992: {
      items: 4
    }
  }
  */
  
});

 

Grato,

 

Cesar