{"id":5030,"date":"2025-08-20T14:47:34","date_gmt":"2025-08-20T12:47:34","guid":{"rendered":"https:\/\/cocos.codes\/?p=5030"},"modified":"2026-01-21T16:11:12","modified_gmt":"2026-01-21T15:11:12","slug":"categories-prestashop-sur-la-page-daccueil","status":"publish","type":"post","link":"https:\/\/cocos.codes\/fr\/archiwa\/prestashop-kategorie-na-stronie-glownej\/","title":{"rendered":"Cat\u00e9gories PrestaShop sur la page d'accueil 1.0"},"content":{"rendered":"<h6 data-rm-block-id=\"block-1\">PrestaShop Documentation Cat\u00e9gories sur la page d'accueil<\/h6>Complet <a href=\"https:\/\/cocos.codes\/fr\/categorie\/base-de-connaissances\/prestashop\/documentation-prestashop\/\" title=\"Documentation\">la documentation<\/a> pour le module affichant les cat\u00e9gories sur la page d'accueil <a href=\"https:\/\/addons.prestashop.com\/\" target=\"_blank\" rel=\"noopener\">PrestaShop<\/a> (<a href=\"https:\/\/cocos.codes\/fr\/product\/prestashop-categories-sur-la-page-daccueil-1-0-1\/\" title=\"Cc_ps_home_categories\">cc_ps_home_categories<\/a>) avec des options de style avanc\u00e9es, plusieurs modes d'affichage et un contr\u00f4le total de l'apparence des cat\u00e9gories.<br \/><br \/><strong>Table des mati\u00e8res<\/strong><ol><li data-rm-block-id=\"block-2\">Introduction<\/li><li data-rm-block-id=\"block-3\">Installation<\/li><li data-rm-block-id=\"block-4\">Activation de la licence<\/li><li data-rm-block-id=\"block-5\">Panel de gestion<\/li><li data-rm-block-id=\"block-6\">Param\u00e8tres g\u00e9n\u00e9raux<\/li><li data-rm-block-id=\"block-7\">Styles d'affichage<\/li><li data-rm-block-id=\"block-8\">Configuration des images<\/li><li data-rm-block-id=\"block-9\">S\u00e9lection de la cat\u00e9gorie<\/li><li data-rm-block-id=\"block-10\">Personnalisation de l'apparence<\/li><li data-rm-block-id=\"block-11\">R\u00e9activit\u00e9<\/li><li data-rm-block-id=\"block-12\">R\u00e9solution de probl\u00e8mes<\/li><li data-rm-block-id=\"block-13\">FAQ<\/li><\/ol><h6 data-rm-block-id=\"block-14\"><br \/>1. Introduction<\/h6>CC PrestaShop Categories Home est un module avanc\u00e9 qui vous permet d'afficher \u00e9l\u00e9gamment les cat\u00e9gories sur la page d'accueil de votre boutique. Le module offre une large gamme de styles d'affichage, des grilles classiques aux sliders modernes, vous donnant un contr\u00f4le total sur l'apparence et la fonctionnalit\u00e9.<br \/><br \/><strong>Fonctions du module principal :<\/strong><ul><li data-rm-block-id=\"block-15\">7 styles de grille diff\u00e9rents (classique, moderne, minimaliste, color\u00e9, \u00e9l\u00e9gant, mode sombre, bord\u00e9 clair)<\/li><li data-rm-block-id=\"block-16\">Slider avec navigation et prise en charge des gestes tactiles<\/li><li data-rm-block-id=\"block-17\">3 modes de liste (horizontale, verticale, compacte)<\/li><li data-rm-block-id=\"block-18\">Contr\u00f4le total de la s\u00e9lection des cat\u00e9gories<\/li><li data-rm-block-id=\"block-19\">Options avanc\u00e9es pour les images<\/li><li data-rm-block-id=\"block-20\">Conception adapt\u00e9e<\/li><li data-rm-block-id=\"block-21\">Syst\u00e8me de licence COCOS<\/li><li data-rm-block-id=\"block-22\">Service multilingue<\/li><li data-rm-block-id=\"block-23\">Animations et effets de transition<\/li><li data-rm-block-id=\"block-24\">Peut \u00eatre plac\u00e9 dans diff\u00e9rents points d'ancrage<\/li><\/ul><h6 data-rm-block-id=\"block-25\"><br \/>2. installation<\/h6><strong>Exigences du syst\u00e8me<\/strong><ul><li data-rm-block-id=\"block-26\"><a href=\"https:\/\/prestashop.com\/\" title=\"PrestaShop\" target=\"_blank\" rel=\"noopener\">PrestaShop<\/a> 1.7.0.0 ou plus r\u00e9cent<\/li><li data-rm-block-id=\"block-27\"><a href=\"https:\/\/www.php.net\/\" title=\"PHP\" target=\"_blank\" rel=\"noopener\">PHP<\/a> 7.2 ou version ult\u00e9rieure<\/li><li data-rm-block-id=\"block-28\"><a href=\"https:\/\/www.mysql.com\/\" title=\"MySQL\" target=\"_blank\" rel=\"noopener\">MySQL<\/a> 5.6 ou plus r\u00e9cent<\/li><li data-rm-block-id=\"block-29\">Permission d'installer des modules<\/li><li data-rm-block-id=\"block-30\">256 Mo de RAM au minimum (512 Mo recommand\u00e9s)<\/li><li data-rm-block-id=\"block-31\">Extension GD pour le traitement des images<\/li><\/ul><strong>Processus d'installation<\/strong><ol><li data-rm-block-id=\"block-32\">T\u00e9l\u00e9charger le fichier ZIP du module depuis la boutique officielle <a href=\"https:\/\/cocos.codes\/fr\/\" title=\"Cocos.codes\">cocos.codes<\/a><\/li><li data-rm-block-id=\"block-33\">Se connecter au panneau d'administration de PrestaShop<\/li><li data-rm-block-id=\"block-34\">Allez dans : Modules &gt; Gestionnaire de modules &gt; Ajouter un nouveau module<\/li><li data-rm-block-id=\"block-35\">Cliquez sur \"Ajouter un module\" et s\u00e9lectionnez le fichier ZIP t\u00e9l\u00e9charg\u00e9.<\/li><li data-rm-block-id=\"block-36\">Une fois l'installation termin\u00e9e, cliquez sur \"Configurer\"<\/li><li data-rm-block-id=\"block-37\">Le module s'enregistre automatiquement dans l'afficheurConnexion \u00e0 la maison<\/li><\/ol><div class=\"cc-alert cc-alert-info\"><div class=\"cc-alert-title\" data-rm-block-id=\"block-38\">Info<\/div><div class=\"cc-alert-content\" data-rm-block-id=\"block-39\">Apr\u00e8s l'installation, le module se place automatiquement en premi\u00e8re position dans le crochet displayHome et cr\u00e9e une configuration par d\u00e9faut. Tous les styles CSS et JavaScript sont charg\u00e9s automatiquement sur la page d'accueil.<\/div><\/div><h6 data-rm-block-id=\"block-40\"><br \/>3. Activation de la licence<\/h6>Avant de pouvoir utiliser toutes les fonctionnalit\u00e9s du module, il est n\u00e9cessaire d'activer la licence :<ol><li data-rm-block-id=\"block-41\">Apr\u00e8s l'installation, proc\u00e9der \u00e0 la configuration du module<\/li><li data-rm-block-id=\"block-42\">S\u00e9lectionnez l'onglet \"Licence<\/li><li data-rm-block-id=\"block-43\">Saisir la cl\u00e9 de licence re\u00e7ue apr\u00e8s l'achat<\/li><li data-rm-block-id=\"block-44\">Cliquez sur \"Activer la licence\"<\/li><li data-rm-block-id=\"block-45\">Le syst\u00e8me v\u00e9rifiera la validit\u00e9 des licences sur les serveurs COCOS.<\/li><li data-rm-block-id=\"block-46\">Une fois l'activation r\u00e9ussie, un message de confirmation s'affiche<\/li><\/ol><div class=\"cc-alert cc-alert-warning\"><div class=\"cc-alert-title\" data-rm-block-id=\"block-47\">Avertissement<\/div><div class=\"cc-alert-content\" data-rm-block-id=\"block-48\">Sans licence active, le module n'affichera pas les cat\u00e9gories sur la page d'accueil. Un message indiquant que la licence n'est pas valide s'affiche en haut du panneau d'administration, ainsi qu'un lien pour l'activer.<\/div><\/div><h6 data-rm-block-id=\"block-54\"><br \/>4 Panneau de gestion<\/h6>Le panneau de gestion du module se compose de plusieurs onglets permettant une configuration compl\u00e8te :<br \/><br \/><strong>Principaux onglets :<\/strong><ul><li data-rm-block-id=\"block-55\"><strong>Param\u00e8tres<\/strong> - configuration du module principal (disponible uniquement avec une licence valide)<\/li><li data-rm-block-id=\"block-56\"><strong>Documentation<\/strong> - lien vers la documentation compl\u00e8te en ligne<\/li><li data-rm-block-id=\"block-57\"><strong>Soutien<\/strong> - lien vers la page d'assistance technique de COCOS<\/li><li data-rm-block-id=\"block-58\"><strong>Plug-ins<\/strong> - liste des extensions COCOS disponibles<\/li><li data-rm-block-id=\"block-59\"><strong>Licence<\/strong> - gestion des licences de modules<\/li><\/ul>Le syst\u00e8me redirige automatiquement vers l'onglet licence si la cl\u00e9 n'est pas active, offrant ainsi un processus de configuration intuitif.<h6 data-rm-block-id=\"block-60\"><br \/>5. param\u00e8tres g\u00e9n\u00e9raux<\/h6>Dans la section des param\u00e8tres g\u00e9n\u00e9raux, vous trouverez les options de base qui contr\u00f4lent le fonctionnement du module :<br \/><br \/><table class=\"woocommerce-table shop_table\"><thead><tr><td data-rm-block-id=\"block-61\"><strong>Param\u00e8tres<\/strong><\/td><td data-rm-block-id=\"block-62\"><strong>Description<\/strong><\/td><td data-rm-block-id=\"block-63\"><strong>Valeur par d\u00e9faut<\/strong><\/td><\/tr><\/thead><tbody><tr><td data-rm-block-id=\"block-64\">Mise sous tension du module<\/td><td data-rm-block-id=\"block-65\">Activation\/d\u00e9sactivation de l'affichage global<\/td><td data-rm-block-id=\"block-66\">Sur<\/td><\/tr><tr><td data-rm-block-id=\"block-67\">Afficher le titre de la section<\/td><td data-rm-block-id=\"block-68\">Affichage de l'en-t\u00eate au-dessus des cat\u00e9gories<\/td><td data-rm-block-id=\"block-69\">Sur<\/td><\/tr><tr><td data-rm-block-id=\"block-70\">Titre de la section<\/td><td data-rm-block-id=\"block-71\">Texte d'en-t\u00eate multilingue<\/td><td data-rm-block-id=\"block-72\">\"Nos cat\u00e9gories<\/td><\/tr><tr><td data-rm-block-id=\"block-73\">Limite de cat\u00e9gorie<\/td><td data-rm-block-id=\"block-74\">Nombre maximal de cat\u00e9gories (1-50)<\/td><td data-rm-block-id=\"block-75\">6<\/td><\/tr><\/tbody><\/table><strong>Fonctionnement de l'interrupteur principal<\/strong><ul><li data-rm-block-id=\"block-76\"><strong>Sur<\/strong> - les cat\u00e9gories sont visibles sur la page d'accueil en fonction de la configuration<\/li><li data-rm-block-id=\"block-77\"><strong>Arr\u00eat<\/strong> - le module n'affiche aucune cat\u00e9gorie<\/li><\/ul><div class=\"cc-alert cc-alert-tip\"><div class=\"cc-alert-title\" data-rm-block-id=\"block-78\">Conseil<\/div><div class=\"cc-alert-content\" data-rm-block-id=\"block-79\">L'interrupteur principal permet d'\u00e9teindre rapidement le module sans perdre la configuration, par exemple lors de l'entretien de l'atelier ou de l'essai de nouveaux r\u00e9glages.<\/div><\/div><h6 data-rm-block-id=\"block-80\"><br \/>6. styles d'affichage<\/h6>Le module propose 11 styles diff\u00e9rents d'affichage des cat\u00e9gories, r\u00e9partis en 3 groupes principaux :<br \/><br \/><strong>Styles de grille<\/strong><table class=\"woocommerce-table shop_table\"><thead><tr><td data-rm-block-id=\"block-81\"><strong>Style<\/strong><\/td><td data-rm-block-id=\"block-82\"><strong>Description<\/strong><\/td><td data-rm-block-id=\"block-83\"><strong>Utilisation recommand\u00e9e<\/strong><\/td><\/tr><\/thead><tbody><tr><td data-rm-block-id=\"block-84\">grille_classique<\/td><td data-rm-block-id=\"block-85\">Cartes classiques avec cadres et ombres<\/td><td data-rm-block-id=\"block-86\">Magasins universels<\/td><\/tr><tr><td data-rm-block-id=\"block-87\">grille_moderne<\/td><td data-rm-block-id=\"block-88\">D\u00e9grad\u00e9 d'arri\u00e8re-plan avec superposition sur les images<\/td><td data-rm-block-id=\"block-89\">Marques modernes<\/td><\/tr><tr><td data-rm-block-id=\"block-90\">grille_minimale<\/td><td data-rm-block-id=\"block-91\">Des cartes \u00e9pur\u00e9es et minimalistes<\/td><td data-rm-block-id=\"block-92\">Magasins haut de gamme<\/td><\/tr><tr><td data-rm-block-id=\"block-93\">grille_color\u00e9e<\/td><td data-rm-block-id=\"block-94\">Cadres color\u00e9s avec animations<\/td><td data-rm-block-id=\"block-95\">Magasins pour enfants\/jeunes<\/td><\/tr><tr><td data-rm-block-id=\"block-96\">grid_elegant<\/td><td data-rm-block-id=\"block-97\">Cartes \u00e9l\u00e9gantes avec accents dor\u00e9s<\/td><td data-rm-block-id=\"block-98\">Marques de luxe<\/td><\/tr><tr><td data-rm-block-id=\"block-99\">grid_dark<\/td><td data-rm-block-id=\"block-100\">Th\u00e8me sombre avec effets de lumi\u00e8re<\/td><td data-rm-block-id=\"block-101\">Jeux\/\u00e9lectronique<\/td><\/tr><tr><td data-rm-block-id=\"block-102\">grid_light_bordered<\/td><td data-rm-block-id=\"block-103\">Cartes lumineuses avec bordures transparentes<\/td><td data-rm-block-id=\"block-104\">Magasins d'entreprise<\/td><\/tr><\/tbody><\/table><strong>Lister les styles<\/strong><table class=\"woocommerce-table shop_table\"><thead><tr><td data-rm-block-id=\"block-105\"><strong>Style<\/strong><\/td><td data-rm-block-id=\"block-106\"><strong>Description<\/strong><\/td><td data-rm-block-id=\"block-107\"><strong>Utilisation recommand\u00e9e<\/strong><\/td><\/tr><\/thead><tbody><tr><td data-rm-block-id=\"block-108\">liste_horizontale<\/td><td data-rm-block-id=\"block-109\">Cartes illustr\u00e9es horizontales \u00e0 gauche<\/td><td data-rm-block-id=\"block-110\">Pages des cat\u00e9gories principales<\/td><\/tr><tr><td data-rm-block-id=\"block-111\">liste_verticale<\/td><td data-rm-block-id=\"block-112\">Cartes verticales en colonnes<\/td><td data-rm-block-id=\"block-113\">Sections \u00e9troites<\/td><\/tr><tr><td data-rm-block-id=\"block-114\">liste_compacte<\/td><td data-rm-block-id=\"block-115\">Liste compacte avec petites images<\/td><td data-rm-block-id=\"block-116\">Barre lat\u00e9rale, pied de page<\/td><\/tr><\/tbody><\/table><strong>Styles de curseur<\/strong><ul><li data-rm-block-id=\"block-117\"><span class=\"cc-highlight\">slider_classic<\/span> - Curseur \u00e9l\u00e9gant avec navigation et recouvrement par survol<\/li><\/ul><div class=\"cc-alert cc-alert-note\"><div class=\"cc-alert-title\" data-rm-block-id=\"block-118\">Note<\/div><div class=\"cc-alert-content\" data-rm-block-id=\"block-119\">Chaque style poss\u00e8de ses propres styles CSS et animations. Les styles de grille permettent de configurer le nombre de colonnes, tandis que le curseur adapte automatiquement le nombre d'\u00e9l\u00e9ments visibles \u00e0 la largeur de l'\u00e9cran.<\/div><\/div><h6 data-rm-block-id=\"block-120\"><br \/>7. configuration des images<\/h6>Le module offre un contr\u00f4le total sur l'affichage des images des cat\u00e9gories :<br \/><br \/><strong>Taille des conteneurs<\/strong><table class=\"woocommerce-table shop_table\"><thead><tr><td data-rm-block-id=\"block-121\"><strong>Taille<\/strong><\/td><td data-rm-block-id=\"block-122\"><strong>Hauteur<\/strong><\/td><td data-rm-block-id=\"block-123\"><strong>Recommand\u00e9 pour<\/strong><\/td><\/tr><\/thead><tbody><tr><td data-rm-block-id=\"block-124\">petit<\/td><td data-rm-block-id=\"block-125\">150px<\/td><td data-rm-block-id=\"block-126\">Syst\u00e8mes compacts<\/td><\/tr><tr><td data-rm-block-id=\"block-127\">moyen<\/td><td data-rm-block-id=\"block-128\">250px<\/td><td data-rm-block-id=\"block-129\">Affichage standard<\/td><\/tr><tr><td data-rm-block-id=\"block-130\">important<\/td><td data-rm-block-id=\"block-131\">350px<\/td><td data-rm-block-id=\"block-132\">Des pr\u00e9sentations impressionnantes<\/td><\/tr><\/tbody><\/table><strong>Types d'images<\/strong><br \/>Le syst\u00e8me d\u00e9tecte automatiquement les types d'images disponibles d\u00e9finis dans PrestaShop pour les cat\u00e9gories :<ul><li data-rm-block-id=\"block-133\"><span class=\"cc-highlight\">cat\u00e9gorie_d\u00e9faut<\/span> - type standard pour la cat\u00e9gorie<\/li><\/ul><strong>Images de repli<\/strong><br \/>Si une cat\u00e9gorie n'a pas d'image attribu\u00e9e, le syst\u00e8me affiche automatiquement une image de remplacement par d\u00e9faut. <span class=\"cc-highlight\">no-image-category.jpg<\/span>.<h6 data-rm-block-id=\"block-141\"><br \/>8 S\u00e9lection de la cat\u00e9gorie<\/h6>Le module propose deux modes de s\u00e9lection des cat\u00e9gories \u00e0 afficher :<br \/><br \/><strong>Mode automatique<\/strong><br \/>Le syst\u00e8me s\u00e9lectionne automatiquement les cat\u00e9gories principales en fonction de leur position :<ul><li data-rm-block-id=\"block-142\">Sauter la cat\u00e9gorie de la racine (ID : 1)<\/li><li data-rm-block-id=\"block-143\">Sauter la cat\u00e9gorie principale du magasin<\/li><li data-rm-block-id=\"block-144\">Trie par position dans l'arbre des cat\u00e9gories<\/li><li data-rm-block-id=\"block-145\">S\u00e9lectionne uniquement les cat\u00e9gories actives<\/li><li data-rm-block-id=\"block-146\">Respecte la limite fix\u00e9e<\/li><\/ul><strong>Mode manuel<\/strong><br \/>L'administrateur peut s\u00e9lectionner manuellement des cat\u00e9gories sp\u00e9cifiques :<ul><li data-rm-block-id=\"block-147\">Liste des identifiants de cat\u00e9gories s\u00e9par\u00e9s par des virgules<\/li><li data-rm-block-id=\"block-148\">Exemple : <span class=\"cc-highlight\">2,5,8,12<\/span><\/li><li data-rm-block-id=\"block-149\">Le syst\u00e8me v\u00e9rifie si les cat\u00e9gories existent et sont actives<\/li><li data-rm-block-id=\"block-150\">Ordre d'affichage dans la liste<\/li><li data-rm-block-id=\"block-151\">Saut automatique des cat\u00e9gories inexistantes<\/li><\/ul><strong>Validation de la cat\u00e9gorie<\/strong><br \/>Quel que soit le mode, le syst\u00e8me v\u00e9rifie :<ul><li data-rm-block-id=\"block-152\">La cat\u00e9gorie existe-t-elle dans la base de donn\u00e9es ?<\/li><li data-rm-block-id=\"block-153\">La cat\u00e9gorie est-elle active ?<\/li><li data-rm-block-id=\"block-154\">La cat\u00e9gorie a-t-elle un nom dans la langue actuelle ?<\/li><li data-rm-block-id=\"block-155\">Si l'utilisateur a le droit de le consulter<\/li><\/ul><div class=\"cc-alert cc-alert-tip\"><div class=\"cc-alert-title\" data-rm-block-id=\"block-156\">Conseil<\/div><div class=\"cc-alert-content\" data-rm-block-id=\"block-157\">En mode manuel, vous pouvez facilement r\u00e9organiser les cat\u00e9gories en modifiant leur ordre dans la liste des identifiants. Le syst\u00e8me respectera exactement cet ordre.<\/div><\/div><h6 data-rm-block-id=\"block-158\"><br \/>9. ajuster l'apparence<\/h6><strong>Contr\u00f4le du contenu<\/strong><table class=\"woocommerce-table shop_table\"><thead><tr><td data-rm-block-id=\"block-159\"><strong>Option<\/strong><\/td><td data-rm-block-id=\"block-160\"><strong>Fonction<\/strong><\/td><td data-rm-block-id=\"block-161\"><strong>Par d\u00e9faut<\/strong><\/td><\/tr><\/thead><tbody><tr><td data-rm-block-id=\"block-162\">Afficher les noms des cat\u00e9gories<\/td><td data-rm-block-id=\"block-163\">Affichage des titres de cat\u00e9gories<\/td><td data-rm-block-id=\"block-164\">Activ\u00e9<\/td><\/tr><tr><td data-rm-block-id=\"block-165\">Afficher les descriptions des cat\u00e9gories<\/td><td data-rm-block-id=\"block-166\">Affichage des descriptions (abr\u00e9g\u00e9es)<\/td><td data-rm-block-id=\"block-167\">Activ\u00e9<\/td><\/tr><tr><td data-rm-block-id=\"block-168\">Nombre de colonnes<\/td><td data-rm-block-id=\"block-169\">Division en grille (1-6 colonnes)<\/td><td data-rm-block-id=\"block-170\">3<\/td><\/tr><\/tbody><\/table><strong>Comportement r\u00e9actif<\/strong><br \/>Le syst\u00e8me adapte automatiquement le nombre de colonnes :<ul><li data-rm-block-id=\"block-171\"><strong>Bureau<\/strong> - nombre total de colonnes<\/li><li data-rm-block-id=\"block-172\"><strong>Tablette<\/strong> - 2-3 colonnes maximum<\/li><li data-rm-block-id=\"block-173\"><strong>Mobile<\/strong> - toujours 1 colonne<\/li><\/ul><strong>Effets et animations<\/strong><ul><li data-rm-block-id=\"block-174\">Fondu pendant le chargement de la page<\/li><li data-rm-block-id=\"block-175\">Effets de survol sur les cartes<\/li><li data-rm-block-id=\"block-176\">Transitions douces<\/li><li data-rm-block-id=\"block-177\">Animations de r\u00e9v\u00e9lation du d\u00e9filement<\/li><li data-rm-block-id=\"block-178\">\u00c9tats de chargement des images<\/li><\/ul><strong>R\u00e9activit\u00e9 du curseur<\/strong><br \/>Slider automatiquement :<ul><li data-rm-block-id=\"block-179\">Ajuste le nombre d'\u00e9l\u00e9ments visibles<\/li><li data-rm-block-id=\"block-180\">Prise en charge de gestyswipe sur les appareils tactiles<\/li><li data-rm-block-id=\"block-181\">Affiche\/masque la navigation selon les besoins<\/li><li data-rm-block-id=\"block-182\">Maintient le rapport d'aspect sur diff\u00e9rents \u00e9crans<\/li><\/ul><h6 data-rm-block-id=\"block-183\"><br \/>10 R\u00e9activit\u00e9<\/h6>Le module est enti\u00e8rement r\u00e9actif et s'adapte automatiquement aux diff\u00e9rentes tailles d'\u00e9cran :<br \/><br \/><strong>Points d'arr\u00eat<\/strong><table class=\"woocommerce-table shop_table\"><thead><tr><td data-rm-block-id=\"block-184\"><strong>Dispositif<\/strong><\/td><td data-rm-block-id=\"block-185\"><strong>Largeur<\/strong><\/td><td data-rm-block-id=\"block-186\"><strong>Colonnes<\/strong><\/td><td data-rm-block-id=\"block-187\"><strong>Comportement<\/strong><\/td><\/tr><\/thead><tbody><tr><td data-rm-block-id=\"block-188\">Bureau<\/td><td data-rm-block-id=\"block-189\">&gt; 768px<\/td><td data-rm-block-id=\"block-190\">Configuration compl\u00e8te<\/td><td data-rm-block-id=\"block-191\">Affichage standard<\/td><\/tr><tr><td data-rm-block-id=\"block-192\">Tablette<\/td><td data-rm-block-id=\"block-193\">481-768px<\/td><td data-rm-block-id=\"block-194\">Maximum 2-3<\/td><td data-rm-block-id=\"block-195\">Une mise en page simplifi\u00e9e<\/td><\/tr><tr><td data-rm-block-id=\"block-196\">Mobile<\/td><td data-rm-block-id=\"block-197\">&lt; 480px<\/td><td data-rm-block-id=\"block-198\">1<\/td><td data-rm-block-id=\"block-199\">Disposition verticale<\/td><\/tr><\/tbody><\/table><strong>Optimisations mobiles<\/strong><ul><li data-rm-block-id=\"block-200\">R\u00e9duction automatique du remplissage et de la marge<\/li><li data-rm-block-id=\"block-201\">Typographie adapt\u00e9e<\/li><li data-rm-block-id=\"block-202\">Navigation conviviale<\/li><li data-rm-block-id=\"block-203\">Taille des images optimis\u00e9e<\/li><li data-rm-block-id=\"block-204\">Animations simplifi\u00e9es<\/li><\/ul><strong>Styles mobiles pour les modes individuels<\/strong><ul><li data-rm-block-id=\"block-205\"><strong>Liste horizontale<\/strong> - se transforme en une verticale<\/li><li data-rm-block-id=\"block-206\"><strong>Liste compacte<\/strong> - les \u00e9l\u00e9ments s'empilent les uns sur les autres<\/li><li data-rm-block-id=\"block-207\"><strong>Curseur<\/strong> - r\u00e9duit la largeur des \u00e9l\u00e9ments et l'espacement<\/li><\/ul><div class=\"cc-alert cc-alert-note\"><div class=\"cc-alert-title\" data-rm-block-id=\"block-208\">Note<\/div><div class=\"cc-alert-content\" data-rm-block-id=\"block-209\">Tous les styles r\u00e9actifs sont int\u00e9gr\u00e9s dans le module et ne n\u00e9cessitent aucune configuration suppl\u00e9mentaire. Le syst\u00e8me d\u00e9tecte automatiquement la taille de l'\u00e9cran et applique les styles appropri\u00e9s.<\/div><\/div><h6 data-rm-block-id=\"block-210\"><br \/>11 D\u00e9pannage<\/h6><strong>Les cat\u00e9gories n'apparaissent pas sur la page d'accueil<\/strong><ol><li data-rm-block-id=\"block-211\">V\u00e9rifier si le module est activ\u00e9 dans les param\u00e8tres g\u00e9n\u00e9raux<\/li><li data-rm-block-id=\"block-212\">S'assurer que la licence est active<\/li><li data-rm-block-id=\"block-213\">V\u00e9rifier que les cat\u00e9gories s\u00e9lectionn\u00e9es sont actives dans PrestaShop<\/li><li data-rm-block-id=\"block-214\">Effacer le cache de PrestaShop et du navigateur<\/li><li data-rm-block-id=\"block-215\">V\u00e9rifier que le crochet displayHome est pris en charge par le mod\u00e8le<\/li><\/ol><strong>Les styles CSS ne sont pas charg\u00e9s<\/strong><ol><li data-rm-block-id=\"block-216\">V\u00e9rifier que le fichier <span class=\"cc-highlight\">vues\/css\/front.css<\/span> il y a<\/li><li data-rm-block-id=\"block-217\">Assurez-vous d'\u00eatre sur la page d'accueil (contr\u00f4leur : IndexController)<\/li><li data-rm-block-id=\"block-218\">V\u00e9rifier s'il y a des conflits avec d'autres modules<\/li><li data-rm-block-id=\"block-219\">D\u00e9sactiver le cache CSS dans les param\u00e8tres de PrestaShop<\/li><li data-rm-block-id=\"block-220\">V\u00e9rifier les droits de lecture des fichiers du module<\/li><\/ol><strong>Le curseur ne fonctionne pas correctement<\/strong><ol><li data-rm-block-id=\"block-221\">V\u00e9rifier si la console du navigateur contient des erreurs JavaScript<\/li><li data-rm-block-id=\"block-222\">Assurez-vous que le fichier <span class=\"cc-highlight\">views\/js\/front.js<\/span> est charg\u00e9<\/li><li data-rm-block-id=\"block-223\">V\u00e9rifier les conflits avec jQuery<\/li><li data-rm-block-id=\"block-224\">D\u00e9sactiver les autres modules du curseur pour la dur\u00e9e des tests<\/li><li data-rm-block-id=\"block-225\">V\u00e9rifier que les \u00e9l\u00e9ments ont une structure HTML correcte<\/li><\/ol><strong>Les images ne sont pas affich\u00e9es<\/strong><ol><li data-rm-block-id=\"block-226\">V\u00e9rifier si des images ont \u00e9t\u00e9 attribu\u00e9es aux cat\u00e9gories<\/li><li data-rm-block-id=\"block-227\">S'assurer que le type d'image s\u00e9lectionn\u00e9 existe dans le syst\u00e8me<\/li><li data-rm-block-id=\"block-228\">V\u00e9rifier les droits d'acc\u00e8s aux r\u00e9pertoires <span class=\"cc-highlight\">img\/c\/<\/span><\/li><li data-rm-block-id=\"block-229\">V\u00e9rifier que le fichier <span class=\"cc-highlight\">no-image-category.jpg<\/span> il y a<\/li><li data-rm-block-id=\"block-230\">Effacer le cache de l'image<\/li><\/ol><strong>Erreurs de licence<\/strong><ol><li data-rm-block-id=\"block-231\">V\u00e9rifier que la cl\u00e9 de licence est correcte<\/li><li data-rm-block-id=\"block-232\">Veiller \u00e0 ce que le domaine soit conforme \u00e0 la licence<\/li><li data-rm-block-id=\"block-233\">V\u00e9rifier la connexion aux serveurs COCOS<\/li><li data-rm-block-id=\"block-234\">Effacer le cache du module<\/li><li data-rm-block-id=\"block-235\">Contacter l'assistance en cas de probl\u00e8mes d'activation<\/li><\/ol><div class=\"cc-alert cc-alert-error\"><div class=\"cc-alert-title\" data-rm-block-id=\"block-236\">Erreur<\/div><div class=\"cc-alert-content\" data-rm-block-id=\"block-237\">Si vous rencontrez des probl\u00e8mes insolubles, assurez-vous que vous utilisez la derni\u00e8re version du module et de PrestaShop. En cas de difficult\u00e9s persistantes, veuillez contacter le support COCOS via <a href=\"https:\/\/cocos.codes\/fr\/support\/\" title=\"Cocos.codes\/support\">cocos.codes\/support<\/a>.<\/div><\/div><h6 data-rm-block-id=\"block-238\"><br \/>12. LA FAQ<\/h6><strong>Puis-je utiliser plusieurs styles en m\u00eame temps ?<\/strong><br \/>Non, le module ne permet de s\u00e9lectionner qu'un seul style d'affichage \u00e0 la fois. Cependant, vous pouvez facilement changer de style dans les param\u00e8tres.<br \/><br \/><strong>Comment ajouter mon propre style d'affichage ?<\/strong><br \/>Les nouveaux styles n\u00e9cessitent une modification des fichiers CSS et PHP. Nous vous recommandons de copier le style existant et de l'adapter \u00e0 vos besoins.<br \/><br \/><strong>Puis-je afficher des sous-cat\u00e9gories ?<\/strong><br \/>Actuellement, le module ne prend en charge que les cat\u00e9gories principales. L'affichage des sous-cat\u00e9gories n\u00e9cessite une modification du code source.<br \/><br \/><strong>Comment modifier la position d'un module sur la page ?<\/strong><br \/>Le module est automatiquement plac\u00e9 en premi\u00e8re position dans le displayHome hookup. Vous pouvez modifier l'ordre dans le menu Position du panneau des modules.<br \/><br \/><strong>Le module fonctionne-t-il avec la mise en cache ?<\/strong><br \/>Oui, le module est compatible avec les syst\u00e8mes de cache de PrestaShop et ne n\u00e9cessite aucune configuration particuli\u00e8re.<br \/><br \/><strong>Comment traduire le titre de la section ?<\/strong><br \/>Le champ \"Titre de la section\" prend en charge toutes les langues actives dans la boutique. Changez de langue dans le panneau d'administration et saisissez la traduction.<br \/><br \/><strong>Puis-je masquer les descriptions de cat\u00e9gories pour certains styles ?<\/strong><br \/>L'option \"Afficher les descriptions des cat\u00e9gories\" fonctionne globalement pour tous les styles. Certains styles (comme grid_modern) affichent les descriptions dans la superposition.<br \/><br \/><strong>Pourquoi le curseur affiche-t-il des fl\u00e8ches de navigation alors qu'elles ne sont pas n\u00e9cessaires ?<\/strong><br \/>JavaScript masque automatiquement les fl\u00e8ches lorsque tous les \u00e9l\u00e9ments entrent dans la vue. V\u00e9rifiez que les \u00e9l\u00e9ments ont les bonnes dimensions.<br \/><br \/><strong>Comment fonctionne le chargement paresseux des images ?<\/strong><br \/>Les images sont charg\u00e9es automatiquement lorsqu'elles deviennent visibles dans la fen\u00eatre de visualisation. Cela permet d'\u00e9conomiser de la bande passante et d'acc\u00e9l\u00e9rer le chargement des pages.<br \/><br \/><strong>Puis-je modifier l'animation du survol ?<\/strong><br \/>Les animations sont d\u00e9finies dans le CSS de chaque style. Vous pouvez les modifier en \u00e9ditant le fichier <span class=\"cc-highlight\">front.css<\/span>.<br \/><br \/><strong>Pourquoi certaines cat\u00e9gories ne sont-elles pas affich\u00e9es ?<\/strong><br \/>Le syst\u00e8me ignore les cat\u00e9gories inactives, les cat\u00e9gories sans nom et les cat\u00e9gories pour lesquelles l'utilisateur n'a pas de droits.<br \/><br \/><strong>Comment modifier l'image de la cat\u00e9gorie par d\u00e9faut ?<\/strong><br \/>Remplacer le fichier <span class=\"cc-highlight\">views\/img\/no-image-category.jpg<\/span> sa propre image aux m\u00eames dimensions.<br \/><br \/><strong>Le module prend-il en charge le format RTL (de droite \u00e0 gauche) ?<\/strong><br \/>Le module utilise des classes Bootstrap standard qui supportent le RTL. Il se peut que vous deviez ajuster certains styles.<br \/><br \/><strong>Comment d\u00e9sactiver les animations ?<\/strong><br \/>Vous pouvez supprimer ou commenter les animations CSS dans le fichier <span class=\"cc-highlight\">front.css<\/span> ou ajouter <span class=\"cc-highlight\">animation : aucune ;<\/span> aux s\u00e9lecteurs concern\u00e9s.<br \/><br \/><strong>Puis-je modifier le nombre de descriptions de cat\u00e9gories ?<\/strong><br \/>Les descriptions sont automatiquement raccourcies \u00e0 80-120 caract\u00e8res en fonction du style. Vous pouvez modifier ce param\u00e8tre dans le fichier de mod\u00e8le <span class=\"cc-highlight\">home_categories.tpl<\/span>.<br \/><br \/><strong>Pourquoi le module ne fonctionne-t-il pas apr\u00e8s une mise \u00e0 jour de PrestaShop ?<\/strong><br \/>V\u00e9rifiez la compatibilit\u00e9 des versions dans le fichier du module. Il est possible que vous deviez mettre \u00e0 jour le module \u00e0 la derni\u00e8re version.<br \/><br \/><strong>Comment optimiser les performances pour un grand nombre de cat\u00e9gories ?<\/strong><br \/>Utilisez le mode de s\u00e9lection manuelle des cat\u00e9gories et limitez le nombre d'\u00e9l\u00e9ments \u00e0 un maximum de 12. Activer le chargement paresseux et la mise en cache des images.<br \/><br \/><strong>Puis-je utiliser le module sur des pages de cat\u00e9gories ?<\/strong><br \/>Le module est destin\u00e9 \u00e0 la page d'accueil. Le placement sur d'autres pages n\u00e9cessite la modification du hookew dans le code source.<br \/><br \/><strong>Comment puis-je v\u00e9rifier quels raccordements sont disponibles dans mon mod\u00e8le ?<\/strong><br \/>Utilisez le module \"Hook displayer\" ou v\u00e9rifiez les fichiers de mod\u00e8les dans le r\u00e9pertoire des mod\u00e8les. Tous les mod\u00e8les ne supportent pas tous les crochets.<br \/><br \/><strong>Pourquoi les styles en mode sombre ne s'affichent-ils pas correctement ?<\/strong><br \/>Les styles sombres n\u00e9cessitent une enveloppe sp\u00e9ciale. V\u00e9rifiez que le mod\u00e8le n'\u00e9crase pas les couleurs d'arri\u00e8re-plan et qu'il n'y a pas de conflit avec d'autres styles.<br \/><br \/><strong>Comment exporter la configuration du module ?<\/strong><br \/>La configuration est stock\u00e9e dans un tableau <span class=\"cc-highlight\">ps_configuration<\/span> avec un pr\u00e9fixe <span class=\"cc-highlight\">CC_PS_HC_<\/span>. Vous pouvez exporter ces enregistrements via phpMyAdmin.<br \/><br \/><div class=\"cc-alert cc-alert-success\"><div class=\"cc-alert-title\" data-rm-block-id=\"block-239\">Succ\u00e8s<\/div><div class=\"cc-alert-content\" data-rm-block-id=\"block-240\">Le module CC PrestaShop Categories est un outil professionnel pour pr\u00e9senter \u00e9l\u00e9gamment les cat\u00e9gories dans les boutiques en ligne. Gr\u00e2ce \u00e0 de nombreuses options de style et de configuration, il vous permet de cr\u00e9er une exp\u00e9rience unique pour vos clients et d'augmenter le taux de conversion de votre boutique.<\/div><\/div>Si vous g\u00e9rez une boutique sur PrestaShop et que vous souhaitez am\u00e9liorer la pr\u00e9sentation des cat\u00e9gories sur la page d'accueil, nous vous recommandons d'utiliser l'option <a href=\"https:\/\/cocos.codes\/fr\/product\/categories-sur-la-page-daccueil\/\" title=\"CC Cat\u00e9gories PrestaShop sur la page d&#039;accueil\">Module CC PrestaShop Cat\u00e9gories sur la page d'accueil<\/a>qui offre un aspect professionnel et un contr\u00f4le total sur la mani\u00e8re dont les cat\u00e9gories de produits sont affich\u00e9es.","protected":false},"excerpt":{"rendered":"Documentation Presta Shop Categories on Homepage Documentation compl\u00e8te pour le module d'affichage Presta Shop Categories on Homepage (cc_ps_home_categories) avec des options de style avanc\u00e9es, des modes d'affichage multiples et un contr\u00f4le total sur la page d'accueil.","protected":false},"author":1,"featured_media":5034,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"powered_cache_disable_cache":false,"powered_cache_disable_css_optimization":false,"powered_cache_disable_js_optimization":false,"footnotes":""},"categories":[236],"tags":[197,283,250,143],"class_list":["post-5030","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dokumentacje-prestashop","tag-dokumentacja","tag-kategorie-na-stronie-glownej","tag-modul","tag-prestashop"],"_links":{"self":[{"href":"https:\/\/cocos.codes\/fr\/wp-json\/wp\/v2\/posts\/5030","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cocos.codes\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cocos.codes\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cocos.codes\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cocos.codes\/fr\/wp-json\/wp\/v2\/comments?post=5030"}],"version-history":[{"count":0,"href":"https:\/\/cocos.codes\/fr\/wp-json\/wp\/v2\/posts\/5030\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cocos.codes\/fr\/wp-json\/wp\/v2\/media\/5034"}],"wp:attachment":[{"href":"https:\/\/cocos.codes\/fr\/wp-json\/wp\/v2\/media?parent=5030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cocos.codes\/fr\/wp-json\/wp\/v2\/categories?post=5030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cocos.codes\/fr\/wp-json\/wp\/v2\/tags?post=5030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}