Оцените Функцию Drag & Drop Для Изображений Товара

Общее Новости
1

Здравствуйте! Недавно мы писали о том, что планируем внедрить drag & drop для изображений товаров. Теперь мы просим вас попробовать эту функциональность на http://dev.demo.cs-cart.ru и написать в этой теме, удобно ли вам так работать. Особенно интересует, что вам НЕ нравится в новой функциональности.

Мы планируем выпустить эту функциональность в CS-Cart 4.8.1, поэтому сейчас лучшее время, чтобы посоветовать изменения и улучшения. Подробности читайте ниже.

Как сейчас ведут себя ваши магазины
У каждого товара в CS-Cart может быть одно главное и несколько дополнительных изображений. Нам писали, что работать с изображениями товаров в CS-Cart неудобно:

  • Каждое изображение нужно загружать отдельно, выбрав файл на своём устройстве, на сервере, или введя ссылку на изображение.
  • Главное изображение находилось не на той же вкладке, что и дополнительные.
  • Даже для импорта дополнительных изображений нужен был отдельный CSV-файл.
Что мы сделали в 4.8.1
Мы пытались сделать работу с изображениями для администраторов проще и быстрее. Когда вы зайдёте в панель администратора на демо (http://dev.demo.cs-cart.ru/admin.php) и попробуете отредактировать товар, то заметите несколько улучшений.
  • Управление всеми изображениями товара на одной вкладке. Мы убрали вкладку Изображения на странице редактирования товара; теперь дополнительные изображения находятся на вкладке Общее, вместе с главным изображением.
  • Перетаскивание сразу нескольких изображений. Достаточно перетащить картинки в нужную область, и вы увидите их иконки. Сохраните товар, и готово!
  • Изменение порядка изображений и главного изображения с помощью перетаскивания.
  • Просмотр и редактирование alt-текста при наведении мышью на картинку. При наведении вы также увидите иконки для просмотра или удаления изображения. Если вы не сохранили изменения, то вы сможете восстановить удалённое изображение.
Недостатки, или Что не было сделано
Надеемся, что новая функциональность вам понравится. Однако, мы хотим указать на несколько важных моментов:
  • Теперь на странице редактирования товаров нет возможности загрузить свои иконки для изображений; иконки генерируются только автоматически из тех изображений, которые вы перетащили. Мы никогда не удаляем функциональность без серьёзных причин; возможность загружать иконки вместе с перетаскиванием изображений сильно усложнила бы интерфейс. Тем не менее, остаётся возможность загрузить свои иконки для изображений через импорт товаров.
  • Пока что мы внедрили drag & drop только на странице редактирования товара. Массовое редактирование товаров никак не затронуто. Тут всё зависит от того, насколько вам нужна такая функциональность, и как много будет по ней запросов. На текущий момент, если вы хотите редактировать несколько товаров и использовать drag & drop изображений, мы рекомендуем найти все нужные товары поиском, редактировать и сохранять каждый товар отдельно и переключаться между найденными товарами с помощью кнопок < и >, чтобы не приходилось возвращаться на результаты поиска.
Ждём ваших отзывов в этой теме.
2

как по мне - главное изображение слишком большое, может его сделать одного размера, что и остальные, но обернуть в рамку?

3

Однозначно такой импорт улучшит редактирование товара. Минус вижу, хотя не критичный в том, что alt картинки не будет видно-нужно навести мышку. Бывает так что при поступлении нового товара не успел добавить всем фото title и потом нужно проклацать все картинки чтобы увидеть что пропущено, но решается хотя и сложновато, через экспорт новых позиций и просмотр где отсутствуют подписи. Но если сравнивать с тем что было однозначно будет быстрее.

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

4

как по мне - главное изображение слишком большое, может его сделать одного размера, что и остальные, но обернуть в рамку?

Согласен. Нет необходимости делать главное изображение настолько большим. В этом нет смысла. Это только "перегружает" страницу и делает скроллинг вниз более "утомительным".

Обернуть в рамку - нормальный вариант, чтобы выделить его среди прочих.

5

как по мне - главное изображение слишком большое, может его сделать одного размера, что и остальные, но обернуть в рамку?

Согласен. Нет необходимости делать главное изображение настолько большим. В этом нет смысла. Это только "перегружает" страницу и делает скроллинг вниз более "утомительным".

Обернуть в рамку - нормальный вариант, чтобы выделить его среди прочих.

возможно вы правы, но с точки зрения интерфейса мы хотели выделить это изображение потому что:

- оно отображается всегда и везде: в блоках с продуктами, на категориях, на главной товара - оно самое важное.

- до текущего момента, оно было единственный на вкладке general

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

6

Однозначно такой импорт улучшит редактирование товара. Минус вижу, хотя не критичный в том, что alt картинки не будет видно-нужно навести мышку. Бывает так что при поступлении нового товара не успел добавить всем фото title и потом нужно проклацать все картинки чтобы увидеть что пропущено, но решается хотя и сложновато, через экспорт новых позиций и просмотр где отсутствуют подписи. Но если сравнивать с тем что было однозначно будет быстрее.

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

1. Про alt text - долго искали оптимальное решение - это лучшее из того что нашли в плане компромисса меджу нагруженностью страницы и удобством редактирования.

2. В новом импорте, будет отдельное поле, где картинки можно будет указывать по старому. Т.е. будет и по старому и по новому через запятую - как вам удобно так и будете делать.

В ближайшее время анонсируем модуль нового импорта, там можно будет проверить

7

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

Цель вполне понятна, но на второй чаше весов "удобство" пользования (т.е. в т.ч. компактность страницы). Поскольку мы говорим об админке, я б красоту "задвинул" в пользу "меньшей простыни" страницы редактирования товара. Она и так не маленькая.

Хотя этот момент сам по себе не слишком принципиален. Можно послушать другие мнения, только вот неохотно высказывается народ.

PS: Когда ждать 4.7.2?

8

PS: Когда ждать 4.7.2?

Предварительно на следующей неделе. Но там этих изменений не будет. они идут в 4.8.1

9

Все понравилось и alt text и размеры картинок и массовое добавление и удаление с восстановлением. Но не понравилась функция перетаскивания изображений. Как-то подглючивает в Safari. В других браузерах может также. Хватаю картинку, перемещаю, а место drop-а показывается через раз или с какими-то тормозами, плохо работает эта функция, короче.

10

Все понравилось и alt text и размеры картинок и массовое добавление и удаление с восстановлением. Но не понравилась функция перетаскивания изображений. Как-то подглючивает в Safari. В других браузерах может также. Хватаю картинку, перемещаю, а место drop-а показывается через раз или с какими-то тормозами, плохо работает эта функция, короче.

Кажется понятно в чем дело. Перетаскивание работает только вперед по списку, но не работает назад. Не совсем очевидно это.

11

Кажется понятно в чем дело. Перетаскивание работает только вперед по списку, но не работает назад. Не совсем очевидно это.

Спасибо, проверим.

12

Все понравилось и alt text и размеры картинок и массовое добавление и удаление с восстановлением. Но не понравилась функция перетаскивания изображений. Как-то подглючивает в Safari. В других браузерах может также. Хватаю картинку, перемещаю, а место drop-а показывается через раз или с какими-то тормозами, плохо работает эта функция, короче.

Да-да. Тоже заметил. Как-то невнятно иногда срабатывает перетаскивание. Вроде в хроме в обе стороны работает, но иногда как-то "не срабатывает". Для тестирования нужно разных людей попросить поперетаскивать и понаблюдать за результатом (это к разработчикам).

13

- оно отображается всегда и везде: в блоках с продуктами, на категориях, на главной товара - оно самое важное.

Смотрите пример из жизни. Мы с ним столкнулись на двух магазинах и сейчас думаем как это решить меньшей кровью:

Если в опции "цвет" у футболки не заданно, что эта опция обязательна то титульная картинка товара (Detailed_image) всегда и везде подменяется картинкой первой доступной комбинации/вариации опции. Таким образом значимость "титульной картинки" исчезает, как только появляется хотя бы одно детальное изображение комбинации/вариации.

Это не всегда удобно. Допустим, существует титульная картинка. На ней, стоит женщина в футболке в соответствующем антураже. Добавляем эту картинку как главную к товару. Эта же женщина спиной, также в антураже - добавляем как дополнительную к товару. Далее добавляем картинки вариаций/комбинаций - футболки разных цветов просто на вешалках (поскольку затратно фоткать модель в антураже под разный цвет футболок). В итоге первую титульную картинку мы не увидим НИКАК - она всегда подменяется первой доступной вариацией. Вообще везде. А вторую титульную картинку мы увидим только в небольшом блоке галереи под детальным изображением на странице товара.

В идеале: у картинок вариаций/комбинаций должна быть опция "главная для категории". Если указанно для каких категорий картинка главная, то она становится "титульной" в режиме каталога (сетка, список, блоки) в заданных категориях. Если не указанно - то титульной для каталога остаётся главная картинка товара.

На детальной странице товара - всё нормально, за исключением того, что в блоке "мини-галереи" первая картинка также подменяется.

Теперь на странице редактирования товаров нет возможности загрузить свои иконки для изображений;

Тут вот какое дело. Сейчас есть возможность при острой необходимости создать кроп-пропорции иконок независимо от детального изображения. То есть пропорции детальных изображений могут быть сильно вытянутыми по горизонтали или вертикали, но при этом есть возможность загрузить их "квадратные" кадрированные по композиционному центру иконки. Квадратные иконки позволяют по человечески расположить картинки в режиме "сетка". Всё ровненько и всё важное видно. Особенно это актуально для модулей сторонних разработчиков, когда элементы необходимо красиво расположить по фиксированной ширине - иконки записей блога, галерея изображений.

Сетка посыплется. Недаром Вас частенько просят кадрировать аватарки в несколько форматов.

Если вы предоставите вразумительный инструментарий выбора "как кадрировать автоиконки в режиме сетки" - то пол беды. Но судя по вариантам кадрирования в модуле "водяные знаки"; сколько мы прогеморроились, чтобы реализовать водяные знаки поверх всего изображения, независимо от его пропорций (а-ля шаттерсток) - то это пугает.

14

Смотрите пример из жизни. Мы с ним столкнулись на двух магазинах и сейчас думаем как это решить меньшей кровью:

Полность согласен, такая-же проблема, решение вижу только в новом поле "-- выбрать --" (сейчас в карточке товара показывается сразу первая опция со своим изображением)

и хорошо бы подсвечивать опции которых нет

https://yadi.sk/i/d-VILIF63Ssr2b

15

Полность согласен, такая-же проблема, решение вижу только в новом поле "-- выбрать --" (сейчас в карточке товара показывается сразу первая опция со своим изображением)

и хорошо бы подсвечивать опции которых нет

https://yadi.sk/i/d-VILIF63Ssr2b

Подсвечивать отсутствующие опции - это очень полезная штука, но...

...Чтобы подсвечивать опции, которых нет, нужно по каждой опции сделать запрос к базе, а опций может быть и несколько десятков. Это негативно скажется на скорости загрузки страницы. И как следствие - можно получить риск понижения позиций в выдаче из-за фактора скорости загрузки.

Если это делать, то нужно как-то одним запросом (вот тут могу чушь написать) выяснять наличие всех опций, ну или как-то очень правильно и осторожно подойти к реализации, иначе получим очередные грабли.

Поправьте меня, если я ошибаюсь....

16

Посмотрел. Нормального размера поле для alt — это просто отлично (а то приходилось через CSS увеличивать малюсенькое поле, что из коробки).

Перетаскивание тоже вполне удобно, что при загрузке, что при выборе последовательности изображений.

Годное улучшение!

Не хватает возможности работать с форматом svg. То есть загрузить у меня вроде как получилось, но на витрине не показывает картинку. А иногда svg очень удобен. Начиная, например, с логотипов у брендов. Качество получается у картинки намного выше, а размер файла меньше. Есть перспектива, что формат будет поддерживаться?

17

Не хватает возможности работать с форматом svg. То есть загрузить у меня вроде как получилось, но на витрине не показывает картинку. А иногда svg очень удобен. Начиная, например, с логотипов у брендов. Качество получается у картинки намного выше, а размер файла меньше. Есть перспектива, что формат будет поддерживаться?

Не планируем, так как уменьшение таких изображений требует совсем других библиотек (imagick и gd не подойдут). А вариант с конвертацией их в PNG не очень то хороший потому что в качестве вы не выиграете.

Можно рассмотреть вариант конвератации svg в png просто чтобы это не приходилось делать владельцу магазина.

18

Не планируем, так как уменьшение таких изображений требует совсем других библиотек (imagick и gd не подойдут). А вариант с конвертацией их в PNG не очень то хороший потому что в качестве вы не выиграете.

Можно рассмотреть вариант конвератации svg в png просто чтобы это не приходилось делать владельцу магазина.

Спасибо, понял :-)

Автоматическая конвертация — та еще штука, уж лучше я сам в нужный размер. А кто не умеет, гугл в помощь.

И все-таки жаль. В описания всякие svg вставляются (как я понимаю, туда, где не нужно генерировать thumbnails). И иногда это очень помогает.

19

Спасибо, понял :-)

Автоматическая конвертация — та еще штука, уж лучше я сам в нужный размер. А кто не умеет, гугл в помощь.

И все-таки жаль. В описания всякие svg вставляются (как я понимаю, туда, где не нужно генерировать thumbnails). И иногда это очень помогает.

А смысл конвертировать иконки из svg, это же xml файл?! Киньте в личку пример картинки товара, есть одна идея

20

А смысл конвертировать иконки из svg, это же xml файл?! Киньте в личку пример картинки товара, есть одна идея


Кинул в личку, но можно и сюда: https://sww.com.ru/test_php/acode_logo.svg