Introduction:
Le module personnalisé CSS Prestashop & JS permet à l’administrateur du magasin Prestashop de modifier l’interface utilisateur de n’importe quelle page du site Web de Prestashop. Le plugin Prestashop offre à l’administrateur de faire de même pour les appareils mobiles ou les ordinateurs de bureau, ou les deux.
Étapes pour l’installation de Prestashop Custom JS et CSS Addon:
Pour installer cet addon CSS personnalisé et JS Prestashop plugin, s’il vous plaît suivez les étapes suivantes:
1. Ajoutez le dossier addon sous le dossier modules de votre système.
2. Après avoir ajouté ce dossier addon, le système listera la page addon Prestashop sur le module sous la catégorie de fonctionnalités de front office comme indiqué ci-dessous:
3. Cliquez sur installer pour installer le plugin Prestashop Custom JS And CSS.
Interface d’administration
Les fonctionnalités suivantes seront fournies à l’administrateur dans ce module CSS Prestashop personnalisé:
1. Paramètres généraux
2. Paramètres avancés
Paramètres généraux du module JS Prestashop personnalisé:
Après avoir cliqué sur le lien de configuration de Custom JS et CSS addon sur la page de liste des modules, le système ouvrira les onglets de paramètres généraux par défaut comme montré dans l’écran ci-dessous:
Les champs listés seront remplis avec des valeurs par défaut
DÉTAILS DES ONGLETS DES RÉGLAGES GÉNÉRAUX:
1. Activer / Désactiver: Initialement, ce champ de module personnalisé CSS Prestashop sera désactivé. L’administrateur peut activer / désactiver la fonctionnalité addon en activant / désactivant cette option.
2. CSS personnalisé: Le contenu CSS qui doit être affiché sur chaque page du site doit être entré dans la zone de texte de CSS personnalisé et JS Prestashop plugin donné avec le champ nommé CSS personnalisé.
3. Custom JS: Le contenu JS qui doit être affiché sur chaque page du site Web doit être entré dans la zone de texte du module JS Prestashop personnalisé donné avec le champ nommé JS personnalisé.
Paramètres avancés du plugin personnalisé CSS et JS Prestashop:
Après avoir cliqué sur l’onglet des paramètres avancés du plugin personnalisé CSS et JS Prestashop, l’écran ci-dessous apparaît.
DÉTAILS DU TABLEAU DES PARAMÈTRES D’AVANCE:
- Ajouter une nouvelle entrée: Initialement, il n’y aura pas d’entrée dans le tableau des onglets avancés du module Prestashop Custom JS, donc cliquez sur le nouveau bouton d’entrée pour ajouter les détails du fichier CSS et JS avec le nom et le type de périphérique.
- Table: Lorsque l’entrée est terminée, la ligne est ajoutée à la table du module CSS personnalisé Prestashop avec les détails de l’entrée tels que le nom de la page, le type de périphérique activer ou désactiver le bouton et modifier et supprimer le bouton.
- Bouton Activer ou Désactiver: Lorsque l’entrée est effectuée dans le module CSS Prestashop personnalisé, l’utilisateur peut activer le fichier ajouté en cliquant sur le bouton Activer une fois qui passe au bouton Désactiver après que l’utilisateur a cliqué sur le bouton Activer. désactiver l’entrée en cliquant sur le bouton désactiver qui apparaît dans la table et le contraire se produit.
- Editer: Dans la colonne action de la table, il y a un bouton d’édition en cliquant dessus, une fenêtre apparait qui est la même que celle qui apparaît après avoir cliqué sur le bouton ajouter une nouvelle entrée. Mais, la différence est que maintenant les champs du module personnalisé JS Prestashop sont remplis avec tous les détails qui ont été entrés plus tôt par l’utilisateur dans cette ligne. Maintenant, l’utilisateur peut modifier les entrées du plugin personnalisé CSS et JS Prestashop qui ont été faites dans les fichiers ou peuvent changer le type de périphérique ou peut ajouter l’entrée au nom de la page.
- Supprimer: Dans la colonne action de la table, il y a un bouton de suppression en cliquant sur ce bouton du module Prestashop Custom JS, on peut supprimer l’entrée qui a été faite dans cette ligne.
- Boîte d’interface: C’est la boîte qui apparaîtra après avoir cliqué sur le bouton ajouter si nous devons ajouter une nouvelle entrée dans la table des paramètres avancés. Il apparaîtra également si nous cliquons sur le bouton d’édition après que l’entrée est faite mais la différence est que maintenant les champs dans la boîte de commande seront le champ avec les détails de cette rangée particulière à laquelle le bouton d’édition appartient. Les champs dans la case Pop-up sont:
A. Sélectionnez la liste déroulante de la page: Le premier champ du champ ‘Ajouter nouveau’ est un menu déroulant qui contient tous les noms des pages actuellement disponibles dans Prestashop. Vous pouvez sélectionner la page dans laquelle l’entrée doit être effectuée.
B. Choisissez Type de périphérique: Ce champ de CSS personnalisé Prestashop contient trois boutons radio Mobile, Desktop et les deux. Vous pouvez sélectionner le type d’appareil pour lequel vous allez ajouter le css et js.
C. Configuration CSS: Dans cette zone de texte du plugin Prestashop par Knowband, vous devez ajouter le code CSS qui doit être ajouté sur la page que vous avez sélectionnée précédemment.
D. Configuration de JS: Dans cette zone de texte du module CSS Prestashop personnalisé, vous devez ajouter le code js qui doit être ajouté sur la page que vous avez sélectionnée précédemment.
INTERFACE APRÈS CLIQUER SUR AJOUTER NOUVELLE ENTRÉE
APRÈS AVOIR AJOUTÉ L’ENTRÉE
INTERFACE APRES LE CLICKING SUR LE BOUTON EDIT
Module frontal
Après avoir activé le plugin Prestashop Custom JS par Knowband, l’utilisateur frontal verra le CSS et JS qui sont ajoutés globalement au site Web et l’utilisateur verra également le CSS et JS qui est ajouté à cette page seulement dans les paramètres avancés languette.
Le CSS personnalisé et JS à l’extrémité frontale apparaît comme suit:
Recommandations
Actualisez la page d’accueil de votre boutique chaque fois que vous activez / désactivez le plugin. Si le plugin ne fonctionne pas après l’installation, veuillez vérifier les permissions sur le dossier des modules. Le dossier devrait être accessible en écriture. Veuillez autoriser le dossier à 755.
Nous espérons que nous avons couvert toutes les préoccupations concernant l’installation et le guide des produits de cet add- on Prestashop . Vous devriez également consulter notre blog sur Donnez plusieurs raisons à vos clients pour avoir terminé leur processus de paiement en ligne – ici
Regardez le didacticiel vidéo ici:
Module Lien: https://www.knowband.com/prestashop-custom-css-and-js
User Manual: https://www.knowband.com/blog/user-manual/prestashop-custom-js-and-css /
Demo Admin: https://ps.knowband.com/demo1/16/admin1/index.php?controller=AdminLogin&token=aea1bb3fb1bab860c86c4db00ce5949e&redirect=AdminModules&demo_lang=fr
Démo avant: https://ps.knowband.com/demo1/16/ en /