The larger a store becomes, the more complicated its catalog structure is. Simultaneously the store menu gets more complicated as well. Database queries get more complex and more time is needed for the page generation.
Server-side caching (NGINX in our case) and AJAX requests to the submenu items can be used as one of the ways to optimize the rendering process.
The idea is that server pulls out submenu items on a separate request. According to such an approach, only a top-menu level is generated during the page load. While opening a submenu item, the server checks whether there is a cached element and if necessary, generates it and sends to the client. Cash invalidation is not considered here, as this process should be triggered by the catalog structure change.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
// server request to get a static file $.ajax({ type: 'GET', url: '/cache/menu/' + filename, async: true, dataType : "json", success: function(jsonData) { if (typeof jsonData != 'undefined' && typeof jsonData.menu_html != 'undefined') { $.each(jsonData.menu_html, function(key, value) { $('#bmm-container-id-'+key).html(value); }); $('#bmm-title-id-'+menu_id).addClass('ajax_loaded'); $('#bmm-title-id-'+menu_id).removeClass('ajax_loading'); } belvgOverlay.init(); }, // if static file can't be found, cache must be generated statusCode: { 404: function() { $.ajax({ type: 'POST', url: megamenu_ajax_controller, async: true, dataType : "json", data: {module:'belvg_megamenu', action:'GetMenuItems', ajax:'true', menu_items:menu_items}, success: function(jsonData) { if (typeof jsonData != 'undefined' && typeof jsonData.menu_html != 'undefined') { $.each(jsonData.menu_html, function(key, value) { $('#bmm-container-id-'+key).html(value); }); $('#bmm-title-id-'+menu_id).addClass('ajax_loaded'); $('#bmm-title-id-'+menu_id).removeClass('ajax_loading'); } belvgOverlay.init(); } }); } } }); |
And here is the PHP Code, which generates static content. sendStaticJSON() function just saves already generated data into the cache storage and sends it to the client. We haven’t cluttered up the code with functions, not related to cashing.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
protected function sendStaticJSON($response, $ids) { $fs_cache_base = _PS_CACHE_DIR_.'menu/'; $filename = 'submenu_'.implode('_', $ids).'.json'; if (!file_exists($fs_cache_base.$filename)) { nginx_log('menu: saved to "'.$fs_cache_base.$filename.'"'); file_put_contents($fs_cache_base.$filename, $response); } else { nginx_log('menu: file exists "'.$fs_cache_base.$filename.'"'); } header("X-Accel-Redirect: /cache/menu/" . $filename); die(); } |
PrestaShop Development
Take your online store to the next level with BelVG PrestaShop Development
Visit the page
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Igor
