Co to jest Shopify Płyn? Szybkie podsumowanie podstaw

O 4.4 milionów Strony internetowe e-commerce są budowane przy użyciu Shopify platforma. Jest to wszechstronna platforma eCommerce, która wstrząsnęła siecią od jej powstania w 2006 roku. Sprzedawcy wybierają tę platformę do hostowania swoich sklepów internetowych z wielu powodów, od łatwej konfiguracji płatności po wbudowane narzędzia marketingowe i wiele innych. 

Ale jednym z kluczowych aspektów Shopify to intuicyjny kreator witryn z tysiącami motywów i Shopify integracje aplikacji do wyboru. 

Jednak podczas gdy kreator bez kodu pozwala tworzyć wspaniałe i niepowtarzalne strony internetowe, istnieją pewne ograniczenia. Na przykład, gdy zaczynasz budować swój sklep internetowy, musisz wybrać motyw, który określa układ i poziom kontroli, jaką uzyskasz nad swoimi treściami. Nawet jeśli wybierzesz pusty motyw, tj. taki, który nie zawiera treści, nadal istnieje podstawowa architektura kodu, która z góry definiuje sposób organizacji treści.

Ale jest dobra wiadomość. Jeśli chcesz stworzyć swój własny Shopify szablon dla Twojej witryny lub witryny innej osoby Shopify Ciekły.

Zainteresowany? Dołącz do mnie, gdy próbuję odpowiedzieć na pytanie: Co to jest Shopify Płyn? Zanurzmy się!

Co to jest Shopify Płyn?

Co ciekawe, Shopify Od tego czasu istnieje już płyn Shopifypowstania. Gdy Shopifytwórcy najpierw zaprojektowali platformę, stworzyli projekt open source, który miał służyć jako język szablonowy dla wszystkich Shopify Zbieranie danych analitycznych o stronach internetowych lub aplikacjach (aby sprawdzić, czy strona działa poprawnie lub które sekcje strony są najbardziej atrakcyjne dla odwiedzających). szablony. 

Dla niewtajemniczonych „język programowania typu open source” odnosi się do kodu źródłowego oprogramowania, który jest publicznie dostępny i pozwala każdemu używać, modyfikować i rozpowszechniać kod w dowolnym celu. 

Stworzony przy użyciu Ruby, Shopify Ciecz w zasadzie pełni funkcję symbolu zastępczego, dzięki któremu można wstawiać dane w zdefiniowanym formacie (więcej na ten temat poniżej).

Jak to działa?

Aby to zrozumieć, musisz najpierw wiedzieć, że strony internetowe są zazwyczaj statyczne lub dynamiczne. Sklepy statyczne są zakodowane na stałe, aby wyświetlać treść dokładnie tak, jak jest napisana, na przykład w formacie HTML. Natomiast dynamiczna witryna internetowa może wyświetlać różne treści w zależności od sposobu, w jaki użytkownik wchodzi z nią w interakcję. 

Załóżmy teraz, że masz statyczną witrynę internetową; podstawowy szkielet witryny jest wstępnie ustawiony, ale chcesz renderować zawartość dynamiczną. To tu pisze Shopify Płyn do kodu HTML jest przydatny. Nadaje się to jako element zastępczy dla treści dynamicznych. 

Shopify Płyn pełni rolę pośrednika pomiędzy Twoim sklepem a Shopifyserwera, umożliwiając Liquidowi pobieranie danych Shopifyserwer i dostarcz go do swojego sklepu. Liquid może zażądać trzech głównych typów danych:

1. Obiekty
2. Tagi
3. filtry

Poniżej omówimy po kolei każdy typ danych:

Obiekty płynne

Obiekty są podobne do biblioteki funkcji lub treści; w każdym obiekcie znajdują się różne właściwości. 

Jeśli nie znasz pojęcia obiektów, oto krótki przegląd:

Obiekt jest podstawowym pojęciem w programowaniu. Obiekt składa się z dwóch komponentów: 

1. Właściwości definiujące stan obiektu
2. Funkcje definiujące zachowanie obiektu

Aby lepiej zilustrować, jak to działa, użyjemy przykładu niezwiązanego z kodowaniem. Na przykład samochód. W tym przypadku samochód, czyli obiekt, mógłby pełnić funkcje takie jak „przyspieszanie”, „skręcanie” i „hamowanie”. Natomiast właściwościami mogą być „okna”, „drzwi” samochodu itp. 

Mówiąc najprościej, przedmioty są ważne koncepcja w kodowaniu ponieważ pomagają organizować złożone systemy w łatwiejsze w zarządzaniu części.

Załóżmy na przykład, że tworzysz niestandardowy Shopify motyw i chcesz wyświetlić Tytuł bloga w Twoim szablonie. Możesz użyć Liquid, aby przenieść te informacje z Shopifyserwera i wyświetlić go gdzieś na stronie. W tym przykładzie jest to fragment kodu Liquid, którego można użyć do osiągnięcia tego celu:

{{Blog.title}} 

Rozbijmy to:

• Tutaj, 'blog' jest przedmiotem. 
• Nieruchomość, którą chcemy w tym zakresie biblioteka jest oznaczony przez 'tytuł". 
• Opona „.” informuje Liquid, w jaki sposób te dwa bity danych są ze sobą powiązane. 
• Podwójne nawiasy to składnia płynna, która definiuje {{treść/wyjście, które chcesz}}, które chcesz z Shopify serwer. 

Płynne znaczniki

Podczas używania Shopify Ciecz, tagi dodają logikę do treści, o które prosimy Shopify serwer, który pomaga określić, kiedy treść powinna być widoczna na stronie. Załóżmy na przykład, że chcemy wyświetlić konkretną grafikę w naszych świątecznych postach na blogu. Oznacza to, że chcemy, aby ta grafika pojawiała się tylko wtedy, gdy spełniony zostanie określony warunek. 

Oto jak to może wyglądać:

{% if blog.title == 'celebracja' %}

**obrazek HTML**

{% koniec, jeśli%}

Może się to wydawać skomplikowane, ale jeśli to rozłożymy na czynniki pierwsze, będzie to całkiem proste do zrozumienia:

• Tagi używają nieco innej składni niż obiekty wyglądające w ten sposób  {%…%}.
• Pierwszy znacznik {% if blog.title == 'celebracja' %} informuje Liquid, jaki warunek musi zostać spełniony przed zażądaniem treści z serwera.
• Warunek, o który pytaliśmy, jest zdefiniowany przez stwierdzenie „jeśli”.. Jeśli znasz się na kodowaniu, wiesz, że instrukcje „if” działają poprzez porównanie dwóch lub więcej fragmentów danych. Jeśli pasują, przejdziemy do następnej linii naszego kodu. Tutaj,  if blog.title == 'uroczystość' prosimy Liquid o sprawdzenie, czy tytuł naszego bloga zawiera słowo „celebracja”. Jeśli tak, przejdziemy do następnej linii naszego kodu. Jeśli tak się nie stanie, Liquid nie zwróci żadnej zawartości.
• W tym przykładzie, jeśli mamy tytuł bloga zawierający słowo „celebracja”, Liquid pobierze i wyświetli nasz obraz HTML.
• Kiedy już to zrobi, przechodzi do następnego wiersza {% koniec, jeśli%}, co kończy nasz program.

To tylko jeden przykład tego, co można zrobić za pomocą tagów. Shopify Liquid posiada znaczniki do:

• Control kiedy kod jest wykonywany
• Powtarzać/iteracja (powtórz) blok kodu
• Wyświetlacz niektóre znaczniki HTML
• Utwórz nowe zmienne.

Filtry cieczy

Filtry to fragmenty kodu, które zmieniają lub modyfikują dane wyjściowe obiektu. Mogą na przykład zmienić kolor, czcionkę, rozmiar lub wygląd elementów witryny. 

Ale oprócz zmiany widocznych aspektów obiektu mogą również wykonywać na obiekcie funkcje. Na przykład, jeśli chcesz wyświetlać tytuły swoich blogów pisanymi wielkimi literami, filtr może pomóc Ci to osiągnąć bez ręcznej zmiany wszystkich tytułów blogów:

{{ blog.title | uppercase }}

• Składnia filtrów jest następująca {{…}}.
• W tym przypadku właściwością obiektu, której szukamy jest „Tytuł bloga'.
• Filtr, który stosujemy to wielkie litery.
• Opona '|' oddziela wejście i wyjście naszego kodu.

Teraz, gdy użytkownik spojrzy na tytuł naszego bloga, będzie on wyświetlany wielkimi literami.

Korzyści Shopify Ciecz

Załóżmy, że jesteś projektantem lub programistą witryny. W takim razie jedną z najważniejszych zalet Shopify Liquid polega na tym, że nie potrzebujesz danych sklepu (tj. informacji o sklepie), aby utworzyć lub zmodyfikować witrynę. Dzieje się tak, ponieważ gdy użytkownik po raz pierwszy tworzy Shopify sklep, wszystkie informacje są przechowywane na Shopify serwer, co oznacza, że ​​możesz użyć Liquid, aby po prostu odzyskać potrzebne dane. 

Jeśli jednak nie jesteś programistą internetowym, zamiast tego jesteś po prostu właścicielem sklepu, który chce ulepszyć swój sklep, istnieją również korzyści dla Ciebie:

• Łatwy do nauczenia i użytkowania: Liquid ma prostą składnię i jest łatwy do zrozumienia, dzięki czemu jest dostępny dla programistów i osób niebędących programistami.
• Treść dynamiczna: Liquid pozwala na dynamiczne tworzenie treści
• Konfigurowalny: Dzięki Liquid możesz tworzyć niestandardowe szablony i motywy, zapewniając pełną kontrolę nad wyglądem i stylem swojego sklepu eCommerce.
• Poprawiona wydajność: Szablony płynne są kompilowane i buforowane, co poprawia działanie wydajność i szybkość strony internetowej w porównaniu do innych silników szablonów.
• Duża społeczność: Shopify posiada dużą społeczność użytkowników, zapewniającą dostęp do bogatej wiedzy i wsparcia, dzięki czemu łatwiej jest znaleźć rozwiązania typowych problemów związanych z płynami.

wymagania

Czego więc potrzebujesz, aby zacząć używać Shopify Płyn?

Jeśli masz już Shopify sklep, Shopify Płyn będzie do Państwa dyspozycji bezpłatnie. Poniżej omówimy, jak znaleźć Liquid. Ale na razie wszystko, co musisz wiedzieć, to to, że każda witryna utworzona na Shopify jest zbudowany przy użyciu Liquid, więc możesz rozpocząć ręczną edycję tego kodu zaraz po utworzeniu witryny.

Jeśli jednak nie masz Shopify store, musisz go utworzyć, aby zacząć bawić się Liquidem. 

1. Najpierw przejdź do Shopify i wybierz plan. Wypełnij swoje dane i utwórz konto.
2. Od twojego Shopify administratorze, kliknij motywy. Shopify automatycznie udostępnia motyw domyślny. Możesz pozostawić to bez zmian lub wybrać inny motyw na początek.
3. Shopify zawiera listę kontrolną, przez którą możesz przejść, aby ukończyć swój sklep. Będziesz chciał wykonać wszystkie podstawowe czynności, takie jak dodanie stron produktów, zaprojektowanie witryny sklepowej itp.

Teraz, gdy masz już podstawowy szkielet swojego sklepu internetowego, możesz pobrać te dane z pliku Shopify serwer i dostosuj go za pomocą Liquid (więcej na ten temat poniżej). 

Chociaż nie potrzebujesz żadnego doświadczenia w kodowaniu, aby zacząć korzystać z Liquid, znajomość podstawowych zasad kodowania ułatwi Ci tę podróż. Jednak w większości przypadków można znaleźć obszerną dokumentację samopomocy i samouczki na stronie Shopify portalu deweloperskim. Tutaj znajdziesz całą sekcję poświęconą Podstawy płynów. 

Zaleca się, aby przed rozpoczęciem poświęcić trochę czasu na przejrzenie tych przewodników. Chociaż Liquid jest potężnym narzędziem do dostosowywania, może również zepsuć Twoją witrynę, jeśli nie wiesz, co robisz!

Pierwsze kroki z Shopify Ciecz

Korzystając więc z tego, czego nauczyliśmy się do tej pory, zobaczmy, jak możemy przystąpić do edytowania pliku Shopify motyw za pomocą Liquid. 

Aby uzyskać dostęp do Liquid, wykonaj następujące kroki:

1. Duplikuj motyw: Aby zapobiec poważnym wpadkom, warto wykonać kopię motywu przed rozpoczęciem. W ten sposób, jeśli popełnisz jakieś błędy, oryginalny motyw zostanie usunięty. Shopify temat pozostaje nienaruszony. Aby to zrobić, przejdź do sekcji motywów po prawej stronie Shopify panel. Wybierz motyw, który chcesz edytować, i kliknij akcje, aby wyświetlić menu rozwijane. Teraz wybierz duplikat.
2. Zmień nazwę swojego duplikatu: Gdy zduplikujesz motyw, zobaczysz go na liście motywów. Możesz zmienić nazwę swojej kopii, aby nie pomylić oryginału z duplikatem. Po prostu kliknij ponownie przycisk działań i kliknij Zmień nazwę w menu rozwijanym. 
3. Wejście do edytora kodu: Teraz ponownie wybierz działania na swoim duplikacie i wybierz opcję edycji kodu. Zostaniesz przekierowany do pełnej listy kodów w Twoim motywie. Przyjrzyj się folderom wymienionym po prawej stronie. Powinieneś zobaczyć kilka folderów zawierających różne aspekty Twojego motywu, takie jak układ, szablony, sekcje itp. Otwórz folder szablonów. 
4. Kodowanie w płynie: W folderze szablonów zobaczysz listę plików typu .liquid. Możesz także utworzyć nowy szablon pliku Liquid, wybierając przycisk plus w folderze szablonów. Zapyta Cię, jaki szablon chcesz utworzyć, tj. stronę, sekcję, blog itp., oraz o nazwę pliku. Aby edytować plik, kliknij dwukrotnie plik szablonu, a otworzy się on w edytorze kodu po prawej stronie.

W dowolnym pliku Liquid zobaczysz skrypt HTML. To szkielet Twojej witryny. Możesz użyć języka Liquid wewnątrz tego HTML, aby pobrać informacje z Shopify serwer. Tak długo jak używasz poprawnej składni Liquid, tj. nawiasów, powinna ona odpowiednio renderować Twoją treść.

Aby to zilustrować, przeanalizujmy prosty przykład:

Zmiana rozmiaru obrazów za pomocą Shopify Ciecz

Obrazy są istotnym aspektem większości Shopify sklepy. Jeśli jednak używasz wielu obrazów, prawidłowe ustawienie ich rozmiaru w taki sposób, aby wyglądały schludnie, może być koszmarem. Aby to naprawić, patrzymy na img_url filtr. Podobnie jak inne filtry, img_url służy do modyfikowania treści pobieranych z pliku Shopify serwer. Możesz użyć tego filtra, aby zmienić rozmiar, skalę, format i przycinanie obrazów. 

Jest to doskonała technika, ponieważ filtr jedynie tymczasowo modyfikuje istniejący obraz; nie tworzy za każdym razem nowego obrazu w celu renderowania szablonu, więc nie spowolni to czasu ładowania witryny. 

Jak więc zmienić rozmiar obrazu?

Najpierw musimy zdecydować, gdzie chcemy zastosować zmiany. Można zastosować filtr img_url do dowolnego obiektu z właściwością obrazu, w tym:

• Produkt
• Warianty produktu
• Elementy zamówienia
• Kategorie
• Artykuły

Gdy zdecydujesz, które obrazy chcesz edytować, musisz wiedzieć, na którą właściwość chcesz się skupić. Aby dowiedzieć się, które właściwości mają atrybut obrazu, spójrz na Shopifylista obiektów i ich właściwości. 

W tym przykładzie będziemy kierować reklamy na obrazy z artykułów na blogu.

Oto podstawowy kod:

{{ blog.articles.image | img_url: ‘100×100' }}

Awaria:

• Blog jest obiektem, którego szukamy i chcemy mieć tę nieruchomość towary, ponieważ zawiera wszystkie artykuły na naszym blogu. W szczególności chcemy zmienić obrazy w naszych artykułach na blogu, dlatego kierujemy reklamy na obraz własność w artykułach.
• Teraz zastosujemy filtr img_url. Gdybyśmy zostawili to tak, jak jest, wyświetliłby się po prostu obraz pobrany z adresu URL dostarczonego przez Shopify serwer. Jednak podamy również dodatkowy parametr: rozmiar obrazu '100×100' (zauważ, że Shopify wykorzystuje piksele do określenia zakresów rozmiarów).
• Na koniec zawijamy nasz kod, używając składni z podwójnym nawiasem Liquid, która jest używana w przypadku filtrów. 

I gotowe! Powinno to zwrócić dane wyjściowe dla wszystkich obrazów na naszym blogu, co oznacza, że ​​będą one miały rozmiar 100 na 100 pikseli.

Wskazówki i dania na wynos

Mam nadzieję, że po przeczytaniu tego artykułu masz teraz odpowiedź na pytanie: Co to jest Shopify Płyn?

Jak widać, Shopify Ciecz to wszechstronne narzędzie, które może pełnić różne funkcje podczas projektowania lub edycji Shopify szablon. Choć wymaga trochę nauki, gdy już się do tego przyzwyczaisz, jest on dość łatwy w użyciu – szczególnie w porównaniu z innymi, bardziej złożonymi językami kodowania, takimi jak JavaScript.

Jeśli jesteś zainteresowany użyciem Shopify Liquid, radzimy postępować zgodnie z poniższymi wskazówkami, aby w pełni go wykorzystać:

1. Zacznij od solidnego zrozumienia Liquid: Dobre zrozumienie Liquid pozwoli Ci tworzyć bardziej złożone niestandardowe motywy. Dzięki tej podstawie nowi użytkownicy mogą w pełni wykorzystać potencjał Shopify do tworzenia unikalnych i angażujących sklepów internetowych.
2. Dokładnie przetestuj swój motyw: Testowanie jest niezbędne, aby upewnić się, że niestandardowy motyw działa zgodnie z oczekiwaniami w różnych przeglądarkach i urządzeniach. Wcześnie wychwytując problemy ze zgodnością, unikasz potencjalnej frustracji klientów.
3. Skorzystaj z dostępnych narzędzi i zasobów: Shopify ma mnóstwo dostępnych zasobów, które mogą pomóc twórcom motywów, więc korzystaj z nich! Wykorzystane może przyspieszyć i ułatwić proces rozwoju.

Biorąc pod uwagę wszystkie te punkty, myślę, że można to bezpiecznie powiedzieć Shopify Liquid może być zabawnym i skutecznym sposobem na aktualizację lub stworzenie bardziej wciągającego i dynamicznego Shopify sklep. 

To wszystko ode mnie; do Ciebie. Dajcie znać o swoich doświadczeniach z Shopify Płyn w komentarzach poniżej!