Advertisement
  1. Code
  2. Web Development

Давайте створимо тему Shopify Давайте створимо тему Shopify

Scroll to top
Read Time: 6 mins

Ukrainian (українська мова) translation by Elen (you can also view the original English article)

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

Щоб запустити розділ Shopify на ThemeForest, авторів кожного прийнятого шаблону нагороджують бонусом в розмірі 100 доларів, аж поки в цій категорії не буде десяти шаблонів.

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 взяті в фігурні дужки і знаки відсотка; оutput взятий в подвійні фігурні дужки.

У наведеному вище фрагменті перший рядок 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. Він містить глобальні елементи для вашої теми Shopify. Цей код буде "крутитися" навколо всіх інших шаблонів в вашому магазині. Ось приклад дуже простого theme.liquid:

    Необхідні елементи

    Є два ДУЖЕ важливих елемента, які повинні бути присутніми в файлі theme.liquid. Перший - це {{ content_for_header }}. Ця змінна повинна бути розташована на початку. Це дозволяє 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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.