=> Impression à la demande | Corvid ** impression t shirt

Modifiez la couleur, ajoutez du texte ou téléchargez des images pour personnaliser les produits.

Jouez avec l'exemple ci-dessous pour voir ce que vous pouvez faire:

Ouvrez cet exemple en tant que modèle pour que vous puissiez voir comment tout fonctionne dans l'éditeur.

Dans cet exemple, un visiteur du site peut personnaliser l'arrière-plan et le texte d'un produit dans le magasin.

La collection que nous avons ajoutée: customProducts

La collection customProducts comporte les champs suivants:

  • Titre: Le nom du produit

  • Masque: une image qui masque la zone entourant une image de produit

  • Produit: un champ faisant référence au champ Nom de la collection Products.

Un séjour sans faille

Personnaliser le produit

La page dynamique CustomProducts affiche l'image, le titre, la description et le prix du produit à partir de la collection Products. En haut à gauche de la page se trouve la possibilité de sélectionner un produit: un étui de téléphone ou un ordinateur portable. Le visiteur sélectionne le produit qu'il souhaite personnaliser en cliquant sur un bouton situé dans un répéteur.

Pour chaque produit, la page en affiche une image et une zone avec des onglets pour la personnalisation de l'arrière-plan et du texte. Les visiteurs peuvent personnaliser l’arrière-plan du produit avec une couleur et / ou une image téléchargée. Les sélections de couleurs sont définies dans la collection Products. Chaque bouton de couleur est composé d'un bouton et d'un conteneur. Le bouton implémente l'effet de survol, qui affiche une bordure noire autour de celui-ci, et le conteneur modifie la couleur. Lorsque le visiteur clique sur un bouton, la couleur d'arrière-plan de l'élément est mise à jour pour refléter sa sélection.

Nous avons créé l'image d'aperçu du produit en superposant des éléments dans un conteneur, dans l'ordre suivant (de haut en bas):

  • L'image du produit sur la page CustomProduct, qui provient du champ Masque

  • Un élément de texte qui affichera le texte personnalisé du visiteur

  • Un élément d'image vide qui affichera la photo téléchargée du visiteur

L'image issue du champ Masque est une image transparente du produit, entourée par un arrière-plan. Cet arrière-plan masque la zone autour de l'image du produit, empêchant ainsi l'affichage d'effets de ses éléments sous-jacents. Étant donné que l'image est transparente, les modifications apportées aux éléments sous-jacents ne sont visibles que dans la partie produit de l'image.

Un séjour sans faille

Personnaliser la couleur de fond

Lorsqu'un visiteur sélectionne une couleur d'arrière-plan, la couleur du conteneur d'arrière-plan change. Cela fait apparaître la couleur sélectionnée dans la partie transparente de l'image du produit, tandis que le masque masque le reste du conteneur d'arrière-plan.

Un séjour sans faille

Personnaliser l'image de fond

Si le visiteur télécharge une photo, la sélection d'un fichier lance le téléchargement et met à jour l'image d'arrière-plan. Ici aussi, l'arrière-plan entourant l'image du produit masque la zone qui l'entoure, permettant ainsi à la photo téléchargée sous-jacente d'apparaître uniquement dans la partie transparente. Si la photo téléchargée est également transparente, le visiteur peut ajouter une couleur de fond en plus de sa photo personnalisée.

Un séjour sans faille

Personnaliser le texte

Sur l'onglet Texte personnalisé, le visiteur peut ajouter du texte personnalisé à son produit. Ils peuvent écrire leur propre texte ou cliquer sur un bouton pour obtenir une phrase aléatoire parmi un ensemble de phrases prédéfini. La sélection est immédiatement reflétée dans l'image du produit. Ils peuvent également sélectionner une couleur pour leur texte. Les boutons de couleur sont implémentés de la même manière que la couleur d'arrière-plan.

En cliquant sur Ajouter au panier ajoute leur produit personnalisé à leur panier.

Un séjour sans failleUn séjour sans faille

Prochaines étapes

  1. Ouvrez cet exemple dans l'éditeur pour utiliser le modèle.

  2. Publiez le site et actualisez votre navigateur pour que les collections de magasins apparaissent dans la base de données.

  3. Apprendre à travailler avec des exemples dans Corvid.Un séjour sans faille

=> Impression à la demande | Corvid ** impression t shirt
4.9 (98%) 32 votes
 

Laisser un commentaire

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