Шаблон "Muza"

Внимание

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

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

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

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

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

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

Рисунок 1.

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

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

Рисунок 2.

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

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

Рисунок 3.

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

Рисунок 4.

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

Заметка

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

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

Рисунок 5.

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

Рисунок 6.

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

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

Рисунок 7.

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

Вкладки с товарами в блоке "MuzaMainpageBlockBig"

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

Рисунок 8.

Для того, чтобы у блока были вкладки с ссылками на товары, необходимо в статическом блоке "MuzaMainpageBlockBig" в режиме "источник" прописать следующий код, заменив названия и картинки на свои (рис.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/images /2.png" /></a></div>

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

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/images /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/images /6.png" /></a></div>

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

<div class="col-xs"><a href="#"><img class="tabs-product-img" src=" Templates/Muza/images /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/images /7.png" /></a></div>

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

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

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

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

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

Рисунок 10.

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