infinite_scroll cree une rupture dans le flux

  • Posts: 2600
  • Thank you received: 64
  • Hikashop Business
4 years 11 months ago #306599

-- HikaShop version -- : 4.1.0

Bonjour
dans la liste des produits infinite_scroll cree une rupture car il ajoute un conteneur var div = d.createElement('div');
ce qui fait qu'on se retrouve avec des vides entre les elements qui ne finissent pas une ligne

est il possible d'éviter ce code

var div = d.createElement('div');
o.updateElem(div, xhr.responseText);
et de charger les elements sans conteneur a la suite des autres dans le conteneur principal?

merci

Last edit: 4 years 11 months ago by erickb.

Please Log in or Create an account to join the conversation.

  • Posts: 81539
  • Thank you received: 13069
  • MODERATOR
4 years 11 months ago #306604

Bonjour,

Il faudrait faire des tests. Ce que vous pourriez faire, c'est essayé de remplacer :
var newNode = container.parentNode.insertBefore(div, container);
par:

for(var i =0; i < div.children.length, i++) {
var newNode = container.parentNode.insertBefore(div.children[i], container);
}
mais je ne suis pas convaincu que cela vous aide.
Car vous aurez toujours le <div style="clear:both"></div> de fin de ligne des éléments précédent.

The following user(s) said Thank You: erickb

Please Log in or Create an account to join the conversation.

  • Posts: 2600
  • Thank you received: 64
  • Hikashop Business
4 years 7 months ago #310524

Je reviens là dessus car ce scroll infini n'est pas du tout responsive design
j'ai 4 elements par lignes qui passent a 3 puis 2 puis un selon la largeur d'ecran
le problème c'est quand ils passent a trois , il y a une ligne avec 2 éléments et un vide

Please Log in or Create an account to join the conversation.

  • Posts: 81539
  • Thank you received: 13069
  • MODERATOR
4 years 7 months ago #310529

Bonjour,

C'est surement dû au fait que vos blocs produits n'ont pas tous la même taille. Normalement, il suffit d'activer l'option "height consistency" de votre élément de menu, ou d'ajouter une ligne de CSS pour forcer la taille de tous les blocs.
Notez qu'avec la prochaine version d'HikaShop nous allons passer sur un système de grid utilisant flex au lieu de floats. Cela permettra d'éviter ce soucis dans tous les cas peu importe si l'option "height consistency" est activée ou non, etc.

Please Log in or Create an account to join the conversation.

  • Posts: 2600
  • Thank you received: 64
  • Hikashop Business
4 years 7 months ago #310552

j'ai contourne le probleme en en mettant 12 a chaque fois 4x3 ou 3x4 ca resoud le probleme

passer a flex est une excellente nouvelle, je n'utilise plus que flex et grid et je n'ai quasiment jamais utilise float mais plutot inline-block
mais ca ne résoudra pas le problème du conteneur, il faudrait tout envoyer a la suite sans conteneur pour chaque groupe


ce serait bien aussi dans une prochaine version de faire le backend en flex box pour l'edition des produits
hikashop_product_edition_tab_1.hk-container-fluid display:flex
on peut jouer sur order pour les placer comme on veut (c'est ce que je fais avec (backend_custom.css)

merci

Last edit: 4 years 7 months ago by erickb.

Please Log in or Create an account to join the conversation.

  • Posts: 81539
  • Thank you received: 13069
  • MODERATOR
4 years 7 months ago #310570

Le backend passera en flex aussi vu que les deux se basent sur le même code CSS.

The following user(s) said Thank You: erickb

Please Log in or Create an account to join the conversation.

  • Posts: 2600
  • Thank you received: 64
  • Hikashop Business
4 years 3 weeks ago #316899

Je reviens sur cet ancien sujet
Il serait possible d’éviter tout ça en utilisant tout simplement le nouveau HTML loading=Lazy
Qui est assez bien supporté actuellement et en cours d’implémentation dans Safari caniuse.com/#feat=loading-lazy-attr

Contourné actuellement en utilisant display=contents

Last edit: 4 years 3 weeks ago by erickb.

Please Log in or Create an account to join the conversation.

  • Posts: 81539
  • Thank you received: 13069
  • MODERATOR
4 years 3 weeks ago #316910

Bonjour,

Je dois avoué que vous m'avez perdu.
Quel est le rapport entre le lazy loading des images et le soucis avec le

<div style="clear:both"></div>
qui se rajoutait entre les pages du listing en mode infinite scroll ?
Notez aussi que flexbox est déjà dans HikaShop depuis, et que donc les soucis mentionnés ici n'apparaissent plus.

Please Log in or Create an account to join the conversation.

  • Posts: 2600
  • Thank you received: 64
  • Hikashop Business
4 years 3 weeks ago #316958

l'infini scroll actuellement ajoute un div qui contient les nouveaux elements dans un groupe et cree donc une rupture, on se retrouve avec des lignes incomplètes (avec en plus ce clear both)
et bien sur en plus ca nécessite encore un javascript
Le lazy loading évite tout ca

J'utilisais jusque la display:contents; sur ces div pour les faire disparaitre

Please Log in or Create an account to join the conversation.

  • Posts: 81539
  • Thank you received: 13069
  • MODERATOR
4 years 3 weeks ago #316960

Bonjour,

Je comprends bien ce que vous dites sur les soucis que vous avez avec le système actuel. Mais je ne vois pas en quoi le lazy loading sera utilisable pour faire un système d'infinite scroll.
Le lazy loading permet de ne charger que les images visibles en priorité et de décaler le chargement des autres images plus part pour afficher la page plus rapidement.
Le but d'une pagination ou d'un "inifinite scroll" est de ne charger qu'un set limité d'éléments sur la page pour éviter de surcharger le serveur avec des pages trop grosses (HTML, ressources, etc).
Le lazy loading des images pourrait être ajouté, mais cela ne changerait pas le fait qu'on ne puisse pas charger tous les éléments d'un coup car cela consommerait trop de ressources sur le serveur.
D'ailleurs, en aparté, il existe déjà des extensions pour Joomla pour rajouté du lazy loading sur les images de vos pages, y compris les pages HikaShop: extensions.joomla.org/extension/lazy-load-for-joomla/

The following user(s) said Thank You: erickb

Please Log in or Create an account to join the conversation.

Time to create page: 0.068 seconds
Powered by Kunena Forum