Intégration de ShopEngine avec Gutenberg pour la boutique WooCommerce

Enfin, l'attente est terminée! ShopEngine est désormais compatible avec votre éditeur de blocs Gutenberg . Auparavant, vous pouviez accéder aux widgets ShopEngine uniquement via la fenêtre Elementor, n'est-ce pas ?

Mais maintenant, ShopEngine est disponible au-delà de cela. Outre l'accès aux widgets ShopEngine via Elementor, vous pouvez utiliser ShopEngine dans Gutenberg pour la boutique WooCommerce . Cependant, dans Gutenberg, ces widgets apparaîtront sous forme de blocs.

En fait, les fonctions des widgets Elementor et des blocs Gutenberg sont identiques. Alors, où est la différence ? La différence réside dans l'application. Pour les widgets Elementor, vous deviez faire glisser et déposer des widgets sur les zones désignées pour afficher la sortie. Mais pour les blocs Gutenberg, il vous suffit de cliquer sur les blocs et votre travail est terminé.

Un aperçu de Gutenberg :

En tant qu'utilisateur de WordPress, vous devez être familier avec le terme Gutenberg . C'est un éditeur de contenu WordPress, autrement connu sous le nom d'éditeur de blocs WordPress. De nos jours, Gutenberg est l'éditeur WordPress le plus populaire parmi les utilisateurs de WordPress en raison de sa facilité d'utilisation. De nombreux plugins WordPress Gutenberg sont également disponibles auprès de développeurs tiers.

Auparavant, les gens étaient plus habitués à utiliser "Classic Editor", un autre éditeur WordPress. Depuis l'avènement de Gutenberg, les gens adoptent davantage l'éditeur de blocs que l'éditeur classique. La spécialité de Gutenberg est son contenu basé sur des blocs .

Qu'il s'agisse d'un paragraphe, d'une image ou d'un bouton, chacun de ces éléments est un bloc. Contrairement à Classic Editor, cet éditeur de contenu basé sur des blocs vous permet de manipuler votre contenu avec plus de contrôle. La meilleure partie de cet éditeur de blocs est qu'il permet aux développeurs tiers d'intégrer des blocs personnalisés.

Et c'est exactement ce sur quoi nous allons nous concentrer sur ce blog informatif à partir de maintenant, un tas de fonctionnalités de ShopEngine seront à votre disposition dans Gutenberg pour WooCommerce. Avant de nous attarder sur les blocs personnalisés de ShopEngine dans Gutenberg, permettez-moi de vous expliquer pourquoi nous avons intégré ShopEngine à Gutenberg pour WooCommerce .

Pourquoi intégrer ShopEngine avec Gutenberg :

ShopEngine a été initialement conçu exclusivement pour Elementor. Cela signifie que vous ne pouvez créer vos pages WooCommerce que pour Elementor. Mais maintenant, comme je l'ai mentionné plus tôt, ShopEngine a fait un pas en avant après avoir été intégré à Gutenberg.

Alors, qu'est-ce qui nous a poussé à intégrer ShopEngine à Gutenberg pour WooCommerce ? Pour répondre à cette question, permettez-moi de vous présenter des éléments de données-

Selon le gutenstats.blog, Gutenberg a reçu 76 millions d'installations actives jusqu'à présent. En plus de cela, 264,5 millions de messages écrits avec Gutenberg jusqu'à ce jour.

Je pense que ces données sont suffisantes pour convaincre quiconque de la raison pour laquelle nous avons étendu la gamme de ShopEngine à Gutenberg. Des millions de personnes déploient Gutenberg pour développer leur contenu et nous ne voulons pas qu'ils manquent les fonctionnalités fascinantes qu'offre ShopEngine.

Quelques autres raisons de l'intégration de ShopEngine avec Gutenberg :

Permettez-moi d'insister sur le fait que Gutenberg n'est pas uniquement un éditeur de contenu . Le projet Gutenberg vise à transformer l'éditeur de blocs en un outil d'édition complet du site dans un avenir proche.

L'idée est de vous laisser concevoir 100% de votre site WooCommerce avec l'éditeur Gutenberg. Si cela se produit, la demande de Gutenberg est susceptible de monter en flèche. Cela vaut donc la peine d'intégrer ShopEngine à Gutenberg pour WooCommerce, n'est-ce pas ?

• Avec Gutenberg, vous n'avez pas besoin d'utiliser des codes abrégés pour intégrer du contenu. Au lieu de cela, vous pouvez déployer les blocs pour ajouter les éléments de page nécessaires.
• Gutenberg est exempt de problèmes de compatibilité, de sorte que les développeurs peuvent facilement intégrer le support de Gutenberg dans leurs plugins.
• Gutenberg produit un code léger et est également un outil de chargement rapide.

Certains des blocs ShopEngine notables de Gutenberg :

Avant de faire la lumière sur les blocs ShopEngine, permettez-moi de préciser que ShopEngine est livré avec plus de 65 widgets , plus de 13 modules et une myriade de modèles pour les pages de boutique WooCommerce destinées aux utilisateurs d'Elementor. Après l'intégration de ShopEngine avec Gutenberg pour WooCommerce, vous pouvez désormais accéder à plus de 45 blocs ShopEngine dans Gutenberg .

Selon le type de page que vous sélectionnez pour créer un modèle pour votre boutique WooCommerce, les blocs Gutenberg s'afficheront en conséquence. De plus, vous aurez accès à des modules tels que la vue rapide, les échantillons de variation, la comparaison de produits et la liste de souhaits .

Jetons un coup d'œil à certains des blocs ShopEngine dans Gutenberg pour le magasin WooCommerce-

Titre du produit :

Le bloc de titre du produit s'affiche sur une seule page pour un produit spécifique. Après avoir sélectionné le type de page unique pour créer votre modèle, il vous suffit de cliquer sur le bloc Titre du produit dans la barre latérale.

Immédiatement après cela, le titre de votre produit apparaîtra sur la page. Dans la barre latérale droite, vous pouvez modifier la balise de titre, l'alignement, la couleur et la typographie.

Liste de produits:

La liste des produits affiche tous les types de produits que vous vendez dans votre boutique WooCommerce. Le bloc de liste de produits apparaît dans tous les types de pages, y compris les pages uniques, de boutique, de paiement et de panier. Une fois que vous avez sélectionné le type de page, cliquez sur la liste de produits dans la fenêtre contextuelle ou la barre latérale.

Assurez-vous de sélectionner la catégorie de produits pour les produits à afficher. Dans la barre latérale droite, vous pouvez sélectionner et personnaliser différents éléments de la liste de produits. Vous pouvez sélectionner le nombre de produits par page, les balises, afficher/masquer le badge de vente, le pourcentage de remise, etc.

Description du produit:

Si vous créez un modèle de page unique, le bloc de description du produit apparaîtra dans la barre latérale. Pour faire apparaître la description du produit sur votre page, cliquez sur le bloc de description du produit. Vous pouvez personnaliser la description et également la styliser en modifiant la typographie, la couleur, l'alignement, etc.

Paiement à la caisse :

Comme le widget Checkout Payment dans Elementor, le bloc Checkout Payment fonctionne dans Gutenberg. Vous pouvez afficher le bloc "Paiement de paiement" si vous accédez au modèle de création de votre page de paiement. Après cela, vous pouvez ajouter le bloc de paiement à la caisse selon vos besoins pour votre boutique WooCommerce.

Vous aurez la possibilité de modifier le style de contenu, les méthodes de paiement, le bouton, etc. Vous pouvez modifier la position de la case à cocher, la couleur du bouton, la typographie, la bordure, etc.

Produits d'archives :

La page des produits archivés contient tous les produits affichés en un seul endroit. Pour créer un modèle de page d'archive dans Gutenberg pour WooCommerce, allez simplement dans la barre latérale gauche et cliquez sur le bloc Archiver les produits . Tous les produits de l'inventaire apparaîtront les uns après les autres.

La page des produits d'archivage propose une multitude de segments, notamment la mise en page, le contenu, la pagination, la notation, etc. La page contient de nombreux éléments tels que le titre du produit, l'image du produit, le prix du produit, la description du produit, le pied de page du produit, etc.

Tableau du chariot :

Dans le tableau du panier, tous les détails de vos produits sélectionnés apparaissent, y compris le nom des produits, le prix, la quantité, le sous-total et le montant total. Avec le bloc Cart Table de ShopEngine, vous pouvez présenter à vos acheteurs toutes les informations relatives à vos produits via un tableau de panier dans la page de panier WooCommerce.

Afin de personnaliser le contenu et de styliser différents éléments du tableau du panier, vous obtiendrez des paramètres dans la barre latérale de droite. Vous pouvez modifier les couleurs de l'en-tête et du pied de page du produit, la couleur de la bordure, la couleur du texte, ainsi que les sections de contenu sur mesure, notamment le titre, le prix, la quantité, le total, etc.

Derniers produits consultés:

Avec le bloc Produits récemment consultés de ShopEngine, vous pouvez présenter les produits que vos utilisateurs ont récemment consultés ou consultés dans votre boutique WooCommerce. Vous pouvez afficher les produits récemment consultés sur la page de la boutique, la page du produit, la page du panier, etc.

Comme les autres blocs, vous pouvez remarquer les paramètres liés aux produits récemment consultés dans la barre latérale droite. En exploitant les paramètres, vous pouvez spécifier le nombre de produits à afficher, afficher/masquer les badges de vente, définir l'écart entre les colonnes et les lignes, ajuster la hauteur des images de produits, etc.

Liquidation:

Alors, que pensez-vous de notre décision d' intégrer ShopEngine à Gutenberg pour WooCommerce ? Faites-nous part de votre expérience de déploiement de blocs ShopEngine dans la boutique Gutenberg pour WooCommerce.

Vous êtes les bienvenus pour donner des commentaires positifs ou négatifs sur l'intégration de Gutenberg pour WooCommerce. Nous apprécierions également de recevoir vos suggestions pour rationaliser notre processus d'intégration. Cependant, nos travaux sur l'intégration de ShopEngine avec Gutenberg sont toujours en cours. Bientôt, nous en aurons terminé avec le projet.