Création du module
Publié le
Pour comprendre comment créer un module Thelia 2, veuillez-vous rendez sur la documentation en ligne : http://doc.thelia.net/en/documentation/modules
Nous allons ici utiliser la ligne de commande afin de générer rapidement la base de ce dernier.
Ouvrez votre terminal et saisissez la commande suivante :
Si tout s'est bien passé, vous devriez retrouver l'arborescence suivante dans votre éditeur de texte.
Comme notre module ne va effectuer aucune création de table en base de donnée, nous pouvons supprimer dors et déjà le fichier « schema.xml ». De plus, nous n'avons pas besoin de models, ni de nouvelles boucles, ni d'une vue spécifique à ce module en backoffice ni en frontoffice, nous pouvons donc supprimer les répertoires « AdminIncludes », « Loop », « Model » et « templates ».
Nous nous retrouvons ainsi avec un module à l'arborescence très simple.
Le fichier « AdvancedSearch.php » présent à la racine du module gère en général l'installation du module, il va par exemple lancer un fichier SQL qui va créer certaines tables pour que le module fonctionne. Ici, nous n'avons pas besoin d'agir via ce fichier, nous n'y toucherons donc pas.
La première chose à faire est de renseigner les informations spécifiques à notre module via le fichier « module.xml » du repertoire « Config » comme ceci :
<module>
<fullnamespace>AdvancedSearch\AdvancedSearch</fullnamespace>
<descriptive locale="en_US">
<title>Advanced search engine</title>
<description></description>
</descriptive>
<descriptive locale="fr_FR">
<title>Moteur de recherche avancée</title>
<description></description>
</descriptive>
<version>1.0</version>
<author>
<name>Nom et prénom</name>
<email>adresse e-mail</email>
</author>
<type>classic</type>
<thelia>2.0.0</thelia>
<stability>alpha</stability>
</module>
Le fichier « config.xml » nous est ici inutile car nous n'avons ni boucle, ni formulaire, ni commande, ni autre configuration à fournir à notre module mais nous le laissons présent car il est obligatoire.
Une fois ceci fait, allons activer notre nouveau module dans le backoffice de Thelia 2 dans l'onglet « Modules » :
Passons donc à la gestion de notre nouvelle route dont l'url est « product/ajaxList ». Le principe est simple :
- le navigateur via une requête ajax, appel l'url
- le fichier de routing de notre module fait le lien entre l'url et l'action a effectuer grâce à une méthode d'un controller
- le controller effectue les traitements, dans notre cas il ne fera que renvoyer nos critères de recherche à une vue afin qu'elle soit affichée.
Créons notre fichier « routing.xml » dans le repertoire « Config » comme suit :
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://symfony.com/schema/routing http://symfony.com/schema/routing/routing-1.0.xsd">
<!-- product ajax list -->
<route id="advancedsearch.front.product.ajax-list" path="/product/ajaxList">
<default key="_controller">AdvancedSearch\Controller\Front\ProductController::getListAjaxAction</default>
</route>
</routes>
Nous avons créé une directive indiquant que l'url « product/ajaxList » va lancer l'action « getListAjaxAction » du controller « ProductController » de notre module.
Créons donc ce controller dans « Controller/Front/ProductController.php » :
namespace AdvancedSearch\Controller\Front;
use Thelia\Controller\Front\BaseFrontController;
/**
*
* Gestion en ajax de la liste de produits
*
* @author Nom Prénom <e-mail>
*/
class ProductController extends BaseFrontController
{
public function getListAjaxAction()
{
// Récupération de notre paramétre featureAvailabilityList envoyé par l'ajax
$featureAvailabilityList = $this->getRequest()->get('featureAvailabilityList');
// On remplit notre tableau d'arguments
$args = array(
'featureAvailabilityList' => $featureAvailabilityList
);
// Rendu de la vue ajax/products-list avec passage des arguments
return $this->render('ajax/products-list', $args);
}
}
Il ne nous reste donc plus qu'à créer le fichier « ajax/products-list » dans notre template. Pour ce faire, rendons-nous dans le répertoire « templates/frontOffice/default ».
Dans ce fichier, nous allons copier la boucle présente dans la vue « category.html » qui liste les produits. Mais nous allons nous heurter à un petit problème.
<ul class="product-col-4">
{loop type="product" name="product_list" category={category attr="id"} limit=$limit page=$product_page order=$product_order}
{include file="includes/single-product.html" product_id=$ID hasBtn=true hasDescription=true width="218" height="146"}
{/loop}
</ul>
</div>
En effet, les variables qu'utilise la boucle (category, limit, page et order) ne sont pas passées automatiquement au fichier, il faut donc qu'on le fasse grace à notre appel ajax.
Reprenons donc le fichier « category.html » et fournissons nos argument dans notre javascript.
var limit = "{$limit}",
page = "{$product_page}",
order = "{$product_order}",
categoryId = "{category attr="id"}";
// On passe ces nouvelles variables à notre requete ajax
$('#category-products').load(
'/product/ajaxList',
{literal}
{
limit: limit,
page: page,
order: order,
categoryId : categoryId,
featureAvailabilityList: featureAvailabilityList
}
{/literal}
);
Faisons maintenant transiter ces variables dans la vue grâce à notre controller.
$limit = $this->getRequest()->get('limit');
$order = $this->getRequest()->get('order');
$page = $this->getRequest()->get('page');
$categoryId = $this->getRequest()->get('categoryId');
// On remplit notre tableau d'arguments
$args = array(
'limit' => $limit,
'product_order' => $order,
'product_page' => $page,
'categoryId' => $categoryId,
'featureAvailabilityList' => $featureAvailabilityList
);
Nous pouvons donc maintenant récupérer dans notre fichier « ajax/products-list.html » les variables suivantes : limit, product_order, product_page, categoryId et featureAvailabilityList.
Modifions notre boucle en conséquence :
<ul class="product-col-4">
{loop type="product" name="product_list" feature_availability=$featureAvailabilityList category=$categoryId limit=$limit page=$product_page order=$product_order}
{include file="includes/single-product.html" product_id=$ID hasBtn=true hasDescription=true width="218" height="146"}
{/loop}
</ul>
</div>
Nous pouvons désormais tester notre moteur de recherche, essayons de retrouver notre chaise « Kenny », qui je vous le rappel a les caractéristiques suivantes :
- Marque : Plink
- Couleur : Bleu
- Matière : Tissu (caractéristique que j'ai ajouté en plus)
Essayons de chercher une chaise de couleur bleu :
Deux chaises bleu ressortent dans la recherche, il suffit donc de sélectionner soit la marque soit la matière pour retrouver notre chaise « Kenny ».
Et voilà, nous avons trouvé notre chaise en 2 cliques !
Bien sur, ce moteur de recherche peut être encore amélioré, par exemple vous pouvez voir que la barre d'outil du template par défaut nous affiche « 14 produits » alors qu'il n'y en a qu'un, il suffit de charger cette barre en ajax lorsque vous chargez votre liste de produit afin qu'elle soit recalculée. De même, la pagination sera aussi à gérer ainsi que les critères de trie (par page, par nom et par prix).
Si vous souhaitez télécharger ce module pour Thelia 2, veuillez-vous rendre dans le dépôt github des modules de Thelia. Il est plus complet que ce que nous venons de voir car il s'occupe par exemple de mettre à jour l'ensemble des éléments de la page (barre d'outil compléte et pagination) ou encore de fournir à l'utilisateur un lien afin qu'il puisse partager sa recherche.
Voici le lien : https://github.com/thelia-modules/AdvancedSearch
A vous de jouer !
Ajouter votre commentaire
Les commentaires