Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Давайте разработаем тему Shopify Давайте разработаем тему Shopify

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Elen (you can also view the original English article)

Недавно Themeforest открыл новый раздел, где вы можете покупать или продавать темы для Shopify! Shopify - это решение для электронной коммерции, которое позволяет легко начать онлайн-бизнес. Вы можете запустить магазин за считанные минуты.

Чтобы раскрутить раздел Shopify на ThemeForest, авторов каждого принятого шаблона вознаграждают бонусом в размере 100 долларов, пока в этой категории не будет 10 шаблонов.

Shopify хорошо известен своей гибкостью в отношении дизайна. Посмотрите некоторые примеры. Shopify создал (и позже выпустил как открытый ресурс) Liquid Templating Engine. Liquid обеспечивает полную свободу для дизайнеров.

В этом уроке я покажу, как создать тему Shopify с помощью Liquid. Когда вы знакомы с основами, вы можете создать тему и отправить ее на Themeforest.

Что такое Liquid?

Liquid - это инструмент создания шаблонов, разработанный и используемый Shopify. Liquid обрабатывает свои же файлы шаблонов, которые имеют расширение «.liquid». Файлы Liquid - это просто файлы HTML со встроенным кодом. Поскольку Liquid позволяет полностью настроить ваш HTML, вы фактически можете создать абсолютно любой дизайн магазина.

Первоначально Liquid был разработан в Ruby для использования с Shopify и выпущен как открытый ресурс. С тех пор он использовался в других проектах Ruby on Rails и был перенесен на PHP и javascript.

Быстрый обзор Liquid

Давайте посмотрим, что нужно, чтобы начать работу с liquid.

Как видите, Liquid - это просто HTML с некоторым встроенным кодом. Вот почему Liquid настолько мощный, он дает вам полную власть над кодом и упрощает работу с имеющимися у вас переменными.

Что происходит выше?

Shopify banner

В Liquid существует два типа разметки: «Output» и «Tags». Tags Liquid взяты в фигурные скобки и знаки процента; output взят в двойные фигурные скобки.

В приведенном выше фрагменте первая строка Liquid следующая: {% for product in products %} .... {% endfor %}. Это пример Liquid Tag. Тег for делает цикл для коллекции товаров и позволяет работать с каждым из них. Если вы когда-либо использовали циклы PHP, Ruby, javascript или (подставьте любой язык программирования), таким же образом он работает и в Liquid.

Следующая строка Liquid в приведенном выше фрагменте - {{ product.title }}. Это пример Liquid Output. Он потребует название товара и отобразит результат на экране.

Следующая строка Liquid представляет нам что-то новое: {{ product.price | money_with_currency }} - здесь мы имеем пример Liquid Filter. Они позволяют обрабатывать заданную строку или переменную. Фильтры берут значение слева от себя и что-то с ним делают. Этот конкретный Фильтр называется format_as_money; он принимает число, добавляет к нему знак доллара и дает ему правильный символ валюты.

Простой пример:

может генерировать следующий HTML-код

Последняя строка Liquid, приведенная выше: {{ product.description | prettyprint | truncate: 200 }} показывает, как вы можете объединить фильтры вместе. Фильтры действуют на значение, которое находится слева от них, даже если это значение является результатом другого фильтра. Таким образом, этот фрагмент будет применять фильтр prettyprint к product.description, а затем применит фильтр truncate к результатам prettyprint. Таким путем, вы можете объединить столько фильтров Liquid, сколько вам нужно!

Что еще предлагает Liquid?

Среди Liquid Tags, помимо тега for, есть несколько других. Наиболее распространенными являются:

Comment:

If/Else:

Case:

Ознакомьтесь с полным списком тегов.

Liquid также предлагает множество фильтров, которые вы можете использовать для манипуляции вашими данными. Вот некоторые из них:

Capitalize:

Join:

Date:

Ознакомьтесь с полным списком доступных фильтров.

Анатомия темы Shopify

Все темы Shopify имеют простую структуру каталогов. Она состоит из папок assets (ресурсов), layout (макетов) и templates (шаблонов). Давайте посмотрим, что где находится:

  1. папка assets: в папке с ресурсами вы сохраняете все файлы, которые хотите использовать в вашей теме. Сюда входят все таблицы стилей, скрипты, изображения, аудиофайлы и т.д., которые вы будете использовать. В ваших шаблонах вы можете получить доступ к этим файлам с помощью фильтра asset_url.
  2. папка layout: эта папка должна содержать только один файл с именем theme.liquid. Theme.liquid содержит глобальные элементы для вашей темы Shopify. Этот код будет охвачен вокруг всех других шаблонов в вашем магазине. Вот пример очень простого theme.liquid:

    Необходимые элементы

    Есть два ОЧЕНЬ важных элемента, которые должны присутствовать в файле theme.liquid. Первый - {{ content_for_header }}. Эта переменная должна быть помещена в начало theme.liquid. Это позволяет Shopify вставлять в заголовок документа любой необходимый код, например скрипт для отслеживания статистики. Для тех, кто знаком с WordPress, это очень похоже на функцию wp_head ().

    Другой ОЧЕНЬ важный элемент - это {{ content_for_layout }}. Эта переменная должна быть помещена в тело theme.liquid; это место, где будут отображаться все ваши другие шаблоны Liquid.

  3. папка templates: эта папка содержит остальные шаблоны Shopify. Она состоит из:
    1. index.liquid: отображается как главная страница вашего магазина.
    2. product.liquid: каждый товар буде использовать этот шаблон для своего отображения.
    3. cart.liquid: отображает корзину покупок текущего пользователя.
    4. collection.liquid: отображение коллекций продуктов.
    5. page.liquid: отображается для любых статических страниц, которые бы мог создать магазин.
    6. blog.liquid: отображается для любых блогов магазина Shopify.
    7. article.liquid: отображается для любых статей блогов и включает форму для отправки комментариев.
    8. 404.liquid: отображается в любое время, когда магазин возвращает 404.
    9. search.liquid: отображается для результатов поиска в магазине.

Как вы могли догадаться, каждый из этих шаблонов имеет доступ к различным переменным. Например, product.liquid имеет доступ к переменной product, которая содержит текущий отображаемый продукт; у blog.liquid есть доступ к переменной blog, а index.liquid имеет доступ к каждой из них. Если вас интересуют, какие переменные вы можете использовать в каком шаблоне, ознакомьтесь с документацией Liquid.

Основной скелет для начала работы

Самое лучшее в проектировании для Shopify - это то, что вы можете использовать все навыки, которые у вас уже есть: HTML, CSS, JS и т.д. Единственным препятствием в этом процессе становится то, что вы должны ознакомится, какие переменные Liquid доступны в каждом шаблоне.

Именно здесь появляется Vision.

Vision - это Shopify в коробке.

Что такое Vision?

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

Что мне нужно для запуска Vision?

Vision полностью поставляется со всем необходимым для запуска прямо с комплекта. Если у вас есть текстовый редактор и установленный веб-браузер, вы готовы к работе.

Более того, Vision предоставляется в готовых к работе темах Shopify. Shopify разрешил людям использовать эти темы, как "строительные блоки", потому ви можете начать с использования этих уже существующих тем, а затем на их основе расширятся и расти.

Итог

Shopify - это быстрорастущая платформа для электронной коммерции, которая уже имеет тысячи продавцов, желающих продемонстрировать свои товары. Используя Vision, вы можете сделать быстрый старт и начать разработку за миг. Первые 10 шаблонов, которые будут размещены в категории Shopify на Themeforest получат дополнительные 100 долларов. Потому давайте, начинайте! 

Если вам нужно больше информации о том, как работать с Shopify, у них есть исчерпывающая документация на их wiki. Просмотрите The Shopify Theme GuideUsing Liquid, и Getting Started with Vision

Наилучшие шаблоны Shopify на ThemeForest... На данный момент!

  • Drifter

    Drifter

    "Особенность этой глянцевой темы Shopify - простые линии и современные акценты дизайна, которые показывают вашу продукцию в наилучшем свете".

    View Theme

  • Drifter

    Fancy Pink

    "Тема shopify с современным причудливым дизайном web 2.0".

    View Theme

  • Подписывайтесь на NETTUTS RSS Feed, чтоб получать больше учебных материалов и статей по веб-разработке.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.