Лэйауты

Layout - это часть страницы, содержащая элементы, расположенные на всех страницах магазина, как то шапка, верхнее меню, подвал, возможно, правый или левый сайдбар.

Внутри шаблона-лейаута выводится контент всех остальных шаблонов. Другой шаблон лейаута используется в оформлении заказа и в личном кабинете покупателя.

Подробнее о выборе шаблона и формировании страниц магазина можно узнать в этой статье.

layouts.layout.liquid

Это основной лейаут магазина. Обычно он содержит элементы шапки (header) и подвала (footer), подключаемые скрипты и глобальные стили темы.

 

Шаблон layouts.layout.liquid может рассматриваться как основной шаблон. Все остальные шаблоны создаются внутри layouts.lauout. Все элементы, повторяемые в теме (такие как навигация, глобальные скрипты и стили, шапка, подвал и так далее) рекомендуется описывать в layouts.layout.liquid.

Содержимое остальных шаблонов добавляется внутрь лейаута с помощью переменной {{content_for layout}}

Настройка селекторов, зависящих от шаблона

Вы можете задать нужный селектор в зависимости от шаблона и использовать его для создания CSS-стиля, например, для тега body с помощью строковой переменной template.

При этом очень важно чтобы селектор не содержал точки, которая появляется если создается дополнительный шаблон. Например, вы создаете шаблон Товар с названием special, переменная template при этом вернет product.special, в таком виде селектор нельзя использовать. Чтобы этого избежать - воспользуйтесь фильтром replace. Например:

<body class="{{ template | replace: '.', ' ' | truncatewords: 1, '' }}">
....
</body>

После этого вы можете создать css-стили, зависящие от шаблона.

Доступ к глобальным переменным и методам из шаблона

Внутри layouts.layout Вы можете использовать глобальные переменные и объекты, описанные в этой статье.

Например, можно вывести содержимое определенного блока или введенный в настройках стилей темы текст.

layouts.checkout.liquid

layouts.checkout становится основным лейаутом на страницах оформления заказа и личного кабинета.

В теме по умолчанию может не быть такого шаблона, но его всегда можно создать, выбрав "Оформление заказа" в диалоге добавления нового шаблона (название шаблона оставьте пустым):

В оформлении заказа, на страницах оплаты (например, при формировании счета для оплаты юр. лицом или квитанции по форме ПД-4) и в личном кабинете покупателя шаблон layouts.checkout.liquid полностью выполняет роль лейаута.

Если в вашей теме используется файл custom_checkout.css.liquid, то он будет включаться в шаблоне layouts.checkout.liquid.

Изначально в магазине может не существовать этого шаблона, но его всегда можно создать, выбрав "Оформление заказа" в диалоге добавления нового шаблона (название шаблона оставьте пустым):

 

new_checkout.png

Используемые теги, методы и фильтры

В шаблоне layouts.checkout можно использовать все те же глобальные методы, (кроме title, description и keywords) что и в layouts.layout, плюс несколько специфичных

Тег yield

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

 {% yield 'title' %}

Текущее содержимое корзины:

 {% yield 'sidebar' %}

Пользовательские сообщения:

 {% yield 'flash_messages' %}

И само содержимое шаблона текущей страницы:

 {% yield %}

 

global_stylesheet_tag

Фильтр, применяемый для получения стандартных стилей чекаута и личного кабинета:

 {{ 'checkout' | global_javascript_tag }}

 

global_javascript_tag

Фильтр, применяемый для получения стандартных скриптов чекаута и личного кабинета.

Внимание! Стандартные скрипты уже включаются в себя библиотеку jquery, крайне не рекомендуется подключать ее повторно! Это может привести к трудноразрешимым конфликтам скриптов.

 {{ 'checkout' | global_javascript_tag }}

 

customer_checkout_css

Cтроковая переменная, позволяющая получить css-файл с пользовательскими стилями чекаута. На момент написания статьи это файл custom_checkout.css или custom_checkout.css.liquid (имя файла не настраивается)

 <link href='{{ customer_checkout_css }}' rel='stylesheet'>

 

Оформление заказа

Верстка оформления заказа не меняется напрямую. Это сделано для того чтобы мы имели возможность вводить изменения в оформлении заказа у всех пользователей сразу (мы бы потеряли такую возможность для конкретного пользователя, если у него свой шаблон оформления заказа).

Чтобы поменять что-либо в оформлении заказа вы можете испльзовать скрипты в шаблоне layouts.checkout.liquid

Пользовательские layout'ы

Вы можете создавать свои собственные layout'ы. Для этого в диалоге создания нового шаблона выберите Тип: Шаблон.

Чтобы применить созданный layout к определенному шаблону - используйте в этом шаблоне тег

{% layout 'my_layout' %} 

с названием шаблона-лейаута.

Полезная статья?
Остались вопросы?
Отправь тикет в техподдержку!
Недавно просмотренные статьи