C’est souvent en mettant Varnish en place que des problématiques non prévues débarquent dans un projet.
Un fil d’ariane selon la navigation, c’est mal !
Parmi celles-ci, le soucis du fil d’ariane qui diffère selon la navigation du client.
Beaucoup diront que cette fonctionnalité de Magento n’est pas très SEO-friendly, et qu’avoir un fil d’ariane différent sur une même page est complètement naze.
Ce que le client veut, le développeur fera
Même après avoir fait la remarque annoncée ci-dessus, la demande initiale de mettre en ajax le fil d’ariane reste d’actualité. Je prend donc mon courage à deux mains, et voici une manière simple de le faire.
L’évènement
J’ai besoin de mettre en ajax le fil d’ariane uniquement sur les fiches produit, donc l’événement que je déclare est le suivant :
<frontend>
<events>
<controller_action_layout_render_before_catalog_product_view>
<observers>
<init_breadcrumbs_request>
<type>singleton</type>
<class>mymodule_varnish/observer</class>
<method>initAjaxBreadcrumbs</method>
</init_breadcrumbs_request>
</observers>
</controller_action_layout_render_before_catalog_product_view>
</events>
</frontend>
Pour le faire sur les pages catégories, l’événement est controller_action_layout_render_before_catalog_product_view
Pour le faire sur toutes les pages : controller_action_layout_render_before
La méthode de l’Observer
Je déclare donc un Observer dans les Model de mon module, avec la méthode suivante :
public function initAjaxBreadcrumbs(Varien_Event_Observer $observer)
{
/** @var $layout Mage_Core_Model_Layout */
$layout = Mage::getSingleton('core/layout');
if ($layout) {
$request = Mage::app()->getFrontController()->getRequest();
if ((bool) $request->getParam('is_breadcrumbs', false)) {
$_SERVER['REQUEST_URI'] = preg_replace('/is_breadcrumbs=\d/i', '', $request->getRequestUri());
Mage::app()->getFrontController()->getResponse()->setHeader('content-type', 'application/json');
$layout->removeOutputBlock('root');
$breadcrumbsBlock = $layout->getBlock('breadcrumbs');
$navAjaxContainer = $layout->createBlock('core/template', 'mymodule_navigation_ajax');
$navAjaxContainer->setData('breadcrumbs', mb_convert_encoding($breadcrumbsBlock->toHtml(), 'UTF-8', 'UTF-8'));
$layout->addOutputBlock('mymodule_navigation_ajax', 'toJson');
}
}
}
Avec ça, toutes les URL de fiche produit qui passeront dans mon Observer vérifieront l’existance d’un paramètre dans l’URL « is_breadcrumbs ». En l’ajoutant dans mon URL d’appel cela donne : http://www.monsite.fr/mon-produit-magento.html?is_breadcrumbs=1
Mon URL renvoi un JSON :
Il me suffit de faire un appel AJAX de cette URL et de placer le HTML dans le div souhaité 🙂
L’URL de mon appel AJAX sera mon URL courante, avec l’ajout du paramètre is_breadcrumbs !
Et voilà ! Vous avez toutes les cartes en mains pour ajaxifier votre fil d’ariane ! Si vous n’avez pas de retour JSON, vérifiez que le block breadcrumbs est bien présent dans le layout de votre page !
Ne pas cacher l’appel AJAX
Bien sur n’oubliez pas de ne pas cacher votre appel AJAX dans Varnish !
Mémoriser quand même la dernière catégorie visitée
Pour afficher correctement le fil d’ariane, Magento a besoin de la dernière catégorie affichée par le visiteur.
Pour cela, dans ma page HTML de catégorie, je déclare une variable javascript ‘catIdForJson’, n’importe où sur ma page, avec la valeur de ma catégorie courante. Cette valeur sera mise en cache varnish pour chaque catégorie.
<script type="text/javascript">
var catForJson = <?php echo json_encode($_category->getId()); ?>
</script>
Ensuite, à chaque page catégorie (que je cible avec ma variable catForJson, si elle existe c’est que c’est une page catégorie), j’ajoute également un appel Ajax avec ma variable JS en paramètre.
// manage breadcrumbs and prev-next links
if(typeof catForJson !== 'undefined'){
jQuery.ajax({
method: "POST",
data: { catId: catForJson },
url: "/ajaxinfos/header/category",
cache :false,
success: function(html) {
// If you want to do something
}
});
}
Dans mon controller appelé en ajax voici ce que je fais :
public function categoryAction(){
$post = $this->getRequest();
$catId = $post->getParam('catId');
Mage::getSingleton('catalog/session')->setLastVisitedCategoryId($catId);
}
Aller plus loin !
Pour faire encore plus propre, vous pouvez définir un fil d’ariane pour les appels hors AJAX.
Cela permettra d’avoir un breadcrumb de base pour le SEO (pris en compte par les moteurs de recherche), qui sera rafraichi en AJAX selon la navigation du client. Cela permet d’allier SEO et « confort » de navigation pour l’utilisateur !