Шаблон "Muza"

Внимание

Шаблон "Muza" может быть установлен только на магазин версии 6.5.4 и выше. Если Ваш магазин версии ниже, пожалуйста, обновите магазин до последней актуальной версии на момент установки шаблона.

В данной статье рассмотрим настройки и особенности шаблона "Muza".

• Особенности шаблона
• Блоки над разделом "Подписка на новости"
• Вкладки с товарами в блоке "Баннер большой перед блоком подписки на новости (вкладки)"
• Карточка товара

Особенности шаблона "Muza"

- Режим отображения главной страницы "Одна колонка".

- Главное меню скрывает категории, которые не поместились на экране, справа в меню добавляется выпадающий список "Остальные категории" (рис.1).

Рисунок 1.

- В данном шаблоне 25 цветовых схем и 10 фонов.

- Новый стильный внешний вид маркеров (рис.2).

Рисунок 2.

- Шаблон идеально подходит для ниши мебели, детских товаров, игрушек и одежды, особенно выигрышно смотрится со светлыми товарами.

- Компактное отображение карточек товаров за счет скрытия кнопок "Добавить в корзину", "Добавить в сравнение" и рейтинга товаров, данные поля отображаются при наведении на карточку товара. Таким образом внимание покупателя акцентируется на главном (рис.3).

Рисунок 3.

Подвал в шаблоне выполнен в черном цвете (рис.4).

Рисунок 4.

Как найти статический блок

Заметка

У каждого из статических блоков, которые относятся к данному шаблону, в названии ключа доступа указано "Muza".

Чтобы найти статический блок, следует перейти в раздел "Каналы продаж" - "Интернет-магазин" далее "Параметры магазина" - "Статические блоки", в строке поиска необходимо ввести наименование блока, среди поисковой выдачи выбрать нужный и перейти к редактированию (рис.5).

Рисунок 5.

Далее открывается окно с кодом. Следует перейти в режим "Источник", проверить активность блока, внести необходимые корректировки и выполнить сохранение (рис.6).

Рисунок 6.

Ниже рассмотрим какие блоки представлены в шаблоне "Muza".

Статические блоки над разделом "Подписка на новости"

Рисунок 7.

Как показано на рис.7 два блока
- первый блок слева, занимает четверть экрана, лучше всего подходит для размещения в нем баннера, данный блок называется "Баннер малый перед блоком подписки на новости".
- второй блок справа называется "Баннер большой перед блоком подписки на новости (вкладки)", блок занимает всю ширину экрана при неактивном блоке с малым баннером и 3/4 экрана при активном блоке. Данный блок может содержать в себе рекламные баннеры, описание компании, либо вкладки с товарами.

Вкладки с товарами в блоке "Баннер большой перед блоком подписки на новости (вкладки)"

Рассмотрим как сделать подобные вкладки (рис.8).

Рисунок 8.

Для того, чтобы у блока были вкладки с ссылками на товары, необходимо в статическом блоке "Баннер большой перед блоком подписки на новости (вкладки)" в режиме "Источник" прописать следующий код, заменив названия и картинки на свои (рис.9).

Рисунок 9.

<div class="tabs tabs-horizontal tabs-on-main" data-tabs="">
<div class="row tabs-header">
<div class="col-xs-auto">
<ul class="tabs-headers clear">
<!—Здесь необходимо заменить названия вкладок-->
<li class="tabs-header-item" data-ng-class="{'tabs-header-active cs-br-1' :
tabHeader.selected}" data-ng-hide="!tabHeader.isRender" data-tab-header="" id="tab1"
><a class="tabs-header-item-link" data-ng-class="{'tab-not-active' :
!tabHeader.selected, 'cs-l-2 link-dotted-none' : tabHeader.selected}"
data-ng-click="tabs.change(tabHeader)" href=""> Диваны </a></li>
<li class="tabs-header-item" data-ng-class="{'tabs-header-active cs-br-1' :
tabHeader.selected}" data-ng-hide="!tabHeader.isRender" data-tab-header="" id="tab2"
><a class="tabs-header-item-link" data-ng-class="{'tab-not-active' :
!tabHeader.selected, 'cs-l-2 link-dotted-none' : tabHeader.selected}"
data-ng-click="tabs.change(tabHeader)" href=""> Офисные кресла </a></li>
<li class="tabs-header-item" data-ng-class="{'tabs-header-active cs-br-1' :
tabHeader.selected}" data-ng-hide="!tabHeader.isRender" data-tab-header="" id="tab3"
><a class="tabs-header-item-link" data-ng-class="{'tab-not-active' :
!tabHeader.selected, 'cs-l-2 link-dotted-none' : tabHeader.selected}"
data-ng-click="tabs.change(tabHeader)" href=""> Детская мебель </a></li>
</ul>
</div>
<div class="col-xs">
<div class="line"> </div>
</div>
</div>

<div class="tabs-content">
<div class="tab-content clear" data-ng-class="{'tab-content-active': tabContent.header.selected}"
data-tab-content="tab1">
<div class="row">
<!—Здесь необходимо заменить содержимое вкладки 1-->
<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /2.png" /></a></div>

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /1.png" /></a></div>

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /3.png" /></a></div>
</div>
</div>

<div class="tab-content clear" data-ng-class="{'tab-content-active': tabContent.header.selected}" data-tab-content="tab2">
<div class="row">
<!—Здесь необходимо заменить содержимое вкладки 2-->
<div class="col-xs"><a href="#"><img class="tabs-product-img" src="Templates/Muza/80s /6.png" /></a></div>

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /5.png" /></a></div>

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /4.png" /></a></div>
</div>
</div>

<div class="tab-content clear" data-ng-class="{'tab-content-active': tabContent.header.selected}" data-tab-content="tab3">
<div class="row">
<!—Здесь необходимо заменить содержимое вкладки 3-->
<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /7.png" /></a></div>

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /8.png" /></a></div>

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/80s /9.png" /></a></div>
</div>
</div>
</div>
</div>

После чего сохранить изменения.

Карточка товара

Изменился дизайн карточки товара (рис.10).

Рисунок 10.

Готово. В данной инструкции мы рассмотрели основные настройки шаблона "Muza".