Intenso

This integration was tested with Amasty Layered Navigation v2.9.4

To integrate Improved Layered Navigation from Amasty with the Intenso Theme please follow these steps:

1. Install the extension following the developer’s instructions
2. Open the following file: etc/modules/itactica_layerednavigation.xml and disable the Layered Navigation extension included with Intenso by changing:

   <active>true</active>

    to  

   <active>false</active>

    Save the file and close it.
3. Open the following file: app/design/frontend/intenso/default/layout/local.xml 
   
   a) Inside the <catalog_category_default> layout handler:
    Change the 3 instances of catalog.leftnav to amshopby.navleft
   b) Inside the <catalog_category_layered> layout handler:
    Change the 3 instances of catalog.leftnav to amshopby.navleft
   c) Inside the <catalogsearch_result_index> layout handler:
    Change the 3 instances of catalogsearch.leftnav to amshopby.navleft Save the changes and close the file.
4. Open the following file: app/design/frontend/intenso/default/template/catalog/product/list.phtml
   
    a) Change: <?php echo $this->getChildHtml('catalog.leftleft'); ?>
    To: <?php echo $this->getChildHtml('amshopby.navleft'); ?>
   
    b) Comment out or remove the following line: <?php echo $this->getChildHtml('catalogsearch.navleft'); ?> Save the changes and close the file.
5. Open the following file: app/code/local/Amasty/Shopby/Block/Catalog/Layer/View.php
   
    a) Locate the _afterToHtml($html) function and comment or delete the code highlighted in the picture below.
   
    b) Change this line:
   $html = str_replace('block-layered-nav', 'block-layered-nav ' . $this->getBlockId(), $html);
   
    To this: $html = str_replace('layered-nav-container', 'layered-nav-container block-layered-nav ' . $this->getBlockId(), $html); Save the changes and close the file.
6. Open the following file: js/amasty/amshopby/amshopby-ajax.js
   
    a) On line 15, change this code:
   $$('div.block-layered-nav a', amshopby_toolbar_selector + ' a').
   
    To this:
   $$(amshopby_toolbar_selector + ' a'). b) On line 39, change this code:
   $$('div.block-layered-nav select.amshopby-ajax-select', amshopby_toolbar_selector + ' select').
   
    To this:
   $$('.block-layered-nav select.amshopby-ajax-select', amshopby_toolbar_selector + ' select'). c) On line 294, change this code:
   var amshopby_toolbar_selector = 'div.toolbar';
   
    To this:
   var amshopby_toolbar_selector = 'nav.layered-nav-container'; d) Add the following code just before the closing curly brace of the amshopby_external() function (line 355):
   
   

   // Intenso theme
   echo.init({ // init lazy loading of images
       offset: 100,
       throttle: 250,
       unload: false
   });
   $j('#catalog-listing').trigger('isotope:update');
   Intenso.libs.ui.init();
   Intenso.libs.productsGrid.init();
   

   e) Locate the function amshopby_ajax_update(data) on line 167 and replace the whole function by the following code:
   

   function amshopby_ajax_update(data){
   
       //update category (we need all category as some filters changes description)
       var tmp = document.createElement('div');
       tmp.innerHTML = data.page;
   
       var title = data.title;
       if (title) {
           $$('title')[0].update(title);
       }
   
       var block = amshopby_get_container();
       if (block) {
           $('amshopby-page-container').replace(data.page);
       }
   
       $$('div.amshopby-overlay').each(function(e){
           e.hide();
       });
   
       if (typeof amshopby_jquery_init !== 'undefined') {
           amshopby_jquery_init();
       }
       amshopby_start();
       amshopby_ajax_init();
       amshopby_move_top_filter();
   
       try {
           var categoryProducts = $$('.category-products, .catblocks').first();
           var colLeftFirst = amshopby_get_container().parentNode.select('.col-left-first, .amshopby-filters-left').first();
           if(colLeftFirst && categoryProducts){
               var parent = categoryProducts.parentNode;
               parent.insertBefore(colLeftFirst, categoryProducts);
           }
           amshopby_external();
       } catch (e) {
           console.debug(e);
       }
   }
   

   Save the changes and close the file.
7. Open the following file: app/design/frontend/intenso/default/template/catalog/layer/view.phtml
   
    Change line 19 from this:
   

   <nav class="layered-nav-container top-bar left-off-canvas-menu main-nav<?php if(Mage::getStoreConfig('itactica_layerednavigation/catalog/layered_nav_expanded')): ?> open<?php endif; ?><?php if(Mage::getStoreConfig('itactica_layerednavigation/catalog/remember_filter_display')): ?> remember<?php endif; ?>" role="navigation" data-topbar>

    To this: 

   <nav class="layered-nav-container top-bar left-off-canvas-menu main-nav amshopby-filters-left open remember" role="navigation" data-topbar>

    Save the changes and close the file.
8. Enable the custom.css file of the theme by following these instructions and add the following CSS rules to that file: 

   div.amshopby-page-container {
       position: initial;
   }
   .layered-nav-container .amshopby-attr-selected:before,
   .amshopby-cat.active > a:before,
   .amshopby-attr.checked:before{
       content: "\e617";
       /* replace this color by your main color */
       color: #27ccc0;
   }
   .amshopby-filters-left .block-subtitle {
       margin: 20px 0 0;
       font-size: 1rem;
       color: #000;
   }
   .amshopby-filters-left .btn-remove {
       font: 0/0 a !important;
       display: inline-block;
       width: 20px;
       height: 20px;
       color: transparent;
       position: relative;
       float: right;
   }
   .amshopby-filters-left .btn-remove:before {
       top: 2px !important;
   }
   .amshopby-filters-left .btn-remove-inline {
       line-height: 0.5rem !important;
       margin-left: 2px;
   }
   .layered-nav .currently {
       margin-top: 0;
   }
   .layered-nav .currently li {
       padding-left: 0;
       font-size: 0.8125rem;
   }
   .layered-nav .currently li a:before {
       position: relative;
       float: right;
       top: 10px;
       font-size: 9px;
   }
   .amshopby-advanced li.level2 {
       padding-left: 20px;
   }
   .amshopby-advanced li.active > a,
   .amshopby-cat > a {
       color: #555 !important;
       font-weight: normal;
   }
   .amshopby-advanced li.active:hover > a,
   .amshopby-cat:hover > a {
       color: #000 !important;
   }
   li.amshopby-advanced {
       padding-left: 0 !important;
   }
   div.amshopby-overlay div {
       position: fixed;
       top: 35%;
       left: 48%;
   }
   /* Small screens */
   @media only screen and (max-width: 40em) {
       .amshopby-filters-left .block-subtitle,
       .layered-nav .currently li,
       .layered-nav .currently li span {
           color: #fff;
       }
       .layered-nav .currently li .label {
           color: #c4c4c4;
       }
       .layered-nav .currently li {
           line-height: 30px;
       }
       .amshopby-filters-left .btn-remove {
           top: 7px;
       }
   }

    Save the changes and close the file.
9. Open the following file: skin/frontend/intenso/default/js/intenso.js
   
    Locate these lines of code around line 594:
   

   logo = '<li class="logo-fixed">' + logo + '</li>';
   $('.main-header nav.top-bar.main-nav .top-bar-section .left').prepend(logo);

   Enclose both line with the following IF statement as shown in the picture:
   

   if ($('.logo-fixed').length == 0) {
       logo = '<li class="logo-fixed">' + logo + '</li>';
       $('.main-header nav.top-bar.main-nav .top-bar-section .left').prepend(logo);
   }

   Save the changes and close the file.