Catégories
Plugin et site web

Un cadre de grille CSS pour les pages de collection Shopify – Smashing Magazine

A propos de l'auteur

Liam est un Developer Community Manager chez Shopify, basé en Irlande, et se spécialise dans le développement front-end, Liquid et le travail avec des thèmes. Il est passionné…
Plus à propos
Liam

Dans cet article, nous verrons comment configurer une disposition en grille pour les produits sur les pages de votre collection et comment utiliser les paramètres de section de Shopify pour créer des options personnalisables dans l'éditeur de boutique en ligne.

CSS Grid est devenu une technique de plus en plus populaire pour appliquer une mise en page aux pages parmi d'autres frameworks CSS. Les développeurs peuvent profiter de ce système pour réduire la complexité et définir des règles de style claires. Comme expliqué dans mon article de blog Shopify sur la mise en place d'une disposition de grille CSS, un cadre de grille CSS peut être facilement implémenté sur les thèmes Shopify pour concevoir des mises en page réactives basées sur des lignes et des colonnes.

Toutes les pages d'une boutique en ligne Shopify peuvent adopter CSS Grid, mais un point de contact évident de tout site de commerce électronique qui peut bénéficier d'une mise en page robuste et propre est la page de collecte. Sur les pages de collection, il semble naturel que les produits soient organisés dans un format de grille, avec des lignes et des colonnes. Par conséquent, si une option permettant de créer une disposition de grille robuste avec un ensemble simple de règles est possible, cela vaut la peine d’explorer vos projets de thèmes personnalisés.

Remarque: Pour avoir une idée de ce à quoi cela pourrait ressembler pour vos clients et vous permettre de suivre ce didacticiel CSS Grid, j'ai mis en place un magasin de test que vous pouvez utiliser pour voir l'approche que j'ai décrite dans ce didacticiel.

Création d'une mise en page de collection de base

Travailler avec CSS Grid sur une page de collection Shopify fonctionnera de la même manière que la façon dont Grid fonctionne sur une section personnalisée – ce que nous avons exploré dans l'article du blog CSS grid. Heureusement, Shopify a un excellent support de grille CSS. La plus grande différence lors de la mise en œuvre d'un système de grille sur une page de collection est que vous n'avez pas besoin d'attribuer une classe à chaque élément individuel. Notez que si vous n'êtes pas extrêmement avancé avec CSS, nous vous recommandons de lire notre guide d'introduction au CSS avant d'aller plus loin.

Désormais, étant donné que les produits sont automatiquement générés en boucle en tant qu'éléments de contenu répétables, il est possible d'appliquer la même classe à tous les produits associés à une collection. Mais tout d'abord, examinons un exemple de page de collection sans style.

Si vous commencez avec une configuration de page de collection de base, vous avez probablement un balisage qui ressemble à ce qui suit:

{{collection.title}}

{% pour le produit de la collection.products%} {{product.featured_image.alt | échapper }} {{product.title}}

{{product.price | argent }}

{% sauf si le produit est disponible%}
épuisé{% endunless%} {% endfor%}

Cela affichera le nom de la collection sous forme d'en-tête et affichera les produits associés à la collection avec leur image, leur nom et leur prix. Sans aucun style, ces produits apparaîtront dans une rangée verticale par défaut. La taille des images du produit sera de 300 pixels, comme défini par le img_url filtre.

Pour appliquer une structure CSS Grid à ce groupe de produits, vous devez d'abord envelopper la collection for loop dans un conteneur de grille principal, considéré comme le conteneur parent. Ensuite, vous pouvez envelopper le code de chaque produit individuel (les enfants) dans son propre conteneur individuel.

Une fois ces conteneurs ajoutés, le balisage apparaîtra comme suit:

{{collection.title}}

{% pour le produit de la collection.products%}
{{product.featured_image.alt | échapper }} {{product.title}}

{{product.price | argent }}

{% sauf si le produit est disponible%}
épuisé{% endunless%}
{% endfor%}

Application du style CSS Grid Framework à la page de collection

Maintenant que nous avons une page de collection de base avec une hiérarchie de conteneurs, vous pouvez diviser les produits en une disposition de grille en appliquant des styles aux classes que vous avez créées. Dans le fichier de feuille de style des thèmes, vous pouvez ajouter les éléments suivants:

.grid-collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-product {
  display: grid;
}

Désormais, lorsque vous accédez à la page de collecte, vous devriez voir les produits apparaître dans une grille, s'insérant dans l'espace disponible à l'écran.

Un aperçu de la page de collection
(Grand aperçu)

En plus d'ajouter display: grid, vous remarquerez que nous utilisons également le grid-template-columns propriété, qui peut être utilisée pour définir le nombre de colonnes qui apparaissent dans la grille. Au lieu de définir une valeur fixe, nous pouvons utiliser la notation de répétition pour créer une règle selon laquelle nos produits doivent apparaître autant de fois qu'ils peuvent tenir dans la grille.

Dans la notation fonctionnelle, auto-fit affiche autant d'articles que possible sur la ligne, donc en plein écran, nous verrons autant de produits apparaître qu'il y a d'espace sur l'écran des acheteurs. Enfin, avec minmax, nous avons mis en place une règle selon laquelle chaque cellule doit avoir un minimum de 300 pixels et un maximum d'une fraction de la grille-conteneur.

Lors de l'utilisation de cette propriété, nous devons nous assurer que la taille définie dans le minmax la fonction correspond ou est supérieure à la taille définie par le img_url Filtre liquide dans notre balisage. Si la minmax contient une taille de pixel plus petite, vous verrez que les images du produit sont coupées car elles n’auront pas assez d’espace dans la cellule définie.

Une fois que notre grille de base apparaît comme prévu, nous pouvons ajouter du CSS supplémentaire pour ranger la mise en page en ajoutant un espace de marge et en positionnant les produits au centre de la page. Si vous souhaitez que l'écart entre vos colonnes et vos lignes soit le même, vous pouvez définir les deux avec le gap propriété, plutôt que de définir chacun séparément.

Une fois que tout est configuré, votre feuille de style ressemblera à ceci:

.grid-collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  margin: 1em;
  background-color: white;
}

.grid-product {
  display: grid;
  justify-content: center;
  padding: 10px;
  color: white;
  line-height: 1;
  border-radius: 5px;
}

Bien qu'il s'agisse d'un exemple simple de la manière dont un framework CSS Grid peut être appliqué à une page de collection, je vous recommande de tester différents paramètres en fonction des images de votre client et des images de marque existantes. Vous pouvez également utiliser cette approche pour créer des grilles sur d'autres pages, comme le panier, et ajuster en fonction de ses caractéristiques uniques.

Ajout d'options de grille personnalisables

L'approche ci-dessus fonctionne bien pour une grille qui affichera des colonnes de produits en fonction de la taille de l'écran. Mais que se passe-t-il si vous souhaitez donner au commerçant un certain contrôle sur la représentation de la grille?

Dans certains cas, vos clients peuvent souhaiter personnaliser la page du produit et dicter le nombre de produits qui s'affichent.

Si votre balisage est contenu dans un fichier de section, vous pouvez créer des paramètres de section qui permettront aux clients de personnaliser la grille à partir de l'éditeur de la boutique en ligne. Une configuration de paramètres permettant à votre client de sélectionner un certain nombre de produits sur une ligne pourrait ressembler à ceci:

{% schema %}

{
    "name": "Collection",
    "settings": (
  {
    "type": "select",
    "id":  "product_number",
    "label": "Number of products per row",
    "options": (
        {
        "value": "two",
        "label": "two"
        },
        {
        "value": "three",
        "label": "three"
        },
        {
        "value": "four",
        "label": "four"
        }
      )
    }
  )
}

{% endschema %}

Vous pouvez voir ici que le paramètre a un type de select qui affichera une option déroulante sur l'éditeur de la boutique en ligne. Il y a aussi label propriété pour décrire le paramètre.

le id property ne sera pas visible sur l'éditeur, mais nous pouvons y faire référence pour créer une variable. Un cas d'utilisation courant pour les variables créées avec des objets de section est de les référencer dans le balisage pour changer les noms de classe en fonction des paramètres sélectionnés.

Pour obtenir cet effet, nous pouvons utiliser Liquid pour sortir le value qui est sélectionné dans l'éditeur de boutique en ligne, comme attribut de l'objet de section. Cet objet sera exprimé comme {{ section.settings.product_number }}, et affichera la valeur de l'option sélectionnée.

Une façon de voir les choses est que le id nous avons attribué dans le paramètre de section devient un «espace réservé» pour la valeur de l'option sélectionnée.

Ensuite, nous pouvons prendre cet objet et l'ajouter au nom de classe de la collection. Cela permettra au nom de la classe de changer en fonction de l'option sélectionnée, et vous pourrez créer différentes règles CSS pour chaque nom de classe.

Lorsque nous ajoutons la variable au nom de la classe de collection existante, cela ressemblera à:

Ici, vous pouvez voir que l'objet section fait référence au id du réglage de la section. La valeur générée par cet objet de section est déterminée par la valeur sélectionnée dans l'éditeur de boutique en ligne. Par exemple, si "trois" est sélectionné dans notre liste déroulante, cela entraînerait la sortie du balisage comme:

Nous pouvons maintenant revenir à notre feuille de style et configurer différentes règles CSS pour grid-collection-two, grid-collection-three, et grid-collection-four. Celles-ci ressembleraient à:

.grid-collection-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 1em;
  background-color: white;
}

.grid-collection-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 1em;
  background-color: white;
}

.grid-collection-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 1em;
  background-color: white;
}

le grid-template-columns La propriété détermine le nombre de colonnes qui apparaîtront dans la grille et, par conséquent, le nombre de produits qui apparaîtront dans une ligne sur la page de collection. Ainsi, chaque classe aura une valeur différente pour le grid-template-columns propriété, qui correspond à son nom de classe unique.

Désormais, lorsqu'un client accède à l'éditeur de boutique en ligne et sélectionne une option pour "Nombre de produits par ligne", la grille s'ajustera pour refléter ceci:

Aperçu de l'éditeur de boutique en ligne

Enfin, nous pouvons ajouter des requêtes multimédias afin qu'il existe différentes règles de grille CSS pour les écrans plus petits. Cela évitera que la grille apparaisse avec trop de colonnes de produits sur des appareils plus petits, ce qui entraînerait l'apparition de produits hors écran.

Chaque variation du collection-grid la classe peut se voir attribuer des règles différentes où la grille tombera à deux ou une colonnes. Lorsque cela est configuré sur votre feuille de style, cela pourrait ressembler à ceci:

@media screen and (max-width: 992px) {
  .grid-collection-two {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .grid-collection-two {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 992px) {
  .grid-collection-three {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .grid-collection-three {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 992px) {
  .grid-collection-four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .grid-collection-four {
    grid-template-columns: repeat(1, 1fr);
  }
}

Il est probable que vous deviez ajuster les tailles et les valeurs de pixel pour le img_url filtre en fonction des exigences spécifiques de votre client et des images qu'il utilise. Cependant, cette méthode vous montrera comment commencer à utiliser un système CSS Grid pour les pages de collection sur vos propres versions de thème personnalisées.

Élargir la grille

Une fois que vous avez appliqué une grille CSS à vos pages de collection, vous pouvez commencer à considérer d'autres zones de vos thèmes Shopify où des mises en page de site Web robustes peuvent s'appliquer. Par exemple, il est possible de créer des sections de galerie d'images dans une grille et d'ajouter des cellules de forme irrégulière pour la variété.

Il existe une gamme d'opportunités lors de l'utilisation de CSS Grid sur Shopify, et chacune ajoute potentiellement une valeur supplémentaire à vos projets de thème. Avec l'aide de cet article, vous pouvez étendre le framework CSS Grid à tous vos projets de thème.

Éditorial fracassant(rail)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *