Zbuduj motyw Shopify za pomocą silnika Liquid

Autor: Peter Berry

Data Utworzenia: 14 Lipiec 2021

Data Aktualizacji: 13 Móc 2024

Wideo: Shopify Theme Build: The Setup - Episode 1

Zawartość

Pliki i foldery motywów
Mapowanie adresów URL na szablony
Ciecz: podstawy
Zrozumienie product.liquid
Wynik
Logika
Filtry
Co dalej?
Dalsze zasoby i inspiracje

W ciągu ostatnich kilku tygodni budowałem motyw Shopify dla Viewport Industries, firmy Elliot Jay Stocks, którą założyliśmy w zeszłym roku. Wybraliśmy Shopify z kilku powodów:

Pozwala nam sprzedawać zarówno produkty cyfrowe, jak i fizyczne
Jest w pełni hostowany, co oznacza brak serwerów, o które trzeba się martwić
Obsługuje wiele bramek płatniczych, które ładnie integrują się z naszym bankiem
Jest oparty na motywach, co oznacza, że możemy z łatwością ponownie wykorzystać kod HTML, CSS i JavaScript naszej istniejącej witryny

Shopify używa silnika szablonów o nazwie Liquid do przesyłania danych ze sklepu do szablonów. Płyn jest prawdopodobnie jedynym składnikiem szablonu Shopify, którego wcześniej nie używałeś i może być odrażający. Ale dobra wiadomość jest taka, że naprawdę nie jest tak trudno zacząć.

Jeśli kiedykolwiek używałeś Smarty, ERB lub Twig, to, co następuje, będzie ci znane. Jeśli nie, nie martw się: wystarczy nauczyć się kilku prostych zasad. Po dodaniu umiejętności Liquid do swojego zestawu narzędzi do tworzenia stron internetowych będziesz mógł w mgnieniu oka rozpocząć tworzenie motywów dla klientów.

Pliki i foldery motywów

Motywy Shopify to nic innego jak wiele plików (pliki HTML z rozszerzeniem .liquid, CSS, JS, obrazy itd.) I folderów. Motywy mogą wyglądać i działać tak, jak chcesz: naprawdę nie ma żadnych ograniczeń. Oto podstawowa struktura motywu:

majątek
config
układy
theme.liquid
urywki
szablony
404. ciecz
article.liquid
blog.liquid
cart.liquid
collection.liquid
index.liquid
page.liquid
product.liquid
search.liquid

Za pomocą tych plików możesz tworzyć najbardziej podstawowe motywy. Oczywiście prawdopodobnie chciałbyś dodać trochę CSS, JavaScript i kilka obrazów. Umieściłeś je w folderze zasobów. (Warto zauważyć, że obecnie nie możesz tworzyć podfolderów w folderze zasobów).

Aby uzyskać więcej informacji na temat działania motywów i dowiedzieć się o folderach config i snippets, polecam przeczytanie tematu Theme from Scratch and Theme Settings na Shopify Wiki.

Alternatywnie możesz zarejestrować się w bezpłatnym programie partnerskim, utworzyć sklep testowy i sprawdzić jeden z wielu bezpłatnych motywów dostępnych w obszarze administracyjnym Twojego sklepu testowego - po prostu przejdź do edytora motywów znajdującego się w menu Motywy.

Mapowanie adresów URL na szablony

Motywy Shopify działają poprzez mapowanie bieżącego adresu URL do określonego szablonu. Na przykład, jeśli przeglądamy produkt, który ma następujący adres URL ...

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

... wtedy Shopify będzie wiedział, jak używać twojego product.liquid szablon. Z tego powodu w szablonach należy używać tylko nazw plików wymienionych powyżej.

Oprócz tego, że Shopify wie, który szablon wyświetlić w odniesieniu do bieżącego adresu URL, udostępnia nam szereg bardzo konkretnych zmiennych. Są to tzw. „Zmienne szablonu” i umożliwiają nam wyświetlanie danych w naszych szablonach.

Na przykład w naszym szablonie product.liquid mamy dostęp do trafnie nazwanego produkt zmienna. Oznacza to, że możemy umieścić nazwę, opis, cenę i dostępność naszego produktu w naszym szablonie. Będziemy używać kombinacji zmiennych Płyn i szablonów, aby wypełnić nasze szablony danymi dotyczącymi naszych produktów.

Aby zapoznać się z pełną listą dostępnych zmiennych szablonów, odwiedź Cheat Sheet Mark Dunkley's Shopify.

Ciecz: podstawy

Liquid jest tutaj, aby ułatwić nam życie jako projektantów motywów. Jednym z głównych sposobów, w jaki to robi, jest użycie układów. Układy są idealne do dołączania typowych elementów strony, takich jak nagłówek, główna nawigacja, stopka i tak dalej.

W powyższej strukturze folderów zauważysz plik o nazwie theme.liquid w folderze układów. Możesz myśleć o theme.liquid jako o naszym szablonie głównym. Wszystkie nasze pozostałe szablony, takie jak product.liquid, są renderowane wewnątrz tego szablonu głównego. Jeśli chcesz, możesz mieć więcej niż jeden układ, ale domyślny zawsze powinien mieć nazwę theme.liquid.

Nie widziałem pliku theme.liquid firmy United Pixelworkers, ale możesz sobie wyobrazić, że zawiera on znaczniki obszarów zaznaczonych na czerwono poniżej.

Oto jak mógłby wyglądać podstawowy układ theme.liquid:

! DOCTYPE html>
html>
głowa>
{{content_for_header}}
tytuł> Tutaj znajduje się tytuł strony / tytuł>
/ head>
ciało>
{{content_for_layout}}
/ body>
/ html>

Zauważysz dwa wyrażenia w podwójnych nawiasach klamrowych: {{content_for_header}} i {{content_for_layout}}. To są nasze pierwsze przykłady Liquid w akcji.

Shopify często używa {{content_for_header}}, aby dodać określone pliki do sekcji head> dokumentu: na przykład, dodając kod śledzenia. {{content_for_layout}} to miejsce, w którym pojawi się zawartość naszego szablonu z mapą adresu URL. Na przykład, jeśli przeglądamy stronę produktu, nasz plik product.liquid zastąpi {{content_for_layout}} w naszym pliku układu.

Zrozumienie product.liquid

Po zapoznaniu się z podstawami układów czas przyjrzeć się szablonowi.Sklepy skupiają się na produktach, więc spójrzmy na to product.liquid.

Oto bardzo prosty, ale funkcjonalny przykład szablonu product.liquid.

h2> {{product.title}} / h2>
{{ Opis produktu }}
{% if product.available%}
form action = "/ cart / add" method = "post">
select id = "product-select" name = ’id”>
{% dla wariantu w product.variants%}
wartość opcji = "{{variant.id}}"> {{variant.title}} - {variant.price} / option>
{% endfor%}
/ wybierz>
input type = "submit" name = "add" value = "Dodaj do koszyka" id = "zakup" />
/ formularz>
{% else%}
p> Ten produkt jest niedostępny / p>
{% endif%}

Działa tutaj kilka kluczowych koncepcji płynów. Przyjrzyjmy się im po kolei.

Wynik

Pierwsza linia kodu zawiera frazę {{product.title}}. Po wyrenderowaniu wyświetli tytuł produktu, który, jak już wiesz, jest określany przez adres URL. W poniższym przykładzie United Pixelworkers tytuł produktu to po prostu „Indianapolis”.

Liquid używa formatu składni kropkowej. W tym przypadku {{product.title}} oznacza zmienną szablonu produktu i jej atrybut tytułu. Możemy wyświetlić opis produktu w ten sam sposób, używając {{ Opis produktu }}.

Jest to znane w terminach płynnych jako wynik. Wszystkie dane wyjściowe są oznaczone podwójnymi nawiasami klamrowymi w następujący sposób: {{twoje_wyjście}}.

Logika

W następnym wierszu kodu zauważysz instrukcję w nawiasie klamrowym, po której następuje%: w tym przypadku {% if product.available%}. To kolejna ważna koncepcja w Liquid, znana jako logika. Dalej zauważysz {% else%} i na koniec stwierdzenia {% endif%}.

To jeśli oświadczenie pozwala nam dyktować, co wyświetla nasz szablon, w oparciu o jeden lub więcej warunków: w tym przypadku, czy nasz produkt jest dostępny. W praktyce oznacza to, że „jeśli nasz produkt jest dostępny, pokaż związane z nim informacje; w przeciwnym razie pokaż komunikat informujący użytkownika, że nie ma go w magazynie ”.

Wszystkie instrukcje logiczne w Liquid używają notacji procentowej w nawiasach klamrowych, tj. {% If…%}. Pamiętaj tylko, aby odpowiednio zamknąć swoje oświadczenia, bo inaczej wpadniesz w kłopoty. Na przykład:

{% if product.available%}
Pokaż przycisk Dodaj do koszyka tutaj
{% else%}
Wyświetl komunikat o następnym dostępnym produkcie
{% endif%}

Filtry

Ciecz pozwala nam manipulować naszą produkcją na kilka sposobów. Jednym z nich jest użycie filtrów. Treść, która trafia do filtra, wyjdzie na drugi koniec zmieniona w określony sposób.

Patrząc na powyższy przykład product.liquid, zauważysz { pieniądze }. Wariant to termin używany do opisania odmiany produktu: na przykład różne kolory i rozmiary. Interesujące jest to, że używamy filtra do zmiany ceny wyjściowej - w tym przypadku za pomocą filtra pieniężnego. Spowoduje to dodanie symbolu waluty sklepu na początku ceny.

Inne filtry obejmują strip_html, który usunie wszystkie tagi HTML z danego fragmentu tekstu i ucase, co spowoduje zamianę na wielkie litery.

Możesz także łączyć filtry razem. Na przykład:

{article.content}

W tym przypadku pobieramy atrybut content zmiennej szablonu artykułu i przekazujemy go do filtru strip_html, a na końcu do filtru truncate. Zauważysz, że filtr obcinania pozwala nam określić, jak długo chcemy, aby końcowe dane wyjściowe miały: w tym przypadku 20 znaków.

Filtry pozwalają nam również na szybką pracę nad tworzeniem skryptu i elementów graficznych w szablonach. Oto bardzo szybki sposób użycia filtra w celu wyświetlenia obrazu z powiązanym tagiem alt:

{asset_url}

Użycie tego w naszym motywie Shopify spowoduje renderowanie następującego elementu img w naszym szablonie:

img src = "/ files / Shops / your_shop_number / asset / logo.png" alt = "Logo witryny" />

Plik asset_url filtr jest bardzo przydatny, ponieważ zwraca pełną ścieżkę do aktualnego motywu majątek teczka. Korzystanie z tego filtru umożliwia zastosowanie motywu w wielu sklepach bez martwienia się o ścieżki.

Co dalej?

Miejmy nadzieję, że tych kilka przykładów pokazało, że płyn nie jest aż tak skomplikowany. Oczywiście możesz z tym zrobić znacznie więcej, ale dzięki opanowaniu wyjścia, logiki i filtrów jesteś na dobrej drodze do zrozumienia większości tego, co będzie potrzebne do zbudowania motywu Shopify.