Дерево категорий InstantShop: у каждой категории - своя иконка

1540
Описывается небольшой хак, позволяющий превратить унылое дерево категорий нашего Магазина в нарядную елку. Заметка посвящается прекрасной женщине Ирине.

Постановка задачи

Настраивая приобретенный у r2 Магазин для своей клиентки, я услышал от нее типичную для девчонки просьбу. Она захотела, что бы в модуле Магазина InstantShop: Категории (который и выводит дерево категорий) вместо стандартных иконок - в виде папки - у каждой категории была своя иконка.

Исследовав этот вопрос, я обнаружил, что модуль обращается к таблице БД cms_shop_cats, где имена иконок хранятся в конфиге (поле config). Извлечь имя иконки оттуда - дело техники.

Предупреждения

1. Я отчетливо осознаю, что хаки являются злом, поскольку могут быть применены лишь достаточно квалифицированным сайтостроителем. Который, как минимум, не боится открыть код и что-то туда внести. Равно как и перенести изменения при апгрейде версии. Но придумать, как оформить изменение, например, в виде плагина, у меня не получилось.

2. Данный хак писался и отлаживался на icms v.1.10.6. и ishop v.2.2. Полагаю, он применим и к более ранним версиям, но точно сказать не могу, прока не проверю.

Приступаем

Первое что нужно сделать - это приобрести Магазин ))) Можно было уже и самим догадаться.
Втрое - установить этот компонент на сайт и приступить к настройкам:
1. Зайти в админку и убедиться, что модуль InstantShop: Категории, который выводит деревья, включен и выводится на страницы.
2. Зайти в настройки этого модуля (нажав шестеренку) и поставить галку "Развернуть все категории":

3. Внести изменения в файлы:
- templates/_default_/modules/mod_inshop_tree.tpl
- modules/mod_inshop_tree/module.php
- templates/_default_/css/styles.css

Файл module.php

В Этот файл следует вставить небольшой фрагмент прямо перед выводом в шаблон модуля. Найдите строчку
Код PHP:
  1. $smarty = cmsPage::initTemplate('modules', 'mod_inshop_tree.tpl');
и ПЕРЕД ней вставьте код:
Код PHP:
  1. // Хак Странника "Иконки категорий"
  2. foreach($items as $n => $item){
  3. if($item['config']){
  4. $config = cmsCore::yamlToArray($item['config']);
  5. $record = $config['icon'];
  6. $extension = trim(str_replace('.', '', stristr($record, '.')));
  7. if($extension == 'png' || $extension == 'gif' || $extension == 'ico'){
  8. $items[$n]['icon'] = $record;
  9. }
  10. }
  11. }
  12. // Конец хака

Файл mod_inshop_tree.tpl

В этот файл внесено довольно много изменений. Поэтому рекомендую не заморачиваться, а взять этот файл у меня из архива и залить с заменой. Любителям покуражится с программой Merge настоятельно рекомендую потренироваться.

Еще одно замечание. Поскольку хак делался на скорую руку, я не стал выносить в css свойства иконок. Ширина и высота указаны прямо внутри тега картинки. Кому хочется - можете сами вынести. Возможно, захотите изменить размеры картинок или сдвинуть их на пару-тройку пикселей в любом направлении.

Смысл изменения в этом файле - если для категории загружена иконка - то выводится эта иконка. Если нет - то выводится та самая стандартная иконка в виде желтой унылой папки, которая всем уже надоела!

Файл styles.css

Это очень большой файл, поэтому просто найдите в нем селектор
Код CSS:
  1. #inshop_tree li span {
  2. background:url(/templates/_default_/images/icons/folder.png) no-repeat;
  3. padding-left:20px;
  4. margin-left:0px;
  5. font-weight:bold;
  6. }
И закомментируйте в нем строчку
Код CSS:
  1. /* background:url(/templates/_default_/images/icons/folder.png) no-repeat; */
Это нужно для того, чтобы выключить иконки папок.

Что дальше

После исправления файлов идете в админку Магазина и указываете категорию. Открываете ее на редактирование:

и затем загружаете со свой машины заранее подготовленный рисунок:


Повторив так для каждой категории магазина, идем на страницу, где выведен модуль дерева и наслаждаемся результатом:

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

Как скачать.

Скачать можно тут, бесплатно, то есть даром, послав мысленный чмок умнице и красавице Ирине, которая спонсировала эту работу. Но руками Ирку не лапать, знаю я вас, троглодитов!

Как говорить Ирке чмок

яд 410011913797936
wmr 342960323367
карточка сбербанка 67619600 0308703785

Удачи в программировании.
Утилита "Генератор модуля" для icms v1.10.5 - v1.10.6 | Комплект задачи cron и плагина "С днем рождения" для 1.10.6
Комментарии (8)
Bubble Gumoff 11 июня 2015 в 20:15 0
small user social cms
А где тперь фото категории прикрепляется? или это для тех кому оно не нужно?
Кирилл Эдуардович (Странник) 12 июня 2015 в 01:13 0
small user social cms
1. Загрузка фото категории:

2. Результат
Bubble Gumoff 19 июня 2015 в 19:05 0
small user social cms
Это совсем не то , так как не будет отображаться фото в списке категорий.
В описании самой категории да фото будет, но не в списке, когда категории идут скопом на одной странице.
Кирилл Эдуардович (Странник) 22 июня 2015 в 10:29 0
small user social cms
Если честно, не совсем вас понимаю. Вот смотрите, я на рисунке ниже я загрузил иконку в категорию "Футболки". На рисунке сверху - модуль mod_inshop_tree, под ним - компонент Магазин. Оба выводят изображение футболки. Модуль - потому что я его хакнул, компонент - потому что он так и был сделан изначально, это стандартный функционал.
В чем вы видите проблему?
Кирилл Эдуардович (Странник) 22 июня 2015 в 10:31 0
small user social cms
Сорри, вот рисунок, о котором шла речь в моем предыдущем посте.
Bubble Gumoff 23 июня 2015 в 12:52 +1
small user social cms
А ну тогда сорри, думал в компоненте картинка категории перестала выводится, а только в модуле меню.
А так универсально, да - отлично!
Кирилл Эдуардович (Странник) 17 июня 2015 в 11:20 0
small user social cms
Прошу тех, кто скачал у меня этот хак, скачать его заново. В нем подправлен файл module.php. Теперь, что бы не было в конфиге категории, из него будет извлекаться только иконка.
ph3no 29 сентября 2015 в 09:23 0
no avatar
Хак пригодился, спасибо. Работает кстати только если картинки gif или png