Особенности шаблонов на InSales

Особенности шаблонов на InSales

Темы InSales состоят из liquid-файлов, каждый из которых служит для определенных задач. Например, collection.liquid используется для отображения товаров внутри категории, а product.liquid - для отображения информации о конкретном товаре.

Структура папок:

root/
    |-- config/
    |-- media/
    |-- snippets/
    |-- templates/

media

Эта директория содержит ассеты, используемые в теме, в том числе изображения, стили, скрипты, svg-файлы (css, js и svg-файлы из директории media можно править с помощью редактора шаблонов в бек-офисе магазина). Для обращения к файлам из этой директории из шаблонов используйте фильтр asset_url (важно! css и картинки лежат в одном месте потому в таких случаях как background-image: url('./images/main.jpg') ссылка на файл указывается от корневой директории background-image: url('main.jpg'), папки на платформе создавать нельзя)

snippets

Директория содержит Liquid-снипеты с кусочками кода, используемого в разных шаблонах / в разных частях сайта. Используйте include для включения снипета в шаблон.

templates

Эта директория содержит файлы Liquid-шаблонов для основных типов страниц сайта, а также шаблоны лэйаутов, определяющий общую часть оформления и вёрстки страниц. По умолчанию в теме присутствует 2 лэйаута - layouts.layout.liquid (для всех страниц сайта, кроме личного кабинета и шаго оформления заказа) и layouts.checkout.liquid (для страниц оформления заказа).

config

тут файлы конфигурации темы

Нейминг шаблонов:

  • Главный лэйаут - layouts.layout.liquid (Все остальные шаблоны не являющиеся лэйаутами наследуют содержимое данного файла. Контент шаблонов будет вставлен на место тега {{ content_for_layout }})
  • Главная - index.liquid
  • Категория - collection.liquid
  • Товар - product.liquid
  • Корзина - cart.iquid
  • Страница page.liquid
  • Поиск search.liquid
  • Блог blog.liquid
  • Статья article.liquid

Кастомные шаблоны для любой страницы можно сделать, со следующим неймингом:

Сначала идет имя лэйаута, потом кастомное имя.

  • product.hits.liquid
  • product.new.liquid
  • blog.news.liquid
  • page.contacts.liquid