1.0 Introduction des pages mobiles AMP (Accelerated Mobile Pages) de Knowband Prestashop:
Les pages mobiles accélérées ou AMP est une technologie qui permet d’accéder facilement aux informations sur Internet à partir des écrans des smartphones et des tablettes. AMP est une technologie avancée de Google qui réduit le temps de chargement du site Web. Le but de chaque propriétaire de magasin de commerce électronique devrait être de réduire le temps de chargement du site Web. Module Prestashop Accelerated Mobile Pages (AMP).
Le module AMP de Prestashop permet à l’administrateur de convertir la page d’accueil, les pages de catégories, les pages de produits et les pages CMS en pages AMP à chargement rapide. Avec l’aide du module Google Accelerated Mobile Pages, l’administrateur peut réduire le temps de chargement du site Web. De plus, avec le logiciel AMP, le commerçant en ligne peut activer / désactiver des sections (Best-seller, Produits vedettes, Nouvelle arrivée), vous pouvez fournir une expérience utilisateur incroyable. Une fois vos clients satisfaits, les ventes seront faciles.
1.1 Features of the Prestashop accelerated mobile pages module:
1. Le module Prestashop Accelerated Mobile (AMP) permet à l’administrateur du magasin de convertir une page Web en AMP.
2. Avec l’aide du module AMP de Prestashop, l’administrateur du magasin peut convertir la page d’accueil, les pages de catégories, les pages de produits et les pages de CMS en AMP.
3. L’addon Knowband Prestashop Accelerated Mobile (AMP) permet au propriétaire du magasin de personnaliser la page d’accueil, les pages de catégories, les pages de produit et les paramètres de page du CMS.
4. L’administrateur peut télécharger le logo Business sur AMP et définir la largeur et la hauteur du site Web.
5. Le module AMP de Prestashop offre au commerçant une option pour ajouter des CSS personnalisés pour ajouter des fonctionnalités supplémentaires.
6. Le module Google Accelerated Mobile Pages permet à l’administrateur du magasin d’activer / désactiver l’affichage de l’option Best-sellers, vedette et des nouveaux produits sur la page d’accueil. En dehors de cela, ils peuvent sélectionner non. du produit montré dans une section particulière.
7. Le propriétaire du magasin Prestashop peut modifier la bannière des meilleurs vendeurs, des produits en vedette et des nouveaux produits sur la page d’accueil.
8. Le module Prestashop Accelerated Mobile Pages (AMP) fournissait les options de partage de médias sociaux sur l’AMP. Même l’administrateur peut ajouter plus d’icône en ajoutant le script.
9. L’administrateur peut personnaliser les catégories AMP à partir de l’arrière-plan du module AMP Prestashop. Les clients parcourent les catégories de la page AMP.
10. A l’aide du module Google Accelerated Mobile Pages, l’administrateur peut générer automatiquement un sitemap AMP à l’aide de CRON.
11. L’administrateur peut générer un sitemap AMP en cliquant sur le bouton.
12. Le module complémentaire Accelerated Mobile Addon de Knowband Prestashop prend en charge Google Analytics. L’administrateur de commerce électronique peut saisir l’ID client Analytics pour le suivi des performances AMP.
13. Le module Google Accelerated Mobile Pages prend en charge plusieurs langues.
14. A l’aide du module AMP de Prestashop, l’administrateur du magasin Prestashop peut définir la couleur
15. Le module AMP de Prestashop est facile à utiliser et à gérer.
Technologie pour le développement
La langue: PHP
Frame: PrestaShop
Steps 2.0 to install an Accelerated Mobile Pages (AAM) Prestashop add-in:
1.La structure de dossiers du module AMP de Prestashop.
2. Copiez l’intégralité du dossier nommé en tant que mise à jour du produit dans le dossier de vos modules dans le répertoire racine de votre boutique PrestaShop via FTP.
3. Vous pouvez trouver le plug-in AMP prêt à être installé dans les modules de votre boutique PrestaShop, comme indiqué ci-dessous.
4. Cliquez sur le lien Installer pour installer le plug-in.
Maintenant, votre plugin Prestashop Accelerated Mobile Pages (AMP) est prêt à l’emploi et cliquez sur “Configurer“lien pour configurer ce module Prestashop par Knowband.
Interface d’administration 3.0
Après avoir installé le module Google Accelerated Mobile Pages (AMP) dans le magasin, l’addon Prestashop fournira les interfaces suivantes:
1. Paramètres généraux 2. Paramètres d’accueil 3. Catégorie Paramètres de la page 4. Paramètres de la page du produit 5. Paramètres du menu 6. Paramètres Look and Feel 7. Paramètres de médias sociaux 8. Paramètres d’icône supplémentaires 9. Paramètres de Google 10. Paramètres du plan du site
Chaque interface du module AMP (Accelerated Mobile Pages) de Knowband pour Prestashop est expliquée ci-dessous.
Paramètres généraux 3.1
L’onglet Paramètres généraux de cet addon AMP Prestashop a les options suivantes:
Activer désactiver: Au départ, ce champ du module Prestashop Accelerated Mobile Pages de Knowband sera désactivé. L’administrateur peut activer / désactiver le plug-in en basculant le bouton.
L’activation de ce paramètre convertira les pages du site Web en AMP.
Forcer AMP sur un appareil mobile: Dans cette section de l’addon Knowband Prestashop AMP, l’administrateur peut activer les paramètres des pages AMP sur le périphérique mobile.
Logo du site: Grâce à cette option du module Google Accelerated Mobile Pages (AMP), le commerçant peut télécharger ou modifier le logo de l’AMP.
Largeur du logo: Ici, l’administrateur du magasin peut définir la largeur du logo en pixels.
Hauteur du logo: Ici, l’administrateur du magasin peut définir la hauteur du logo dans Pixel.
Activer / désactiver la page d’accueil AMP: L’administrateur du magasin peut activer / désactiver AMP sur la page d’accueil du site. Après avoir activé l’option, l’administrateur peut vérifier l’AMP de la page d’accueil en cliquant sur le bouton Aperçu.
Activer / Désactiver la page de catégorie AMP: L’administrateur du magasin peut activer / désactiver l’AMP sur les pages des catégories. Après avoir activé l’option, l’administrateur peut vérifier la page de catégorie AMP en cliquant sur le bouton Aperçu.
Activer / désactiver la page produit AMP: En utilisant cette option de l’addon Prestashop Accelerated Mobile Page (AMP), l’administrateur du magasin peut activer AMP sur les pages produit AMP du site et peut les voir en cliquant sur le bouton PREVIEW.
Activer / désactiver l’AMP de la page CMS: Le module de page AMP de Prestashop permet à un détaillant de convertir la page CMS en AMP. Les pages peuvent être visualisées en cliquant sur le bouton Aperçu.
CSS personnalisé: L’administrateur du magasin Prestashop peut ajouter un code CSS personnalisé selon les besoins de l’entreprise dans cette section.
Paramètres de la page d’accueil de 3.2
Dans cet onglet de l’addon AMP (Accelerated Mobile Pages) Prestashop de Knowband, l’administrateur peut activer / désactiver l’affichage des nouveaux arrivants, des meilleurs vendeurs et des produits en vedette sur la page d’accueil AMP de ce module Prestashop en différentes langues. Cet onglet aura les options suivantes:
1. Paramètres de la page d’accueil 2. Paramètres du produit en vedette 3. Paramètres de vente les plus vendus 4. Nouveaux paramètres du produit d’arrivée
Paramètres de la page d’accueil 3.2.1:
Afficher le texte personnalisé: L’administrateur peut activer / désactiver l’option de texte personnalisé ici.
Texte personnalisé: Dans cet addon Google Accelerated Mobile Pages, l’administrateur du magasin peut modifier le texte du bloc de la page d’accueil.
Position d’affichage: L’administrateur peut sélectionner la position d’affichage qui sera reflétée à l’avant du site.
Paramètres de produits en vedette 3.2.2:
Activer les produits en vedette: En utilisant cette option de l’extension Prestashop AMP, l’administrateur du magasin de commerce électronique peut activer / désactiver la section des produits en vedette.
Afficher les produits vedettes dans le carrousel: Ici, l’administrateur du magasin peut placer les produits en vedette dans le carrousel.
Affichage aléatoire: L’administrateur du magasin peut activer / désactiver l’option d’affichage du produit aléatoire. Après avoir activé cette fonction, l’affichage aléatoire du produit dans la section particulière d’AMP.
Sélectionner des produits: L’addon Pages mobiles accélérées Prestashop de Knowband permet à l’administrateur du magasin de sélectionner le nombre de produits qu’il souhaite afficher dans la section Produit.
Bannière d’affichage: Le marchand de commerce électronique peut activer / désactiver l’option de bannière d’affichage.
Télécharger la bannière: Dans ce champ, l’administrateur du magasin peut télécharger la bannière du produit présenté.
Paramètres des produits les plus vendus sur 3.2.2:
Dans cet onglet, l’administrateur du magasin Prestashop peut personnaliser les paramètres du produit le plus vendu. Reportez-vous à la capture d’écran ci-dessous:
3.2.3 Nouveaux produits d’arrivée Paramètres:
L’administrateur a le contrôle sur l’affichage des positions du nouveau produit d’arrivée sur les pages AMP.
Paramètres de la catégorie 3.3
L’onglet Paramètres de la catégorie de la page Prestashop Accelerated Mobile Pages permet à l’administrateur d’ajouter le texte et les images. En dehors de cela, l’administrateur peut également définir la position du texte sur la page Catégorie. Cet onglet aura les options suivantes:
Afficher le texte personnalisé: L’administrateur peut activer / désactiver l’option de message personnalisé.
Texte personnalisé: En utilisant cette option du module AMP de Prestashop, l’administrateur du magasin de commerce électronique peut définir le message de la catégorie Page.
Position d’affichage: Dans cet onglet, l’administrateur du magasin peut modifier la position d’affichage selon les désirs. Ces modifications seront reflétées à l’avant du magasin.
Taille de l’image du produit: L’administrateur du magasin Prestashop peut définir le type d’image ici.
Paramètres de la page de produit 3.4
L’administrateur contrôle les paramètres de la page du produit sur les pages AMP. Cet onglet aura les options suivantes:
Afficher le texte personnalisé: L’administrateur peut activer / désactiver l’option de message personnalisé.
Texte personnalisé: En utilisant cette option du module AMP de Prestashop, l’administrateur du magasin de commerce électronique peut définir le message de la page de catégorie.
Position d’affichage: Dans cette option, l’administrateur du magasin peut modifier la position d’affichage selon les désirs. Ces modifications seront reflétées dans le front-end du magasin.
Taille de l’image du produit: L’administrateur du magasin Prestashop peut sélectionner la taille de l’image à afficher ici.
Afficher la description courte: Dans cette option, l’administrateur du magasin peut afficher la courte description du produit en activant cette fonctionnalité.
Description longue d’affichage: Le propriétaire du magasin a la possibilité d’afficher la description longue du produit selon les besoins.
Affichage du produit: En utilisant le module Prestashop Accelerated Mobile Pages, l’administrateur du magasin peut activer l’option de révision du produit. Après avoir activé cette fonctionnalité, les avis sur les produits seront affichés dans le front-end du magasin.
Afficher des informations supplémentaires: En activant cette fonctionnalité, l’administrateur peut afficher les informations supplémentaires sur les produits.
Afficher les produits associés: En activant cette option, l’administrateur du magasin peut afficher le produit associé. Ces modifications seront reflétées à l’avant du magasin.
Paramètres du menu 3.5
Dans cet onglet, l’administrateur du magasin Prestashop peut configurer les menus sur AMP. L’administrateur peut même ajouter de nouvelles options de menu. Cet onglet aura les options suivantes:
Activer désactiver: L’administrateur peut activer l’AMP dans les menus en basculant le bouton.
Titre du menu: Prestashop AMP Addon par Knowband permet à l’administrateur du magasin d’ajouter le menu en entrant le titre ici.
Élément du menu parent: Ici, le commerçant en ligne peut sélectionner le menu Parent selon le souhait.
Type d’élément de menu: L’administrateur peut sélectionner le type d’élément du menu.
Choisir une catégorie: L’administrateur du magasin peut sélectionner la page spécifique sur laquelle il souhaite rediriger l’utilisateur vers la page AMP définie.
REMARQUE: Ces modifications apparaissent dans la section Structure du menu.
Paramètres 3.6 Look and Feel
L’administrateur peut contrôler les paramètres de couleur, personnaliser leurs couleurs AMP de site Web selon vos besoins. Ils peuvent modifier les couleurs de la page AMP en fonction de votre thème et de vos préférences. Cet onglet aura la section suivante:
1. Paramètres généraux 2. Paramètres de liste de produits 3. Paramètres de la catégorie 4. Paramètres du produit
Paramètres généraux 3.6.1
Dans cet onglet de l’addon Prestashop Accelerated Mobile Pages (AMP) de Knowband, l’administrateur peut personnaliser les paramètres de la page d’accueil AMP. Cet onglet aura les options suivantes:
Couleur de fond: L’administrateur peut modifier la couleur d’arrière-plan de la page d’accueil.
Couleur de police: L’administrateur peut modifier la couleur de la police à partir de cette section.
Couleur d’arrière-plan d’en-tête: Ce champ du module AMP (Accelerated Mobile Pages) de Prestashop permet à l’administrateur de définir la couleur d’arrière-plan de l’en-tête.
Couleur de la police d’en-tête: En utilisant cette option du module AMP de Prestashop, l’administrateur peut définir la couleur de la police du texte affiché dans la section En-tête.
Couleur de l’icône d’en-tête: L’administrateur du magasin Prestashop peut modifier la couleur de l’icône du fichier.
Couleur de fond du pied de page: Cette option du module Google Accelerated Mobile Pages (AMP) permet à l’administrateur de définir la couleur d’arrière-plan du pied de page.
Couleur de police du pied de page: L’administrateur peut modifier la couleur de la police à partir de cette section.
Icône de pied de page Couleur: L’administrateur peut changer la couleur de l’icône de cette section.
Couleur de fond de la barre inférieure du pied de page: Le commerçant peut modifier la couleur d’arrière-plan de la barre inférieure du pied de page.
Couleur d’arrière-plan du curseur du menu de gauche: Le marchand Prestashop peut modifier la couleur d’arrière-plan du curseur du menu de gauche dans cette section de pages mobiles accélérées Knowband (AMP) pour Prestashop.
Couleur de l’arrière-plan du menu de gauche: L’administrateur du magasin Prestashop peut modifier la couleur d’arrière-plan de l’en-tête du menu de gauche selon les besoins.
Couleur de la police du curseur du menu de gauche: L’administrateur peut modifier la couleur de la police à partir de cette section.
Couleur de l’icône du menu latéral gauche: L’administrateur peut changer la couleur de l’icône de cette section.
Couleur d’arrière-plan d’en-tête gauche: Dans cette section du module AMP (Accelerated Mobile Pages) de Prestashop, l’administrateur peut définir la couleur d’arrière-plan de l’en-tête.
Paramètres de liste de produits 3.6.2
L’administrateur peut personnaliser les paramètres de la liste des produits selon les besoins. Ci-dessous mentionné l’option:
Couleur du titre du produit: Dans cette section du module Google Accelerated Mobile Pages (AMP), l’administrateur peut modifier la couleur du titre du produit.
Titre du produit Taille de police: L’administrateur du magasin peut définir la taille de la police du produit.
Ajouter au panier Couleur du bouton: Le module Pages AMP Prestashop de Knowband permet à l’administrateur de changer la couleur du bouton Ajouter au panier selon les désirs.
Ajouter au panier Button Font Color: L’administrateur peut personnaliser la couleur de la police du bouton Ajouter au panier.
Ajouter au panier Taille de police: L’administrateur du magasin peut définir la taille de la police du bouton Ajouter au panier.
Paramètres de la catégorie 3.6.3
Dans cet onglet, l’administrateur du magasin peut personnaliser les paramètres des pages Catégorie. Ces modifications seront reflétées à l’avant du magasin.
Couleur de la catégorie de titre: L’administrateur du magasin Prestashop peut modifier la couleur de la police du titre de la catégorie en fonction de l’exigence.
Catégorie Entête Taille de la police: L’administrateur peut modifier la couleur de la police à partir de cette section.
Paramètres du produit 3.6.4
Dans cette section, l’administrateur peut personnaliser les paramètres du produit selon les besoins. L’option de configuration de cette section est identique à celle décrite dans la section Liste de produits.
Paramètres de réseaux sociaux 3.7
Dans cette section du module AMP de Prestashop, l’administrateur du magasin peut activer / désactiver l’option de partage des médias sociaux sur les pages Web AMP. Toutes les options de partage de médias sociaux activées seront affichées sur l’AMP. Cet onglet aura les options suivantes:
Afficher l’adresse du magasin dans la barre de menus: L’administrateur peut afficher l’adresse du magasin en activant cette fonction.
Afficher l’adresse e-mail du magasin: Le propriétaire du magasin Prestashop peut afficher l’adresse électronique.
Numéro de contact de la boutique: Dans ce champ, l’administrateur du magasin peut afficher les coordonnées du site.
Afficher l’icône Facebook: L’administrateur du magasin a la possibilité d’afficher une icône Facebook dans la barre de menus. Pour cet administrateur, vous devez spécifier l’URL de la page Facebook dans le champ correspondant.
Afficher l’icône Twitter: Cette section permet à l’administrateur d’activer / désactiver l’icône Twitter.
Afficher l’icône Google: En utilisant cette option, le commerçant du magasin Prestashop peut afficher l’icône Google dans la barre de menus. Pour cet administrateur, vous devez spécifier l’URL de la page Google dans le champ correspondant.
Afficher l’icône Linkedin: Dans cette section, l’administrateur du magasin peut afficher l’icône Linkedin ici. L’administrateur du magasin doit avoir besoin de saisir l’URL du profil.
Afficher l’icône Tumblr: Le propriétaire du magasin Prestashop peut afficher le profil Tumblr ici.
Afficher l’icône Pinterest: L’administrateur du magasin a la possibilité d’afficher une icône Pinterest dans la barre de menus. Pour cet administrateur, vous devez spécifier l’URL de la page Pinterest dans le champ correspondant.
Paramètres d’icône 3.8 Extra
Dans cette section, l’administrateur peut ajouter l’icône supplémentaire des médias sociaux selon les besoins de l’entreprise. Cet onglet aura les options suivantes:
Activer l’icône supplémentaire: L’administrateur du magasin Prestashop peut activer / désactiver la fonction icône supplémentaire. S’ils veulent ajouter plus d’icône de médias sociaux, ils peuvent ajouter ici avec une facilité.
Classe d’icônes: L’administrateur peut entrer dans la classe Icon.
URL de l’icône: Dans cet onglet, l’administrateur du magasin peut afficher l’icône URL selon les désirs. Ces modifications seront reflétées à l’avant du magasin.
Paramètres Google Analytics de 3.9
L’administrateur devra disposer de l’ID client Analytics pour pouvoir configurer cette fonctionnalité.
Activer Google Analytics: Si vous souhaitez suivre les performances des pages mobiles accélérées de votre site, cette fonctionnalité permet à l’administrateur d’accéder au client Google Analytics.
Identifiant du client d’analyse: Le commerçant en ligne peut saisir votre identifiant client Google Analytics à configurer.
3.10 Sitemap Paramètres
Dans cette section, l’administrateur du magasin peut générer le plan Sitemap AMP en cliquant sur le bouton.
La génération du sitemap est ici.
Comment générer un sitemap pour AMP?
L’administrateur peut générer un sitemap en exécutant CRON.
Le module Accelerated Mobile Pages (AMP) permet à l’administrateur du magasin de configurer Cron via
URL à ajouter à Cron via le panneau de configuration Configuration Cron via SSH
CRON
Afin de générer automatiquement le plan Sitemap, l’administrateur du magasin Prestashop peut configurer le travail cron. Deux options sont disponibles dans le panneau d’administration du module.
1.
Ajoutez le cron à votre magasin via le panneau de configuration / putty pour générer / mettre à jour le plan du site. S’il vous plaît trouver les instructions pour configurer crons ci-dessous –
URL à ajouter à Cron via le panneau de configuration
Générer le plan du site
https://pstest2.knowband.com/ps1617/en/module/kbamppages/cron?action=syncSiteMap&secure_key=05d25b0b5a4a46268677e35c06cc51ef
Configuration Cron via SSH
Générer le plan du site
‘https://pstest2.knowband.com/ps1617/en/module/kbamppages/cron?action=syncSiteMap&secure_key=05d25b0b5a4a46268677e35c06cc51ef’
Interface frontale 4.0 du module de pages mobiles accélérées Prestashop:
Après avoir activé le module AMP (Accelerated Mobile Pages) Prestashop par Knowband, l’administrateur du magasin peut activer les paramètres de la page d’accueil, des pages de catégories, des pages de produits et des pages CMS. Selon les paramètres activés par l’administrateur, AMP ressemblera à celui ci-dessous:
Page d’Accueil:
Prestashop AMP Pages permet à l’administrateur d’afficher le produit Best Seller, New Products et Features sur la page d’accueil. Pour un meilleur engagement de l’utilisateur.
Catégorie page
Selon le paramètre activé par l’administrateur, la catégorie Pages AMP sur le périphérique mobile apparaîtra comme cette capture d’écran.
Page Produit
Depending on the setting that is enabled by the back-office administrator, the layout of the product AMP page on the mobile device will appear as this screenshot.
CMS page
The administrator can view the setting of the CMS page as below the settings.
Menu icon
Prestashop Accelerated Mobile Pages displays the menu icon like this.