Aller au contenu

Articles correspondants à ‘smarty’

24
Aug

Créer son propre thème prestashop

J’ai remarqué que beaucoup de personnes cherchent à créer leur propre thème pour leur boutique prestashop, plutôt bonne initiative,  car utiliser le thème par défaut est une très mauvaise idée et de plus anti-vente.

Avant de vous expliquer la marche à suivre, voici les pré-requis pour créer son propre thème:

  1. Connaître le language HTML
  2. Bien connaître le language CSS
  3. Avoir de bonnes notions en graphisme et notamment photoshop pour un design travaillé

Je vous déconseille d’essayer de créer un thème prestashop si vous ne possédez pas ces pré-requis, au risque de vous essouffler très vite. Vous pouvez toujours acheter un thème tout fait à votre image en cherchant un peu sur le net.

1 / Architecture d’un thème prestashop

Un thème prestashop est composé d’un dossier portant le nom de votre thème présent dans le dossier “themes” situé lui-même à la racine du site.

Voyant maintenant les composants de votre dossier thème.

dossier prestashop css
Contient tout les fichiers CSS
dossier prestashop img
Contient tout les images
- dossier prestashop js
Contient tout les fichiers javascript
- dossier prestashop lang
Contient toutes les traductions du texte présent dans les fichiers tpl
-Un paquet de fichier “tpl
Ces fichiers correspondent aux templates des pages de votre site, ils contiennent du code html et smarty. Si vous ne connaissez pas encore smarty, lisez d’abord cet article.

2 / Création du thème

Pour créer un thème, il est préférable de partir du thème par défaut que vous modifierez pour créer votre propre thème.

Pour cela, dupliquez le dossier thème “prestashop” et donnez lui un autre nom.

firebugJe vous conseille un outil très pratique et qui vous aidera lors de la création et de l’intégration : Firebug

Personnellement, je dessine dans un premier temps l’intégralité du site sous photoshop, il suffit ensuite d’intégrer le design dans le thème de prestashop.
Si vous n’avez pas prévu d’utiliser photoshop, vous ne ferez surement pas de grosses modifications graphiques (intégration d’images ect..).

Pour modifier le thème par défaut et ainsi créer votre propre thème, vous allez modifier principalement les fichiers :

/themes/montheme/css/global.css
/themes/montheme/xxx.tpl (tout les fichiers tpl)

Si votre design est basique, vous n’aurez peut-être même pas besoin de modifier les fichiers tpl.

notepadNotepad++ est un éditeur très simple et agréable, parfait pour éditer du CSS.

Placez toutes vos images dans le dossier “img”.
Placez toutes vos javascripts dans le dossier “js”.

C’est maintenant à vous de jouer et de plonger les mains dans le monde du CSS !

Vous pouvez également acheter un thème à des prix très attractifs ! Cela vous fera gagner beaucoup de temps.



23
Aug

Smarty et Prestashop, comment ça marche ?

Mais à quoi sert ce fameux smarty ?
Qu’est ce que ces fichiers avec l’extension “tpl” dans mon dossier thème ?
Et la syntaxe, elle est bizarre !

Cela peux faire peur au départ mais ne vous inquiétez pas, smarty c’est plutôt simple et bien pensé, je vais tâcher ici de vous expliquer ce façon simple à quoi sert smarty et comment le manipuler pour modifier l’apparence de votre boutique prestashop.

    1. Smarty, c’est quoi ?

“Smarty est un moteur de template pour le langage PHP. Il est rapide et permet la gestion des caches. Il facilite la séparation entre la logique applicative et la présentation.”  Wikipedia

En effet, smarty va nous permettre de gérer une partie du MVC, la vue. Grâce à lui nous allons pouvoir séparer le code php du code html. Et vous allez vite vous rendre compte que cela est vraiment très pratique d’un point de vue organisation et rapidité de développement.

Les fichiers ayant l’extension “.tpl” sont donc des fichiers templates qui ont pour unique objectif : mettre en forme votre site.

    1. Smarty, comment ca marche ?

L’installation est plutôt simple, et son utilisation aussi.

Il s’agit simplement d’inclure la classe Smarty, de l’instancier puis on va utiliser sur cette dernières les fonctions de smarty tel que “assign” ou “display”, ce sont ces fonctions dont vous vous servirez le plus,croyez moi !

Au sein de prestashop, smarty est utilisé via la variable “$smarty” et vous pouvez remarquer qu’on l’utilise dans la quasi-totalité des fichiers php présents à la racine de prestashop.

	$smarty->assign('errors', $errors);
        $smarty->display(_PS_THEME_DIR_.'index.tpl');

Chaque fichier .tpl est lié à au moins un fichier php et on remarquera que pour chaque fichier tpl situé dans votre dossier thème, il existe un fichier php situé dans le dossier racine portant le même nom.

La fonction assign();

Extrêmement utile, elle va vous permettre de passer des variable de votre fichier php vers votre fichier tpl où vous pourrez afficher les données.

Exemple, vous avez une variable $products contenant un tableau de produits, l’affichage de ces dernières doivent se faire dans un fichier tpl. Pour lui transmettre ce tableau, nous allons utiliser cette fonction:

	$smarty->assign('produits', $products);

Nous assignons ici à smarty la variable $products qui sera contenue dans la variable smarty ‘produits‘.
Nous verrons par la suite comment en afficher le contenu dans le tpl.

La fonction display();

Cette fonction va permettre d’afficher le contenu d’un tpl, elle prendra en paramètre le chemin vers le fichier tpl en question.

	$smarty->display(_PS_THEME_DIR_.'index.tpl');

Ici, nous affichons le contenu de index.tpl placé dans notre dossier thème. Cette ligne de code est utilisée dans le fichier index.php, logique non ?
A noter que les assignations doivent être faites impérativement avant l’affichage.

    1. Mais alors, comment j’affiche mes variables dans mon tpl ?

Dans le fichier template, vous allez pouvoir placer du code html, javascript, css et du code smarty.

A noter que pour les bonnes pratiques, il ne faudra pas y placer directement du css et javascript mais plutôt y inclure les fichiers.

Au cas vous souhaitez tout de même le faire, il vous faudra utiliser la balise smarty {literal} afin que le code css et/ou javascript ne soit pas interprété par smarty pour éviter les confusions.

{literal}<script type="text/javascript">// <![CDATA[
mce:0
// ]]></script>
	<!--  #monid { font-weight:bold; }  -->
{/literal}

Pour retrouver notre variable $products que nous avons assigné sous “produits” précédemment, nous allons utiliser la syntaxe suivante : {$produits}, et ce pour n’importe quelle variable assignée.

Voici un exemple pour le cas d’une variable contenant une simple valeur et une autre contenant un tableau de valeurs.

index.php

$smarty-&gt;assign('prenom', 'Jean');
$smarty-&gt;assign('produits', $products);
$smarty-&gt;display(_PS_THEME_DIR_.'index.tpl');

index.tpl

Bonjour {$prenom}
Liste de vos produits :
    {foreach from=$produits item=p}

  • {$p.name} – {$p.price}
  • {/foreach}

Je vous laisse admirer le syntaxe de la boucle foreach, que l’on pourrait comparer en php à :

echo '
    ‘; foreach ( $produits as $p ) echo ‘

  • ‘.$p['name'].’ – ‘.$p['price'].’
  • ‘; echo ‘

';

Normalement, si vous connaissez un minimum le php, vous devriez avoir compris.

Vous retrouverez chez smarty, tous les formats de condition dont vous aurez besoin tel que :

{if $prenom == 'Jean'}{else}{/if}
{if isset($prenom)}{else}{/if}

Vous avez maintenant de quoi vous amuser avec smarty, entrainez vous et découvrez toute sa puissance !

Voici quelques liens pour approfondir vos connaissances sur smarty :

Smarty

Initiation aux templates avec smarty

Les variables globales utiles

Les modifiers

18
Aug

Ajouter des fonctions personnalisées dans les classes de prestashop

Il peut être très pratique d’ajouter des fonctions dans les classes de prestashop dans le but d’effectuer des actions plus rapidement et de manière beaucoup plus clair et simple.
Je vais vous expliquer comment faire via un exemple simple.

Par exemple, si nous souhaitons rajouter une fonction dans la classe “Product“, il suffit de se rendre dans le dossier “classes” puis d’éditer le fichier Product.php

La classe comprend déjà beaucoup de fonctions que vous pouvez modifier mais je ne le vous conseille pas, en effet, il vaudra mieux en ajouter de nouvelles, vous comprendrez rapidement pourquoi lorsque vous effectuerez une mise à jour de prestashop :D

Ici, dans la classe “Product”, ajoutons cette fonction :

public function isInCategory($id_product , $id_cate){
$cates_p = Product::getIndexedCategories($id_product);
foreach($cates_p as $z)
foreach($z as $e)
$indexed_c[] = $e;
 
if(in_array($id_cate, $indexed_c))
return true;
else
return false;
}

Essayez de deviner ce que fait cette fonction ….

Alors ? plutôt facile non ?

La fonction “isInCategory” va simplement permettre de vérifier si un produit appartient à une catégorie, on passera en paramètre l’id du produit et l’id de la catégorie.

Remarque: on utilise au sein de cette fonction, une autre méthode de la classe.

La fonction pourra alors être appelée de n’importe où grâce au code suivant:

Product::isInCategory($id_produit, $id_category);

Le code retournera alors “true” ou “false” !