Как установить меню Superfish в Сs-Сart

Всем привет! Сегодня я расскажу как установить меню Superfish в Сs-Сart.

Superfish является расширенным JQuery плагином в стиле Suckerfish, в качестве основы плагина было взято выпадающее меню на CSS и HTML (это меню продолжит работать даже если у пользователя будет отключен javaScript), добавлено много востребованных усовершенствований. Для более подробной информации посетите http://users.tpg.com.au/j_birch/plugins/superfish

Как установить данное меню в html шаблон я уже описывал в статье «Superfish – выпадающее меню работающее на css«. При работе с CMS Сs-СART есть некоторые особенности установки данного плагина.

Решение

1. Для того, чтобы установить Superfish необходимо вначале в самой Сs-Cart поставить модуль «Мои изменения».  Это специальный модуль для внесения собственных изменений в платформу cs-cart. Данный модуль входит в стандартную поставку, его необходимо только активировать.
2. После активации модуля «Мои изменения» необходимо создать файл по пути

   [cscart_root]/design/themes/responsive/templates/addons/my_changes/hooks/index/head_scripts.post.tpl

3. В данный файл прописать то, что должно быть в header для работы Superfish. Например:

   <link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
       <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
       <script type="text/javascript" src="js/hoverIntent.js"></script>
   
       <script type="text/javascript" src="js/superfish.js"></script>
       <script type="text/javascript">
   
       // initialise plugins
       jQuery(function(){
         jQuery('ul.sf-menu').superfish();
       });
   
       </script>

4.  Далее создать HTML блок, в который добавить нужное вам меню. Например:

   <ul class="sf-menu">
         <li class="current">
           <a href="#a">menu item</a>
   
           <ul>
             <li>
               <a href="#aa">menu item that is quite long</a>
             </li>
             <li class="current">
               <a href="#ab">menu item</a>
               <ul>
                 <li class="current"><a href="#">menu item</a></li>
   
                 <li><a href="#aba">menu item</a></li>
                 <li><a href="#abb">menu item</a></li>
                 <li><a href="#abc">menu item</a></li>
                 <li><a href="#abd">menu item</a></li>
               </ul>
             </li>
             <li>
   
               <a href="#">menu item</a>
               <ul>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
   
                 <li><a href="#">menu item</a></li>
               </ul>
             </li>
             <li>
               <a href="#">menu item</a>
               <ul>
                 <li><a href="#">menu item</a></li>
   
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
               </ul>
             </li>
           </ul>
   
         </li>
         <li>
           <a href="#">menu item</a>
         </li>
         <li>
           <a href="#">menu item</a>
           <ul>
             <li>
   
               <a href="#">menu item</a>
               <ul>
                 <li><a href="#">short</a></li>
                 <li><a href="#">short</a></li>
                 <li><a href="#">short</a></li>
                 <li><a href="#">short</a></li>
   
                 <li><a href="#">short</a></li>
               </ul>
             </li>
             <li>
               <a href="#">menu item</a>
               <ul>
                 <li><a href="#">menu item</a></li>
   
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
               </ul>
             </li>
             <li>
   
               <a href="#">menu item</a>
               <ul>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
   
                 <li><a href="#">menu item</a></li>
               </ul>
             </li>
             <li>
               <a href="#">menu item</a>
               <ul>
                 <li><a href="#">menu item</a></li>
   
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
               </ul>
             </li>
             <li>
   
               <a href="#">menu item</a>
               <ul>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
                 <li><a href="#">menu item</a></li>
   
                 <li><a href="#">menu item</a></li>
               </ul>
             </li>
           </ul>
         </li>
         <li>
           <a href="#">menu item</a>
         </li>	
       </ul>

5. Скачать Superfish и скопировать содержимое папок css и js и в папки Cs-cart.
6. Почистить кэш.

Поздравляю! Плагин Superfish установлен и работает.