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

+20
3.57K

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

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

Настраивая приобретенный у 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

В Этот файл следует вставить небольшой фрагмент прямо перед выводом в шаблон модуля. Найдите строчку

  1. $smarty = cmsPage::initTemplate('modules', 'mod_inshop_tree.tpl');

и ПЕРЕД ней вставьте код:

  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

Это очень большой файл, поэтому просто найдите в нем селектор

  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. }

И закомментируйте в нем строчку

  1. /* background:url(/templates/_default_/images/icons/folder.png) no-repeat; */

Это нужно для того, чтобы выключить иконки папок.

Что дальше

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

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

Как скачать.

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

Удачи в программировании.

0
Bubble Gumoff Bubble Gumoff 9 лет назад #
А где тперь фото категории прикрепляется? или это для тех кому оно не нужно?
0
Странник Странник 9 лет назад #
1. Загрузка фото категории:

2. Результат
0
Bubble Gumoff Bubble Gumoff 9 лет назад #
Это совсем не то , так как не будет отображаться фото в списке категорий.
В описании самой категории да фото будет, но не в списке, когда категории идут скопом на одной странице.
0
Странник Странник 9 лет назад #
Если честно, не совсем вас понимаю. Вот смотрите, я на рисунке ниже я загрузил иконку в категорию "Футболки". На рисунке сверху - модуль mod_inshop_tree, под ним - компонент Магазин. Оба выводят изображение футболки. Модуль - потому что я его хакнул, компонент - потому что он так и был сделан изначально, это стандартный функционал.
В чем вы видите проблему?
0
Странник Странник 9 лет назад #
Сорри, вот рисунок, о котором шла речь в моем предыдущем посте.
+1
Bubble Gumoff Bubble Gumoff 9 лет назад #
А ну тогда сорри, думал в компоненте картинка категории перестала выводится, а только в модуле меню.
А так универсально, да - отлично!
0
Странник Странник 9 лет назад #
Прошу тех, кто скачал у меня этот хак, скачать его заново. В нем подправлен файл module.php. Теперь, что бы не было в конфиге категории, из него будет извлекаться только иконка.
0
Dina Dina 6 лет назад #
а как увеличить иконки данных категорий?
0
Странник Странник 6 лет назад #
Написал в личку.
0
ph3no ph3no 9 лет назад #
Хак пригодился, спасибо. Работает кстати только если картинки gif или png
0
abasia abasia 6 лет назад #
Архив недоступен (((

Еще от автора

Адаптация компонента "Закладки" от 19 января 2011 к коробочной версии 1.10.7
На форуме появилась тема с пожеланиями адаптировать довольно старый компонент "Instant Bookmarks" Fuze к современным реалиям.
Утилита "Садовод" для версии InstantCMS 1.10.7.008
В этой краткой заметке описывается утилита "Садовод" для ремонта деревьев версии InstantCMS 1.10.7.008.
Изменение компонента "Баннеры" для будущей  версии 1.10.7.008
Данная статья рассказывает всем ждущим новую версию 008, что нового ожидается в будущем релизе версии 1.10.7.008.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.