introduction à opencart

F. Abouzaid

Solutions en CE

Sommaire

Sommaire Solutions en CE ................................................................................................................................ 1

Sommaire ........................................................................................................................................ 1

Architecture de OpenCart ............................................................................................................... 4

1. La structure de fichiers ........................................................................................................ 4

2. Le routage dans Opencart. .................................................................................................. 5

3. Les bibliothèques ................................................................................................................. 6

4. Les Langues .......................................................................................................................... 6

Pratique: ...................................................................................................................................... 7

Ajouter une langue dans OpenCart ......................................................................................... 7

5. MVC ..................................................................................................................................... 8

1. Contrôleurs .......................................................................................................................... 8

2. Modèles ............................................................................................................................... 8

3. Vues ..................................................................................................................................... 8

6. Le modèle MVC dans OpenCart .......................................................................................... 9

1. Les contrôleurs ................................................................................................................ 9

2. Les Vues ......................................................................................................................... 10

Les modules: développement ....................................................................................................... 12

1. Le Contrôleur .................................................................................................................. 12

2. La Vue ................................................................................................................................ 13

3. Modèle .............................................................................................................................. 13

4. Exemple pratique: ............................................................................................................. 14

5. Fonctions de la Base de données: ..................................................................................... 15

6. Variables réservées ........................................................................................................... 16

Créer une nouvelle page dans OpenCart ...................................................................................... 17

1. Exemple 1: Simple sans modèle ........................................................................................ 17

2. Exemple 2: Avec modèle et accès à la BD ......................................................................... 18

F. Abouzaid

vQmod ........................................................................................................................................... 24

1. Comment créer des Scripts vQmod ................................................................................... 24

2. Installer vQmod ................................................................................................................. 27

1. Exemple d'utilisation ..................................................................................................... 27

3. Installer une extension existante ...................................................................................... 29

4. Exercices d'utilisation de VQmod ...................................................................................... 30

Ajouter une langue dans OpenCart ............................................................................................... 33

Activer les URLs SEO dans OpenCart ............................................................................................. 35

Gérer les thèmes: .......................................................................................................................... 37

1. Changer de thème ................................................................................................................. 37

2. Structure du répertoire des thèmes ...................................................................................... 37

Contenu du répertoire Template .......................................................................................... 37

3. Créer un Thème personnalisé ............................................................................................... 38

Développer le nouveau thème .................................................................................................. 38

4. Comprendre les "Layout Templates" .................................................................................... 40

Templates de module ............................................................................................................ 40

Composant communs du Layout Template........................................................................... 41

Assigner un module à partir du Back-End ............................................................................. 42

Changer le Layout de la page d'accueil ................................................................................. 42

Changement dans le fichier Layout ....................................................................................... 43

Les layouts dans Opencart ............................................................................................................ 44

Dispositions ............................................................................................................................... 44

Dispositions par défaut ............................................................................................................. 44

Créer un nouveau Layout .......................................................................................................... 45

Cas pratique : ......................................................................................................................... 45

Ajouter de nouvelles Positions de Modules .................................................................................. 47

1. Créer une nouvelle Position (fichier Controller) ............................................................... 47

1. Créer une nouvelle Position (fichier Template) ............................................................ 49

2. Lier le module à l'application ........................................................................................ 49

Améliorer la sécurité de OpenCart ................................................................................................ 51

1. Supprimer le répertoire d’installation ............................................................................... 51

2. Protéger les fichiers de configuration ............................................................................... 51

F. Abouzaid

3. Changer le repertoire admin ............................................................................................. 51

4. Protéger le répertoire admin avec un mot de passe ......................................................... 52

5. Enlever l’indication “powered by OpenCart” .................................................................... 53

6. Cacher les erreurs OpenCart ............................................................................................ 53

7. Choisissez le bon hébergeur .............................................................................................. 53

8. D'autres astuces: ............................................................................................................... 53

Paiements ...................................................................................................................................... 54

Liens ............................................................................................................................................... 55

F. Abouzaid

Architecture de OpenCart

1. La structure de fichiers

La structure de fichiers de OpenCart est simple.

Admin: contient les contrôleurs, modèles, vues et fichier langages pour l‘administration;

Catalog : contient les mêmes fichiers mais pour le frontend (côté client);

Images : contient les images du site;

System : contient le noyau de OpenCart. On ne touchera jamais aux fichiers de ce répertoire.

F. Abouzaid

2. Le routage dans Opencart.

Le système de routage est assez simple: les routes d'URL ressemblent à ceci: route=aa/bb .

La chaîne de connexion (query string) est constituée d’au moins 2 parties qui indiquent au framework ce qu’il doit charger.

Dans une architecture MVC, cela fonctionne comme ceci:

D’abord le contrôleur est chargé en mémoire; dans notre cas, il est identifié par les 2 premiers paramètres de la chaîne de connexion. La première partie identifie le répertoire et la seconde le nom du fichier contrôleur (sans son extension).

La route donnée en exemple correspond donc au fichier:

(STORE ROOT DIRECTORY)/catalog/controller/aa/bb.php

Si vous jetez un coup d'œil à la fin de index.php à la racine du site vous y trouverez le code

suivant:

// Router

if (isset($request->get['route'])) {

$action = new Action($request->get['route']);

} else {

$action = new Action('common/home');

}

Ici, $request est un objet de la classe Request définie dans

"system/library/request.php" qui est une bibliothèque de classes pour la gestion des

requêtes.

On commence par tester si le paramètre 'route' de la 'query string' contient une

valeur, sinon on renvoie vers "common/home "; "common" est bien entendu le répertoire

du contrôleur et "home" est le fichier du contrôleur actuel qui gère la requête. Cela réfère

donc au chemin physique sur le serveur: catalog/controller/common/home.php

On a donc localisé un Contrôleur nommé CommonHomeController dans lequel nous allons

exécuter la fonction index() par défaut.

F. Abouzaid

3. Les bibliothèques

Ce sont des bibliothèques prédéfinies qui sont essentielles pour aider au développement d’extensions pour Opencart. La syntaxe générale pour charger en mémoire une bibliothèque est

la suivante: $this->library_name . Elles se trouvent dans le répertoire :

system/library .

Exemple, pour connecter par programme un utilisateur, on écrira:

$this->user->login($username,$password);

la déconnexion se faisant par $this->user->logout(); .

Des exemples de bibliothèques souvent utilisées:

• cart.php pour gérer le panier;

• image.php fonctions relatives aux images telles que la retouche ou la mise en

cache;

• customer.php fonctions relatives aux clients;

• config.php est responsable du chargement de tous les paramètres d’OpenCart;

• user.php fonctions pour la gestion de l’administrateur et des utilisateurs.

Nous reviendrons sur l'utilisation de ces bibliothèques.

4. Les Langues

Les fichiers de langues sont dans catalog/language . Ce répertoire contient autant de

sous-répertoires qu’il y a de langues pour votre site.

Soit par exemple le répertoire english pour l’anglais. Les valeurs utilisées dans toutes les

pages du site sont dans le fichier english.php . Pour ajouter une nouvelle valeur on utilise la

syntaxe :

$_['language_key']='This is test'; .

Pour certaines pages spéciales, les fichiers de langues sont dans des répertoires particuliers. Par exemple pour la page d’erreurs :

catalog/language/english/error/not_found.php .

Un fichier de langue est chargé dans le contrôleur de la manière suivante :

$this->language->load('error/not_found');

On utilise alors la fonction "get" pour récupérer une valeur dans le langage choisi:

$this->language->get('language_key');

Note: Les valeurs dans le fichier langage global english/english.php sont automatiquement

chargées et disponibles sans faire $this->language->load .

F. Abouzaid

Pratique:

Ajouter une langue dans OpenCart

1. Téléchargez une extension pour la langue souhaitée. 2. Dézippez le fichier téléchargé dans le répertoire principal de votre boutique.

Vérifiez s'il y a un répertoire upload dans l'archive; si c'est le cas, copiez le contenu de ce répertoire. Sinon, recopiez le répertoire de langue dans upload/catalog/language.

3. Allez à Système>Localisation>Langues , puis cliquez sur Ajouter 4. Remplissez le formulaire comme suit (pour le français) :

Vous devriez voir apparaître sur votre site une liste déroulante proposant les 2 langues.

Vous devez bien entendu fournir toutes les informations sur vos produits et vos catégories dans les 2 langues.

F. Abouzaid

5. MVC

C’est un patron d’architecture très utilisé dans les applications modernes et la plupart des CMS.

C’est un modèle à 3 couches: contrôleur, modèle et vues qui sont reliées entre elles de la

manière suivante :

1. Contrôleurs

Un contrôleur gère le flot d’exécution de l’application. C’est la porte d’entrée et toute requête

de l’utilisateur passe par un contrôleur. Le contrôleur choisit le modèle à invoquer pour

exécuter la requête. A la réception des données, il choisit ensuite la vue qui affichera ces

données pour l’utilisateur.

2. Modèles

Ils gèrent la logique métier de l’application et fournissent les données récupérées par des

requêtes SQL par exemple. Le modèle ne peut pas être directement invoqué. Il faut passer par

un contrôleur qui transmet la requête de l’utilisateur au modèle approprié, qui lui retransmet

les données en retour.

3. Vues

Les vues constituent l’interface utilisateur de l’application. Dans une application web, elles

contiennent du HTML, du CSS, du JavaScript, du XML ou du JSON, etc. Les vues sont visibles à

l’utilisateur contrairement aux modèles et aux contrôleurs.

F. Abouzaid

6. Le modèle MVC dans OpenCart

1. Les contrôleurs

Pour comprendre le fonctionnement du contrôleur, nous allons faire quelques manipulations:

1. Créez un répertoire vide appelé test dans le répertoire des contrôleurs:

catalog/controller/test .

2. Créez un fichier PHP abc.php dans le répertoire test :

i.e., catalog/controller/test/abc.php .

Écrivez le code suivant dans abc.php :

<?php class ControllerTestAbc extends Controller{ public function index() { echo 'Bonjour le monde!'; exit; } } ?>

Dans cet exemple, il y a un certain nombre de contraintes imposées par le Framework OpenCart

que le développeur doit obligatoirement respecter:

• Le nom de la classe contrôleur doit suivre le format suivant:

Controller(NomRépertoire)(NomFichier) . Ces noms doivent obligatoirement

commencer par une majuscule et ne pas contenir d’extension.

Exemple : class ControllerProductProduct extends Controller

• La méthode index() est la fonction principale du contrôleur et sera exécutée

automatiquement quand celui-ci sera appelé.

• index() doit être publique.

• Pas de HTML, JavaScript, ou CSS dans le contrôleur.

Dans le navigateur tapez l’URL:

http://localhost/Opencart/index.php?route=test/abc

Quel est le résultat?

F. Abouzaid

2. Les Vues

En suivant l'adresse:

http://localhost/opencart/index.php?route=common/home

on aboutit au code du contrôleur CommonHomeController situé dans

catalog/controller/common/home.php .

Les objets membres du contrôleur document et config sont initialisés dans

index.php.

Le titre est initialisé à "config_title" dont la valeur vient du fichier index.php qui a fait un

appel à la fonction $config->set() qui les charge à partir de la BD (table setting).

Un fois les propriétés du document initialisées, le template est chargé grâce aux lignes

suivantes:

La valeur par défaut de config_template est default et pour DIR_TEMPLATE c'est

catalog/view/theme/ . Ainsi, le chemin vers la vue est donc

F. Abouzaid

catalog/view/theme/template/common/home.tpl

Ensuite s'iI existe des vues enfant de cette vue principale, elles sont à leur tour chargées en

utilisant le code suivant:

Finalement, la vue est rendue grâce à l'instruction:

this->response->SetOutput(View)

qui affiche la page d'accueil du site.

F. Abouzaid

Les modules: developpement

Hiérarchie des fichiers et répertoires des modules Opencart:

Tous les modules nécessitent au moins un fichier dans les 2 répertoires view et controller.

La plupart vont nécessiter un fichier dans les répertoires model et language. Tous ces

fichiers ont le même nom sauf la vue qui a un suffixe différent (.tpl).

1. Le Contrôleur

Le premier fichier à écrire est le contrôleur pour la page d'interface d'administrateur du

module. OpenCart identifie automatiquement les modules existants, simplement en lisant le

répertoire admin/controller/module du site. Les modules existants dans ce dossier seront

automatiquement affichés sur la page Modules.

Le contrôleur est l'endroit où sont chargés les fichiers de langue qui permettent de convertir du

texte en variables qui seront utilisées dans le modèle.

Une variable $_['text'] est récupérée par le contrôleur, puis envoyée en tant que

$text à la vue.

On peut également utiliser des fichiers de modèles et leurs multiples fonctions ici, y compris le

fichier de modèle du module s'il y en a un.

F. Abouzaid

On définit généralement une fonction publique install() qui sera déclenchée lors de

l'installation du module (page Extensions> Modules). De même, on définira une fonction

publique de désinstallation ( uninstall() ). Ces fonctions seront utilisées pour créer et

supprimer des structures (comme les tables de base de données ou des paramètres de

configuration) requis par le module. C'est une bonne pratique de créer une fonction de

désinstallation qui nettoiera tous les changements que le module a fait.

URL

Le contrôleur est le seul fichier en MVC-L à être accédé par URL. Pour l'administration, l'URL sera

/admin/index.php?route=module/mon_module&token . Un lien vers l'administration

aura un jeton (token) ajouté à l'URL, alors que le lien vers le catalogue n'en aura pas. Le

contrôleur possède une fonction publique index() qui est appelée automatiquement. C'est une

«page» accessible au public qui est chargée par l'URL, qui sera affichée lorsque le bouton

Modifier est cliqué, et où sera le formulaire qui sera soumis. Les données soumises seront

traitées dans cette fonction et enregistrées dans la table Settings de la BD à travers l'objet de

configuration du contrôleur.

2. La Vue

Le deuxième fichier requis pour l'interface d'administration du module est le fichier de vue. Ce

fichier est créé dans le répertoire admin/view/template/module , et aura le suffixe

.tpl . Dans ce fichier, on peut créer un formulaire qui sera soumis à la fonction index() du

contrôleur du module. La meilleure façon de créer un fichier de vue est de copier et coller, un

fichier de vue similaire existant et d'en modifier la forme pour l'adapter au module en

développement. Dans la vue, on peut accéder aux différents libellés des champs que le

contrôleur a stocké comme une variable PHP.

3. Modèle

Il est rare que les modules nécessitent un fichier de modèle du côté admin. Toutefois, si votre

module nécessite sa propre table de base de données ou une requête personnalisée pour créer

des données d'un format particulier, alors vous devrez écriture un fichier de modèle pour

l'administration du module. Le fichier modèle sera créé dans admin/model/module .

Fonctionnalité côté client du module

L'interface du module suit le même schéma que l'interface d'administration qui vient d'être

décrite. Comme un module peut accéder à tous les fichiers de modèles qui existent déjà dans

OpenCart, il n'est pas nécessaire d'écrire vos propres requêtes de base de données si la même

requête existe déjà. Par exemple, le fichier catalog/product contient de nombreuses

requêtes utiles pour aller chercher les produits. L'utilisation de ces fonctions de modèle doit être

préférée à ses propres fonctions.

Le fichier de vue sera dans le répertoire

F. Abouzaid

catalog/view/theme/<nomtheme>/template/module . Une boutique OpenCart peut

avoir plusieurs thèmes différents côté client, mais un seul modèle d'administration.

4. Exemple pratique:

Créer un module "Hello world". On utilisera une copie du module 'Information'

1. Modifier la partie admin

• Copiez le fichier admin/controller/module/information.php dans un fichier

salut.php.

• Renommez le contrôleur comme suit: class ControllerModuleSalut extends Controller

• Remplacez 'information' par 'salut' dans le fichier.

• Allez à admin/language/english/module/ et copier le fichier

information.php dans salut.php.


• Faites la même chose avec le fichier

admin/view/template/module/information.tpl

2. Modifier la partie client

• Copiez le fichier catalog/controller/module/information.php dans

salut.php. Enlevez les références au modèle (lignes 11 et 15-20)

• Changez le nom de la classe en ControllerModuleInformation


• Copiez le fichier catalog/language/english/module/information.php

dans salut.php et remplacez 'information' par 'salut'

• Copiez le fichier

catalog/view/theme/default/template/module/information.tpl dans

salut.tpl. Remplacez le code qui s'y trouve par les lignes: <div class="panel panel-default">

<div class="panel-heading"><?php echo $heading_title; ?></div>

3. Installez le module ( Extensions�Modules) et activez-le. Associez le module à un layout (

System �Design �Home). Vous pouvez voir le résultat dans la page d'accueil du site.

F. Abouzaid

5. Fonctions de la Base de données:

La classe db aide à interroger la BD pour exécuter des requêtes d’insertion, suppression et mise à

jour dans la BD. Elle fournit aussi des méthodes pour nettoyer les données par

échappement, récupérer le dernier ID inséré ou le nombre de lignes.

$result = $this->db->query("SELECT * FROM `" . DB_PREFIX .

"table`");

− DB_PREFIX est le préfixe des tables;

− $result est un objet qui contient le résultat de la requête SELECT. Elle possède les propriétés suivantes:

• $result->row contient les données de la première ligne sous la forme d’un tableau associatif.

• $result->rows est un tableau de lignes de résultats sur lesquels on peut boucler par un foreach.

• $result->num_rows est le nombre de lignes retournées par la requête.

L’instruction $this->db->query($sql); exécute la requête passée en paramètre.

Exemple :

$query = $this->db->query("SHOW COLUMNS FROM

`".DB_PREFIX."product` LIKE 'youtube'");

if(!$query->num_rows){

$this->db->query("ALTER TABLE `".DB_PREFIX."product`

ADD `youtube` TEXT NOT NULL");

}

Ces lignes de code se trouvent soit dans le contrôleur ou le modèle. La requête cherche une colonne YouTube dans la table product; Si elle n’existe pas, la requête insère la colonne

dans la table.

$this->db->escape($value);

Échappe et nettoie la variable avant de l’insérer dans la BD pour éviter les injections SQL. Elle utilise la fonction mysql_real_escape_string() de PHP.

$this->db->countAffected($sql);

Retourne le nombre de lignes affectées par la requête UPDATE récemment exécutée.

$this->db->getLastId($sql);

Retourne l’ID de la dernière ligne insérée par la plus récente requête. Elle utilise la fonction mysql_insert_id()de PHP.

F. Abouzaid

6. Variables réservées

OpenCart a des variables prédéfinies à utiliser à la place des variables standards : $_GET, $_POST, $_SESSION,$_COOKIE, $_FILES, $_REQUEST et $_SERVER

$_SESSION est utilisé par $this->session->data où data est un tableau associatif qui représente $_SESSION.

Les autres variables peuvent être utilisées par $this->request:

$_GET $this->request->get

$_POST $this->request->post

$_COOKIE $this->request->cookie

$_FILES $this->request->files

$_REQUEST $this->request->request

$_SERVER $this->request->server

Tutorial architecture

http://venkatphp.blogspot.ca/p/open-cart-tutorial.html

Adresse du module popular :

http://www.php-dev-zone.com/2015/02/opencart-custom-module-development.html

Adresse du module Helloworld :

https://bitbucket.org/mariavilaro/opencart-2-hello-world-module

F. Abouzaid

Creer une nouvelle page dans OpenCart

Pour cela, il faut créer les fichiers suivants:

• Un fichier Controller

• Un fichier Template

• Un fichier Model

• Un fichier Language

1. Exemple 1: Simple sans modèle http://www.opencartnews.com/tutorials/creating-a-custom-page-in-opencart-

part-1/

1. On crée une page static.php dans le répertoire

Catalog\Controller\Information

On obtient cette page par simple copie d'une page existante dans le même répertoire et

en changeant le nom du contrôleur. Le nom du contrôleur devient:

ControllerInformationStatic

2. On crée une page static.tpl dans

catalog\view\theme\default\template\Information

On copie une page existante et on adapte le contenu. Par exemple, on rajoute une ligne:

<?php echo $text_content; ?> à la place du contenu. $text_content

sera définie dans le fichier langage.

3. Fichier language: On crée static.php dans

catalog\language\english\Information

Contenu:

<?php

// Entête

$_['heading_title'] = 'Page Statique ';

// Texte

$_['text_content'] = 'Contenu de ma Page Statique.';

?>

4. On accède à la page par:

/index.php?route=Information/Static

F. Abouzaid

2. Exemple 2: Avec modèle et accès à la BD

On crée une nouvelle fonctionnalité d'affichage de nouvelles.

1. On crée les tables dans la BD.

CREATE TABLE IF NOT EXISTS `my_web_news` ( `news_id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `description` text NOT NULL, `date_added` datetime NOT NULL, PRIMARY KEY (`news_id`) ) INSERT INTO `my_web_news` (`news_id`, `title`, `description`,

`date_added`) VALUES (1, 'Tutorial by MarketInSG', 'Tutorial by <a

href="http://www.marketinsg.com"> MarketInSG</a>!

Love us? Treat us to a coffee here: http://www.marketinsg.com/donate',

'2012-08-23 00:00:00'), (2, 'My First News Post', 'Just anything about my awesome website!',

'2012-08-22 00:00:00');

2. On crée le modèle dans /catalog/model/catalog/news.php

<?php

class ModelCatalogNews extends Model { // Model - type of file this is.

Catalog - the folder. News - the file name.

public function getNews($news_id) { // Function to call for from

other files. Name it anything you like, but always remember what you

named it!

$query = $this->db->query("SELECT * FROM " . DB_PREFIX .

"my_web_news WHERE news_id = '" . $news_id . "'"); // Running query to

retrieve information from your database table.

if ($query->num_rows) { // If row exists

return $query->row; // I retrieved the information, now I must

pass it back to the file that calls for it.

} else {

return false;

}

}

public function getAllNews() {

$query = $this->db->query("SELECT * FROM " . DB_PREFIX .

"my_web_news ORDER BY date_added DESC");

return $query->rows;

}

}

?>

F. Abouzaid

3. On crée le contrôleur dans /catalog/controller/informations/news.php

<?php

class ControllerInformationNews extends Controller { // Controller -

This is a controller file. Information - This is the folder it is in.

News - This file name is news.php

public function index() {

$this->language->load('information/news'); // Calling for my

language file

$this->load->model('catalog/news'); // Calling for my model file

$this->document->setTitle($this->language->get('heading_title'));

// Set the title of your web page.

$this->data['breadcrumbs'] = array(); // Breadcrumbs for your

website.

$this->data['breadcrumbs'][] = array(

'text' => $this->language->get('text_home'),

'href' => $this->url->link('common/home'),

'separator' => false

);


'text' => $this->language->get('heading_title'),

'href' => $this->url->link('information/news'),

'separator' => $this->language->get('text_separator')

);

// Text from language file

$this->data['heading_title'] = $this->language-

>get('heading_title');

$this->data['text_title'] = $this->language->get('text_title');

$this->data['text_description'] = $this->language-

>get('text_description');

$this->data['text_view'] = $this->language->get('text_view');

// Calling for the function getAllNews from the model file

$all_news = $this->model_catalog_news->getAllNews();

$this->data['all_news'] = array();

foreach ($all_news as $news) {

$this->data['all_news'][] = array (

'title' => $news['title'],

'description' =>

(strlen(html_entity_decode($news['description'])) > 50 ?

substr(strip_tags(html_entity_decode($news['description'])), 0, 50) .

'..' : html_entity_decode($news['description'])),

'view' => $this->url->link('information/news/news',

'news_id=' . $news['news_id'])

);

}

// We call this Fallback system

if (file_exists(DIR_TEMPLATE . $this->config-

>get('config_template') . '/template/information/news_list.tpl')) { //

if file exists in your current template folder

$this->template = $this->config->get('config_template') .

'/template/information/news_list.tpl'; // get it

} else {

F. Abouzaid

$this->template = 'default/template/information/news_list.tpl';

// or else get the file from the default folder (this is a fall back

folder) always remember to have your template file in the default

folder.

}

$this->children = array( // Required. The children files for the

page.

'common/column_left', // Column left which will allow you to

place modules at the left of your page.

'common/column_right',

'common/content_top',

'common/content_bottom',

'common/footer', // the footer of your website

'common/header'

);

$this->response->setOutput($this->render()); // Let's display it

all!

}

public function news() {

$this->load->model('catalog/news');

$this->language->load('information/news');

if (isset($this->request->get['news_id']) && !empty($this-

>request->get['news_id'])) {

$news_id = $this->request->get['news_id'];

} else {

$news_id = 0;

}

$news = $this->model_catalog_news->getNews($news_id);

$this->data['breadcrumbs'] = array();


'text' => $this->language->get('text_home'),

'href' => $this->url->link('common/home'),

'separator' => false

);


'text' => $this->language->get('heading_title'),

'href' => $this->url->link('information/news'),


);

if ($news) {


'text' => $news['title'],

'href' => $this->url->link('information/news/news',

'news_id=' . $news_id),


);

$this->document->setTitle($news['title']);

$this->data['heading_title'] = $news['title'];

$this->data['description'] =

html_entity_decode($news['description']);


>get('config_template') . '/template/information/news.tpl')) {

F. Abouzaid


'/template/information/news.tpl';

} else {

$this->template = 'default/template/information/news.tpl';

}

$this->children = array(

'common/column_left',




'common/footer',

'common/header'

);

$this->response->setOutput($this->render());

} else {


'text' => $this->language->get('text_error'),

'href' => $this->url->link('information/news', 'news_id=' .

$news_id),


);

$this->document->setTitle($this->language->get('text_error'));

$this->data['heading_title'] = $this->language-

>get('text_error');

$this->data['text_error'] = $this->language->get('text_error');

$this->data['button_continue'] = $this->language-

>get('button_continue');

$this->data['continue'] = $this->url->link('common/home');


>get('config_template') . '/template/error/not_found.tpl')) {


'/template/error/not_found.tpl';

} else {

$this->template = 'default/template/error/not_found.tpl';

}

$this->children = array(

'common/column_left',




'common/footer',

'common/header'

);

$this->response->setOutput($this->render());

}

}

}

?>

F. Abouzaid

4. On crée les 2 vues :

• /catalog/view/theme/default/template/information/news-list.tpl

<?php echo $header; ?><?php echo $column_left; ?><?php echo

$column_right; ?>

<div id="content">

<?php echo $content_top; ?>

<div class="breadcrumb">

<?php foreach ($breadcrumbs as $breadcrumb) { ?>

<?php echo $breadcrumb['separator']; ?><a href="<?php echo

$breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>

<?php } ?>

</div>

<h1><?php echo $heading_title; ?></h1>

<center>

<table style="width:80%; border-collapse: collapse; border-left:

1px solid #eeeeee; border-right: 1px solid #eeeeee;">

<tr style="font-weight:bold;">

<td style="width:30%; padding:10px 0px 10px 10px;

background:#eeeeee; text-align:left;"><?php echo $text_title; ?></td>


background:#eeeeee; text-align:left;"><?php echo $text_description;

?></td>


background:#eeeeee; text-align:right;"></td>

</tr>

<?php foreach ($all_news as $news) { ?>

<tr>

<td style="padding:10px 0px 10px 10px; text-align:left;

border-bottom: 1px solid #eeeeee;"><?php echo $news['title']; ?></td>

<td style="padding:10px 0px 10px 10px; text-align:left;

border-bottom: 1px solid #eeeeee; border-left: 1px solid #eeeeee;"><?php

echo $news['description']; ?></td>

<td style="padding:10px 10px 10px 10px; text-align:right;

border-bottom: 1px solid #eeeeee; border-left: 1px solid #eeeeee;"><a

href="<?php echo $news['view']; ?>"><?php echo $text_view; ?></a></td>

</tr>

<?php } ?>

</table>

</center>

<?php echo $content_bottom; ?>

</div>

<?php echo $footer; ?>

• /catalog/view/theme/default/template/information/news.tpl

<?php echo $header; ?><?php echo $column_left; ?><?php echo

$column_right; ?>

<div id="content">


<div class="breadcrumb">

<?php foreach ($breadcrumbs as $breadcrumb) { ?>

<?php echo $breadcrumb['separator']; ?><a href="<?php echo

$breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>

F. Abouzaid

<?php } ?>

</div>


<p><?php echo $description; ?></p>


</div>


5. On crée les fichiers langages :

• /catalog/language/english/information/ folder/news.php

<?php

// Heading

$_['heading_title'] = 'Our Latest News';

// Text

$_['text_title'] = 'Title';

$_['text_description'] = 'Description';

$_['text_view'] = 'View';

$_['text_error'] = 'The page you are looking for cannot be found.';

?>

• Idem pour le français

6. On rajoute le lien dans le menu:

• aller à /catalog/view/theme/default/template/common/header.tpl

• repérer l'endroit où insérer le lien: <li><a href="<?php echo 'index.php?route=information/news' ?>"><?php

echo $text_news; ?></a></li>

7. On rajoute les variables dans /catalog/controller/common/header.php

• $this->data['text-news']=$this->language->get('text-news');

• $this->data['news']=$this->url->link('information/news','',SSL);

F. Abouzaid

vQmod

vQmod est un système conçu pour éviter d'avoir à modifier les fichiers du noyau. Au lieu

d'apporter des modifications aux fichiers de base directement, les changements sont créés sous

la forme de scripts xml de recherche /remplacement dans les fichiers PHP. En ne modifiant pas

les fichiers du noyau, les changements ne seront pas altérés lors d'une mise à jour d’Opencart.

Cependant, les fichiers VQMOD sont conçus pour fonctionner avec certaines versions

d’Opencart. Il y a donc un risque d'incompatibilité lors des mises à jour.

1. Comment créer des Scripts vQmod

Un script simple de remplacement a cette structure:

<?xml version="1.0" encoding="UTF-8"?>

<modification>

<id>Nom du script</id>

<version>1.0.0</version>

<vqmver>1.0.9</vqmver>

<author>Auteur du script</author>

<file name="relative/path/monfichier.php">

<operation>

<search position="replace">

<![CDATA[$var = 'valeur à remplacer';]]>

</search>

<add>

<![CDATA[$var = ' valeur de remplacement ';]]>

</add>

</operation>

</file>

</modification>

Syntaxe: signification des paramètres

Modification : Élément racine du fichier.

/id : Nom et description du script.

/version : Version du script.

/vqmver

• Version minimale requise de VirtualQMod.

• Format: Number and Decimal (1.0.0) (Informational)

• Un attribut required="true" peut être ajouté pour désactiver le script si la version ne correspond pas.

/file Nom du fichier à modifier

• Requiert un attribut "name" qui indique la position relative du fichier (e.g. catalog/controller/product/product.php). On peut utiliser plusieurs noms de fichiers séparés par des virgules. On peut aussi utiliser des jokers (wildcard (*)).

- catalog/view/theme/*/template/product/product.tpl

F. Abouzaid

- catalog/view/theme/*/*/product/product.tpl

Un fichier xml peut concerner plusieurs scripts. Chaque fichier aura ses propres opérations.

• Pour éviter les répétitions on utilisera un attribut "path" pour préfixer les noms de fichiers. Exemple:

<file path="path/to/" name="a.php,b.php,c.php">

• Un attribut "error" peut être utilisé et prendra ses valeurs dans log|skip|abort o skip : le fichier sera ignoré; o log : comme skip, mais l'erreur sera journalisée (valeur par défaut); o abort : journalise l'erreur et annule les opérations restantes dans le script. Pas

de retour en arrière sur les opérations déjà effectuées et n'arrête pas les autres fichiers xml.

o Les chemins avec des jokers ignorent complètement l'attribut "error".

/file/operation : Opération à réaliser. Il peut y en avoir plusieurs pour le même fichier.

• L'attribut Optionel "info" donne de l'information sur l'extension.

• L'attribut Optionel "error" prend ses valeurs dans skip|log|abort o skip : toutes les autres opérations seront réalisées malgré l'erreur. Pas de

journalisation; o log : idem skip mais avec journalisation; o abort : journalise l'erreur et revient au code source original. (comportement par

défaut)

/file/operation/ignoreif : Balise facultative qui permet d'ignorer une ligne si la recherche est positive.

1. L'attribut optionel "regex' prend les valeurs true|false. Il précise l'expression régulière à vérifier, entre guillemets. Par défaut la valeur est false.

Exemple:

<file name="path/to/myfile.php">

<operation info="After ABC, add 123 if XYZ not in file">

<ignoreif><![CDATA[XYZ]]></ignoreif>

<search position="after">

<![CDATA[$var = 'ABC';]]>

</search>

<add><![CDATA[$var = '123';]]></add>

</operation>

</file>

F. Abouzaid

/file/operation/search

• C'est le premier élément (étape) de l'opération. Il n'y en a qu'un seul.

• La recherche se fait sur des lignes uniques On utilisera les attributs offset et index pour des cas plus complexes.

• Il est recommandé d'envelopper le code par CDATA. • L'attribut "position" est obligatoire et prend ses valeurs dans :

before|after|replace|top|bottom|ibefore|iafter.

o replace remplace le texte dans la balise search par les données dans la balise add;

o before (resp. after) insèrent les données de la balise add juste avant (resp. après) le texte dans la balise search;

o top (resp. bottom) réalisent l'insertion au début (resp. à la fin) du fichier. o ibefore (resp. iafter) variantes non utilisées de before (resp. after).

• L'attribut Optionel "offset" va de pair avec la position o permet de décaler l'insertion ou le remplacement de "n" lignes de la position

donnée par search. Par exemple, � si l'attribut position est before et offset à "3", le texte de add

sera inséré 3 lignes au-dessus de la ligne cherchée. � si position est à replace et l'offset 3, il enlèvera le code de la

ligne cherchée et les 3 lignes suivantes et le remplacera par le texte de add.

o L'attribut Optionel "index" précise quelle instance de la recherche sera impactée par l'opération. Exemple:

o Si on cherche "echo" et qu'il y en a 5 et que l'on souhaite remplacer seulement le premier et le 3ème, on utilisera index="1,3"

o L'attribut Optionel "regex" permet de spécifier si on utilise ou non une expression régulière. Exemples:

<search regex="true" position="replace">

<![CDATA[~\$this->load->model$.*?$;~]]>

</search>

<file name="admin/view/template/*/*.tpl">

<operation>

<search regex="true" position="replace">

<![CDATA[~<h1>.*?</h1>~]]>

</search>

<add>

<![CDATA[<h1><?php echo $heading_title;

?></h1>]]>

</add>

</operation>

</file>

F. Abouzaid

o Si la valeur est true, le texte de search doit être une expression régulière valide.

o L'attribut Optionel "trim" est un booléen qui spécifie si on supprime ou non les espaces et les retours à la ligne (true par défaut).

/file/operation/add

• Peut concerner des lignes multiples; • Un seul add par opération ; • L’adjonction se fait à la position indiquée par search; • On peut utiliser l'attribut booléen optionnel "trim".

<![CDATA[ ]]>

• Balise CDATA indique à que les données ne doivent pas être évaluées. Il est recommandé de toujours l'utiliser pour les balises search et add.

2. Installer vQmod

Télécharger la dernière version à l'adresse :

https://code.google.com/p/vqmod/downloads/list

Extraire de l'archive le répertoire vqmod et placez-le dans le répertoire d'installation d'OpenCart (/upload). Ouvrir ensuite le fichier : vqmod/install/index.php.

Si ça marche on obtient le message: VQMOD HAS BEEN INSTALLED ON YOUR SYSTEM!

1. Exemple d'utilisation

Créez un fichier XML vqmod_homepage.xml dans le répertoire vqmod/xml. Copiez-y le code suivant:

<?xml version="1.0" encoding="UTF-8"?> <modification> <id>Modifie la page d’accueil </id> <version>1.0</version> <vqmver>2.X</vqmver> <author>xyz</author> <file name="catalog/view/theme/default/template/common/home.tpl">

<operation info=" Modifie la page d'accueil.">

<search position="replace">

<![CDATA[<?php echo $content_top; ?>]]>

</search>

<add>

<![CDATA[<h1><?php echo $title; ?></h1><?php echo

$content_top; ?>]]>

F. Abouzaid

</add>

</operation>

</file>

<file name="catalog/controller/common/home.php">

<operation info=" Modifie la page d'accueil.">

<search position="before">

<![CDATA[$data['column_left'] = $this->load-

>controller('common/column_left');]]>

</search>

<add>

<![CDATA[$data['title'] = $this->document-

>getTitle();]]>

</add>

</operation>

</file> </modification>

En ouvrant la page d'accueil, le nom du magasin s’affiche. Tous les fichiers dans le répertoire vqmod/xml sont détectés automatiquement et les changements appliqués.

F. Abouzaid

3. Installer une extension existante

Exemple:

- Stars On Off

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=17103&fil

ter_search=star&filter_license=0

- Imprimer la facture en PDF

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=6331

Gérer les extensions vQmod (ne marche pas avec Opencart 2.0 � )

Télécharger et installer VQMod Manager :

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=2969

Suivre les instructions d'installation dans le pdf.

F. Abouzaid

4. Exercices d'utilisation de VQmod

• Utiliser vQmod pour enlever le texte powered by Opencart

• Forcer les utilisateurs à utiliser des mots de passe forts

1. Aller à catalog/controller/account/register.php

2. Chercher la ligne :

if ((utf8_strlen($this->request->post['password']) < 4) ||

(utf8_strlen($this->request->post['password']) > 20)) {

$this->error['password'] = $this->language-

>get('error_password');

}

3. Remplacez-la par :

if (!preg_match('^(?=.*[0-9])(?=.*[a-z])(?=.*[A-

Z])(?=.*[@#$%^&+=])(?=\S+$).{8,}$',

$this->request->post['password'])) {

$this->error['password'] = "Votre mot de passe doit contenir

au moins un chiffre et une majuscule. Il doit aussi être de

longueur supérieure ou égale à 8. ";

}

F. Abouzaid

Exemple plus complexe: Se remémorer le type de paiement précédent.

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=10960&fil

ter_search=vqmod&filter_license=0&page=7

<modification>

<id><![CDATA[Se souvenir du dernier type de paiement et de

livraison]]></id>

<version><![CDATA[1.0]]></version>

<vqmver><![CDATA[2.0.0]]></vqmver>

<author><![CDATA[xyz]]></author>

<file name="catalog/model/account/order.php">

<operation>

<search position="after">

<![CDATA['payment_address_format' => $order_query-

>row['payment_address_format'],]]>

</search>

<add><![CDATA['payment_code' => $order_query-

>row['payment_code'],'shipping_code' => $order_query-

>row['shipping_code'], ]]></add>

</operation>

</file>

<file name="catalog/controller/checkout/payment_method.php">

<operation>

<search position="replace"><![CDATA[$this->data['code'] = '';]]>

</search>

<add>

<![CDATA[$this->load->model('account/order');

$latest_orders = $this->model_account_order->getOrders(0,1);

if($latest_orders) {

foreach ($latest_orders as $latest_order) {

$latest_order_id = $latest_order['order_id'];

}

$latest_order_info = $this->model_account_order->

getOrder($latest_order_id);

$this->data['code'] =

$latest_order_info['payment_code'];

}

else {

$this->data['code'] = '';

}]]>

</add>

</operation>

</file>

<file name="catalog/controller/checkout/shipping_method.php">

<operation>

<search position="replace"><![CDATA[


]]></search>

<add><![CDATA[

$this->load->model('account/order');

$latest_orders = $this->model_account_order-

>getOrders(0,1);

F. Abouzaid

if($latest_orders) {

foreach ($latest_orders as $latest_order)

{

$latest_order_id =

$latest_order['order_id'];

}

$latest_order_info = $this-

>model_account_order->getOrder($latest_order_id);

$this->data['code'] =

$latest_order_info['shipping_code'];

} else {


}

]]></add>

</operation>

</file>

</modification>

F. Abouzaid

Ajouter une langue dans OpenCart1

1. Télécharger une extension pour la langue souhaitée. Vous pouvez consulter: OpenCart marketplace.

2. Dézipper le fichier téléchargé dans le répertoire principal de votre boutique. Vérifiez s'il y a un répertoire upload dans l'archive; si c'est le cas, copier le contenu de ce répertoire.

3. Allez à Système>Localisation>Langues

4. Rentrez les valeurs demandées pour la langue. Elles sont généralement fournies avec le package téléchargé

1 http://omframework.com/2014/11/21/how-to-add-a-language-pack-in-opencart/

F. Abouzaid

5. La nouvelle langue devrait apparaître dans l'entête de vos pages.

F. Abouzaid

Activer les URLs SEO dans OpenCart2

1. A partir de la console administration, allez à Système > Paramètres et cliquez sur le lien pour modifier la boutique.

2. Dans l'onglet "Serveur" mettez le bouton radio "Utiliser des URL’s SEO " à "Oui" et sauvegarder les changements.

3. Dans le répertoire principal de OpenCart il y a un fichier.htaccess.txt qu'il faut renommer en .htaccess. Si ce fichier existe déjà, il faut y ajouter les lignes suivantes:

# SEO URL Settings RewriteEngine On

# If your opencart installation does not run on the main web folder make

sure you folder it does run in ie. / becomes /shop/

RewriteBase /

RewriteRule ^sitemap.xml$ index.php?route=feed/google_sitemap [L]

RewriteRule ^googlebase.xml$ index.php?route=feed/google_base [L]

RewriteRule ^download/(.*) /index.php?route=error/not_found [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_URI} !.*\.(ico|gif|jpg|jpeg|png|js|css)

RewriteRule ^([^?]*) index.php?_route_=$1 [L,QSA]

RewriteBase / : indique le répertoire racine du site.

Exemple: RewriteBase /boutique/

La barre / à la fin est obligatoire.

Ajouter les mots-clés pour les produits et les catégories

La fonctionnalité par défaut ne marche pas pour les boutiques multiples.

Il ne faut pas utiliser d'espaces dans les mots-clés. Les mots-clés doivent être uniques et

différents entre les produits et les catégories.

2 http://omframework.com/2014/11/25/how-to-enable-seo-urls-in-opencart/

F. Abouzaid

Pour ajouter les mots-clés : Allez à Catalogue > Produits

Cliquez pour modifier un produit

Dans l'onglet "Données" remplissez le champs SEO

Allez à Catalogue > Catégories et répétez le même processus pour les catégories.

F. Abouzaid

Gerer les themes:

1. Changer de thème System-> Settings

Choisir le magasin -> Edit

Dans l'onglet Store choisir la valeur de Template puis le thème que vous voulez

activer.

2. Structure du répertoire des thèmes

Dans le répertoire view il y a un thème par défaut (view -> theme -> default). Il

contient les répertoires suivants:

1. Image: contient les images du thème;

2. Stylesheet: contient les feuilles de style;

3. Template: Contient les fichiers template du front-end. Ce répertoire est organisé par

fonctionnalités.

Contenu du répertoire Template

1. Common. Contient les fichiers Template pour les éléments communs aux différentes pages: header, footer, sidebar, … Il peut contenir vos propres fichiers que vous comptez utiliser dans plusieurs pages.

2. Error Contient les fichiers template pour la page d'erreur. 3. Information. Contient les templates pour les pages Contact et Sitemap et les pages

statiques d'information.

F. Abouzaid

4. Module. Contient les templates pour les modules personnalisés que vous développerez.

D'autres répertoires contiennent les templates spécifiques à certaines pages. Par exemple,

quand on visite la page "Mon Compte" on invoque le template qui lui est associé qui se trouve

ici: catalog/view/theme/default/template/account.

3. Créer un Thème personnalisé

Deux possibilités s'offrent à vous:

1. Remplacer totalement l'interface du front-end ;

2. Changer certains aspects de l'interface comme la combinaison des couleurs ou la disposition

des éléments qui la composent.

Dans les 2 cas, il faut créer un nouveau thème et ne pas toucher au thème par défaut.

Pour cela, on va créer un nouveau répertoire que l'on appellera monThemePerso. Copiez-y

ensuite les fichiers suivants:

• catalog\view\theme\default\stylesheet\*.*

• catalog\view\theme\default\image\*.*

• catalog\view\theme\default\template\common\header.tpl

Dans header.tpl remplacez le nom du theme (default) par le nom du nouveau thème.

Appliquez différentes modifications à la feuille de style et constatez-en l'effet sur votre site.

Vous avez déjà la structure d'un thème fonctionnel que vous pouvez activer à partir de la

console d'administration: System -> Settings. Puis éditer la boutique ->

Onglet store -> Liste des thèmes et choisir le thème monThemePerso qui doit

normalement apparaître.

En revenant à la boutique, on remarque que le nouveau thème est identique au thème par

défaut. Ceci est dû au mécanisme de surcharge (overriding) d’OpenCart. Quand le système

essaie d'appliquer un template du nouveau thème et qu'il ne le trouve pas, il va prendre le

template correspondant dans le thème par défaut.

Ce mécanisme permet d'apporter des modifications partielles au thème par défaut, sans créer

un nouveau thème complet.

Développer le nouveau thème

Dans le répertoire monThemePerso/template/common, copiez les fichiers home.tpl et

header.tpl du répertoire default/template/common.

Remarque: On ne copie que les fichiers que l'on souhaite personnaliser. Inutile de recopier tous

les autres.

F. Abouzaid

Dans le nouveau thème ouvrez le fichier template/common/header.tpl. Mettez à jour la

référence à la feuille de style. Vous devriez obtenir ceci:

<link rel="stylesheet" type="text/css" href="catalog/view/theme/

monThemePerso/stylesheet/stylesheet.css" />

Ouvrez le fichier template/common/home.tpl et remplacez son contenu par les lignes

suivantes:

<?php echo $header; ?>

<?php echo $column_left; ?>

<?php echo $column_right; ?>

<div style="background: #00F;color: #FFF;font-weight: bold;padding-left:

10px;">Si cette ligne apparait, c'est que le nouveau thème est en

marche!</div><br/>

<div id="content">


<h1 style="display: none;"><?php echo $heading_title; ?></h1>


</div>

</div>


En retournant à la page d'accueil, on devrait voir les changements.

Vous pouvez bien entendu apporter tous les changements que vous jugez nécessaires pour

votre nouveau thème.

Pour initialiser tous les réglages CSS, ouvrir la feuille de style

catalog\view\theme\monThemePerso\stylesheet\stylesheet.css et y

insérer les lignes suivantes:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

Vous pouvez vérifier l'effet sur votre site.

6. On rajoute quelques modifications au CSS comme suit:

body {

F. Abouzaid

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

:focus {

outline: 0;

}

ins {

text-decoration: none;

}

del {

text-decoration: line-through;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

On place le tout de préférence dans une nouvelle feuille de style: reset.css et on modifie le

fichier header.tpl en lui rajoutant la ligne suivante au bon endroit:

<link rel="stylesheet" type="text/css"

href="catalog/view/theme/montheme/stylesheet/reset.css" />

Voir reset.css

4. Comprendre les "Layout Templates"

Un "layout template" est un template qui collecte le contenu de différentes zones de la page,

l'insère dans le layout correspondant et génère une page complète.

Templates de module

Un module est un bloc qui est affiché dans une région spécifique du "layout template".

Par défaut, il y a 4 positions différentes dans le layout template:

1. Content Top

2. Content Bottom

3. Column Left

4. Column Right

On peut donc assigner un module à chacune de ces positions. Les templates de Module sont

dans le répertoire template/module. Ainsi, à la création d'un nouveau module, on doit placer

le template qui lui est associé dans ce répertoire.

F. Abouzaid

Comment repérer le template associé à une page dont on veut changer l'apparence?

Prédiction basée sur la structure

Soit l'url suivante:

http://www.monsite.com/index.php?route=account/login.

account/login est la valeur du paramètre "route" et qui nous indiquera quel sera le

répertoire template du thème par défaut qui sera utilisé. Dans ce cas, ce sera:

catalog/view/theme/default/template/account/login.tpl

Cas particuliers

Dans certains cas, il sera nécessaire de consulter le fichier contrôleur. Exemple:

http://www.monsite.com/index.php?route=account/login

Dans ce cas, le contrôleur sera

catalog/controller/account/login.php

Dans ce fichier se trouve ce code qui est le moyen par lequel le contrôleur indique le template à

utiliser:

$this->template = 'default/template/account/login.tpl';

Composant communs du Layout Template

Ouvrez le fichier: default/template/account/login.tpl, par exemple. Voilà la

signification des principales variables:

La sortie d'un module spécifique se trouve dans :

default/template/module/{modulename.tpl}.

Par exemple, pour le module "Account", le fichier est:

F. Abouzaid

default/template/module/account.tpl.

Dans ce fichier, la signification des principales variables est la suivante:

Assigner un module à partir du Back-End

Exemple du module "Slideshow":

Avec cette configuration le module "Slideshow" sera affiché dans la partie "Content Top"

du layout "Home".

Changer le Layout de la page d'accueil

Allez à Extension -> Modules

Supprimez les modules "Slideshow", "Carousel" et "En vedette". La page d'accueil

devrait être presque vide à l'exception du header et du footer.

Installez le module "Category" dans le Layout "Home" à la Position "Colonne gauche".

F. Abouzaid

Ajoutez le module "Compte" dans le même layout à la position "colonne droite".

Vérifiez votre page d'accueil.

Changement dans le fichier Layout

Pour ajouter du texte dans un template, il faut passer par le fichier langage du template.

Exemple pour personnaliser la page d’accueil, au lieu de mettre le texte directement dans la

page, on suit les étapes suivantes:

- Ouvrir le fichier catalog/language/english/english.php et ajouter la ligne suivante,

avant la ligne qui contient "?>".

$_['text_welcome'] = " Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Pellentesque vestibulum dui sit amet semper

porta. Sed in enim quam. Etiam cursus ante eu turpis consectetur,

eu tincidunt diam mattis. Cras euismod faucibus eros volutpat

efficitur. ";

- Ouvrir le fichier catalog/controller/common/home.php. On y ajoute la variable que l’on

a inséré dans english.php pour qu’elle soit disponible lors de l’affichage de home.tpl. Dans

"home.php" juste avant la ligne :

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template')

On ajoute le code suivant:

$this->data['welcome_text'] = $this->language->get('text_ welcome');

- Ajouter la variable $welcome_text dans home.tpl. Ce fichier devrait alors ressembler à

ceci:

<?php echo $header; ?>

<?php echo $column_left; ?>

<?php echo $column_right; ?>

<div id="content">



<div><?php echo $welcome_text; ?></div>


</div>


Les modifications que l’on a fait directement dans les fichiers english.php et home.php

devraient être faites par vQmod.

F. Abouzaid

Les layouts dans Opencart3

Dispositions

Une disposition (layout) est une distribution des différents modules pour une ou plusieurs pages du site. On peut donc répartir les modules de plusieurs façons comme dans les exemples suivants:

Dispositions par défaut

Il y a des dispositions pré-configurées qui sont suffisantes dans la plupart des cas, puisqu’ils prennent en charge les différentes sections d’un magasin:

• Account

• Affiliate

• Category

• Checkout

• Contact

• Default

• Home

• Information

• Manufacturer

• Product

• Sitemap

3 http://jolivapps.com/how-to-configure-a-layout-in-opencart

http://forum.opencart-france.fr/post5442 http://isenselabs.com/posts/how-to-configure-modules-and-assign-them-to-layouts-in-opencart-2-x

F. Abouzaid

Avec les dispositions on peut :

- Indiquer qu’un module doit s’afficher sur toutes les pages

- Afficher différents modules sur les différentes pages (basé sur le chemin)

- Afficher différent module (comme bannière) sur différentes catégories, produit

et page d’information

- Si vous avez plusieurs boutiques, vous pouvez faire les réglages ci-dessus pour

chacune des boutiques.

Créer un nouveau Layout

En faisant : "System � Design � Layouts", on affiche une liste des différents layouts prédéfinis ou personnalisés.

On peut créer un nouveau layout en cliquant sur "Add New".

Cas pratique :

Nous allons mettre en évidence un produit particulier en lui créant le design suivant :

Étape 1 : créer un layout et nommez-le « Meilleur produit ». On ne précise pas de route particulière. Opencart utilisera la route par défaut de ce produit.

Étape 2 : aller à la page du produit en question et dans l’onglet design choisissez comme layout, « Meilleur produit »

Étape 3 : il faut configurer chaque module séparément

Pour créer un module, on commence par lui associer une bannière (Banner)

1. Les bannières sont gérées (créées) à partir de System � Design � Banners

2. Pour associer la bannière au module banner, on fait:

Extensions � Modules � Banner puis remplir les champs comme suit:

F. Abouzaid

Une fois sauvegardée, la bannière devrait apparaître dans la liste des modules.

3. Pour associer le module créé avec un layout, on fait: System > Design > Layouts

A vous de terminer le cas pratique!

F. Abouzaid

Ajouter de nouvelles Positions de Modules

1. Créer une nouvelle Position (fichier Controller)

Pour cela, créer un fichier ‘content_footer.php’ dans le répertoire catalog/controller/common/ et y coller le code suivant:

<?php

class ControllerCommonContentFooter extends Controller {

public function index() {

$this->load->language('common/content_footer');

$this->load->model('design/layout');

if (isset($this->request->get['route'])) {

$route = (string)$this->request->get['route'];

} else {

$route = 'common/home';

}

$layout_id = 0;

if ($route == 'product/category' && isset($this->request-

>get['path'])) {

$this->load->model('catalog/category');

$path = explode('_', (string)$this->request-

>get['path']);

$layout_id = $this->model_catalog_category-

>getCategoryLayoutId(end($path));

}

if ($route == 'product/product' && isset($this->request-

>get['product_id'])) {

$this->load->model('catalog/product');

$layout_id = $this->model_catalog_product-

>getProductLayoutId($this->request->get['product_id']);

}

if ($route == 'information/information' && isset($this-

>request->get['information_id'])) {

$this->load->model('catalog/information');

$layout_id = $this->model_catalog_information-

>getInformationLayoutId($this->request->get['information_id']);

}

if (!$layout_id) {

$layout_id = $this->model_design_layout-

>getLayout($route);

}

F. Abouzaid

if (!$layout_id) {

$layout_id = $this->config->get('config_layout_id');

}

$this->load->model('extension/module');

$data['modules'] = array();

$modules = $this->model_design_layout-

>getLayoutModules($layout_id, 'content_footer');

foreach ($modules as $module) {

$part = explode('.', $module['code']);

if (isset($part[0]) && $this->config->get($part[0] .

'_status')) {

$data['modules'][] = $this->load-

>controller('module/' . $part[0]);

}

if (isset($part[1])) {

$setting_info = $this->model_extension_module-

>getModule($part[1]);

if ($setting_info && $setting_info['status']) {

$data['modules'][] = $this->load-

>controller('module/' . $part[0], $setting_info);

}

}

}


>get('config_template') . '/template/common/content_footer.tpl')) {

return $this->load->view($this->config-

>get('config_template') . '/template/common/content_footer.tpl',

$data);

} else {

return $this->load-

>view('default/template/common/content_footer.tpl', $data);

}

}

}

Ce code est une copie du fichier content_top.php ou les parties en jaune ont été

adaptées.

Ce code vérifie qu'il s'agit du bon layout et s'il y a des extensions à placer ici. S'il y en a, il va les chercher et les afficher dans content_footer.tpl qu'il faut donc créer.

F. Abouzaid

1. Créer une nouvelle Position (fichier Template)

Créer un fichier ‘content_footer.tpl’ dans le répertoire catalog/view/theme/default/template/common/. On y colle le code suivant:

<?php foreach ($modules as $module) { ?> <?php echo $module; ?> <?php } ?>

Il se contente d'afficher les modules appelés à partir du contrôleur

2. Lier le module à l'application

• Ouvrir le fichier catalog/controller/common/footer.php et repérer la ligne

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template')

• Juste avant cette ligne, ajouter le code suivant, qui lie le nouveau module au footer.

$this->children = array ('common/content_footer');

• Pour afficher le module dans le footer, nous devons modifier le template du footer. Pour cela, ouvrez le fichier catalog/view/theme/default/template/common/footer.tpl et rechercher la ligne :

<p><?php echo $powered; ?></p>

• Juste avant cette ligne, ajouter le code suivant:

<?php echo $content_footer; ?>

• Ouvrez catalog/controller/common/footer.php Repérez la ligne :

$data['powered'] = sprintf($this->language->get('text_powered'),

…

Ajoutez la ligne suivante juste après: $data['content_footer'] = $this->load-

>controller('common/content_footer');

Maintenant que nous avons créé une position, on va mettre à jour la partie admin pour l’inclure dans les layouts.

• On ouvre admin/view/template/design/layout_form.tpl et on repère les lignes suivantes: <?php if ($layout_module['position'] == 'column_right') { ?>

<option value="column_right" selected="selected"><?php echo

$text_column_right; ?></option>

<?php } else { ?>

<option value="column_right"><?php echo $text_column_right;

?></option>

<?php } ?>

• Juste après ces lignes, ajouter le code suivant:

<?php if ($module['position'] == 'content_footer') { ?>

F. Abouzaid

<option value="content_footer" selected="selected">Content

Footer</option>

<?php } else { ?>

<option value="content_footer">Content Footer</option>

<?php } ?>

• Puis rechercher dans la fonction add_module() la ligne : html += ' <option value="column_right"><?php echo $text_column_right;

?></option>';

• Juste avant ces lignes, ajouter le code suivant:

html += ' <option value="content_footer">Content Footer</option>';

Pour vérifier le fonctionnement de la nouvelle position:

• Dans la console d'administration, aller à System�Design�Layout

• Choisissez Home. Ajoutez un module de votre choix à la position

'content_footer' qui doit normalement apparaître.

• En retournant à la boutique, le module apparaîtra dans le footer.

F. Abouzaid

Ameliorer la securite de OpenCart

1. Supprimer le répertoire d’installation

Un intrus qui accède à votre site et à ce répertoire peut facilement remettre à zéro votre

installation. Ne courez pas de risque et supprimer ce répertoire.

2. Protéger les fichiers de configuration

Changez les permissions d’accès aux fichiers de configuration

• config.php • admin/config.php

On peut le faire dans WinSCP à partir de la fenêtre de propriétés :

3. Changer le repertoire admin

Le répertoire par défaut est : www.monsite.com/admin.

On peut changer facilement l’emplacement de ce répertoire et indiquer à OpenCart où il se

trouve.

Renommez votre répertoire admin en quelque chose de plus difficile à deviner.

Par exemple : www.monsite.com/xyz_admin

Ouvrez les 2 fichiers :

• config.php • admin/config.php

F. Abouzaid

Remplacez toutes les instances de ‘admin’ par le nouveau nom.

Attention si vous utilisez vQmod, il faut modifier le fichier vqmod/install/index.php en

changeant la ligne suivante:

$admin = 'admin';

De plus il faut aussi vérifier que les extensions vQmod installées fonctionnent, sinon, il faut les

modifier en conséquence.

4. Protéger le répertoire admin avec un mot de passe

1. créer un fichier .htaccess et copier le code suivant:

AuthUserFile [chemin du fichier .htpasswd]

AuthName "Entrer un identifiant et un mot de passe"

AuthType Basic

require valid-user

2. créer le fichier .htpasswd en utilisant l'utilitaire htpasswd qui se trouve dans le répertoire :

EasyPHP-DevServer-13.1VC11\binaries\apache\bin

La commande à entrer est la suivante:

La première fois (pour créer le fichier)

htpasswd -c nomFichier utilisateur motDePasse

Pour les autres utilisateurs:

htpasswd -nb nomFichier utilisateur motDePasse

On peut aussi limiter l’accès au répertoire en autorisant seulement certaines adresses IP. Pour

cela on peut ajouter au fichier .htaccess les lignes suivantes :

# Interdire l’acces par IP

<Limit GET POST>

order deny,allow

deny from all

allow from XX.XX.XX.XX

allow from YY.YY.YY.YY

</Limit>

Il faut cependant faire attention aux adresses dynamiques qui peuvent changer.

F. Abouzaid

On peut aussi restreindre les accès par ftp en créant un fichier .ftpaccess qui fonctionne comme un fichier .htaccess mais qui restreint la visibilité de certains répertoires à certains visiteurs par ftp. Le contenu du fichier .ftpaccess ressemble à ceci :

DenyAll

Allow XX.XX.XX.XX

Allow YY.YY.YY.YY

5. Enlever l’indication “powered by OpenCart”

Cette précaution n’éloignera pas un pirate un tant soit peu informé, mais l’obligera à utiliser

d’autres moyens pour deviner le logiciel utilisé (http://builtwith.com/ par exemple).

6. Cacher les erreurs OpenCart

Les messages d’erreur sont utiles pour déboguer l’application. Mais à l’utilisation, ils peuvent

donner des indications aux pirates sur votre code. Pour désactiver les messages, on fait :

System->Settings->Edit->Server changer “Display Errors” à “No”.

7. Choisissez le bon hébergeur

Un hébergeur pas cher ne garantit certainement pas un haut niveau de sécurité!

8. D'autres astuces:

http://www.sitefixit.com/scripts/opencart/how-to-secure-your-opencart-website-improve-

opencart-security.php

http://wiki.opencarthelp.com/doku.php?id=improving_opencart_security

F. Abouzaid

Paiements

Payment option of Paypal not appearing while Checkout

http://forum.opencart.com/viewtopic.php?t=90193

I found a solution. Someone mentioned it in another post. Paypal is expecting a proper currency

code, which for Canada is CAD. But the country ISO code is CAN. I created a 2nd Country entry

for Canada, with the ISO code of CAD. I then switched the currency and set it's code to CAD and

now Paypal is working.

Hope this helps your situation.

Il suffit de rajouter une nouvelle devise CAD dans la liste des devises et de L'activer au lieu de

CAN.

F. Abouzaid

Liens

http://www.transpacific-software.com/guide_install_opencart_extensions.html

http://code.tutsplus.com/tutorials/altering-the-core-of-opencart-using-vqmod--cms-22330

http://www.freshdesignweb.com/free-responsive-opencart-themes.html

http://www.opencartworld.com/ : Recherche améliorée d'extensions.

Ajouter une position

http://www.dynamicwebsoft.net/opencart-thems-free/

https://www.mywork.com.au/blog/create-new-module-layout-position-opencart-1-5/

Développer une extension

http://code.tutsplus.com/articles/from-beginner-to-advanced-in-opencart-more-module-

development--cms-22289

Liste des fonctions :

http://cartadvisor.com/blog/2013/12/04/opencart-global-functions-developer-cheatsheet/

Technologies utilisées

http://builtwith.com/

Expressions régulières

http://www.zorched.net/2009/05/08/password-strength-validation-with-regular-expressions/

Site de la maison du café (idée de thème à développer)

http://www.lamaisonduboncafe.com/the-blanc-imperial.html

Ajouter une table à l'installation

http://www.kvcodes.com/2013/11/creating-table-while-installing-module-in-opencart/

Créer un formulaire de saisie

http://forum.opencart.com/viewtopic.php?t=53452

introduction à opencart

Documents