{"id":1814,"date":"2018-08-08T13:32:56","date_gmt":"2018-08-08T11:32:56","guid":{"rendered":"https:\/\/www.h-hennes.fr\/blog\/?p=1814"},"modified":"2018-11-30T17:09:35","modified_gmt":"2018-11-30T15:09:35","slug":"prestashop-1-7-ajouter-une-navigation-a-facettes-dans-les-listings","status":"publish","type":"post","link":"https:\/\/www.h-hennes.fr\/blog\/2018\/08\/08\/prestashop-1-7-ajouter-une-navigation-a-facettes-dans-les-listings\/","title":{"rendered":"Prestashop 1.7 : Ajouter une navigation \u00e0 facettes dans les listings"},"content":{"rendered":"

La gestion des listings \u00e0 compl\u00e9tement \u00e9t\u00e9 r\u00e9\u00e9crite sur Prestashop 1.7 , et la bonne nouvelle et qu’ils g\u00e8rent maintenant nativement la navigation \u00e0 facettes ( Tout du moins la partie front \ud83d\ude09 )
\nNous allons voir ensemble comment mettre en place une navigation \u00e0 facette basique sur la page des nouveaux produits.<\/strong><\/p>\n

Sommaire :<\/strong><\/p>\n

    \n
  1. Fonctionnement g\u00e9n\u00e9ral<\/a><\/li>\n
  2. Affichage de facettes<\/a><\/li>\n
  3. Tri et gestion des facettes<\/a><\/li>\n<\/ol>\n

    Cet article est plus dans une d\u00e9marche d’explication du fonctionnement, que dans la r\u00e9alisation d’un module purement fonctionnel, et la r\u00e9alisation est assez chronophage, dans la majorit\u00e9 des cas il sera pr\u00e9f\u00e9rable de passer par un module qui fera cela.
    \n( Le module de navigation \u00e0 facette de Prestashop le permets uniquement sur les cat\u00e9gories )<\/p>\n

    <\/a>Fonctionnement g\u00e9n\u00e9ral<\/strong><\/span><\/p>\n

    Le premier point essentiel \u00e0 noter et qu’il n’est pas n\u00e9cessaire de faire de surcharge, tout peut \u00eatre g\u00e9r\u00e9 via un module \ud83d\ude42<\/p>\n

    Avant de voir ce qu’il faut coder, il est important de comprendre comment fonctionnent les pages de listing sur prestashop 1.7
    \nDans mon exemple on va utiliser le controller NewProductsController<\/strong> ( controllers\/front\/listing\/NewProductsController.php<\/em> ) qui g\u00e8re les nouveaux produits.<\/p>\n

    Lors de son initialisation il appelle la fonction doProductSearch<\/strong> de la classe parente ProductListingFrontController<\/p>\n

        public function init()\r\n    {\r\n        parent::init();\r\n        $this->doProductSearch('catalog\/listing\/new-products');\r\n    }\r\n<\/pre>\n
    Celle-ci appelle la fonction getProductSearchVariables<\/strong> ( j’omets volontairement le cas getAjaxProductSearchVariables qui est parlant puisqu’il rajoute des information sp\u00e9cifiques uniquement lors d’un appel ajax )<\/p>\n
    Le code est un peu long, mais toute la logique des controller listing sous Prestashop est dans cette fonction :
    \nJe laisse les commentaires de base en anglais qui sont plut\u00f4t clairs.<\/p>\n
         \/**\r\n     * This returns all template variables needed for rendering\r\n     * the product list, the facets, the pagination and the sort orders.\r\n     *\r\n     * @return array variables ready for templating\r\n     *\/\r\n    protected function getProductSearchVariables()\r\n    {\r\n        \/*\r\n         * To render the page we need to find something (a ProductSearchProviderInterface)\r\n         * that knows how to query products.\r\n         *\/\r\n \r\n        \/\/ the search provider will need a context (language, shop...) to do its job\r\n        $context = $this->getProductSearchContext();\r\n \r\n        \/\/ the controller generates the query...\r\n        $query = $this->getProductSearchQuery();\r\n \r\n        \/\/ ...modules decide if they can handle it (first one that can is used)\r\n        \/\/ Dans notre cas c'est ICI que le module devra \u00eatre appell\u00e9\r\n        $provider = $this->getProductSearchProviderFromModules($query);\r\n \r\n        \/\/ if no module wants to do the query, then the core feature is used\r\n        if (null === $provider) {\r\n            $provider = $this->getDefaultProductSearchProvider();\r\n        }\r\n \r\n        $resultsPerPage = (int) Tools::getValue('resultsPerPage');\r\n        if ($resultsPerPage &lt;= 0 || $resultsPerPage > 36) {\r\n            $resultsPerPage = Configuration::get('PS_PRODUCTS_PER_PAGE');\r\n        }\r\n \r\n        \/\/ we need to set a few parameters from back-end preferences\r\n        $query\r\n            ->setResultsPerPage($resultsPerPage)\r\n            ->setPage(max((int) Tools::getValue('page'), 1))\r\n        ;\r\n \r\n        \/\/ set the sort order if provided in the URL\r\n        if (($encodedSortOrder = Tools::getValue('order'))) {\r\n            $query->setSortOrder(SortOrder::newFromString(\r\n                $encodedSortOrder\r\n            ));\r\n        }\r\n \r\n        \/\/ get the parameters containing the encoded facets from the URL\r\n        $encodedFacets = Tools::getValue('q');\r\n \r\n        \/*\r\n         * The controller is agnostic of facets.\r\n         * It's up to the search module to use \/define them.\r\n         *\r\n         * Facets are encoded in the \"q\" URL parameter, which is passed\r\n         * to the search provider through the query's \"$encodedFacets\" property.\r\n         *\/\r\n \r\n        $query->setEncodedFacets($encodedFacets);\r\n \r\n        \/\/ We're ready to run the actual query!\r\n \r\n        $result = $provider->runQuery(\r\n            $context,\r\n            $query\r\n        );\r\n \r\n        \/\/ sort order is useful for template,\r\n        \/\/ add it if undefined - it should be the same one\r\n        \/\/ as for the query anyway\r\n        if (!$result->getCurrentSortOrder()) {\r\n            $result->setCurrentSortOrder($query->getSortOrder());\r\n        }\r\n \r\n        \/\/ prepare the products\r\n        $products = $this->prepareMultipleProductsForTemplate(\r\n            $result->getProducts()\r\n        );\r\n \r\n        \/\/ render the facets\r\n        if ($provider instanceof FacetsRendererInterface) {\r\n            \/\/ with the provider if it wants to\r\n            $rendered_facets = $provider->renderFacets(\r\n                $context,\r\n                $result\r\n            );\r\n            $rendered_active_filters = $provider->renderActiveFilters(\r\n                $context,\r\n                $result\r\n            );\r\n        } else {\r\n            \/\/ with the core\r\n            $rendered_facets = $this->renderFacets(\r\n                $result\r\n            );\r\n            $rendered_active_filters = $this->renderActiveFilters(\r\n                $result\r\n            );\r\n        }\r\n \r\n        $pagination = $this->getTemplateVarPagination(\r\n            $query,\r\n            $result\r\n        );\r\n \r\n        \/\/ prepare the sort orders\r\n        \/\/ note that, again, the product controller is sort-orders\r\n        \/\/ agnostic\r\n        \/\/ a module can easily add specific sort orders that it needs\r\n        \/\/ to support (e.g. sort by \"energy efficiency\")\r\n        $sort_orders = $this->getTemplateVarSortOrders(\r\n            $result->getAvailableSortOrders(),\r\n            $query->getSortOrder()->toString()\r\n        );\r\n \r\n        $sort_selected = false;\r\n        if (!empty($sort_orders)) {\r\n            foreach ($sort_orders as $order) {\r\n                if (isset($order['current']) &amp;&amp; true === $order['current']) {\r\n                    $sort_selected = $order['label'];\r\n                    break;\r\n                }\r\n            }\r\n        }\r\n \r\n        $searchVariables = array(\r\n            'label' => $this->getListingLabel(),\r\n            'products' => $products,\r\n            'sort_orders' => $sort_orders,\r\n            'sort_selected' => $sort_selected,\r\n            'pagination' => $pagination,\r\n            'rendered_facets' => $rendered_facets,\r\n            'rendered_active_filters' => $rendered_active_filters,\r\n            'js_enabled' => $this->ajax,\r\n            'current_url' => $this->updateQueryString(array(\r\n                'q' => $result->getEncodedFacets(),\r\n            )),\r\n        );\r\n \r\n        Hook::exec('filterProductSearch', array('searchVariables' => &amp;$searchVariables));\r\n        Hook::exec('actionProductSearchAfter', $searchVariables);\r\n \r\n        return $searchVariables;\r\n    }<\/pre>\n
    En raccourci dans cette fonction notre module pourra renvoyer une classe de provider sp\u00e9cifique gr\u00e2ce \u00e0 cet appel :<\/p>\n
     $provider = $this->getProductSearchProviderFromModules($query);<\/pre>\n
    Ensuite c’est la fonction<\/p>\n
    \/\/ We're ready to run the actual query! \r\n$result = $provider->runQuery( $context, $query ); \r\n<\/pre>\n
    qui va appeller la fonction runQuery du module en lui passant le contexte et la requ\u00eate de recherche.<\/p>\n
    La suite de l’affichage ( facettes , tris, et pagination ) seront g\u00e9r\u00e9s automatiquement \u00e0 partir des informations retourn\u00e9es par le provider de notre module.<\/p>\n
    &nbsp<\/p>\n
    <\/a>Cr\u00e9ation du module et affichage de facettes<\/strong><\/p>\n
    Maintenant que la base est comprise nous pouvons passer \u00e0 la cr\u00e9ation du module, celui-ci s’appellera hh_facetedSearch<\/strong><\/p>\n
    Voici le code de base du module<\/p>\n
    require_once dirname(__FILE__).'\/classes\/Hh_facetedSearchProductSearchProvider.php';\r\nclass Hh_FacetedSearch extends Module\r\n{\r\n \r\n    public function __construct()\r\n    {\r\n \r\n        $this->author = 'hhennes';\r\n        $this->name = 'hh_facetedsearch';\r\n        $this->tab = 'test';\r\n        $this->version = '0.1.0';\r\n        $this->bootstrap = true;\r\n        parent::__construct();\r\n \r\n        $this->displayName = $this->l('HH Faceted Search');\r\n        $this->description = $this->l('HH Sample Facets Implementation');\r\n \r\n \r\n    }\r\n \r\n    \/**\r\n     * Module installation.\r\n     *\r\n     * @return bool Success of the installation\r\n     *\/\r\n    public function install()\r\n    {\r\n        return parent::install()\r\n            &amp;&amp; $this->registerHook('productSearchProvider');\r\n    }\r\n \r\n    \/**\r\n     * Dans ce hook on intercepte la requ\u00eate des nouveaux produits pour y ajouter des facettes\r\n     * @param $params\r\n     * @return Hh_facetedSearchProductSearchProvider\r\n     *\/\r\n    public function hookProductSearchProvider($params)\r\n    {\r\n        $query = $params['query'];\r\n        if ($query->getQueryType() == 'new-products') {\r\n            return new Hh_facetedSearchProductSearchProvider($this);\r\n        }\r\n    }\r\n}<\/pre>\n
    Le point essentiel est qu’il doit \u00eatre greff\u00e9 sur le hook productSearchProvider <\/strong>et qu’il doit retourner une classe qui impl\u00e9mente l’interface PrestaShop\\PrestaShop\\Core\\Product\\Search\\ProductSearchProviderInterface<\/em>
    \nNous cr\u00e9erons le fichier dans classes\/Hh_facetedSearchProductSearchProvider.php<\/em><\/p>\n
    Dans cette \u00e9tape nous allons uniquement afficher des facettes ce qui est g\u00e9r\u00e9 nativement par le controller prestashop.
    \nVoici \u00e0 pr\u00e9sent le code du Product Search Provider, avec les commentaires explicatifs pour faire cela :<\/p>\n
    \r\n\r\n\/\/Use pour la recherche standard \r\nuse PrestaShop\\PrestaShop\\Core\\Product\\Search\\ProductSearchProviderInterface; \r\nuse PrestaShop\\PrestaShop\\Core\\Product\\Search\\ProductSearchContext; \r\nuse PrestaShop\\PrestaShop\\Core\\Product\\Search\\ProductSearchQuery; \r\nuse PrestaShop\\PrestaShop\\Core\\Product\\Search\\ProductSearchResult; \r\nuse PrestaShop\\PrestaShop\\Core\\Product\\Search\\SortOrderFactory; \r\n\r\n\/\/Use pour les facettes \r\nuse PrestaShop\\PrestaShop\\Core\\Product\\Search\\FacetCollection; #Collection de facettes \r\nuse PrestaShop\\PrestaShop\\Core\\Product\\Search\\Facet; #Classe de la facette \r\nuse PrestaShop\\PrestaShop\\Core\\Product\\Search\\Filter; #Classe des filtres \r\nuse PrestaShop\\PrestaShop\\Core\\Product\\Search\\URLFragmentSerializer; #Pour transformer l'url \r\n\r\n\/\/Provider par d\u00e9faut \r\nuse PrestaShop\\PrestaShop\\Adapter\\NewProducts\\NewProductsProductSearchProvider; \r\n\r\nclass Hh_facetedSearchProductSearchProvider implements ProductSearchProviderInterface { \r\n\r\nprivate $module; \r\nprivate $sortOrderFactory; \r\n\r\n\/** \r\n* Instanciation de la classe \r\n* @param Hh_FacetedSearch $module \r\n*\/ \r\npublic function __construct( Hh_FacetedSearch $module ) { \r\n $this->module = $module;\r\n \/\/R\u00e9cup\u00e9ration des tris disponibles par d\u00e9faut\r\n $this->sortOrderFactory = new SortOrderFactory($this->module->getTranslator());\r\n }\r\n\r\n \/**\r\n * @param ProductSearchContext $context\r\n * @param ProductSearchQuery $query\r\n * @return ProductSearchResult\r\n *\/\r\n public function runQuery(\r\n ProductSearchContext $context,\r\n ProductSearchQuery $query\r\n )\r\n {\r\n\r\n \/\/R\u00e9cup\u00e9ration des produits ( aucun changement par rapport au listing des nouveaux produits )\r\n if (!$products = $this->getProductsOrCount($context, $query, 'products')) {\r\n $products = array();\r\n }\r\n\r\n $count = $this->getProductsOrCount($context, $query, 'count');\r\n\r\n \/**\r\n * Gestion du r\u00e9sulat\r\n * Envoi de la productSearchResult\r\n *\/\r\n $results = new ProductSearchResult();\r\n\r\n\r\n if (!empty($products)) {\r\n\r\n \/\/D\u00e9finition des r\u00e9sultats des produits\r\n $results\r\n ->setTotalProductsCount($count)\r\n ->setProducts($products);\r\n \/\/D\u00e9finition des tris disponibles ( Utilisation de ceux par d\u00e9faut )\r\n $results->setAvailableSortOrders(\r\n $this->sortOrderFactory->getDefaultSortOrders()\r\n\r\n );\r\n\r\n \/\/R\u00e9cup\u00e9ration des filtres actifs , il sont situ\u00e9s dans l'url sous la forme q=filter-1|filtre-2 ect..\r\n $activeFilters = explode('|',$query->getEncodedFacets());\r\n \/\/D\u00e9finition des facettes disponibles ( c'est ici qu'on va d\u00e9finir nos facettes )\r\n $results->setFacetCollection(\r\n $this->getSampleFacets($activeFilters)\r\n );\r\n\r\n \/\/D\u00e9finition des facettes actuellement utilis\u00e9es\r\n $results->setEncodedFacets(\r\n $query->getEncodedFacets()\r\n\r\n );\r\n\r\n }\r\n return $results;\r\n\r\n }\r\n\r\n \r\n\r\n \/**\r\n * R\u00e9cup\u00e9ration des produits et du d\u00e9compte\r\n * Dans cette partie on reprends le fonctionnement du controller des nouveaux produits\r\n * \r\n * @param ProductSearchContext $context\r\n * @param ProductSearchQuery $query\r\n * @param type $type\r\n * @return type\r\n *\/\r\n\r\n private function getProductsOrCount(\r\n ProductSearchContext $context,\r\n ProductSearchQuery $query,\r\n $type = 'products'\r\n ) {\r\n\r\n return Product::getNewProducts(\r\n $context->getIdLang(),\r\n $query->getPage(),\r\n $query->getResultsPerPage(),\r\n $type !== 'products',\r\n $query->getSortOrder()->toLegacyOrderBy(),\r\n $query->getSortOrder()->toLegacyOrderWay()\r\n );\r\n \r\n }\r\n\r\n \r\n\r\n \/**\r\n * Fonction d'explication sur comment afficher des facettes\r\n * @return FacetCollection\r\n *\/\r\n protected function getSampleFacets($activeFilters)\r\n\r\n { \r\n\r\n \/\/Gestion des filtres actifs\r\n $activeFiltersQueryString ='';\r\n $activeFiltersQueryString .= implode('|',$activeFilters);\r\n\r\n\r\n \/\/Cr\u00e9ation d'une collection de facettes\r\n $collection = new FacetCollection();\r\n\r\n \/\/Cr\u00e9ation d'une facette\r\n $facet = new Facet();\r\n $facet->setLabel('Facette 1')\r\n ->setType('custom')\r\n ->setDisplayed(true) \/\/Flag pour afficher ou nom la facette\r\n ->setWidgetType('checkbox') \/\/Type de widget\r\n ->setMultipleSelectionAllowed(true); \/\/D\u00e9fini si on peut cocher plusieurs variantes\r\n\r\n\r\n \/\/Ajout de filtres \u00e0 cette facette\r\n $encodedFactetsUrl1 = $activeFiltersQueryString != '' ? $activeFiltersQueryString.\"|test-1\": \"test-1\";\r\n\r\n $filter1 = new Filter();\r\n $filter1->setLabel('filtre 1') \/\/Libell\u00e9 du filtre\r\n ->setDisplayed(true) \/\/Flag pour afficher ou nom le filtre\r\n ->setActive(in_array(\"test-1\",$activeFilters) ? true : false ) \/\/D\u00e9finition si le filtre est actif ou non\r\n ->setType('test') \/\/ Type du filtre\r\n ->setValue('2') \/\/Valeur du filtre\r\n ->setNextEncodedFacets($encodedFactetsUrl1) \/\/Url pour afficher la filtre\r\n ->setMagnitude(1); \/\/Nombre de r\u00e9sultats du filtre\r\n\r\n \/\/Ajout du filtre \u00e0 la facette\r\n $facet->addFilter($filter1); \r\n\r\n $encodedFactetsUrl2 = $activeFiltersQueryString != '' ? $activeFiltersQueryString.\"|test-2\": \"test-2\";\r\n\r\n \/\/Idem pour un 2\u00e8me filtre\r\n $filter2 = new Filter();\r\n $filter2->setLabel('filtre 2') \/\/Libell\u00e9 du filtre\r\n ->setDisplayed(true) \/\/Flag pour afficher ou nom le filtre\r\n ->setActive(in_array(\"test-2\",$activeFilters) ? true : false ) \/\/D\u00e9finition si le filtre est actif ou non\r\n ->setType('test') \/\/ Type du filtre\r\n ->setValue('2') \/\/Valeur du filtre\r\n ->setNextEncodedFacets($encodedFactetsUrl2) \/\/Url pour afficher la filtre\r\n ->setMagnitude(3); \/\/Nombre de r\u00e9sultats du filtre\r\n \/\/Ajout du filtre \u00e0 la facette\r\n $facet->addFilter($filter2); \r\n\r\n \r\n \/\/Ajout de la facette \u00e0 la collection\r\n $collection->addFacet($facet);\r\n\r\n \/\/Renvoi de la collection de facette\r\n return $collection;\r\n }\r\n \r\n \/**\r\n * Provider de recherche par d\u00e9faut\r\n * @return NewProductsProductSearchProvider\r\n *\/\r\n protected function getDefaultProductSearchProvider()\r\n {\r\n return new NewProductsProductSearchProvider(\r\n Context::getContext()->getTranslator()\r\n );\r\n }\r\n}\r\n<\/pre>\n
    La s\u00e9lection \/ d\u00e9selection est fonctionnelle lorsqu’on clique sur les diff\u00e9rents \u00e9l\u00e9ments et tous les param\u00e8tres sont bien pass\u00e9s.
    \nNotre navigation \u00e0 facette est en place ( sans prise en compte des donn\u00e9es )<\/p>\n
    \"Navigation<\/p>\n
    <\/a>Tri et gestion des facettes<\/strong><\/p>\n
    Maintenant que la navigation \u00e0 facette est fonctionnelle la prochaine \u00e9tape est de renvoyer uniquement les facettes et les produits disponibles pour la s\u00e9lection demand\u00e9es.
    \nPour cette partie nous allons donc rajouter un filtre sur les cat\u00e9gories par d\u00e9faut des produits.<\/p>\n
    Pour cela nous allons devoir rajouter 2 nouvelles fonction dans notre module :<\/p>\n