Aller au contenu

Articles correspondants à ‘e-commerce’

5
Sep

Google Panda et les sites e-commerce

Le 12 août dernier, c’est sous le nom de Panda que Google dévoile une mise à jour conséquente de son algorithme de référencement. On peu dire qu’avec Panda, Google jette un pavé dans la marre et laisse sur le carreau de nombreuses références du web. Mais que vont devenir nos e-boutiques ?

  • google panda e-commercePandi Panda, petit ourson rempli de légitimité

L’objectif premier de Google, est de pénaliser les sites pratiquant le SPAM SEO, dit Black Hat SEO et de favoriser les sites pertinents, ayant du contenu original et non des copier/coller d’autres sites. Les sites possédant un mauvais rapport publicité/contenu seront également mis sur la touche pour éviter l’excès de publicité sur des sites ayant pour unique objectif : la monétisation.

On remarque alors une nette régression au niveau des comparateurs de prix, on fait tout de suite la liaison avec la pénalisation de la copie de contenu alors que d’autres on vu leur trafic subir une belle progression.
Voici les premiers chiffres de Google Panda.

  • Quand est-il des sites e-commerce ?

google pandaDe manière générale, les boutiques en ligne profitent de Google Panda et si vous suivez jusqu’à présent les bonnes directives pour le SEO de votre boutique, ne changez rien et continuez dans cette direction, vous en serez récompensé.

En effet, les contenus originaux sont favorisés, attachez donc beaucoup d’importance aux descriptions, caractéristiques et légendes de vos produits mais aussi de vos catégories.

Si vous êtes présent sur les comparateurs de prix, je conseillerai d’utiliser des descriptions différentes de celles sur votre site afin d’éviter la duplication de contenu et de vous pénaliser.

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