Aller au contenu

Articles correspondants à ‘astuces’

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

22
Aug

Prestashop: Le serveur de bases de données n’a pas été trouvé

J’ai constaté que beaucoup s’arrachent les cheveux lors de l’installation de prestashop lorsqu’ils tombent sur cette erreur : “le serveur de bases de données n’a pas été trouvé”. Voici un petit guide qui va surement vous permettre de résoudre ce problème.

1 / Vérifiez l’adresse du serveur SQL

Dans un premier temps, nous allons vérifier si l’adresse de votre serveur sql est la bonne.

Si vous faites une installation en local et que vous n’avez pas touché au fichier host de votre ordinateur, l’adresse du serveur sera “localhost“.

Si vous utilisez un serveur sql en ligne, votre hébergeur devrait vous avoir fournis l’adresse du serveur sql et vos identifiants. Il existe un moyen simple de vérifier l’adresse du serveur sql si vous avez un accès au phpMyAdmin. Après vous être connecté, vous verrez que l’adresse est indiquée en haut sur tout les pages.

2 / Vérifiez vos identifiants

Erreur classique, un mauvais identifiant ou mot de passe.

Si vous êtes sur une installation en local je pourrai peut-être vous éclairer.

Identifiant par défault sous WAMP :
Identifiant : root
Mot de passe : aucun

Identifiant par défault sous MAMP :
Identifiant : root
Mot de passe : root

Dans le cas de LAMP, vous devriez avoir renseigné ces informations lors de l’installation.

Si vous effectué une installation sur un serveur sql en ligne, je ne peux que vous conseiller de relire les mails reçus lors de la location de ce dernier et/ou contacter votre hébergeur.

3 / Vérifiez que vous avez bien créé la base de données.

Attention : La base de données de se créer pas automatiquement !

En effet, beaucoup d’utilisateurs ont cette erreur car ils ont simplement oublié de créer la base de données, pour cela il suffit de se connecter au phpMyAdmin de votre serveur sql (http://localhost/phpMyAdmin pour une installation en local), puis de créer la base de donnée.
Chez certains hébergeurs, l’ajout de base de données peux se faire uniquement via votre compte sur le site de ce dernier comme l’hébergement perso d’ovh par exemple.

4 / Vérifiez que vous possédez les privilèges nécessaires.

Votre compte sql doit être capable de créer des tables et de les modifier (CRU).
Vérifiez via phpMyAdmin que vous possédez les privilèges adéquates.

Si vous continuez à avoir des problèmes lors de l’installation, n’hésitez pas à (re)lire mon tutoriel : Leçon 1: Installation de prestashop en local