Как установить меню 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 установлен и работает.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Posted in CS-CART and tagged , .

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.