Toutes les clefs pour réussir dans le e-commerce

Mes modules Prestashop

Nouvelle librairie pour simplifier la création de module Prestashop

@scritik vient de mettre en ligne une nouvelle librairie javascript qui va simplifier la vie des développeurs Prestashop.

En effet cette librairie permet de simplifier grandement la compatibilité entre prestashop 1.5 et 1.6 en ce qui concerne l’affichage dans le backoffice.

Voici comment l’utiliser.

1. Intégrer la librairie “riotJs”

La première étape consiste à appeler la librairie “riojs” dans votre controller comme ceci:


$this->context->controller->addJS('https://cdn.jsdelivr.net/g/riot@2.0(riot.min.js+compiler.min.js)');

Vous pouvez également récupérer l’intégralité de la libraire et l’inclure dans votre module si vous ne voulez pas être dépendant du cdn jsdelivr.net

2. Inclure la librairie prestui

Rendez vous sur Github pour télécharger la librairie en question, de-zippez la et copiez les fichiers obtenus dans “monmodule/views/templates/admin/prestui”

Ensuite dans votre controller, là où vous désirez afficher votre template, rajoutez à la suite un appel vers “ps-tags.tpl” et indiquez à smarty la version de prestashop utilisée.
Comme ceci par exemple:


$this->smarty->assign('ps_version', Tools::substr(_PS_VERSION_, 0, 3));
$output = $this->context->smarty->fetch($this->local_path . 'views/templates/admin/montemplate.tpl');
$output .= $this->display(__FILE__, 'views/templates/admin/prestui/ps-tags.tpl');
return $output;

3. Créer le template

Maintenant vous n’avez plus qu’à utiliser les tags de “prestui” pour générer votre template qui sera compatible 1.5 et 1.6
Pour cela je vous redirige à nouveau vers Github et la documentation de @scritik

Mais voici tout de même quelques exemples de ce que ça peut donner.

Pour un switch voici le code avant:


<div class="col-lg-9">
            <span class="switch prestashop-switch fixed-width-lg">
                <input type="radio" name="osp_turn_on_automatically" id="osp_turn_on_automatically_on" value="1" {if $osp->turn_on_automatically}checked="checked" {/if} />
                <label for="osp_turn_on_automatically_on" class="radioCheck">
                    {l s='Yes' mod='opartscheduleproduct'}
                </label>
                <input type="radio" name="osp_turn_on_automatically" id="osp_turn_on_automatically_off" value="0" {if !$osp->turn_on_automatically}checked="checked"{/if} />
                <label for="osp_turn_on_automatically_off" class="radioCheck">
                    {l s='No' mod='opartscheduleproduct'}
                </label>
                <a class="slide-button btn"></a>
            </span>                        
        </div>
 

et le code après


<ps-switch label="{l s='Turn on automatically' mod='opartscheduleproduct'}" name="osp_turn_on_automatically" yes="yes" no="no" active="{if $osp->turn_on_automatically}true{else}false{/if}"></ps-switch>      

Pour un input texte, avant:


<div class="form-group">
        <label class="control-label col-lg-3" for="osp_start_date">
            {include file="controllers/products/multishop/checkbox.tpl" field="osp_start_date" type="default"}
            {l s='Start selling date:' mod='opartscheduleproduct'}
        </label>
        <div class="col-lg-9">
            <div class="input-group fixed-width-md">
                <input id="osp_start_date" name="osp_start_date" value="{if isset($osp->start_date)}{$osp->start_date|date_format:'%Y-%m-%d %H:%M:%S'}{/if}" class="datepicker" type="text" style="width:200px" />
                <div class="input-group-addon">
                    <i class="icon-calendar-empty"></i>
                </div>
            </div>
            <p class="help-block">{l s='Enter the date when the product will avaible to be sold.' mod='opartscheduleproduct'}</p>
        </div>
    </div>

et après:


<ps-form-group name="osp_start_date" label="{l s='Start selling date:' mod='opartscheduleproduct'}" help="{l s='Enter the date when the product will avaible to be sold.' mod='opartscheduleproduct'}">
        <input id="osp_start_date" name="osp_start_date" value="{if isset($osp->start_date)}{$osp->start_date|date_format:'%Y-%m-%d %H:%M:%S'}{/if}" class="datepicker" type="text" style="width:200px" />           
    </ps-form-group>

Quel intérêt ?

Les deux principaux intérêts sont:
1. le gain de temps: Un code unique signifie évidemment un gain de temps non négligeable en terme de développement, ainsi qu’une limitation du nombre d’erreurs possibles.
2. moins de code: les deux exemples que j’ai donnés sont assez flagrants. Pour ma part sur le premier template que j’ai converti avec cette librairie, j’ai divisé le nombre de lignes par 3. Si comme moi vous revenez souvent sur votre code vous saurez appréciez ce gain de lisibilité.

Quelques améliorations !

La librairie est toute jeune encore et il reste quelques petites choses à améliorer.
Pour ma part je ne l’ai testée que sur un seul module, mais je devrais à terme l’utiliser sur tous mes modules. Je serai donc à même de faire remonter les erreurs et bugs rencontrés afin d’aider @scritik à améliorer cette librairie.

Voici ce que j’ai déjà relevé:
– Le “ps-panel-footer” n’a pas de correspondance en 1.5. Il devrait donc être soit automatiquement masqué soit avoir un style associé. Actuellement en 1.5 les boutons ne sont pas correctement positionnés et sont “bruts”.

– En 1.6 les boutons du panel footer n’ont aucune marge ce qui pose problème lorsqu’on place deux boutons à droite par exemple.

– Impossible d’inclure du html (ou du moins juste un saut de ligne) dans les “help”.

– Une option “show_if_15” serait pratique pour permettre d’afficher des boutons uniquement en 1.6. (Notamment en 1.5 pour le panel footer ou les boutons sauvegarder sont inutiles car présent dans le header).

Poster un Commentaire

10 Commentaires sur "Nouvelle librairie pour simplifier la création de module Prestashop"

Recevoir un email pour
avatar
Trier par:   plus récent | plus vieux | Plus de vote
Webbax
Invité

Hello,

A l’époque j’avais développé un système du genre avec un “noyau central commun”, quand c’était Prestashop 1.3, finalement ça s’est révélé encore plus dur à maintenir et à faire évoluer.

Ce type d’outil devrait être proposé directement par Prestashop, sinon il est difficile de tenir dans la durée… mais sinon je partage tout à fait la manière de procéder.

A bientôt !

Scritik
Invité
Scritik

La 1.4 et la 1.5 sont très proches d’un point de vue code, c’est vraiment la 1.6 qui a changé beaucoup de choses :) Donc non, cela ne va pas alourdir et globalement, le code est bien segmenté entre les versions, enfin, je fais de mon mieux :)

Concernant la durée, oui je fais partie de la team PS mais cela reste un projet perso pour le moment :) On verra un jour si il vient à être officialisé mais pour le moment, il reste pas mal de boulot. Je compte bien le faire évoluer un max car je m’en sers moi même. Et puis pas de risque, il suffit d’un clic pour faire un fork :)

N’hésitez pas à faire des tickets si vous rencontrez des bugs, ou mieux, des PR ;)

Scritik
Invité
Scritik

La 1.4 est certe en déclin mais quand le module est simple, c’est dommage de pas la supporter car cela reste du business :) Si tu es le seul module compatible 1.4 et qu’il y a 100 boutiques qui ont besoin de ton module, c’est jusqu’à 100 ventes :)

Mais oui, si le module demande pas mal d’adaptations alors il faut voir si cela vaut le coup ;)

Scritik
Invité
Scritik

Oui je comprends bien, je parle vraiment de modules simpliste qui utilise que des hooks par exemple. Si tu fais un module de tracking Google ou je ne sais quoi, le temps de dev supp est minime ;)

Webbax
Invité

@Scritik Hahaha j’ai adoré la remarque “Si tu es le seul module compatible 1.4 et qu’il y a 100 boutiques qui ont besoin de ton module” c’est tellement vrai, il y a un marché pour cela.

Scritik
Invité
Scritik

Le retro c’est a la mode, il faut refaire des sites sous PS 1.2 ! :)

wpDiscuz