Създайте тема Shopify с Liquid engine

Автор: Peter Berry

Дата На Създаване: 14 Юли 2021

Дата На Актуализиране: 13 Може 2024

Създайте тема Shopify с Liquid engine - Творчески

Съдържание

Тематични файлове и папки
Съпоставяне на URL адреси към шаблони
Течност: основите
Разбиране на product.liquid
Изход
Логика
Филтри
Какво следва?
Допълнителни ресурси и вдъхновение

През последните няколко седмици изграждам темата Shopify за Viewport Industries, компанията Elliot Jay Stocks и сформирах миналата година. Избрахме Shopify по няколко причини:

Позволява ни да продаваме както цифрови, така и физически продукти
Той е напълно хостван, което означава, че няма сървъри, за които да се притеснявате
Той поддържа редица платежни шлюзове, които се интегрират добре с нашата банка
Той е базиран на теми, което означава, че можем лесно да използваме HTML, CSS и JavaScript на нашия съществуващ сайт

Shopify използва механизъм за шаблони, наречен Liquid, за извеждане на данни от вашия магазин във вашите шаблони. Течността е може би единствената съставка на тема Shopify, която не сте използвали досега и тя може да бъде компенсирана. Но добрата новина е, че наистина не е толкова трудно да започнете.

Ако някога сте използвали Smarty, ERB или Twig, това, което следва, ще ви бъде познато. Ако не, не се притеснявайте: просто е въпрос на изучаване на няколко прости правила. След като добавите Liquid умения към вашия набор от инструменти за уеб разработка, ще можете да започнете да изграждате теми за клиенти за нула време.

Тематични файлове и папки

Темите на Shopify не са нищо повече от редица файлове (HTML файлове с разширение .liquid, CSS, JS, изображения и т.н.) и папки. Темите могат да изглеждат и да работят както искате: наистина няма ограничения. Ето основната структура на тема:

активи
конфиг
оформления
тема.течност
фрагменти
шаблони
404. течност
статия.течност
blog.liquid
количка.течност
колекция.течност
index.liquid
стр. течност
продукт.течност
search.liquid

С тези файлове можете да създавате най-основните теми. Разбира се, вероятно бихте искали да добавите някои CSS, JavaScript и няколко изображения. Ще ги поставите в папката с активи. (Струва си да се отбележи, че понастоящем не са разрешени подпапки в папката ви с активи.)

За повече информация как работят темите и за да разберете за папките config и snippets, бих препоръчал да прочетете Theme from Scratch and Theme Settings в Shopify Wiki.

Като алтернатива можете да се регистрирате в безплатната програма за партньори, да създадете тестов магазин и да проверите една от многото безплатни теми, налични в административната зона на вашия тестови магазин - просто отидете в редактора на теми, намиращ се в менюто Теми.

Съпоставяне на URL адреси към шаблони

Темите на Shopify работят, като съпоставят текущия URL адрес с определен шаблон. Например, ако разглеждаме продукт, който има следния URL адрес ...

http://www.unitedpixelworkers.com/products/indianapolis

... тогава Shopify ще знае да използва вашия продукт.течност шаблон. Поради тази причина винаги трябва да използвате само имената на файловете, изброени по-горе за вашите шаблони.

В допълнение към Shopify, който знае кой шаблон да се показва по отношение на текущия URL адрес, той ни предоставя редица много специфични променливи. Те са известни като „променливи на шаблони“ и ни позволяват да показваме данни в нашите шаблони.

Например в нашия шаблон product.liquid имаме достъп до точното име продукт променлива. Това означава, че можем да изведем името, описанието, цената и наличността на нашия продукт в нашия шаблон. Ще използваме комбинацията от променливи Liquid и template, за да попълним нашите шаблони с данни, свързани с нашите продукти.

За пълен списък с наличните променливи на шаблона посетете Cheat Sheet на Mark Dunkley.

Течност: основите

Liquid е тук, за да улесни живота ни като дизайнери на теми. Един от основните начини за това е с използването на оформления. Оформленията са идеални за включване на често срещани елементи на страницата като заглавна част, основна навигация, долен колонтитул и т.н.

В моята структура на папките по-горе ще забележите файл, наречен тема.течност в папката с оформления. Можете да мислите за theme.liquid като за наш главен шаблон. Всички други наши шаблони, като product.liquid, се изобразяват в този главен шаблон. Можете да имате повече от едно оформление, ако желаете, но стандартното винаги трябва да се нарича theme.liquid.

Не съм виждал файл theme.liquid на United Pixelworkers, но можете да си представите, че той съдържа маркировката за областите, очертани в червено по-долу.

Ето как може да изглежда основно оформление на theme.liquid:

! DOCTYPE html>
html>
глава>
{{content_for_header}}
заглавие> Заглавие на страница отива тук / заглавие>
/ глава>
тяло>
{{content_for_layout}}
/ тяло>
/ html>

Ще забележите две фрази, увити в двойни къдрави скоби: {{content_for_header}} и {{content_for_layout}}. Това са първите ни примери за течност в действие.

Shopify често използва {{content_for_header}}, за да добавя конкретни файлове към секцията head> на документ: например добавяне в проследяващ код. {{content_for_layout}} е мястото, където ще се покаже съдържанието на нашия URL-отразен шаблон. Например, ако разглеждаме продуктова страница, нашият файл product.liquid ще замени {{content_for_layout}} в нашия файл с оформление.

Разбиране на product.liquid

След като вече разгледахме основите на оформленията, време е да разгледаме шаблон.Магазините са изцяло свързани с продуктите, така че нека разгледаме продукт.течност.

Ето един много прост, но функционален пример за шаблон product.liquid.

h2> {{product.title}} / h2>
{{ Описание на продукта }}
{% ако продукт.достъпен%}
form action = "/ cart / add" method = "post">
изберете id = "product-select" name = ’id’>
{% за вариант в product.variants%}
стойност на опцията = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ изберете>
input type = "submit" name = "add" value = "Add to cart" id = "purchase" />
/ форма>
{% else%}
p> Този продукт не е наличен / p>
{% endif%}

Тук работят редица ключови Liquid концепции. Нека ги разгледаме по ред.

Изход

Първият ред код съдържа фразата {{product.title}}. Когато се изобрази, това ще изведе заглавието на продукта, което, както вече знаете, се определя от URL адреса. В примера на United Pixelworkers по-долу заглавието на продукта е просто „Индианаполис“.

Liquid използва формата на синтаксиса на точки. В този случай {{product.title}} се равнява на променливата на шаблона на продукта и атрибута на заглавието. Можем да изведем описанието на продукта по същия начин, използвайки {{ Описание на продукта }}.

Това е известно в Liquid термини като изход. Всички изходи се означават с двойни фигурни скоби, както следва: {{your_output}}.

Логика

На следващия ред на кода ще забележите изявление в къдрава скоба, последвано от%: в този случай, {% ако продукт.достъпен%}. Това е друга важна концепция в Liquid, известна като логика. По-надолу ще забележите {% else%} и накрая изявленията {% endif%}.

Това ако изявление ни дава възможност да диктуваме какво показва нашият шаблон, въз основа на едно или повече условия: в този случай, дали нашият продукт е наличен или не. На практика това казва: „ако нашият продукт е наличен, покажете информацията, свързана с него; в противен случай покажете съобщение, което уведомява потребителя, че го няма на склад ”.

Всички логически изявления в Liquid използват нотацията за процента на фигурната скоба, т.е. {% if ...%}. Просто не забравяйте да затворите изявленията си по подходящ начин, в противен случай ще се сблъскате с проблеми. Например:

{% ако продукт.достъпен%}
Покажи бутона Добавяне в количката тук
{% else%}
Показва съобщение за това кога продуктът ще бъде наличен за следващ път
{% endif%}

Филтри

Liquid ни позволява да манипулираме изхода си по няколко начина. Един от тях е да се използват филтри. Съдържанието, което влиза във филтъра, ще излезе от другия край, променено по специфичен начин.

Разглеждайки примера product.liquid по-горе, ще забележите { пари }. Вариант е термин, използван за описване на вариация на продукт: например различни цветове и размери. Интересното тук е, че използваме филтър, за да променим цената - в този случай, като използваме филтъра за пари. Това ще доведе до добавяне на символа за валута на магазина към предната част на цената.

Други филтри включват strip_html, който ще премахне всички HTML тагове от дадено парче текст и ucase, което ще го преобразува в главни букви.

Можете също така да се присъедините към филтрите заедно. Например:

{article.content}

В този случай ние вземаме атрибута на съдържанието на променливата на шаблона на статия и го предаваме на филтъра strip_html и накрая на филтъра за отрязване. Ще забележите, че филтърът за отрязване ни позволява да определим колко дълго искаме да бъде крайният изход: в този случай 20 знака.

Филтрите също ни позволяват да работим бързо по създаването на скриптове и елементи на изображения в шаблони. Ето един много бърз начин за използване на филтър за извеждане на изображение със свързан alt маркер:

{актив_url}

Използването на това в нашата тема Shopify ще доведе до изобразяването на следния елемент img в нашия шаблон:

img src = "/ files / shop / your_shop_number / assets / logo.png" alt = "Лого на сайта" />

The url_актив filter е много полезен, тъй като връща пълния път към текущата тема активи папка. Използването на този филтър ви позволява да прилагате темата си в множество магазини и да не се притеснявате за пътеките.

Какво следва?

Надяваме се, че тези няколко примера са ви показали, че Liquid не е толкова сложен. Разбира се, можете да направите много повече с него, но като овладеете изход, логика и филтри, вие сте на път да разберете повечето от това, което ще ви е необходимо, за да изградите тема Shopify.