Статьи

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

Январь 15, 2019

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

Чтобы запустить каталог ThemeForest’s Shopify, авторы каждого принятого шаблона будут получать бонус в размере 100 долларов — пока в категории не будет десяти шаблонов.

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

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

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

Что такое жидкость?

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

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

Быстрый просмотр жидкости

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

01
02
03
04
05
06
07
08
09
10
11
<ul id=»products»>
   {% for product in products %}
     <li>
       <h2>{{ product.title }}</h2>
       Only {{ product.price |
      
       <p>{{ product.description |
                    
     </li>
   {% endfor %}
 </ul>

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

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

Shopify баннер

В Liquid есть два типа разметки: Вывод и Теги . Жидкие метки окружены фигурными скобками и знаками процента; вывод окружен двумя фигурными скобками.

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

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

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

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

1
<span class=»money»>{{ product.price |

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

1
<span class=»money»>$45.00 <span class=»caps»>USD

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

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

С точки зрения Liquid Tags, кроме тега for , есть еще несколько. Наиболее распространенные из них:

Комментарий:

1
{% comment %} This text will not be rendered {% endcomment %}

Если еще:

1
2
3
4
5
{% if product.description == «» %}
     This product has no description!
   {% else %}
     This product is described!
   {% endif %}

Случай:

1
2
3
4
5
6
{% case template %}
     {% when ‘product’ %}
       This is a product.liquid
     {% when ‘cart’ %}
       This is a cart.liquid
   {% endcase %}

Проверьте полный список тегов.

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

прописной:

1
{{ “monday” |

Присоединиться:

1
{{ product.tags |

Дата:

1
Posted on {{ article.created_at |

Проверьте полный список доступных фильтров .

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

Темы Shopify имеют простую структуру каталогов. Он состоит из папки ресурсов, макета и шаблонов. Давайте посмотрим, что идет куда:

  1. Папка активов . В папке ресурсов хранятся все файлы, которые вы хотите использовать с вашей темой. Сюда входят все таблицы стилей, сценарии, изображения, аудиофайлы и т. Д., Которые вы будете использовать. В ваших шаблонах вы можете получить доступ к этим файлам с asset_url фильтра asset_url .

    1
    {{ «logo.gif» |
  2. папка макета : эта папка должна содержать только один файл с именем theme.liquid. Theme.liquid содержит глобальные элементы для вашей темы Shopify. Этот код будет обернут вокруг всех других шаблонов в вашем магазине. Вот пример очень простой темы.liquid:
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»
       «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
     
     <html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»en» lang=»en»>
       <head>
         <title>{{shop.name}}</title>
         {{ ‘layout.css’ |
     
         {{ content_for_header }}
       </head>
     
       <body>
         <div id=»header»>
           <h1 id=»logo»><a href=»/»>{{ shop.name }}</a></h1>
         </div>
     
         <div id=»content»>
           {{ content_for_layout }}
         </div>
     
         <div id=»footer»>
           All prices are in {{ shop.currency }} |
           Powered by <a href=»http://www.shopify.com» title=»Shopify, Hosted E-Commerce»>Shopify</a>
         </div>
       </body>
     </html>

    Обязательные элементы

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

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

  3. Папка шаблонов : эта папка содержит остальные ваши шаблоны 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 .

Видение — Shopify в коробке

Что такое видение?

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

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

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

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

Резюме

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

Если вам нужна дополнительная информация о разработке с Shopify, у них есть обширная документация на их вики . Ознакомьтесь с Руководством по темам Shopify , Использование жидкости и Начало работы с Vision .

Лучшие Shopify шаблоны от ThemeForest …. Пока!

  • бродяга

    бродяга

    «Эта элегантная тема Shopify имеет четкие линии и акценты современного дизайна, которые демонстрируют ваши продукты. Пользовательские лайтбоксы jQuery позволяют просматривать ваши продукты в деталях».

    Посмотреть тему

  • бродяга

    Необычный розовый

    «Тема Shopify с современным, модным дизайном Web 2.0».

    Посмотреть тему

43
Share: