Логотип категории (Easy IT)

Ссылка на плагин: https://www.webasyst.ru/store/plugin/shop/categoryimages/

1) Подключение плагина для использования в теме

Начиная с версии 1.2 появилась возможность при помощи плагина выводить картинки категорий. До этого была поддержка вывода картинок категорий только через дополнительные параметры.

Теперь Вы можете загружать картинки категорий через плагин. Размеры картинок категорий остаются прежние 114х150 px.

Также если у Вас включена настройка плагина "Стандартный вывод" то данная картинка выводится под заголовком категории.

2) Рекомендуемые настройки плагина

Мы рекомендуем внести следующие настройки плагина:

1 - Отключить "Стандартный вывод" и "Авто уменьшение основного изображения" (Вы можете его оставить включенным в случае если хотите выводить большое фото категории)

2 - Можно отключить "Большой эскиз" (он в теме нигде не отображается)

3 - Для "Средний эскиз" укажите размеры Высота:150 и Ширина:114 (этот эскиз выводится в качестве картинки категории)

4 - Для "Маленький эскиз" укажите размеры Высота:42 и Ширина:32 (этот эскиз выводится в качестве иконки категории если вы настроили тему, см.ниже)

3) Вывод иконок категорий 2-го уровня в "горизонтальном каталоге"

Если у Вас в настройках темы включён Формат каталога (Пункт 1.4 из настроек темы дизайна) "Горизонтальный", для вывода иконки воспользуйтесь нижестоящими инструкциями.

3.1) Зайдите в Сайт - Дизайн - Шаблоны и найдите файл inc/nav-menu.html.

3.2) После нахождения файла ищем в нём вот этот кусок кода:

<a href="{$cat.url}" class="level_{$level} {if $cat.id == $r_cat_id || $cat.id == $current_cat_id}nav-menu__link_current{/if}">

И непосредственно сразу же после него ставим курсор мыши и нажимаем клавишу Enter, далее вставляем вот этот кусок кода:

{if $level==1}
    {$categoryImageUrl = shopCategoryImagesPlugin::getCategoryLittleThumbUrl($cat.id)}
    {if $categoryImageUrl != false}
        <span class="firstlevel-image">
            <img src="{$categoryImageUrl}">
        </span>
    {/if}
{/if}

3.3) Нажимаем "Сохранить".

4) Вывод иконок категорий 2-го уровня в "вертикальном каталоге"

Если у Вас в настройках темы включён Формат каталога (Пункт 1.4 из настроек темы дизайна) "Вертикальный", для вывода иконки воспользуйтесь нижестоящими инструкциями.

4.1) Зайдите в Сайт - Дизайн - Шаблоны и найдите файл inc/nav-menu-v.html.

4.2) После нахождения файла ищем в нём вот этот кусок кода:

<a class="nav-menu-v__sublink" href="{$subcat.url}" title="{$subcat.name|escape}">

И непосредственно сразу же после него ставим курсор мыши и нажимаем клавишу Enter, далее вставляем вот этот кусок кода:

{$categoryImageUrl = shopCategoryImagesPlugin::getCategoryLittleThumbUrl($subcat.id)}
{if $categoryImageUrl != false}
    <span class="firstlevel-image">
        <img src="{$categoryImageUrl}">
    </span>
{/if}

4.3) Нажимаем "Сохранить".

5) Настройка отступов для иконок категорий

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

5.1) Создать в Сайт - Блоки блок с названием user_styles.

5.2) Скопировать следующий код и добавить его в созданный блок:

.firstlevel-image img {
    margin-right: 10px;
}
.nav-menu-v__sublink {
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

5.3) Нажимаем "Сохранить"

Последнее обновление: 9 июля 2018

2 комментария


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

Чтобы добавить комментарий, зарегистрируйтесь или войдите