\u00c9tapes pour l’installation de\u00a0Prestashop Custom JS et CSS<\/a>\u00a0Addon:<\/h2>\nPour installer cet addon CSS personnalis\u00e9 et JS Prestashop plugin, s’il vous pla\u00eet suivez les \u00e9tapes suivantes:<\/p>\n
1. Ajoutez le dossier addon sous le dossier modules de votre syst\u00e8me.<\/p>\n
2. Apr\u00e8s avoir ajout\u00e9 ce dossier addon, le syst\u00e8me listera la page addon Prestashop sur le module sous la cat\u00e9gorie de fonctionnalit\u00e9s de front office comme indiqu\u00e9 ci-dessous:<\/p>\n
![\"Installation\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2015\/12\/Installation-.png\")
<\/a><\/p>\n3. Cliquez sur installer pour installer le plugin Prestashop Custom JS And CSS.<\/p>\n
Interface d’administration<\/h2>\n
Les fonctionnalit\u00e9s suivantes seront fournies \u00e0 l’administrateur dans ce module CSS Prestashop personnalis\u00e9:<\/p>\n
1. Param\u00e8tres g\u00e9n\u00e9raux<\/p>\n
2. Param\u00e8tres avanc\u00e9s<\/p>\n
Param\u00e8tres g\u00e9n\u00e9raux du module JS Prestashop personnalis\u00e9:<\/h3>\n
Apr\u00e8s avoir cliqu\u00e9 sur le lien de configuration de Custom JS et CSS addon sur la page de liste des modules, le syst\u00e8me ouvrira les onglets de param\u00e8tres g\u00e9n\u00e9raux par d\u00e9faut comme montr\u00e9 dans l’\u00e9cran ci-dessous:<\/p>\n
![\"r\u00e9glages](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2015\/12\/General-Settings.png\")
<\/a><\/p>\nLes champs list\u00e9s seront remplis avec des valeurs par d\u00e9faut<\/p>\n
D\u00c9TAILS DES ONGLETS DES R\u00c9GLAGES G\u00c9N\u00c9RAUX:<\/strong><\/p>\n1. Activer \/ D\u00e9sactiver:<\/strong>\u00a0Initialement, ce champ de module personnalis\u00e9 CSS Prestashop sera d\u00e9sactiv\u00e9.\u00a0L’administrateur peut activer \/ d\u00e9sactiver la fonctionnalit\u00e9 addon en activant \/ d\u00e9sactivant cette option.
\n2. CSS personnalis\u00e9:<\/strong>\u00a0Le contenu CSS qui doit \u00eatre affich\u00e9 sur chaque page du site doit \u00eatre entr\u00e9 dans la zone de texte de CSS personnalis\u00e9 et JS Prestashop plugin donn\u00e9 avec le champ nomm\u00e9 CSS personnalis\u00e9.
\n3. Custom JS:<\/strong>\u00a0Le contenu JS qui doit \u00eatre affich\u00e9 sur chaque page du site Web doit \u00eatre entr\u00e9 dans la zone de texte du module JS Prestashop personnalis\u00e9 donn\u00e9 avec le champ nomm\u00e9 JS personnalis\u00e9.<\/p>\nParam\u00e8tres avanc\u00e9s du plugin personnalis\u00e9 CSS et JS Prestashop:<\/h3>\n
Apr\u00e8s avoir cliqu\u00e9 sur l’onglet des param\u00e8tres avanc\u00e9s du plugin personnalis\u00e9 CSS et JS Prestashop, l’\u00e9cran ci-dessous appara\u00eet.<\/p>\n
![\"Param\u00e8tres](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2015\/12\/Advance-Settings-.png\")
<\/a><\/p>\nD\u00c9TAILS DU TABLEAU DES PARAM\u00c8TRES D’AVANCE:<\/strong><\/p>\n\n- Ajouter une nouvelle entr\u00e9e:<\/strong>\u00a0Initialement, il n’y aura pas d’entr\u00e9e dans le tableau des onglets avanc\u00e9s du module Prestashop Custom JS, donc cliquez sur le nouveau bouton d’entr\u00e9e pour ajouter les d\u00e9tails du fichier CSS et JS avec le nom et le type de p\u00e9riph\u00e9rique.<\/li>\n
- Table:<\/strong>\u00a0Lorsque l’entr\u00e9e est termin\u00e9e, la ligne est ajout\u00e9e \u00e0 la table du module CSS personnalis\u00e9 Prestashop avec les d\u00e9tails de l’entr\u00e9e tels que le nom de la page, le type de p\u00e9riph\u00e9rique activer ou d\u00e9sactiver le bouton et modifier et supprimer le bouton.<\/li>\n
- Bouton Activer ou D\u00e9sactiver:<\/strong>\u00a0Lorsque l’entr\u00e9e est effectu\u00e9e dans le module CSS Prestashop personnalis\u00e9, l’utilisateur peut activer le fichier ajout\u00e9 en cliquant sur le bouton Activer une fois qui passe au bouton D\u00e9sactiver apr\u00e8s que l’utilisateur a cliqu\u00e9 sur le bouton Activer. d\u00e9sactiver l’entr\u00e9e en cliquant sur le bouton d\u00e9sactiver qui appara\u00eet dans la table et le contraire se produit.<\/li>\n
- Editer:<\/strong>\u00a0Dans la colonne action de la table, il y a un bouton d’\u00e9dition en cliquant dessus, une fen\u00eatre apparait qui est la m\u00eame que celle qui appara\u00eet apr\u00e8s avoir cliqu\u00e9 sur le bouton ajouter une nouvelle entr\u00e9e.\u00a0Mais, la diff\u00e9rence est que maintenant les champs du module personnalis\u00e9 JS Prestashop sont remplis avec tous les d\u00e9tails qui ont \u00e9t\u00e9 entr\u00e9s plus t\u00f4t par l’utilisateur dans cette ligne.\u00a0Maintenant, l’utilisateur peut modifier les entr\u00e9es du plugin personnalis\u00e9 CSS et JS Prestashop qui ont \u00e9t\u00e9 faites dans les fichiers ou peuvent changer le type de p\u00e9riph\u00e9rique ou peut ajouter l’entr\u00e9e au nom de la page.<\/li>\n
- Supprimer:<\/strong>\u00a0Dans 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\u00e9e qui a \u00e9t\u00e9 faite dans cette ligne.<\/li>\n
- Bo\u00eete d’interface:<\/strong>\u00a0C’est la bo\u00eete qui appara\u00eetra apr\u00e8s avoir cliqu\u00e9 sur le bouton ajouter si nous devons ajouter une nouvelle entr\u00e9e dans la table des param\u00e8tres avanc\u00e9s.\u00a0Il appara\u00eetra \u00e9galement si nous cliquons sur le bouton d’\u00e9dition apr\u00e8s que l’entr\u00e9e est faite mais la diff\u00e9rence est que maintenant les champs dans la bo\u00eete de commande seront le champ avec les d\u00e9tails de cette rang\u00e9e particuli\u00e8re \u00e0 laquelle le bouton d’\u00e9dition appartient.\u00a0Les champs dans la case Pop-up sont:<\/li>\n<\/ul>\n
A. S\u00e9lectionnez la liste d\u00e9roulante de la page:<\/strong>\u00a0Le premier champ du champ ‘Ajouter nouveau’ est un menu d\u00e9roulant qui contient tous les noms des pages actuellement disponibles dans Prestashop.\u00a0Vous pouvez s\u00e9lectionner la page dans laquelle l’entr\u00e9e doit \u00eatre effectu\u00e9e.
\nB. Choisissez Type de p\u00e9riph\u00e9rique:<\/strong>\u00a0Ce champ de CSS personnalis\u00e9 Prestashop contient trois boutons radio Mobile, Desktop et les deux.\u00a0Vous pouvez s\u00e9lectionner le type d’appareil pour lequel vous allez ajouter le css et js.
\nC. Configuration CSS:<\/strong>\u00a0Dans cette zone de texte du plugin Prestashop par Knowband, vous devez ajouter le code CSS qui doit \u00eatre ajout\u00e9 sur la page que vous avez s\u00e9lectionn\u00e9e pr\u00e9c\u00e9demment.
\nD. Configuration de JS:<\/strong>\u00a0Dans cette zone de texte du module CSS Prestashop personnalis\u00e9, vous devez ajouter le code js qui doit \u00eatre ajout\u00e9 sur la page que vous avez s\u00e9lectionn\u00e9e pr\u00e9c\u00e9demment.<\/p>\nINTERFACE APR\u00c8S CLIQUER SUR AJOUTER NOUVELLE ENTR\u00c9E<\/strong><\/p>\n![\"POP](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2015\/12\/POP-UP-BOX-AFTER-CLICKING-ON-ADD-NEW-ENTRY.png\")
<\/a><\/p>\nAPR\u00c8S AVOIR AJOUT\u00c9 L’ENTR\u00c9E<\/strong><\/p>\n![\"APR\u00c8S](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2015\/12\/AFTER-ADDING-THE-ENTRY-.png\")
<\/a><\/p>\nINTERFACE APRES LE CLICKING SUR LE BOUTON EDIT<\/strong><\/p>\n![\"POP](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2015\/12\/POP-UP-BOX-AFTER-CLICKING-ON-EDIT-BUTTON.png\")
<\/a><\/p>\nModule frontal<\/h2>\n
Apr\u00e8s avoir activ\u00e9 le plugin Prestashop Custom JS par Knowband, l’utilisateur frontal verra le CSS et JS qui sont ajout\u00e9s globalement au site Web et l’utilisateur verra \u00e9galement le CSS et JS qui est ajout\u00e9 \u00e0 cette page seulement dans les param\u00e8tres avanc\u00e9s languette.<\/p>\n
Le CSS personnalis\u00e9 et JS \u00e0 l’extr\u00e9mit\u00e9 frontale appara\u00eet comme suit:<\/p>\n
![\"Module](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2015\/12\/Front-End-Module.png\")
<\/a><\/p>\nRecommandations<\/strong><\/p>\nActualisez la page d’accueil de votre boutique chaque fois que vous activez \/ d\u00e9sactivez le plugin.\u00a0Si le plugin ne fonctionne pas apr\u00e8s l’installation, veuillez v\u00e9rifier les permissions sur le dossier des modules.\u00a0Le dossier devrait \u00eatre accessible en \u00e9criture.\u00a0Veuillez autoriser le dossier \u00e0 755.<\/p>\n
Nous esp\u00e9rons que nous avons couvert toutes les pr\u00e9occupations concernant l’installation et le guide des produits de cet\u00a0add-<\/a>\u00a0on\u00a0Prestashop<\/a>\u00a0.\u00a0Vous devriez \u00e9galement consulter notre blog sur Donnez plusieurs raisons \u00e0 vos clients pour avoir termin\u00e9 leur processus de paiement en ligne –\u00a0ici<\/strong><\/a><\/p>\nRegardez le didacticiel vid\u00e9o ici:<\/strong><\/p>\n
<\/a><\/p>\n3. Cliquez sur installer pour installer le plugin Prestashop Custom JS And CSS.<\/p>\n
Interface d’administration<\/h2>\n
Les fonctionnalit\u00e9s suivantes seront fournies \u00e0 l’administrateur dans ce module CSS Prestashop personnalis\u00e9:<\/p>\n
1. Param\u00e8tres g\u00e9n\u00e9raux<\/p>\n
2. Param\u00e8tres avanc\u00e9s<\/p>\n
Param\u00e8tres g\u00e9n\u00e9raux du module JS Prestashop personnalis\u00e9:<\/h3>\n
Apr\u00e8s avoir cliqu\u00e9 sur le lien de configuration de Custom JS et CSS addon sur la page de liste des modules, le syst\u00e8me ouvrira les onglets de param\u00e8tres g\u00e9n\u00e9raux par d\u00e9faut comme montr\u00e9 dans l’\u00e9cran ci-dessous:<\/p>\n
Les champs list\u00e9s seront remplis avec des valeurs par d\u00e9faut<\/p>\n D\u00c9TAILS DES ONGLETS DES R\u00c9GLAGES G\u00c9N\u00c9RAUX:<\/strong><\/p>\n 1. Activer \/ D\u00e9sactiver:<\/strong>\u00a0Initialement, ce champ de module personnalis\u00e9 CSS Prestashop sera d\u00e9sactiv\u00e9.\u00a0L’administrateur peut activer \/ d\u00e9sactiver la fonctionnalit\u00e9 addon en activant \/ d\u00e9sactivant cette option. Apr\u00e8s avoir cliqu\u00e9 sur l’onglet des param\u00e8tres avanc\u00e9s du plugin personnalis\u00e9 CSS et JS Prestashop, l’\u00e9cran ci-dessous appara\u00eet.<\/p>\n D\u00c9TAILS DU TABLEAU DES PARAM\u00c8TRES D’AVANCE:<\/strong><\/p>\n A. S\u00e9lectionnez la liste d\u00e9roulante de la page:<\/strong>\u00a0Le premier champ du champ ‘Ajouter nouveau’ est un menu d\u00e9roulant qui contient tous les noms des pages actuellement disponibles dans Prestashop.\u00a0Vous pouvez s\u00e9lectionner la page dans laquelle l’entr\u00e9e doit \u00eatre effectu\u00e9e. INTERFACE APR\u00c8S CLIQUER SUR AJOUTER NOUVELLE ENTR\u00c9E<\/strong><\/p>\n APR\u00c8S AVOIR AJOUT\u00c9 L’ENTR\u00c9E<\/strong><\/p>\n INTERFACE APRES LE CLICKING SUR LE BOUTON EDIT<\/strong><\/p>\n Apr\u00e8s avoir activ\u00e9 le plugin Prestashop Custom JS par Knowband, l’utilisateur frontal verra le CSS et JS qui sont ajout\u00e9s globalement au site Web et l’utilisateur verra \u00e9galement le CSS et JS qui est ajout\u00e9 \u00e0 cette page seulement dans les param\u00e8tres avanc\u00e9s languette.<\/p>\n Le CSS personnalis\u00e9 et JS \u00e0 l’extr\u00e9mit\u00e9 frontale appara\u00eet comme suit:<\/p>\n Recommandations<\/strong><\/p>\n Actualisez la page d’accueil de votre boutique chaque fois que vous activez \/ d\u00e9sactivez le plugin.\u00a0Si le plugin ne fonctionne pas apr\u00e8s l’installation, veuillez v\u00e9rifier les permissions sur le dossier des modules.\u00a0Le dossier devrait \u00eatre accessible en \u00e9criture.\u00a0Veuillez autoriser le dossier \u00e0 755.<\/p>\n Nous esp\u00e9rons que nous avons couvert toutes les pr\u00e9occupations concernant l’installation et le guide des produits de cet\u00a0add-<\/a>\u00a0on\u00a0Prestashop<\/a>\u00a0.\u00a0Vous devriez \u00e9galement consulter notre blog sur Donnez plusieurs raisons \u00e0 vos clients pour avoir termin\u00e9 leur processus de paiement en ligne –\u00a0ici<\/strong><\/a><\/p>\n Regardez le didacticiel vid\u00e9o ici:<\/strong><\/p>\n<\/a><\/p>\n
\n2. CSS personnalis\u00e9:<\/strong>\u00a0Le contenu CSS qui doit \u00eatre affich\u00e9 sur chaque page du site doit \u00eatre entr\u00e9 dans la zone de texte de CSS personnalis\u00e9 et JS Prestashop plugin donn\u00e9 avec le champ nomm\u00e9 CSS personnalis\u00e9.
\n3. Custom JS:<\/strong>\u00a0Le contenu JS qui doit \u00eatre affich\u00e9 sur chaque page du site Web doit \u00eatre entr\u00e9 dans la zone de texte du module JS Prestashop personnalis\u00e9 donn\u00e9 avec le champ nomm\u00e9 JS personnalis\u00e9.<\/p>\nParam\u00e8tres avanc\u00e9s du plugin personnalis\u00e9 CSS et JS Prestashop:<\/h3>\n
<\/a><\/p>\n\n
\nB. Choisissez Type de p\u00e9riph\u00e9rique:<\/strong>\u00a0Ce champ de CSS personnalis\u00e9 Prestashop contient trois boutons radio Mobile, Desktop et les deux.\u00a0Vous pouvez s\u00e9lectionner le type d’appareil pour lequel vous allez ajouter le css et js.
\nC. Configuration CSS:<\/strong>\u00a0Dans cette zone de texte du plugin Prestashop par Knowband, vous devez ajouter le code CSS qui doit \u00eatre ajout\u00e9 sur la page que vous avez s\u00e9lectionn\u00e9e pr\u00e9c\u00e9demment.
\nD. Configuration de JS:<\/strong>\u00a0Dans cette zone de texte du module CSS Prestashop personnalis\u00e9, vous devez ajouter le code js qui doit \u00eatre ajout\u00e9 sur la page que vous avez s\u00e9lectionn\u00e9e pr\u00e9c\u00e9demment.<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\nModule frontal<\/h2>\n
<\/a><\/p>\n