Оптимизация страницы добавления/редактирования товара

norb

norb

Пользователь
Всем привет. Нужно максимально быстро и удобно добавлять/редактировать товар.
Давайте поговорим о том как добиться удобства, какими хаками, модулями можно добиться полного удобства.
Есть много модулей которые оптимизируют некоторые части интерфейса этой части пу. Как к примеру удобное добавления изображения товара или обеднение всех input полей в одну страницу. Однако из всей этой солянки нужно выбрать лучшие решения и добиться одного результата.

В моей компании 6000 товаров и они постоянно заменяются новинками. В панели без модулей упрощающих жизнь, добавление и редактирование товара занимает вечность. По этой причине решил заняться этой проблемой на своем сайте.
Прошу делитесь опытом, предлагайте модули, поделитесь своими решениями.
Из проблем выделяю: Выбор категорий во вкладке "привязки" , не удобна вся вкладка "Атрибуты", и убогая вкладка "изображение". Это то что по моему мнению занимает лишнее время при добавлении товара.
 
strateg2010

strateg2010

Пользователь
я на своих проектах ставлю Admin Quick Edit Pro для более удобного редактирования товара не заходя на страницу настроек (зарубежный аналог Batch Editor) только как по мне удобней все запросы собственно Ajax и не требует танцев с бубном.
Выбирать категории просто, выделил что надо дважды нажал по полю категории, появился список выбрать категорию и все товары перепривязались к нужной "Главной категории", для добавления атрибутов, есть кнопка "A" (добавляется в настройках модуля), все просто: нажимаем открывается окно атрибутов, выбираем атрибуты, нажимаем сохранить. Изображения тоже самое.
-------------
для добавления товаров CSV Price Pro + парсер. и мне в полне хватает.
 
фдлщк

фдлщк

Пользователь
  • Обновим визуальный редактор
  • Добавим в исходный код нумерацию строк и подсветку синтаксиса
Для просмотра ссылки Войди или Зарегистрируйся Для просмотра ссылки Войди или Зарегистрируйся
Если вам интересны эти правки нажмите кнопку Читать далее.

Список задач на сегодня:
  • 1.0. Скачаем Summernote последней версии
  • 1.1. Подготовим файлы
  • 1.2. Обновим Summernote 0.8.1 (установленный в OcStore 2.3.0.2.3) до последней версии (на момент написания статьи последняя версия 0.8.6 )
  • 1.3. Настроим панель инструментов нашего редактора
  • 2. Добавим визуальный редактор и подсветку синтаксиса (исходный код)
Приступим:
1.0. Зайдём на оф. сайт производителя визуального текстового редактора: Для просмотра ссылки Войди или Зарегистрируйся и скачаем последнюю версию (круглая, красная кнопка).
1.1. Распаковываем скачанный нами архив, вы увидите кучу файлов и папок, не пугайтесь, нам нужна всего одна папка – dist, в ней уже собрано всё что нам нужно.
1.2. Откроем папку ../admin/view/javascript/summernote и удалим её содержимое кроме файла opencart.js, после этого перекинем в неё содержимое папки dist.
P.S. – можно и просто заменить старые файлы новыми, но вдруг останется что-то лишнее от старой версии Summernote
Если вы не любите большого количества не нужных файлов зайдите в папку: ../admin/view/javascript/summernote/lang и удалите все неугодные вам языки, например я оставил всего 2 файла (русский, обычный и сжатый файлы).
Теперь почистим кеш нашего браузера и проверим как работает наш редактор.
Для просмотра ссылки Войди или Зарегистрируйся
Всё работает и справка показывает нам новую версию нашего редактора (на скриншоте выделено синим)
1.3. Откроем файл ../admin/view/javascript/summernote/opencart.js и вместо этой строки (18):
['font', ['bold', 'underline', 'clear']],
вставим эту:
['font', ['bold', 'italic', 'underline', 'clear']],
этим мы добавим на панель текстовых стилей кнопку italic (курсив)
а после этой строки (20):
['color', ['color']],
вставим эту:
['fontsize', ['fontsize']],
этим мы добавим в панель инструментов кнопку размер шрифта.
Ещё можно добавить кнопки вперёд – назад (отмена и повтор), хотя они иногда делают не то что нужно, но я их вставлю, а вы действуйте по собственному желанию.
Перед этой строкой (17):
['style', ['style']],
я вставляю эту:
['misc', ['undo', 'redo']],
Обязательно чистим кеш браузера!
Вот что у меня получилось:
Для просмотра ссылки Войди или Зарегистрируйся
2. Я очень часто использую режим исходного кода и мне не хватает удобной подсветки кода и нумерации строк, поэтому я добавлю себе эти необходимые мне функции.
До:
Для просмотра ссылки Войди или Зарегистрируйся
После:
Для просмотра ссылки Войди или Зарегистрируйся
Откроем файл ../admin/view/template/common/header.tpl и перед этой строкой (22):
<link type="text/css" href="view/stylesheet/stylesheet.css" rel="stylesheet" media="screen" />
вставим эти:
<link rel="stylesheet" type="text/css" href="view/javascript/codemirror/lib/codemirror.css">
<script type="text/javascript" src="view/javascript/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="view/javascript/codemirror/lib/xml.js"></script>
<script type="text/javascript" src="view/javascript/codemirror/lib/formatting.js"></script>
Обязательно чистим кеш браузера!
Если вам не нравятся стандартные css стили, можете поработать с файлом стилей ../admin/view/javascript/codemirror/lib/codemirror.css
Результат работы:
Для просмотра ссылки Войди или Зарегистрируйся Для просмотра ссылки Войди или Зарегистрируйся
На сегодня всё, следите за нашими новостями и до новых встреч.
 
фдлщк

фдлщк

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

  • Зафиксируем кнопки (Сохранить, Отмена) в создании и редактировании категории
  • Зафиксируем кнопки (Сохранить, Отмена) в создании и редактировании производителя
  • Зафиксируем кнопки (Обзор, Сохранить, Отмена) в создании и редактировании товара
  • Зафиксируем кнопки (Сохранить, Отмена) в создании и редактировании статьи
  • Добавим 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;
}

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

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

Для просмотра ссылки Войди или Зарегистрируйся

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

Тоже самое можно сделать с любой страницей як примеру правил еще модификаторы modification_form.tpl
 
norb

norb

Пользователь
А как насчет атрибутов? у меня 60 на каждый товар и их заполнение убивает много времени.
К примеру в phpshop не нужно добавлять строку атрибута, в которой нужно указать название атрибута и уже потом вручную указывать
Характеристику как в opencart. То есть там уже есть все нужные поля с названиями, а чтобы не вписывать "128гб озу" в каждый товар phpshop просто выводит ранее заполненные значения из других товаров которых можно выбрать, а не прописывать одно и тоже в каждом товаре. Есть ли модуль упрощающий данный круг ада в opencart?

 
strateg2010

strateg2010

Пользователь
norb написал(а):
А как насчет атрибутов? у меня 60 на каждый товар и их заполнение убивает много времени.
К примеру в phpshop не нужно добавлять строку атрибута, в которой нужно указать название атрибута и уже потом вручную указывать
Характеристику как в opencart. То есть там уже есть все нужные поля с названиями, а чтобы не вписывать "128гб озу" в каждый товар phpshop просто выводит ранее заполненные значения из других товаров которых можно выбрать, а не прописывать одно и тоже в каждом товаре. Есть ли модуль упрощающий данный круг ада в opencart?

Нажмите для раскрытия...
Есть CSV PRICE PRO называется
Добавляем атрибуты:
Основные|Цвет|Красный
Технические характеристики|Цвет подоконника|Золотисто-ромашковый

И так далее.
Можно в екселе такую штуку сделать за минимальное количество времени (формулу прописать один Зар правильно и усе)
 
strateg2010

strateg2010

Пользователь
фдлщк написал(а):
  • Обновим визуальный редактор
  • Добавим в исходный код нумерацию строк и подсветку синтаксиса
Для просмотра ссылки Войди или Зарегистрируйся Для просмотра ссылки Войди или Зарегистрируйся
Если вам интересны эти правки нажмите кнопку Читать далее.

Список задач на сегодня:
  • 1.0. Скачаем Summernote последней версии
  • 1.1. Подготовим файлы
  • 1.2. Обновим Summernote 0.8.1 (установленный в OcStore 2.3.0.2.3) до последней версии (на момент написания статьи последняя версия 0.8.6 )
  • 1.3. Настроим панель инструментов нашего редактора
  • 2. Добавим визуальный редактор и подсветку синтаксиса (исходный код)
Приступим:
1.0. Зайдём на оф. сайт производителя визуального текстового редактора: Для просмотра ссылки Войди или Зарегистрируйся и скачаем последнюю версию (круглая, красная кнопка).
1.1. Распаковываем скачанный нами архив, вы увидите кучу файлов и папок, не пугайтесь, нам нужна всего одна папка – dist, в ней уже собрано всё что нам нужно.
1.2. Откроем папку ../admin/view/javascript/summernote и удалим её содержимое кроме файла opencart.js, после этого перекинем в неё содержимое папки dist.
P.S. – можно и просто заменить старые файлы новыми, но вдруг останется что-то лишнее от старой версии Summernote
Если вы не любите большого количества не нужных файлов зайдите в папку: ../admin/view/javascript/summernote/lang и удалите все неугодные вам языки, например я оставил всего 2 файла (русский, обычный и сжатый файлы).
Теперь почистим кеш нашего браузера и проверим как работает наш редактор.
Для просмотра ссылки Войди или Зарегистрируйся
Всё работает и справка показывает нам новую версию нашего редактора (на скриншоте выделено синим)
1.3. Откроем файл ../admin/view/javascript/summernote/opencart.js и вместо этой строки (18):
['font', ['bold', 'underline', 'clear']],
вставим эту:
['font', ['bold', 'italic', 'underline', 'clear']],
этим мы добавим на панель текстовых стилей кнопку italic (курсив)
а после этой строки (20):
['color', ['color']],
вставим эту:
['fontsize', ['fontsize']],
этим мы добавим в панель инструментов кнопку размер шрифта.
Ещё можно добавить кнопки вперёд – назад (отмена и повтор), хотя они иногда делают не то что нужно, но я их вставлю, а вы действуйте по собственному желанию.
Перед этой строкой (17):
['style', ['style']],
я вставляю эту:
['misc', ['undo', 'redo']],
Обязательно чистим кеш браузера!
Вот что у меня получилось:
Для просмотра ссылки Войди или Зарегистрируйся
2. Я очень часто использую режим исходного кода и мне не хватает удобной подсветки кода и нумерации строк, поэтому я добавлю себе эти необходимые мне функции.
До:
Для просмотра ссылки Войди или Зарегистрируйся
После:
Для просмотра ссылки Войди или Зарегистрируйся
Откроем файл ../admin/view/template/common/header.tpl и перед этой строкой (22):
<link type="text/css" href="view/stylesheet/stylesheet.css" rel="stylesheet" media="screen" />
вставим эти:
<link rel="stylesheet" type="text/css" href="view/javascript/codemirror/lib/codemirror.css">
<script type="text/javascript" src="view/javascript/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="view/javascript/codemirror/lib/xml.js"></script>
<script type="text/javascript" src="view/javascript/codemirror/lib/formatting.js"></script>
Обязательно чистим кеш браузера!
Если вам не нравятся стандартные css стили, можете поработать с файлом стилей ../admin/view/javascript/codemirror/lib/codemirror.css
Результат работы:
Для просмотра ссылки Войди или Зарегистрируйся Для просмотра ссылки Войди или Зарегистрируйся
На сегодня всё, следите за нашими новостями и до новых встреч.
Нажмите для раскрытия...
Когда то давно делал модуль окмод. Кажется есть на компе где то. Не ставлю его из за того ооооочень редко что либо редактирую. Да и не поддерживает яваскрипт
 
norb

norb

Пользователь
strateg2010 написал(а):
Есть CSV PRICE PRO называется
Добавляем атрибуты:
Основные|Цвет|Красный
Технические характеристики|Цвет подоконника|Золотисто-ромашковый

И так далее.
Можно в екселе такую штуку сделать за минимальное количество времени (формулу прописать один Зар правильно и усе)
Нажмите для раскрытия...
У меня есть anyCSV/XLS™ но при попытке экспорта товара для последующего редактирования, я получаю такой результат
 
A

And-rey

Гость
фдлщк написал(а):
  • Обновим визуальный редактор
  • Добавим в исходный код нумерацию строк и подсветку синтаксиса
Для просмотра ссылки Войди или Зарегистрируйся Для просмотра ссылки Войди или Зарегистрируйся
Нажмите для раскрытия...
Отличный "хак" этого ужасного summernote редактора. Постоянно ставлю плагин "CKeditor is back", иначе этот summernote вырезает все теги, классы и прочее, стоит только в нём нажать "исходный код". Собственно вопрос:
А как его настроить, чтобы он в коде не вырезал <div class=""> или другие атрибуты? Вплоть до того, чтобы позволить теги <script> <svg> и прочее?
В CKeditor настроить можно было любые разрешения в файле config.js
 
Последнее редактирование модератором:
фдлщк

фдлщк

Пользователь
And-rey написал(а):
Отличный "хак" этого ужасного summernote редактора. Постоянно ставлю плагин "CKeditor is back", иначе этот summernote вырезает все теги, классы и прочее, стоит толок в нём нажать "исходный код". Собственно вопрос:
А как его настроить, чтобы он в коде не вырезал <div class=""> или другие атрибуты? Вплоть до того, чтобы позволить теги <script> <svg> и прочее?
В CKeditor настроить можно было любые разрешения в файле config.js
Нажмите для раскрытия...
Включить JS / css
Summernote использует библиотеки с открытым исходным кодом jQuery и Bootstrap, если вы используете Boostrap 3 или 4 версии Summernote, или просто jQuery, если вы используете облегченную версию Summernote. Добавьте следующий код в headобласть HTML-страницы.


<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.js"></script>
 
L

lumstyle

Пользователь
norb написал(а):
А как насчет атрибутов? у меня 60 на каждый товар и их заполнение убивает много времени.
К примеру в phpshop не нужно добавлять строку атрибута, в которой нужно указать название атрибута и уже потом вручную указывать
Характеристику как в opencart. То есть там уже есть все нужные поля с названиями, а чтобы не вписывать "128гб озу" в каждый товар phpshop просто выводит ранее заполненные значения из других товаров которых можно выбрать, а не прописывать одно и тоже в каждом товаре. Есть ли модуль упрощающий данный круг ада в opencart?

Нажмите для раскрытия...
для заполнения арттрибутов я присмотрел пару дополнений. вот скрины
1 Screenshot_17.jpg и 2 attributes-500x282(1).jpg
первое дополнение бесплатное - возможность добавлять атрибуты не по отдельность, а целой группой атрибутов.
второе дополнение платное - позволяет выбирать значения атрибутов товара из существующих, ранее указанных, что существенно упростит работу при создании товаров.
названий точных нет.
1-е дополнение могу здесь в топике выложить, если это правилами разрешено.
 
sanya0317

sanya0317

Пользователь
фдлщк написал(а):
Включить JS / css
Summernote использует библиотеки с открытым исходным кодом jQuery и Bootstrap, если вы используете Boostrap 3 или 4 версии Summernote, или просто jQuery, если вы используете облегченную версию Summernote. Добавьте следующий код в headобласть HTML-страницы.


<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.js"></script>
Нажмите для раскрытия...
Куда именно вставить? Спасибо.
 
Войдите или зарегистрируйтесь для ответа.
Сверху