Moushe.ru

Блог обо всём

OcStore 1.5.5.1.2 мини-улучшение админки (2 часть)



Продолжим улучшать админку CMS OcStore 1.5.5.1.2, в этой статье я решил рассказать вам как можно обновить стандартный wysiwyg редактор CKEditor до последней полной версии, и как быстро и легко можно улучшить стандартный файловый менеджер.

ckeditor-8ckeditor-9

Задачи на сегодня:

1. Скачаем последнюю версию CKEditor

2. Подготовим файлы

3. Обновим наш редактор CKEditor

4. Улучшим файловый менеджер

5. Изменим шаблон CKEditor

Приступим:

1. Заходим на официальный сайт http://ckeditor.com/ и нажимаем ссылку Download, выбираем  Full Package и скачиваем к себе на компьютер.

2. Распакуем скаченный архив на рабочий стол компьютера и откроем папку ckeditor, удалим из неё папку samples, она нам не пригодится.

ckeditor-1

3. Открываем любой файловый менеджер и заходим на свой хостинг, переходим в корневую папку своего интернет магазина, переходим в эту папку: ../upload/admin/view/javascript/ и удаляем папку ckeditor, вместо неё заливаем папку ckeditor с рабочего стола вашего компьютера.

ckeditor-2

Теперь вы можете проверить работу обновлённого визуального редактора, очистите кэш своего браузера и откройте в админке любой товар или категорию, вы увидите что ваш визуальный редактор изменился и замечательно работает.

ckeditor-3

4. Если вы добавляете картинки в описание товара через файловый менеджер то вы можете заметить такую проблему – при растягивании окна курсором мыши, правая колонка с картинками имеет фиксированный размер, мне это не очень нравится:

ckeditor-4

будем исправлять, откроем файл ../admin/view/template/common/filemanager.tpl и вместо этих строк (44-52):

#column-right {
background: #FFF;
border: 1px solid #CCC;
float: right;
width: 78%;
height: 320px;
overflow: auto;
text-align: center;
}

вставим эти:

#column-right {
background: #FFF;
border: 1px solid #CCC;
float: right;
width: 78%;
overflow: auto;
text-align: center;
}

смотрим на результат:

ckeditor-5

отлично, одну проблему решили, но осталась вторая – превью изображений имеют разную ширину и все изображения прижаты к левой части колонки — выглядит это всё не очень симпатично, поэтому будем исправлять, вместо этих строк (24-26):

img {
border: 0;
}

вставим эти:

img {
padding: 5px;
height: 105px;
background: #F7F7F7;
border: 1px solid #CCCCCC;
}

а вместо этих строк (55-58):

#column-right div {
text-align: left;
padding: 5px;
}

вставим эти:

#column-right div {
padding: 5px;
}

результат:

ckeditor-6

если вам не нравятся фотографии товаров в стиле снимков поляроид, то вместо этих строк (24-29):

img {
padding: 5px;
height: 105px;
background: #F7F7F7;
border: 1px solid #CCCCCC;
}

вставим эти:

img {
padding: 5px;
height: 105px;
}

результат:

ckeditor-7

на мой взгляд неплохо.

5. Если вам не нравятся мрачноватые кнопки визуального редактора:

ckeditor-8

я покажу вам как установить другой скин кнопок, все скины для CKEditor’а можно посмотреть на официальном сайте: http://ckeditor.com/addons/skins/all, мне нравится вот этот скин: http://ckeditor.com/addon/kama, скачиваем его к себе на компьютер, распаковываем, и забрасываем на хостинг в эту папку: ../admin/view/javascript/ckeditor/skins.

5.1. Откроем файл: ../admin/view/javascript/ckeditor/build-config.js и вместо этой строки (28):

skin: 'moono',

вставим эту:

skin: 'kama',

5.2. Откроем файл: ../admin/view/javascript/ckeditor/ckeditor.js и в двух местах вместо moono вписываем kama (P.S. — можно воспользоваться поиском или заменой в notepad++). Обязательно чистим кэш браузера и любуемся новыми иконками:

ckeditor-9

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

4 Комментария

  1. Дмитрий

    14.04.2015 at 10:19

    Здравствуйте. Существует ли плагин для OcStore, который позволяет видеть разные цены для зарегистрированных и незарегистрированных пользователей?

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

      14.04.2015 at 21:36

      Здравствуйте, может быть и существует, но мне не попадался, смотрите здесь: opencart.com

  2. Владислав, здравствуйте!
    А как сделать, чтобы последнее скачиваемое фото отображалось вверху? Т.е., наверное, сортировку по умолчанию по дате добавления выставить.

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

      19.04.2015 at 16:46

      Здравствуйте. Не возился, не скажу.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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