Récemment, en aidant un client à marquer une Shopify thème, je suis tombé sur un problème épineux : comment fusionner la sortie d'une boucle avec celle d'une autre de manière transparente. Permettez-moi de vous expliquer.
La plupart des thèmes Shopify incluent un "modèle de collection" où les produits sont listés via une Liquid boucle. Figure 1 montre comment de telles listes prennent souvent forme.
Si vous n'êtes pas opposé à l'utilisation de TABLEs pour de telles mises en page, Liquid vous couvre avec son TABLEROW tag (référence). Si les systèmes de grille sont plus votre vitesse, vous voudrez employer une sorte de hack de wrapping de ligne, puisque Liquid n'a pas d'énumérateur each_slice() ou d'opérateur modulus.
Mais si vous, comme moi, pensez que le marquage approprié sémantiquement pour une liste de produits est une liste non ordonnée (UL), vous êtes engagé à travailler avec un flux de LIs.
Comme je l'ai mentionné ci-dessus, cette conception nécessitait qu'une liste de collections de produits apparaisse en ligne avec la liste de produits, mais pas n'importe où. Elle était censée être le troisième élément de la première rangée, comme le montre Figure 2.
Maintenant, je ne voulais pas commencer une boucle, l'arrêter, en commencer une autre, l'arrêter, puis commencer la première à nouveau avec un décalage approprié. Cela semblait trop manuel. Encore une fois, je voulais que la sortie soit un flux de LIs comme ceci :
Donc, cela m'a laissé avec deux choix pour la mise en page de ce flux de LIs : les flotter et les dégager ou les inline-blocker.
Il est assez facile d'imaginer comment vous pourriez obtenir la mise en page souhaitée avec des flottants, en flottant chaque LI à gauche, sauf pour le premier, qui serait flotté à droite. Mais l'option de flottement nécessite un dégagement soigneux—à la fois le UL lui-même et chaque troisième LI (en commençant par le premier) doivent être dégagés afin d'éviter le problème révélé dans Figure 3.
Le tag CYCLE de Liquid (référence) est un moyen pratique de le faire, tout comme les pseudo-sélecteurs positionnels de CSS3 positional pseudo selectors. Mais, lorsque le support IE7/IE8 est requis, le cyclage est le meilleur pari.
Pourtant, cette maison de cartes de dégagement me semblait fragile, alors j'ai entrepris de mettre en œuvre la technique de liste inline-block mentionnée précédemment.
Ce qui m'a amené à mi-chemin, comme le montre Figure 4.
Bien que la technique inline-block m'ait libéré des préoccupations de dégagement, j'ai toujours dû faire face au défi de positionnement du design : la liste de navigation de produits devait être alignée à droite dans la première rangée. La flotter à droite n'était pas non plus la solution, car cela aurait soumis notre mise en page au même risque montré dans Figure 3.
C'est alors que j'ai eu une idée folle : et si je changeais la direction de la langue du UL pour que la liste s'affiche de droite à gauche ? Encouragé par un article récent de Chris Coyier, j'ai décidé d'essayer. Voici ce que j'ai finalement trouvé :
Comme vous pouvez le voir, j'ai dû changer la direction de la langue sur le UL conteneur, puis la réinitialiser sur les éléments à l'intérieur de ses LIs (pour une raison quelconque, la réinitialisation de la direction de la langue sur les LIs eux-mêmes ne fonctionnait pas dans Opera). J'ai également dû définir la taille de la police du UL à zéro afin d'éviter ceci.
Puisque la liste des produits de ce magasin ne nécessitait pas d'ordre spécifique (alphabétique, prix, etc.), il était acceptable que la sortie s'écoule de droite à gauche, comme le montre Figure 5.
Bien qu'il y ait des avantages et des inconvénients aux mises en page flottantes et inline-block, j'ai trouvé que cette dernière était un peu plus élégante dans cette situation. L'un de vous a-t-il déjà rencontré cela ? Êtes-vous hanté par les listes ?