lindev.fr

Aller au contenu | Aller au menu | Aller à la recherche

Mot-clé - templates

Fil des billets - Fil des commentaires

27 juin 2015

Prestashop - Surcharger le code d'un module

Prestashop permet dans sa version actuelle (1.6) de surcharger à peu prés .. tout !
Ce qui est vraiment pratique pour modeler votre site e-commerce comme vous l'entendez sans toucher au cœur du code. Ce qui vous permettra ( dans une certaine mesure ) de pouvoir mettre à jour prestashop sans devoir réécrire vos fonctionnalités spécifiques ou votre thème.

Mais il y a les modules

Une autre des force de cet outil e-commerce, ce son ses modules, très nombreux qui permettent d'ajouter des fonctionnalités de façon .. "plug and play", activer désactiver etc .. super !!

Seulement dans la documentation, impossible de trouver le moyen de surcharger un module existant.( je parle de la surcharge de la fonctionnalité apportée par ce module, les templates associés sont surchargeable de façon classique )
jusqu'à maintenant, si vous souhaitiez changer le fonctionnement d'un module, vous aviez le choix entre :

  1. Toucher directement au code du module ( prochaine mise à jour .. et hop ... vous devez recommencer )
  2. Copier le module pour le dupliquer à votre sauce ( Assez lourd )

La signature à utiliser

Et bien figurez vous que c'est possible .. si si ..

Note : uniquement à partir de la v1.6.0.11 ( merci à ChDUP pour cette précision )
Pour surcharger une classe, vous utilisez l'écriture suivante :

class [className sans Core] extends [className]Core

dans le répertoire override/ ou modules/monModule/override/

Et bien pour surcharger le code d'un module, il vous faut utiliser l'écriture suivante

class [classNameModule]Override extends ClassNameModule

Il suffit donc d'utiliser la chaine "Override" dans le nom de votre classe qui va surcharger le module souhaité .
Par contre, il faut placer votre code dans le répertoire

override/modules/moduleName/

L'exemple qui va bien

Prenons le cas du module BlockPaymentLogo disponible par défaut, qui permet d'afficher les logis de paiement sur une colonne de votre home.
Moi je souhaite les afficher .. dans le pied de page "Footer", ce module n'a pas prévu ce cas, est n'est donc pas enregistré au bon Hook ( displayFooter ) . Bref impossible de le faire en natif .

Surchargeons

Nous allons commencer par créer le répertoire du même nom que celui d'origine

override/modules/blockpaymentlogo/

Puis créer le code de surcharge que voici.

if (!defined('_PS_VERSION_'))
    exit;

class BlockPaymentLogoOverride extends BlockPaymentLogo
{


    public function install(){

        if( parent::install() ){
            return $this->registerHook('displayFooter');
        }else{
            return false;
        }

    }

    public function hookDisplayFooter($params)
    {
        return $this->hookLeftColumn($params);
    }

}

Petites explications,

  • on commence par déclarer notre classe comme il se doit ( en ajoutant Override, et en héritant de la classe du module d'origine )
  • Puis j'ajoute dans le constructeur l'association du module dans le hook displayFooter
  • Et enfin, je définis le code spécifique à ce hook ( ici le code sera le même que sur le hook leftcolumn, donc je ne réécris pas le code j'appelle celui du hook leftcolumn )

Ne reste plus qu'à réinitialiser le module .. et voilà les logos qui apparaissent dans mon footer .

Restez informé

inscrivez vous à la newsletter pour recevoir les nouveaux billets par mail. ( formulaire en haut à droite )

02 oct. 2013

Mezzanine épisode 2

mezzanine.png Nous avons vu dans un précédent billet, comment installer le CMS mezzanine et créer un nouveau projet.
Après s'être familiarisé avec son utilisation, voyons comment customiser notre projet.

Organisation des Thèmes

Un thème mezzanine = une app ( app: répertoire avec un fichier nommé init.py dedans )

Créons notre thème montheme

mkdir montheme && touch montheme/__init__.py

Puis nous allons le déclarer dans le fichier settings.py , au début de le liste INSTALLED_APPS

INSTALLED_APPS = (
    "montheme", # thème à utiliser
    "django.contrib.admin",
    ...

Bien, maintenant nous allons créer la structure de notre thème, à savoir, créer les répertoires de fichiers qtatiques ("static/") et celui des templates ("templates/")

mkdir -p montheme/static/css && mkdir montheme/static/img && mkdir montheme/static/js
mkdir -p montheme/templates/pages/menus && mkdir montheme/templates/includes

Nous voilà avec un superbe template ...... qui ne fait rien !

Il ne nous reste donc plus qu'à créer nos feuilles de styles et fichiers Html pour surcharger le thème par défaut .

Récupérer le thème par défaut

Pour avoir une base fonctionnel, nous allons récupérer les templates et fichiers statiques du thème mezzanine par défaut.

Toujours à la racine de notre projet,

python manage.py collectstatic
python manage.py collecttemplates

Vous vous retrouvez avec deux nouveaux répertoires templates et static qui contiennent donc respectivement les templates et fichiers statiques nécessaires au fonctionnement de base de Mezzanine.

/!\ Attention : si vous laissez tel quel les répertoires, votre template ne sera jamais pris en compte car les répertoires templates et static à la racine du projet sont prioritaires . ( Scannés en premier par Django )
Renommons donc ces répertoires afin de les rendre inactifs

mv templates templates_orig
mv static static_orig

Création de notre thème

Avant d'entrer dans le vif du sujet, il faut bien comprendre comment Mezzanine cherche ses templates.

Par défaut, Mezzanine cherche le template, qui a le même nom que la page demandée. Par exemple, dans l'interface admin, je crée une page dont le titre est "Authors" et le "slug" ( non .. pas la limace, mais une url propre ) : "About/authors", mezzanine va chercher une des correspondances suivantes :

  1. pages/about/authors.html
  2. pages/about/authors/about.html
  3. pages/about/about.html
  4. pages/about.html
  5. pages/page.html


page.html étant la page générique qui sera appelée en dernier recours, c'est cette page qui est disponible "entres-autres" dans les templates du thème par défaut.
Voilà notre point de départ, nous allons donc commencer par copier cette page dans notre thème, qui sera aussi notre page par défaut.

cp templates_orig/pages/page.html montheme/templates/pages/

Si on édite le fichier page.html, nous pouvons voir qu'il s'agit juste d'une structure d'affichage qui s’intègre dans le template base.html .
Copions le également.

cp templates/base.html montheme/templates/

Feuilles de style et javascript

Afin de ne pas perdre les styles et fonctions javascript de base, nous allons créer les nôtres ( au besoin évidemment )

touch montheme/static/css/montheme.css
touch montheme/static/js/montheme.js

Puis modifiez les blocs suivants pour ajouter montheme.css et montheme.js

block compress css
<link rel="stylesheet" href="{% static "css/montheme.css" %}">
block compress js
<script src="{% static "js/montheme.js" %}"></script>

Conclusion

Nous voilà avec un thème qui pour le moment ne fait que reprendre celui par défaut, mais il est en place ! Il ne reste plus qu'à personnaliser les fichiers page.html et base.html dans un premier temps à votre gout .
Si vous souhaitez allez plus loin sur l'intégration des différents éléments dans votre thème, il suffit de suivre le même principe .

  1. Copier les pages concernées du thème original dans votre thème
  2. Les adapter à votre gout ! c'est tout .

Par exemple, si je souhaite modifier le menu en entête, je vais chercher le fichier dropdown.html qui se trouve dans le répertoire templates/pages/menus/ , je le copie dans mon thème montheme/templates/pages/menus/ et je peux travailler dessus en toute liberté .

N'hésitez pas à activer django_debug_toolbar ( dans votre fichier settings.py ) pour vous aider.

Ch.