Перейти к содержимому


Размещение Блока Слева "все Категории" На Главной Странице

Автор Foxis_10, 18 февр. 2021 17:38

  • Авторизуйтесь для ответа в теме
В этой теме нет ответов

#1 Foxis_10

Foxis_10

    Продвинутый пользователь

  • Модераторы
  • 65 сообщений

Отправлено 18 Февраль 2021 - 17:38

Снимок1.PNG

Снимок2.PNG
Снимок3.PNG
В шаблоне HTML найдите строку

<link id="catalogPage-css" rel="stylesheet"
{% IF MOD_LNAME = catalog || MOD_LNAME = user && ACT= settings || MOD_LNAME = user && ACT= favorites || MOD_LNAME = user && ACT= history_list || MOD_LNAME = discount || MOD_LNAME = search || MOD_LNAME = news || MOD_LNAME = compare %}
href="{ASSETS_STYLES_PATH}catalogPage.css?design=neon"
{% ELSE %}
data-href="{ASSETS_STYLES_PATH}catalogPage.css?design=neon"
{% ENDIF %}
>

замените на

<link id="catalogPage-css" rel="stylesheet" href="{ASSETS_STYLES_PATH}catalogPage.css?design=neon">

найдите

<!-- Скрипты страниц с сайдбаром-->
{% IF MOD_LNAME = catalog || MOD_LNAME = user && ACT= settings || MOD_LNAME = user && ACT= favorites || MOD_LNAME = user && ACT= history_list || MOD_LNAME = discount || MOD_LNAME = search || MOD_LNAME = news || MOD_LNAME = compare %}
<script defer src="{ASSETS_JS_PATH}catalogPage.js?design=neon"></script>
<script>
// Запуск основных скриптов для страниц Каталога
document.addEventListener("DOMContentLoaded", function(){
catalogFunctions();
accordion();
})
</script>
{% ENDIF %}

замените на

<!-- Скрипты страниц с сайдбаром-->
<script defer src="{ASSETS_JS_PATH}catalogPage.js?design=neon"></script>
<script>
// Запуск основных скриптов для страниц Каталога
document.addEventListener("DOMContentLoaded", function(){
catalogFunctions();
accordion();
})
</script>

найдите

<!-- Слайдшоу-->
<div id="slideshow">
<div class="container">
<div class="slider owl-carousel">
<!-- Используйте data-webp-desktop-src="{ASSETS_IMAGES_PATH}slide-1.webp" и data-webp="1" для уставновки .webp изображений в слайдах -->

замените на


<!-- Слайдшоу-->
<div id="slideshow">
<div class="container">
<div class="new-block-catalog">
<div class="col-md-3 col-xs-12 col-left">
<div class="page-sidebar">
<!-- Меню пользователя ЛК -->
{% IF MOD_LNAME = user && ACT= settings || MOD_LNAME = user && ACT= favorites || MOD_LNAME = user && ACT= history_list || MOD_LNAME = compare && CLIENT_IS_LOGIN %}
<div class="block user-menu catalog">
<h3 class="title"><a href="{USER_SETTINGS_URL}"><span class="text">Меню</span></a></h3>
<div class="content">
<ul>
<li><a {% IF USER_SETTINGS_URL = CURRENT_URL %}class="active"{% ENDIF %} href="{USER_SETTINGS_URL}">Мой кабинет</a></li>
<li><a {% IF FAVORITES_URL = CURRENT_URL %}class="active"{% ENDIF %} href="{FAVORITES_URL}">Избранное</a></li>
<li><a {% IF USER_HISTORY_LIST_URL = CURRENT_URL %}class="active"{% ENDIF %} href="{USER_HISTORY_LIST_URL}">История заказов</a></li>
{% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}<li><a {% IF COMPARE_URL = CURRENT_URL %}class="active"{% ENDIF %} href="{COMPARE_URL}">Сравнение</a></li>{% ENDIF %}
<li><a href="{USER_LOGOUT_URL}">Выход</a></li>
</ul>
</div>
</div>
{% ENDIF %}
<!-- /END Меню пользователя ЛК -->
<!-- Каталог -->
{% IFNOT catalog_full_empty %}
<div class="block catalog">
<h3 class="title"><a href="{CATALOG_URL}"><span class="text">Каталог</span><span class="open-sub"></span></a></h3>
<div class="content">
<ul>
{% FOR catalog_full %}
{% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %}
<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_VISIBLE_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}" title="{catalog_full.NAME}">
<a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active"{% ENDIF %}>
{% IF catalog_full.IMAGE_ICON %}<img class="lozad" data-src="{catalog_full.IMAGE_ICON}" class="goods-cat-image-icon"/>{% ENDIF %}{% IF catalog_full.ISSET_VISIBLE_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}
{catalog_full.NAME}
{% IF catalog_full.GOODS_COUNT>0 %} <span class="count">{catalog_full.GOODS_COUNT}</span>{% ELSEIF catalog_full.BRANCH_GOODS_COUNT>0 %}<span class="count">{catalog_full.BRANCH_GOODS_COUNT}</span>{% ENDIF %}
</a>
{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
{% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
<!-- Отображение количества товаров в категории -->
{% ENDFOR %}
</ul>
</div>
</div>
{% ENDIF %}
<!-- /END Каталог -->
<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
{% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
<div class="block filters">
<h3 class="title _main {% FOR filter_attr_list %}{% FOR values %}{% IF filter_attr_list.values.CHECKED %}_active{% ENDIF %}{% ENDFOR %}{% ENDFOR %} {% FOR filter_prop_list %}{% FOR values %}{% IF filter_prop_list.values.CHECKED %} _active{% ENDIF %}{% ENDFOR %}{% ENDFOR %}"><span class="fal fa-filter"></span> Фильтры</h3>
<div class="content">
<div class="content-title">Фильтры<button class="content-close-btn"><i class="fal fa-times"></i></button></div>
<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
<form action="#page-title" method="get" id="filters-form">
<!-- Активные Фильтры -->
<div class="filters-goods-active" {% FOR filter_attr_list %}{% FOR values %}{% IF filter_attr_list.values.CHECKED %}style="display: block;"{% ENDIF %}{% ENDFOR %}{% ENDFOR %} {% FOR filter_prop_list %}{% FOR values %}{% IF filter_prop_list.values.CHECKED %}style="display: block;"{% ENDIF %}{% ENDFOR %}{% ENDFOR %}>
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
<div class="filter">
<div class="title">Активные фильтры:<span class="filter-arrow fal fa-angle-up"></span></div>
<ul class="filter-inner">
{% FOR filter_attr_list %}{% FOR values %}{% IF filter_attr_list.values.CHECKED %}<li class="filter-item"><label class="button button2 small" for="filterAttrVal{filter_attr_list.values.ID}"><i class="fal fa-times" aria-hidden="true"></i><span>{filter_attr_list.values.VALUE}</span> <span class="counter">{filter_attr_list.values.NB_GOODS_FILTERED}</span></label></li>{% ENDIF %}{% ENDFOR %}{% ENDFOR %}
{% FOR filter_prop_list %}{% FOR values %}{% IF filter_prop_list.values.CHECKED %}<li class="filter-item"><label class="button button2 small" for="filterPropVal{filter_prop_list.values.ID}"><i class="fal fa-times" aria-hidden="true"></i><span>{filter_prop_list.values.VALUE}</span> <span class="counter">{filter_prop_list.values.NB_GOODS_FILTERED}</span></label></li>{% ENDIF %}{% ENDFOR %}{% ENDFOR %}
</ul>
<button id="filters-reset" type="button" class="button button2 small" onclick="javascript:document.location = document.location.pathname;">Сбросить все фильтры</button>
</div>
<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
</div>
<!-- /END Осноные Фильтры -->
<!-- Если есть возможность фильтрации товаров по ценам -->
{% IF SHOW_GOODS_PRICE_FILTERS %}
<div class="filters-price">
<div class="title">Фильтры по ценам:<span class="filter-arrow fal fa-angle-up"></span></div>
<div class="layout-slider">
<div class="filter-range-col">
<label class="filter-range-label" for="goods-filter-min-price">от</label>
<input id="goods-filter-min-price" class="input" type="text" name="form[filter][price][min]" value="{% IF GOODS_FILTER_MIN_PRICE %}{GOODS_FILTER_MIN_PRICE}{% ELSE %}{GOODS_FILTER_MIN_AVAILABLE_PRICE}{% ENDIF %}" min="1" onkeypress="return keyPress(this, event);" onpaste="return false;" />
</div>
<span class="price-separator">-</span>
<div class="filter-range-col">
<label class="filter-range-label" for="goods-filter-max-price">до</label>
<input id="goods-filter-max-price" class="input" type="text" name="form[filter][price][max]" value="{% IF GOODS_FILTER_MAX_PRICE %}{GOODS_FILTER_MAX_PRICE}{% ELSE %}{GOODS_FILTER_MAX_AVAILABLE_PRICE}{% ENDIF %}" min="1" onkeypress="return keyPress(this, event);" onpaste="return false;" />
</div>
<input type="hidden" name="form[filter][available_price][min]" value="{GOODS_FILTER_MIN_AVAILABLE_PRICE}" />
<input type="hidden" name="form[filter][available_price][max]" value="{GOODS_FILTER_MAX_AVAILABLE_PRICE}" />
<!-- Фильтры по цене -->
<div class="goodsFilterPriceRangePointers">
<span class="min" style="display:none;">{GOODS_FILTER_MIN_AVAILABLE_PRICE}</span>
<span class="max" style="display:none;">{GOODS_FILTER_MAX_AVAILABLE_PRICE}</span>
</div>
<div id="goods-filter-price-slider"></div>
<div class="goodsFilterPriceSubmit">
<button class="button button2 small" type="submit" title="Показать">Показать</button>
</div>
</div>
</div>
{% ENDIF %}
<!-- /END Если есть возможность фильтрации товаров по ценам -->
<!-- Осноные Фильтры -->
<div class="filters-goods">
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
{% FOR filter_attr_list %}
<div class="filter">
<div class="title {% IF filter_attr_list.index > 3 %}active{% ENDIF %}">{filter_attr_list.NAME}:<span class="filter-arrow fal fa-angle-up"></span></div>
<ul class="filter-inner {% FOR values %}{% IF filter_attr_list.values.index > 10 %}crop{break}{% ENDIF %}{% ENDFOR %}" {% IF filter_attr_list.index > 3 %}style="display:none"{% ENDIF %}>
{% FOR values %}
<li class="filter-item">
<input class="checkbox-hidden" type="checkbox" name="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" value="1" id="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} />
<label class="checkbox-name" for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE} <span class="counter">{filter_attr_list.values.NB_GOODS_FILTERED}</span></label>
</li>
{% ENDFOR %}
</ul>
{% FOR values %}
{% IF filter_attr_list.values.index > 10 %}
<button class="filter-more" type="button"><span class="filter-moreText pseudo-link">Показать все</span> <span class="filter-moreArrow fal fa-angle-down"></span></button>
{break}
{% ENDIF %}
{% ENDFOR %}
</div>
{% ENDFOR %}
<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
{% FOR filter_prop_list %}
<div class="filter">
<div class="title {% IF filter_prop_list.index > 3 %}active{% ENDIF %}">{filter_prop_list.NAME}:<span class="filter-arrow fal fa-angle-up"></span></div>
<ul class="filter-inner {% FOR values %}{% IF filter_prop_list.values.index > 10 %}crop{break}{% ENDIF %}{% ENDFOR %}" {% IF filter_prop_list.index > 3 %}style="display:none"{% ENDIF %}>
{% FOR values %}
<li class="filter-item">
<input class="checkbox-hidden" type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" value="1" id="filterPropVal{filter_prop_list.values.ID}" {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} >
<label class="checkbox-name" for="filterPropVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} <span class="counter">{filter_prop_list.values.NB_GOODS_FILTERED}</span></label>
</li>
{% ENDFOR %}
</ul>
{% FOR values %}
{% IF filter_prop_list.values.index > 10 %}
<button class="filter-more" type="button"><span class="filter-moreText pseudo-link">Показать все</span> <span class="filter-moreArrow fal fa-angle-down"></span></button>
{break}
{% ENDIF %}
{% ENDFOR %}
</div>
{% ENDFOR %}
</div>
<!-- /END Осноные Фильтры -->
</form>
</div>
</div>
{% ENDIF %}
<!-- /END Если в тарифном плане подключен модуль фильтров по товарам -->
</div>

</div>
<div class="slider owl-carousel">
<!-- Используйте data-webp-desktop-src="{ASSETS_IMAGES_PATH}slide-1.webp" и data-webp="1" для уставновки .webp изображений в слайдах -->

найдите

<!-- /Слайдшоу-->

замените на

</div>
<!-- /Слайдшоу-->

В шаблоне main.css в самый низ добавьте

.new-block-catalog{display:flex;}

В шаблоне indexPage.css найдите

#slideshow .slider {border-radius: 5px;overflow: hidden}

замените на

#slideshow .slider {border-radius: 5px;overflow: hidden;width: 99%;}
@media(max-width:780px) {
.new-block-catalog{flex-direction: column;}
#slideshow .slider{width:100%;}
}

Убираем кнопку  Все категории. В шаблоне main.css

найдите

.header-catalog {position: relative}

замените на

.header-catalog {position: relative;display: none;}

Отцентрируем лого в мобильной версии. В Редакторе шаблонов-->main.css в самый низ добавьте

@media all and (max-width: 780px) {
.header-main-wrap{justify-content: center;}
}

Прикрепленные изображения

  • Снимок1.PNG
  • Снимок2.PNG
  • Снимок3.PNG

Обратно в Главная


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Неон
  5. → Главная
  6. Privacy Policy