1. F. Abouzaid Page 1
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
2. F. Abouzaid Page 2
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
3. F. Abouzaid Page 3
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
4. F. Abouzaid Page 4
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.
5. F. Abouzaid Page 5
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.
6. F. Abouzaid Page 6
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 .
7. F. Abouzaid Page 7
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.
8. F. Abouzaid Page 8
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.
9. F. Abouzaid Page 9
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?
10. F. Abouzaid Page 10
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
11. F. Abouzaid Page 11
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.
12. F. Abouzaid Page 12
Les modules: développement
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.
13. F. Abouzaid Page 13
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
14. F. Abouzaid Page 14
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.
• Remplacez 'information' par 'salut' dans le fichier.
• 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
• Remplacez 'information' par 'salut' dans le fichier.
• 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.
15. F. Abouzaid Page 15
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.
16. F. Abouzaid Page 16
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
17. F. Abouzaid Page 17
Créer 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
CatalogControllerInformation
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
catalogviewthemedefaulttemplateInformation
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
cataloglanguageenglishInformation
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
18. F. Abouzaid Page 18
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;
}
}
?>
19. F. Abouzaid Page 19
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
);
$this->data['breadcrumbs'][] = array(
'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 {
20. F. Abouzaid Page 20
$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();
$this->data['breadcrumbs'][] = array(
'text' => $this->language->get('text_home'),
'href' => $this->url->link('common/home'),
'separator' => false
);
$this->data['breadcrumbs'][] = array(
'text' => $this->language->get('heading_title'),
'href' => $this->url->link('information/news'),
'separator' => $this->language->get('text_separator')
);
if ($news) {
$this->data['breadcrumbs'][] = array(
'text' => $news['title'],
'href' => $this->url->link('information/news/news',
'news_id=' . $news_id),
'separator' => $this->language->get('text_separator')
);
$this->document->setTitle($news['title']);
$this->data['heading_title'] = $news['title'];
$this->data['description'] =
html_entity_decode($news['description']);
if (file_exists(DIR_TEMPLATE . $this->config-
>get('config_template') . '/template/information/news.tpl')) {
23. F. Abouzaid Page 23
<?php } ?>
</div>
<h1><?php echo $heading_title; ?></h1>
<p><?php echo $description; ?></p>
<?php echo $content_bottom; ?>
</div>
<?php echo $footer; ?>
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);
24. F. Abouzaid Page 24
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
25. F. Abouzaid Page 25
- 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>
26. F. Abouzaid Page 26
/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>
27. F. Abouzaid Page 27
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; ?>]]>
28. F. Abouzaid Page 28
</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.
29. F. Abouzaid Page 29
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.
30. F. Abouzaid Page 30
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. ";
}
31. F. Abouzaid Page 31
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[
$this->data['code'] = '';
]]></search>
<add><![CDATA[
$this->load->model('account/order');
$latest_orders = $this->model_account_order-
>getOrders(0,1);
33. F. Abouzaid Page 33
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/
34. F. Abouzaid Page 34
5. La nouvelle langue devrait apparaître dans l'entête de vos pages.
35. F. Abouzaid Page 35
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/
36. F. Abouzaid Page 36
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.
37. F. Abouzaid Page 37
Gérer les thèmes:
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.
38. F. Abouzaid Page 38
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:
• catalogviewthemedefaultstylesheet*.*
• catalogviewthemedefaultimage*.*
• catalogviewthemedefaulttemplatecommonheader.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.
39. F. Abouzaid Page 39
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">
<?php echo $content_top; ?>
<h1 style="display: none;"><?php echo $heading_title; ?></h1>
<?php echo $content_bottom; ?>
</div>
</div>
<?php echo $footer; ?>
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
catalogviewthememonThemePersostylesheetstylesheet.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 {
40. F. Abouzaid Page 40
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.
41. F. Abouzaid Page 41
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:
42. F. Abouzaid Page 42
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".
43. F. Abouzaid Page 43
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">
<?php echo $content_top; ?>
<h1><?php echo $heading_title; ?></h1>
<div><?php echo $welcome_text; ?></div>
<?php echo $content_bottom; ?>
</div>
<?php echo $footer; ?>
Les modifications que l’on a fait directement dans les fichiers english.php et home.php
devraient être faites par vQmod.
44. F. Abouzaid Page 44
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
45. F. Abouzaid Page 45
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:
46. F. Abouzaid Page 46
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!
47. F. Abouzaid Page 47
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);
}
48. F. Abouzaid Page 48
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);
}
}
}
if (file_exists(DIR_TEMPLATE . $this->config-
>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.
49. F. Abouzaid Page 49
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') { ?>
50. F. Abouzaid Page 50
<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.
51. F. Abouzaid Page 51
Améliorer la sécurité 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
52. F. Abouzaid Page 52
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.1VC11binariesapachebin
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.
53. F. Abouzaid Page 53
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
54. F. Abouzaid Page 54
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.
55. F. Abouzaid Page 55
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
