Всем привет, продолжим “дорабатывать” админку нашего сайта, в этой статье я расскажу вам как сделать несколько полезных переделок, а именно:

  • Зафиксируем кнопки (Сохранить, Отмена) в создании и редактировании категории
  • Зафиксируем кнопки (Сохранить, Отмена) в создании и редактировании производителя
  • Зафиксируем кнопки (Обзор, Сохранить, Отмена) в создании и редактировании товара
  • Зафиксируем кнопки (Сохранить, Отмена) в создании и редактировании статьи
  • Добавим CSS стили нашему блоку кнопок

Если вам интересны эти правки нажмите кнопку Читать далее.

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

  • 1. Работаем с файлом category_form.tpl
  • 2. Работаем с файлом manufacturer_form.tpl
  • 3. Работаем с файлом product_form.tpl
  • 4. Работаем с файлом information_form.tpl
  • 5. Работаем с файлом stylesheet.css

Приступим:

Мне приходится очень много работать с наполнением сайта текстами – писать описание категориям, производителям, товарам и мне очень не удобно проматывать страницу редактирования вверх чтобы сохранить сделанные изменения, поэтому у меня было 2 выхода: или продублировать кнопки Обзор, Сохранить, Отмена в нижнюю часть страницы или более изящное решение зафиксировать кнопки в одном положении, в не зависимости на сколько прокручена страница вниз, естественно я выбрал второе решение.

1. Откроем файл ../admin/view/template/catalog/category_form.tpl и вместо этой строки (5):

<div class="pull-right">

вставим эту:

<div class="pull-right fixed">

2. Откроем файл ../admin/view/template/catalog/manufacturer_form.tpl и вместо этой строки (5):

<div class="pull-right">

вставим эту:

<div class="pull-right fixed">

3. Откроем файл ../admin/view/template/catalog/product_form.tpl и вместо этой строки (5):

<div class="pull-right">

вставим эту:

<div class="pull-right fixed">

4. Откроем файл ../admin/view/template/catalog/information_form.tpl и вместо этой строки (5):

<div class="pull-right">

вставим эту:

<div class="pull-right fixed">

5. Откроем файл ../admin/view/stylesheet/stylesheet.css и в конец файла добавим эти строки:

/* Fixed Button */
.fixed {
position: fixed;
top: 54px;
right: 20px;
z-index: 99;
background: #fff;
padding: 10px;
border: 2px solid #2196F3;
border-radius: 5px;
}

Чтобы увидеть изменения чистим кеш браузера!

Результат наших правок:

На сегодня всё, вступайте в нашу группу и следите за нашими новостями.