Moushe.ru

Блог обо всём

OcStore 1.5.4 Bootstrap template (1 часть)



Сегодня мне поставили задание, “забутстрапить” шаблон для OcStore 1.5.4. Раз задача поставлена, будем делать.

Bootstrap Opencart 1

Как устанавливать OcStore вы наверняка уже знаете и сами, поэтому переходим сразу к созданию шаблона.

Список задач на сегодня:

1. Установим OcStore 1.5.4 (самостоятельно)

2. Скачаем Bootstrap 2.3.0

3. Создаём новый шаблон bootsmy

4. Подключаем Bootstrap

Приступим:

1. Устанавливаем OcStore (Забираем тут)

2. Скачиваем Bootstrap (Забираем тут)

3. Открываем папку ../catalog/view/theme и видим в ней папку default, копируем её себе на рабочий стол компьютера и переименовываем её в bootsmy, теперь забрасываем её обратно на хостинг ( или в xampp, openserver и т.д. )

(P.S.около 8 лет пользовался xampp’ом, но недавно узнал об OpenServer, теперь пользуюсь только им – очень удобная программа. Ссылка на оф сайтOpenServer)

3.1. Открываем файл ../catalog/view/theme/bootsmy/template/common/header/tpl и изменяем это (стр — строка):

19 стр - <link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />

35 стр - <link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie7.css" />

38 стр - <link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />

на это:

19 стр - <link rel="stylesheet" type="text/css" href="catalog/view/theme/bootsmy/stylesheet/stylesheet.css" />

35 стр - <link rel="stylesheet" type="text/css" href="catalog/view/theme/bootsmy/stylesheet/ie7.css" />

38 стр - <link rel="stylesheet" type="text/css" href="catalog/view/theme/bootsmy/stylesheet/ie6.css" />

Сохраняем изменения.

3.2. Открываем админку: Система/Настройка/Изменить/Витрина/Шаблон магазина/bootsmy/Сохранить.

4. Открываем папку ../catalog/view/theme/bootsmy и перенесём в неё папку bootstrap (со всем её содержимым, на всякий случай откройте папку bootstrap и убедитесь что в ней лежат папки css, img, js, а не ещё одна папка bootstrap, это очень важно Улыбка) из скаченного архива bootstrap.zip.

4.1. Теперь откроем файл ../catalog/view/theme/bootsmy/template/common/header/tpl и после этой строки (19):

<link rel="stylesheet" type="text/css" href="catalog/view/theme/bootsmy/stylesheet/stylesheet.css" />

вставим эту:

<link rel="stylesheet" type="text/css" href="catalog/view/theme/bootsmy/bootstrap/css/bootstrap.min.css" />

а после этой (24):

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>

вставим эту:

<script type="text/javascript" src="catalog/view/theme/bootsmy/bootstrap/js/bootstrap.min.js"></script>

Обновив витрину магазина и пощёлкав по товарам и страницам вы можете увидеть что некоторые элементы шаблона “поехали”, не волнуйтесь мы это исправим в наших уроках.

Поздравляю, вы подключили к своему сайту Bootstrap.

11 Комментарий

  1. google.com Max Bogdanov

    26.04.2013 at 04:52

    Написали бы что это за Bootstrap и зачем он нужен в Opencart?

    Ладно буду делать эти уроки. Кстати спасибо за то что обновляете эти уроки. Люди, которые вообще ничего не понимают в движках и веб-программировании по вашим урокам могут чему-то научится. Этот как старт.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      26.04.2013 at 13:12

      Twitter bootstrap это набор css и html стилей для быстрого создания шаблона сайта или админки. Содержит в себе кнопки, списки, табы, окна ввода, иконки и т.д.

  2. Спасибо за то, что делитесь знаниями!
    Очень ценные, качественные материалы.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      22.08.2013 at 23:54

      Пожалуйста.

  3. google.com Денис Захаров

    12.11.2014 at 20:40

    для 1.5.5.1.2 это тоже актуально?

    • Актуально, но я сейчас раздумываю о новом цикле статей для 15512 и думаю может подключить к работе бутстрап и поработать с ним более детально, хотя и без бутстрапа можно делать замечательные вещи 🙂

  4. Спасибо)
    А bootstrap 3 будет работать?

  5. здравствуйте!
    спасибо за полезную информацию)
    а не предполагается появление статей на тему “забутстрапить” 3м бутстрапом Opencart 2.0? в частности, как прикрутить собственноручно сверстанный в bootstrap 3 шаблон?

    • У Опена 2 большинство шаблонов бутстрап (в том числе и default) — по вёрстке не напишу — слишком много времени займёт — если сами не сможете сверстать и натянуть на cms свой макет наймите фрилансера.

  6. да я сама фрилансер, все это осваивающий) спасибо за ответ и надеюсь на продолжение статей по опен 2)

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

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика