Отображение субкатегорий картинками (Страница 1) — Вопросы по созданию тем оформления

1 Тема от Пользователь-129210 09.07.2020 12:50:26

Пользователь-129210
Новый участник
Неактивен

Зарегистрирован: 08.07.2020
Сообщений: 5

Тема: Отображение субкатегорий картинками

Все доброго дня!
Друзья нет навыков в верстке подскажите пожалуйста как это сделать?
может платно сделать?
Платную доработку вроде написал но там они долго чет не отвечают.
Может модуль есть такой готовый?что совсем не красиво это отображение субкатегорий сейчас.
Как https://angler21.ru/catalog/seriya-sudak/ тут убрать эти мелкие кнопки категорий?
и вместо них сделать как тут с кнопкой подробнее чтоб картинку оптображала? https://angler21.ru/
и почему нет модуля который вот так вот отображает с картинками субкатегорию?

Спасибо

2 Ответ от Daniel 09.07.2020 14:03:20

Daniel
Участник
Неактивен

Зарегистрирован: 25.07.2018
Сообщений: 93
Рейтинг: 21

Re: Отображение субкатегорий картинками

Пользователь-129210 пишет:

Все доброго дня!
Друзья нет навыков в верстке подскажите пожалуйста как это сделать?
может платно сделать?
Платную доработку вроде написал но там они долго чет не отвечают.
Может модуль есть такой готовый?что совсем не красиво это отображение субкатегорий сейчас.
Как https://angler21.ru/catalog/seriya-sudak/ тут убрать эти мелкие кнопки категорий?
и вместо них сделать как тут с кнопкой подробнее чтоб картинку оптображала? https://angler21.ru/
и почему нет модуля который вот так вот отображает с картинками субкатегорию?
Спасибо

Так у вас не получится.Это немного разные вещи
Вы можете лишь изменить вид ваших кнопок в файле main.css в вашей теме в 7016 строке

.catalog-subcategory a

Это класс отвечающий за внешний вид вашей темы

А если вы хотите добавлять уже внешние элементы,то это в Вебсайт->Конструктор сайта
Еще рекомендовал бы вам (если собираетесь сами сайтом заниматься), посмотреть несколько видеоуроков, что и как https://readyscript.ru/video/

3 Ответ от Пользователь-129210 09.07.2020 15:12:05 Отредактировано Пользователь-129210 (09.07.2020 15:12:29)

Пользователь-129210
Новый участник
Неактивен

Зарегистрирован: 08.07.2020
Сообщений: 5

Re: Отображение субкатегорий картинками

ну как понимаю по этому шаблону можно.
Просто правильно надо сверстать.
Я этого не умею(методом тыка не получается(
/moduleview/catalog/blocks/topcategories/top_categories.tpl

{if $categories}
    {* Шаблон отображает список отобранных категорий для главной *}
    {* m - middle, s - small. Категории будут отображаться последовательно согласно схеме *}
    {$classSchema = ['M' => [
                                'imgSize' => [250, 150],
                                'imgScale' => 'cxy',
                                'class' => 'card-category-middle'
                            ],
                     's' => [
                                'imgSize' => [350, 150],
                                'imgScale' => 'cxy',
                                'class' => 'card-category-mini']
                    ]}

    {$sizeSchema = 'Msssssssssssss'} {* Схема расстановки блоков для категорий *}
    {$i=0}

    {foreach $categories as $category}
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
            {if $i > (strlen($sizeSchema)-1)}{$i=0}{/if}
            {$schemaItem = $classSchema[$sizeSchema[$i]]}
            <div class="card {$schemaItem['class']} text-center" {$category->getDebugAttributes()}>
                <div class="card-image">
                    <a href="{$category->getUrl()}"><img src="{$category->getMainImage($schemaItem['imgSize'].0, $schemaItem['imgSize'].1)}" alt="{$category.name}"></a>
                </div>
                <div class="card-text"><a href="{$category->getUrl()}"><span>{$category.name}</span></a></div>
            </div>
        </div>

        {$i = $i + 1}
        {if $i>strlen($sizeSchema)}{$i=0}{/if}
    {/foreach}
{else}
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-12">
        {include file="%THEME%/block_stub.tpl"  class="block-top-categories" do=[
        [
            'title' => t("Добавьте категорию"),
            'href' => {adminUrl do=false mod_controller="catalog-ctrl"}
        ],
        [
            'title' => t("Настройте блок"),
            'href' => {$this_controller->getSettingUrl()},
            'class' => 'crud-add'
        ]
        ]}
    </div>
{/if}

4 Ответ от Пользователь-129210 09.07.2020 15:13:32

Пользователь-129210
Новый участник
Неактивен

Зарегистрирован: 08.07.2020
Сообщений: 5

Re: Отображение субкатегорий картинками

как понимаю вот тут надо изменить?
/moduleview/catalog/list_products.tpl

{* Просмотр списка товаров в категории, просмотр результатов поиска *}

{$shop_config=ConfigLoader::byModule('shop')}
{$check_quantity=$shop_config.check_quantity}
{$list = $this_controller->api->addProductsDirs($list)}

{if $THEME_SETTINGS.enable_favorite}
    {$list = $this_controller->api->addProductsFavorite($list)}
{/if}

{if $no_query_error}
    <div class="empty-list">
        {t}Не задан поисковый запрос{/t}
    </div>      
{else}
    <div id="products" class="catalog {if $shop_config}shopVersion{/if}">
        {if !empty($query)}
            <h1 class="m-t-0 hidden-xs hidden-sm">{t}Результаты поиска{/t}</h1>
        {else}
            <h1 class="m-t-0 hidden-xs hidden-sm">{$category.name}</h1>
        {/if}
        {if $category.description && $paginator->page == 1 && !$THEME_SETTINGS.cat_description_bottom}<article class="catalog-description">{$category.description}</article>{/if}

        {if $sub_dirs}{$one_dir = reset($sub_dirs)}{/if}
        {if empty($query) || ($sub_dirs && $dir_id != $one_dir.id)}
            <nav class="catalog-subcategory">
                {foreach $sub_dirs as $item}
                    <a href="{urlmake category=$item._alias p=null pf=null filters=null bfilter=null}">{$item.name}</a>
                {/foreach}
            </nav>
        {/if}

        {if count($list)}
            {hook name="catalog-list_products:options" title="{t}Просмотр категории продукции:параметры отображения{/t}"}
                <div class="catalog-sort">
                    <div class="pull-left">

                        <div class="catalog-sort_order sort-order">
                            <span class="hidden-xs">{t}Сортировать{/t}</span> {t}по{/t}
                            <div class="dropdown">
                                <span class="dropdown-toggle" data-toggle="dropdown">
                                    <span class="dashed">{if $cur_sort=='sortn'}{t}умолчанию{/t}
                                                    {elseif $cur_sort=='dateof'}{t}новизне{/t}
                                                    {elseif $cur_sort=='rating'}{t}популярности{/t}
                                                    {elseif $cur_sort=='title'}{t}названию{/t}
                                                    {elseif $cur_sort=='num'}{t}наличию{/t}
                                                    {elseif $cur_sort=='rank'}{t}релевантности{/t}
                                                    {else}{t}цене{/t}{/if}</span>
                                    <span class="sort-order_direction"><i class="pe-7s-angle-{if $cur_n == 'asc'}up{else}down{/if}"></i></span>
                                </span>

                                <ul class="dropdown-menu">
                                    <li><a data-href="{$this_controller->api->urlMakeCatalogParams(['sort' => 'sortn', 'nsort' => 'asc'])}" class="sort-order_item{if $cur_sort=='sortn'} {$cur_n}{/if}" rel="nofollow">{t}умолчанию{/t}</a></li>
                                    <li><a data-href="{$this_controller->api->urlMakeCatalogParams(['sort' => 'cost', 'nsort' => 'asc'])}" class="sort-order_item{if $cur_sort=='cost'} {$cur_n}{/if}" rel="nofollow">{t}возрастанию цены{/t}</a></li>
                                    <li><a data-href="{$this_controller->api->urlMakeCatalogParams(['sort' => 'cost', 'nsort' => 'desc'])}" class="sort-order_item{if $cur_sort=='cost'} {$cur_n}{/if}" rel="nofollow">{t}убыванию цены{/t}</a></li>
                                    <li><a data-href="{$this_controller->api->urlMakeCatalogParams(['sort' => 'rating', 'nsort' => 'desc'])}" class="sort-order_item{if $cur_sort=='rating'} {$cur_n}{/if}" rel="nofollow">{t}популярности{/t}</a></li>
                                    <li><a data-href="{$this_controller->api->urlMakeCatalogParams(['sort' => 'dateof', 'nsort' => 'desc'])}" class="sort-order_item{if $cur_sort=='dateof'} {$cur_n}{/if}" rel="nofollow">{t}новизне{/t}</a></li>
                                    <li><a data-href="{$this_controller->api->urlMakeCatalogParams(['sort' => 'num', 'nsort' => 'desc'])}" class="sort-order_item{if $cur_sort=='num'} {$cur_n}{/if}" rel="nofollow">{t}наличию{/t}</a></li>
                                    <li><a data-href="{$this_controller->api->urlMakeCatalogParams(['sort' => 'title', 'nsort' => 'asc'])}" class="sort-order_item{if $cur_sort=='title'} {$cur_n}{/if}" rel="nofollow">{t}названию{/t}</a></li>
                                    {if $can_rank_sort}
                                        <li><a href="{$this_controller->api->urlMakeCatalogParams(['sort' => 'rank', 'nsort' => $sort.rank])}" class="sort-order_item{if $cur_sort=='rank'} {$cur_n}{/if}" rel="nofollow">{t}релевантности{/t}</a></li>
                                    {/if}
                                </ul>
                            </div>
                        </div>

                        <div class="catalog-sort_pagesize">
                            {t}Показывать по{/t}
                            <div class="dropdown">
                                <span class="dropdown-toggle" data-toggle="dropdown"><span class="dashed">{$page_size}</span></span>
                                <ul class="dropdown-menu">
                                    {foreach $items_on_page as $item}
                                        <li><a href="{$this_controller->api->urlMakeCatalogParams(['pageSize' => $item])}">{$item}</a></li>
                                    {/foreach}
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="pull-right">
                        <a data-href="{$this_controller->api->urlMakeCatalogParams(['viewAs' => 'table'])}" class="catalog-sort_list{if $view_as == 'table'} active{/if}" rel="nofollow"><i class="i-svg i-svg-view-table"></i></a>
                        <a data-href="{$this_controller->api->urlMakeCatalogParams(['viewAs' => 'blocks'])}" class="catalog-sort_table{if $view_as == 'blocks'} active{/if}" rel="nofollow"><i class="i-svg i-svg-view-blocks"></i></a>
                    </div>
                </div>
            {/hook}

            {include file="list_products_items.tpl"}

            <div class="pull-right">
                {include file="%THEME%/paginator.tpl"}
            </div>

        {else}    
            <div class="empty-list">
                {if !empty($query)}
                    {t}Извините, ничего не найдено{/t}
                {else}
                    {t}В данной категории нет ни одного товара{/t}
                {/if}
            </div>
        {/if}
        {if $category.description && $paginator->page == 1 && $THEME_SETTINGS.cat_description_bottom}<article class="catalog-description">{$category.description}</article>{/if}
    </div>
{/if}

5 Ответ от Пользователь-129210 09.07.2020 15:14:33

Пользователь-129210
Новый участник
Неактивен

Зарегистрирован: 08.07.2020
Сообщений: 5

Re: Отображение субкатегорий картинками

именно в этой части кода

{if $category.description && $paginator->page == 1 && !$THEME_SETTINGS.cat_description_bottom}<article class="catalog-description">{$category.description}</article>{/if}

        {if $sub_dirs}{$one_dir = reset($sub_dirs)}{/if}
        {if empty($query) || ($sub_dirs && $dir_id != $one_dir.id)}
            <nav class="catalog-subcategory">
                {foreach $sub_dirs as $item}
                    <a href="{urlmake category=$item._alias p=null pf=null filters=null bfilter=null}">{$item.name}</a>
                {/foreach}
            </nav>

6 Ответ от Daniel 14.07.2020 22:07:36

Daniel
Участник
Неактивен

Зарегистрирован: 25.07.2018
Сообщений: 93
Рейтинг: 21

Re: Отображение субкатегорий картинками

Пользователь-129210 пишет:

именно в этой части кода

{if $category.description && $paginator->page == 1 && !$THEME_SETTINGS.cat_description_bottom}<article class="catalog-description">{$category.description}</article>{/if}

        {if $sub_dirs}{$one_dir = reset($sub_dirs)}{/if}
        {if empty($query) || ($sub_dirs && $dir_id != $one_dir.id)}
            <nav class="catalog-subcategory">
                {foreach $sub_dirs as $item}
                    <a href="{urlmake category=$item._alias p=null pf=null filters=null bfilter=null}">{$item.name}</a>
                {/foreach}
            </nav>

скиньте скриншот,что надо сделать,а то мысль потерял уже

7 Ответ от Пользователь-129210 15.07.2020 19:32:11

Пользователь-129210
Новый участник
Неактивен

Зарегистрирован: 08.07.2020
Сообщений: 5

Re: Отображение субкатегорий картинками

Чтобы подкатегории https://angler21.ru/catalog/sudak/ отображались Картинкой в квадрате как на главной странице https://angler21.ru/

8 Ответ от Daniel 20.07.2020 15:39:51

Daniel
Участник
Неактивен

Зарегистрирован: 25.07.2018
Сообщений: 93
Рейтинг: 21

Re: Отображение субкатегорий картинками

Пользователь-129210 пишет:

Чтобы подкатегории https://angler21.ru/catalog/sudak/ отображались Картинкой в квадрате как на главной странице https://angler21.ru/

Фактически вряд ли получится это сделать малой кровью,но можно попробовать пойти по пути изменения css
Правда говорю прямо,что из этого выйдет сказать точно не могу,может потащить за собой всю верстку
Файл https://angler21.ru/templates/flatlines … s/main.css
Ищем класс(7022 строка) .catalog-subcategory a
Правим значение padding к примеру до 80px