Shopify-Theme-Programmierung: Liquid, JSON und Javascript

1. Einführung: - Hallo. Willkommen bei Shopify Theme Programmierung: Liquid, JSON und JavaScript. Diese Klasse ist die Fortsetzung meiner vorherigen Klasse, Shopify Theme Development, wie Sie Ihren eigenen Online-Shop erstellen und anpassen. Wenn Sie das erste Mal mit mir lernen, bin ich Chris, und ich bin ein Top-Lehrer hier auf skillshare.com, der Themen wie Web-Entwicklung und Online-Freelancing behandelt. Meine erste Klasse zur Shopify-Themenentwicklung befasste sich mit Themen wie dem Erstellen eines Entwicklungsstores, Verwendung von Theme Kit und dem Verständnis der Theme-Struktur. Dies sind alles wichtige Grundlagen für die Shopify-Themenentwicklung. Aber in dieser Klasse werden wir tiefer in den eigentlichen Theme-Code eingehen und ein besseres Verständnis dafür gewinnen, wie Themen programmiert werden. Wir werfen einen genaueren Blick auf die Vorlagensprache hinter Shopify-Themes, besprechen, wie Sie Ihre eigenen Anpassungen mit JSON-Schemas erstellen können, und erfahren Sie mehr über einige APIs, mit denen Sie auf gespeicherte Daten zugreifen können, ohne die Seite neu laden zu müssen. Am Ende der Klasse haben Sie ein solides Verständnis dafür, wie Sie Shopify-Themes programmieren, und die Möglichkeit, Ihre eigenen Abschnitte und Snippets zu erstellen, um auf den vollen Umfang dessen zuzugreifen , was mit der Shopify-Themenentwicklung erreicht werden kann. Wenn Sie bereit sind, Ihre Shopify-Entwicklungsfähigkeiten auf die nächste Stufe zu bringen, klicken Sie auf das nächste Video, und ich sehe Sie auf der Innenseite. 2. Erforderliche Tools und Kenntnisse: Da diese Klasse die SQL to Shopify-Theme-Entwicklung ist, wie Sie Ihren eigenen Online-Shop erstellen und anpassen, wird empfohlen, dass Sie diese Klasse zuerst nehmen, da diese Klasse davon ausgeht, dass Sie verstehen, was eine Entwicklungsgeschichte ist, wie themekit funktioniert, und die Ordnerstruktur Ihres Shopify-Themes. Verständnis der Themenstruktur ist besonders wichtig für diese Klasse, da wir direkt in die Dateien springen werden , ohne zu viel darüber zu reden wo sie alle in die Shopify-Themenstruktur passen. Der Schwerpunkt dieses Kurses liegt ausschließlich auf den Programmieraspekten von Shopify-Themen. Natürlich, wenn Sie mehr von diesem theoretischen Wissen rund um Themen benötigen, schauen Sie sich auf jeden Fall die erste Klasse an. Da es sich bei dieser Klasse um Code handelt, benötigen Sie einen guten Code-Editor. Der, den ich in dieser Klasse verwenden werde, ist der Online-Editor im Shopify-Admin, aber es wird dringend empfohlen, dass Sie Ihren eigenen Code-Editor verwenden und themekit verwenden, um Ihren Theme-Code herunterzuladen. Zweitens benötigen Sie offensichtlich einen Webbrowser, und drittens benötigen Sie Ihren eigenen Shopify-Shop. Dieser Laden muss kein richtiger Laden sein. Natürlich kann es ein Entwicklungsgeschäft sein. Sie müssen Shopify nicht bezahlen, um an Themen zu arbeiten. Wenn Sie nicht wissen, wovon ich rede, Kasse Lektion 3 der vorherigen Klasse. Nun, ich habe bereits erwähnt, themekit, wenn Sie es noch nicht getan haben, gehen Sie zu shopify.github.io/themekit und greifen Sie das jetzt, ich empfehle es sehr. Das ist es im Grunde für die Werkzeuge. Aber in Bezug auf das Wissen, neben dem Wissen über Themen, müssen Sie ein grundlegendes Verständnis von HTML, CSS und JavaScript haben. Dies sind die drei wichtigen Sprachen, aus denen das Web besteht, und wir werden sie nicht speziell in dieser Klasse abdecken Wenn Sie also ein Verständnis dafür gewinnen müssen, schauen Sie sich zuerst einige meiner anderen Klassen an. Das war ganz die Liste. Lassen Sie uns kurz zusammenfassen, bevor wir weitermachen. In Bezug auf das Wissen müssen Sie mindestens ein grundlegendes Verständnis der Shopify-Plattform, der Struktur von Shopify-Themes, ich spreche über Layouts, Vorlagen , Abschnitte usw. und schließlich HTML, CSS und JavaScript. Für die Tools benötigen Sie einen Code-Editor, einen Webbrowser und einen Shopify-Store, an dem Sie arbeiten können, und Shopify Themekit, wenn Sie lokal mit Ihrem Code arbeiten. Wenn du das alles hast, bist du jetzt bereit, direkt in die nächste Lektion zu springen, damit ich dich dort sehen werde. 3. Online Store 2.0 Updates: Hey Studenten, ich wollte nur hier einspringen, bevor wir anfangen, und stellen Sie sicher, dass Sie etwas wissen, was Shopify Online Store 2.0 nennt. Wie Sie wahrscheinlich sagen können, wurde dieses Video ein paar Jahre nach der ursprünglichen Klasse aufgenommen, aber ich dachte, es war wichtig, hier zu springen und Sie über einige Updates wissen zu lassen. Wenn Sie wissen, worüber ich hier mit Online Store 2.0 spreche, zögern Sie nicht, dieses Video zu überspringen. Aber für den Rest von euch muss ich euch nur auf ein paar Änderungen an der Onlineshop-Erfahrung aktualisieren , da diese Klasse zum ersten Mal live ging. Nur um einige Ihrer Anliegen Studenten anzusprechen, der Inhalt in dieser Klasse ist immer noch alle relevant. Flüssigkeit ist immer noch in der gleichen Form. JSON wird weiterhin für Abschnittsschemas und Gebietsschemas verwendet. Die JavaScript-APIs, über die ich in dieser Klasse spreche, existieren alle noch zum Zeitpunkt der Aufnahme, aber wir haben nur ein neues Format für Vorlagendateien. So können Vorlagen jetzt entweder von Liquid oder JSON sein. Wir werden in der Klasse weiter darauf eingehen. Sie sollten wahrscheinlich mittlerweile wissen, was eine Vorlage ist. Aber früher wurden Vorlagen als nur Liquid codiert und Sie mussten Programm in den Abschnitten verstecken. Um Abschnitte überall zuzulassen, hat Shopify nun die Verwendung von JSON-Vorlagen aktiviert. Anstatt Liquid direkt in Ihrer Vorlage zu speichern, speichern Sie ein JSON-Objekt in Ihrer Vorlage, und dieses JSON-Objekt hat die Liste der Abschnitte, die Sie dann in Ihrem Design-Editor neu anordnen können, und dies ermöglicht Ihnen Erstellen Sie neu bestellbare Abschnitte in all Ihren Vorlagen, nicht nur auf Ihrer Startseite. Wenn Sie mehr über JSON-Vorlagen erfahren möchten, gehe ich in Lektion 11 der vorherigen Klasse tiefer ein. Ich habe gerade ein neues Video in dieser Klasse für euch hinzugefügt, damit ihr erfahren könnt , was JSON-Vorlagen sind und wie man sie benutzt. Davon abgesehen, wird es jetzt Ihr Entwicklungstool ändern , wenn Sie JSON-Vorlagen verwenden möchten. Im nächsten Video erwähnte ich Slate. Ich empfehle nicht, Slate zu verwenden, es sei denn, Sie nehmen ein Legacy-Projekt auf. Slate ist jetzt gut abgelaufen. Shopify hat den Support für Shopify Slate bereits im Januar 2020 offiziell beendet. Ich empfehle nicht, es zu verwenden, es sei denn, Sie müssen es natürlich tun, weil Sie ein Legacy-Projekt übernehmen. Aber selbst dann würde ich empfehlen, von Slate zu migrieren. Im letzten Video erwähnte ich ein Tool namens Theme Kit, aber es gibt jetzt auch ein neues Tool namens Shopify CLI, und es ist wichtig, Shopify CLI hier zu beachten weil es das Tool ist, das Sie verwenden müssen, wenn Sie möchten , um JSON-Vorlagen zu verwenden. Aus welchem Grund auch immer, Theme Kit wurde nicht angepasst, um mit den neuen JSON-Vorlagen zu arbeiten. Wenn Sie also JSON-Vorlagen verwenden möchten, müssen Sie Shopify CLI verwenden. Das sind die wichtigsten Änderungen, die wir notieren müssen, bevor wir in die Klasse kommen. Wie gesagt, Liquid ist immer noch das gleiche, JSON ist immer noch das gleiche, JavaScript-API existiert immer noch. Die neueste Änderung von Shopify besteht darin, dass Vorlagendateien jetzt entweder von Liquid oder JSON sein können. Auch hier, um mehr über Online Store 2.0 zu erfahren, können Sie die drei neuen Videos anschauen, die ich zur Shopify-Theme-Entwicklungsklasse hinzugefügt habe, ich erwähnte die JSON-Schemas eins. Wenn Sie mehr über die CLI erfahren möchten, ist das in Lektion 6, glaube ich, also Lektion 6 meiner vorherigen Klasse, und es gibt auch eine Einführung in den Online Store 2.0 in dieser Klasse. Ich habe auch eine Online Store 2.0 Playlist auf YouTube , die Sie für weitere Informationen über Online Store 2.0 überprüfen können. Aber damit wir in die Klasse zurückkehren und lernen, wie wir in der Shopify-Themenentwicklung programmieren können. 4. Übersicht über die Theme-Programmierung: Für die Mehrheit dieser Klasse auf Shopify Thema Programmierung, werden wir über Flüssigkeit sprechen. Liquid ist die Templating-Sprache von Shopify-Themes, Sie können es als Back-End-Programmiersprache Ihres Shopify-Themes und damit Ihr Online-Schaufenster vorstellen . Selbstverständlich können wir Online-Storefronts erstellen, die auf andere Weise zu Shopify als Daten verlinken. Aber die Mehrheit der Zeit, wenn jemand Shopify verwendet, um einen Online-Shop zu hosten, sie verwenden diesen Online-Shop Verkaufskanal in der Art und Weise, dass Sie das Aussehen und Gefühl Ihres Online-Shops durch ein Thema anpassen. Sie sollten damit gut vertraut sein, wenn Sie mehr über Theme-Entwicklung erfahren müssen, was ist ein Thema, und wo es im Kontext Ihres Geschäfts sitzt? Ich habe eine Serie auf YouTube und eine vorherige Klasse Shopify-Themenentwicklung hier auf Skill Share. Diese Klasse wird also in erster Linie mit Shopify-Themenprogrammierung befassen, wie der Name schon sagt, und so werden wir mehr über die Programmierung von Patenten lernen, also werden wir viel mit Liquid arbeiten. Davon abgesehen, letzte Klasse, arbeiteten wir direkt mit dem Debut-Thema, das ein bereits erstelltes Thema ist, das so aussieht, wenn Sie nicht vertraut sind, es ist ein bereits erstelltes Thema. Sie müssen nicht wirklich grundlegende Funktionen erstellen, es sei denn, Sie müssen etwas erstellen, das noch nicht existiert. Denn wenn Sie sich den Code dieses Themas ansehen, ist er bereits ziemlich voll Wenn ich also einen bestimmten Abschnitt betrachte, werden Sie sehen, dass er ziemlich voller Code ist. In dieser Klasse, was ich tun werde, ist, anstatt von dem Punkt eines tatsächlichen Themas zu beginnen, was praktischer ist, wenn Sie tatsächlich Shopify Theme-Entwicklung tun, werde ich mit einem sehr bare-Knochen Thema namens New Theme beginnen. Dieses Thema hier können Sie sehen, ist sehr nackt Knochen. Die Homepage hat nichts darauf, wenn ich auf Katalog klicke, bringt es mich zu der Sammlung, wo ich alle Produkte sehe, und es wird derzeit von zwei Produkten auf einmal paginiert. Denken Sie daran, dass Sie ein Shopify-Theme testen und programmieren können, einige Speicherdaten benötigen, also habe ich diese Dummy-Daten bereits eingefügt. Sie müssen auch einige Testprodukte einbauen, wenn Sie etwas anzeigen möchten. Wenn ich auf Blog klicke, können Sie sehen, dass ich einige Blogbeiträge von der offiziellen Shopify-Website kopiert habe. Nun, wenn Sie mit codieren wollen, und verwenden Sie dieses genaue Thema, die Art und Weise, wie ich dieses Thema generiert, und der Grund, warum es das New Theme genannt wird, ist, weil ich einen Befehl in Theme Kit verwendet, namens Theme New, so für diejenigen von euch, die nicht mit Theme Kit vertraut sind, werden wir nicht ins Detail gehen, ich habe eine 20-minütige Lektion in meiner letzten Klasse hier auf Shopify Theme-Entwicklung, alles darüber, wie man es einrichtet und konfiguriert, aber das ist, was ich bin darüber reden, wenn ich über Shopify Theme Kit spreche. Es ist im Grunde ein Befehlszeilentool, mit dem Sie Ihr Thema herunterladen können, und dann können Sie es mit Ihrem eigenen Computer bearbeiten. Ich empfehle dringend, wenn Sie Shopify Theme Entwicklung ernsthaft tun, verwenden Sie das Theme Kit. Aber da diese Klasse nicht wirklich über Entwicklungsworkflow und nur über Programmierung geht, werde ich den Online-Code-Editor verwenden, also werde ich einfach auf Code bearbeiten klicken, und wir werden ihn direkt von hier aus bearbeiten. Jetzt sollte ich ein anderes Framework und Tool erwähnen , mit dem Sie Shopify-Themes erstellen können, es heißt Slate. Wenn ich also Shopify Slate in Google eintippe, können Sie mehr darüber erfahren. Wie Sie auf dieser GitHub-Seite lesen können, ist Slate wartungsarm. Slate ist ein Projekt, das Shopify erstellt hat , aber sie pflegen im Moment nicht wirklich, das könnte sich in Zukunft ändern, und Slate ist viel technischer und schwieriger einzurichten, also werden wir uns nicht auf Schiefer konzentrieren auch in dieser Klasse. Ich dachte nur, es wäre Vergebung von mir nicht zu erwähnen, und wieder, wenn Sie mehr über Schiefer erfahren möchten, gibt es ein Bonus-Video in der vorherigen Klasse auf Shopify Theme-Entwicklung, gehen Sie es aus. Es ist das zweitletzte Video. Nun, die Registerkarte loszuwerden und zurück zu unserem neuen Thema hier, der Grund, warum ich mit dem New Theme beginnen wollte, ist es ruhig nackt, so dass wir hier sehen können, gibt es nicht viel Liquid Code, es gibt nur 10 Zeilen in der Indexdatei, Es gibt nur ein Layout, und wenn wir hier zu Abschnitten und Snippets gehen, sind sie völlig leer. Es gibt nur eine Sprachdatei, eine CSS-Datei und eine JavaScript-Datei. Dies ist ziemlich bare-bone, und es wird uns erlauben, die Konzepte der Liquid Programmierung einfacher zu lernen , ohne eine ganze Reihe von HTML und CSS durchsieben zu müssen , die auf einem vollständig gebauten Thema existieren würden. Wie ich bereits erwähnt habe, können Sie Liquid die Back-End-Programmiersprache von Shopify-Themes betrachten. Was ich damit meine, ist, dass dieser ganze Code auf der Serverseite generiert wird, und dann kommt er durch die Client-Seite in HTML und CSS. Nur um zu zeigen, dass für diejenigen von Ihnen, die das Konzept nicht besonders klar ist, schauen Sie sich all diese flüssigen Tags an, diese werden nicht am Frontend durchkommen, wird alles auf der Serverseite generiert, und dann ist es kommt am Frontend nur als HTML und CSS durch Wenn ich also auf diese Seite klicke, die mich zur Sammlungsvorlage bringt, und ich inspiere, was hier vor sich geht, werde ich keinen Liquid Code sehen. Der Liquid Code ist alles auf der Serverseite, also der Grund, warum das wichtig ist, ist, weil alles, was ich auf der Client-Seite tun möchte, immer noch mit JavaScript gemacht werden muss, und das wird zu einem Problem von wie greifen wir mit JavaScript auf diese Daten und arbeiten dann am Frontend mit ihm, ohne die Seite neu laden zu müssen. Sie sollten mit dem Unterschied zwischen Server- und Client-Seite vertraut sein, wenn nicht, überprüfen Sie meine erste Klasse auf Skill Share, ich habe ein Video über den Unterschied zwischen Front-End und Back-End. Aber das ist nur etwas zu beachten. Liquid deckt die meisten Shopify die Programmierung ab, aber natürlich, wenn Sie mehr interaktive Funktionen wollen, wenn Sie vermeiden möchten, dass die Seite neu geladen wird, müssen Sie JavaScript verwenden. Zurück zum Code können Sie eine Reihe von Liquid Tags sehen, und Sie können sehen, dass sie sogar mit einer geschweiften Klammer und einem Prozentzeichen beginnen und mit einem Prozentzeichen geschweifte Klammer enden, oder es gibt nur zwei geschweifte Klammern, und der Unterschied zwischen diesen beiden Tags ist, dies ist für die Logik, und dies ist für die Ausgabe. Was ich damit meine, ist, wenn ich nur den Sammlungspunkttitel zwischen diesen doppelten geschweiften Klammern werfe, wird es nur den Sammlungstitel ausgeben. Es gibt keine Operationen oder Logik, es sei denn, ich benutze einen Filter, der hier unten ist. Offensichtlich gibt es viele Konzepte und Syntax in Liquid, und dafür habe ich meine eigene Dokumentation erstellt. Dies ist mein Blog-Beitrag, der derzeit noch nicht veröffentlicht ist, aber wenn du dieses Video ansiehst, dann arbeite ich immer noch daran. Aber im Wesentlichen wird dies das Lehrbuch oder die Referenz für diese Klasse sein, also ist es ein sehr langer Artikel, ich bedecke alle Objekte, alle Filter, alle Tags in Liquid, also für diese Klasse, Ich dachte daran, die ganze Theorie durchzugehen, aber ich dachte, es wird viel besser für Sie sein, dieses Zeug zu lesen, und dann können wir tatsächlich üben und es in Aktion in unserem Thema sehen, also werde ich diese Muster erstellen und brechen Sie dies auf, aber als Referenz werden wir dieses Dokument verwenden. Dieser Artikel wird auf christhefreelancer.com/shopify_liquid_guide sein, also auf jeden Fall öffnen , lesen, Sie müssen nicht das Ganze lesen. Ich empfehle Ihnen definitiv, wenn es zu den Objekten kommt, zu lesen, aber das wird Ihre Referenz sein. Außerdem gibt es zwei andere Ressourcen, mit denen ich Sie verknüpfen möchte, und sie sind tatsächlich in dem Artikel verknüpft, der tatsächlichen offiziellen Dokumentation, also in Bereichen, in denen es ausführlich wird, sprechen wir über die Liste der Attribute, Die Liquid Referenz wird immer noch ein großartiger Ort für Sie sein , alles über die verschiedenen Objekte, Tags und Filter in Liquid zu lernen , also hat es eine unglaubliche Menge an Details, zum Beispiel, wenn ich in Nehmen wir an, das Produktobjekt, Sie werden alle Attribute sehen, und Sie können alles über sie erfahren, so dass dieser Artikel nicht dazu gedacht ist, die Dokumentation zu ersetzen, aber es ist ein guter Ausgangspunkt, und ich denke, ein guten Überblick darüber, wie alles funktioniert, und es verlinkt die Dokumentation an zahlreichen Orten. Es gibt auch die berühmte Spickzettel, also öffne das in einem anderen Tab, und das hier sind alle Objekte, Tags und Filter auf der gleichen Seite, zum Beispiel, wenn ich herausfinden wollte, wie man den Titel eines Produkt, ich könnte Control-F Produkt, und dann finde ich dieses kleine Akkordeon hier für das Produktobjekt, gibt mir alle die gleichen Dinge, die wir vorher in der Dokumentation gesehen haben, aber in diesem engen kleinen Akkordeon, und dann gibt es mir ein wenig Informationen darüber, dann kann ich auf Mehr erfahren klicken und es bringt mich direkt zurück zur Dokumentation. Dies sind die Ressourcen, die ich empfehle, geöffnet zu haben, oder bereit zu sein, während Sie diese Klasse nehmen, die Spickzettel für eine kurze Referenz, bekam die Dokumentation für alles detaillierte, und natürlich meinen Artikel als Überblick von Shopify Liquid, und wenn Sie Schwierigkeiten haben zu verstehen, was eines dieser Dinge ist, wo Sie diese Objekte finden können, mein Leitfaden ist, was dazu gedacht ist, das zu helfen. Wie ich hier am Anfang des Artikels geschrieben habe „Während Shopifys Liquid Reference und das berühmte Spickzettel großartig sind, habe ich das Gefühl, dass es viele Details fehlt und deshalb habe ich mich entschieden, meine eigene Dokumentation zu schreiben.“ Wie ich bereits erwähnt habe, gibt es ein paar Dinge, über die Shopify nicht wirklich spricht, die verschiedenen Arten von Objekten und wo sie im Rahmen Ihres Shopify-Themes verfügbar sind, das ist der Hauptgrund, warum ich in diesem Artikel können Sie hier sehen, nicht nur können Sie mehr über Objekte lernen, aber Sie können auch lernen, halten sie mehrere Objekte? Wo können Sie darauf zugreifen? Kannst du sie durchlaufen? Also nur eine zusätzliche Referenz gibt es für Sie. Wenn Sie irgendwelche Fragen haben, spezifische Fragen zu Liquid, überprüfen Sie bitte zuerst den Blog-Beitrag, und dann, wenn Sie noch kämpfen, auf jeden Fall einen Kommentar in der Diskussionsbox. Nun haben wir vorher JavaScript erwähnt, als die Art und Weise, wie wir alles Interaktive in unserem Shopify-Theme machen werden, und eine Möglichkeit, dass Shopify uns erlaubt, Daten aus unserem Shopify-Theme mit JavaScript zuzugreifen und zu manipulieren, ist, über die Ajax-API Wenn ich also nach Shopify Ajax-API suche , können Sie hier mehr darüber erfahren. Aber wir werden ein oder zwei Lektionen über die Ajax-API haben. Mach dir keine Sorgen. Ich mache Sie nur darauf aufmerksam, dass wir eine API für clientseitige Anfragen haben. Der andere Code, den Sie schreiben werden, wenn Sie shopify-Themes programmieren , ist CSS oder SCSS. Sie sollten mit CSS vertraut sein. Wenn Sie nicht mit SCSS vertraut sind, ist es eine Form von SASS , die im Grunde eine Programmiersprache für CSS ist. Es ist nicht erforderlich, die Syntax von SASS zu kennen. SASS ist abwärtskompatibel mit CSS und tatsächlich, sobald der Code an das Frontend gelangt, er sowieso immer in CSS kompiliert. Wenn Sie CSS speziell hier einfügen möchten, können Sie dies normal tun, aber wenn Sie wissen, wie man SASS verwendet, können Sie es auch verwenden. Für diejenigen unter Ihnen, die wissen, wie man SASS benutzt, ist eine Warnung, dass shopify eine ältere Version von SASS verwendet. Ich glaube, es ist 3,3 oder so etwas. Es bedeutet nur, dass alle Funktionen der neuesten Version von SASS nicht für Sie verfügbar sind, wenn Sie shopify-Themes entwickeln. Wenn Sie auf etwas etwas seltsam stoßen, das ist kaputt, das ist vollkommen gute Syntax, könnte es daran liegen, dass Sie eine ältere Version von SASS verwenden. Noch eine Warnung dort. Mach dir keine Sorgen. Wenn Sie nichts über SASS wissen, ist CSS völlig in Ordnung. Die finale Syntax, an die du dich mit shopify-Themes gewöhnen musst, natürlich haben wir Liquid, wir haben Javascripts und wir haben CSS/SCSS. Aber Sie werden auch hier sehen, wir haben JSON-Dateien. Wenn ich settings_schema.json öffne, ist dies JavaScript Object Notation, aka JSON. Es ist nur eine Möglichkeit, Daten einfach zu präsentieren. Es imitiert die Struktur eines JavaScript-Objekts, aber es hat einige Unterschiede. Sie können mehr über JSON auf Google lesen, aber es ist ziemlich einfach zu verstehen. Genau hier haben wir ein Array, das sich öffnet, und dann im Inneren haben wir ein Objekt. Wenn wir hier ein anderes Objekt schreiben wollten, würden wir dies so tun und wir können ihm hier Schlüssel und Werte geben. Alle Schlüssel müssen mit einem doppelten Anführungszeichen sein. Das ist einer der wichtigsten Unterschiede zu JSON und allen Strings offensichtlich mit Anführungszeichen sei denn, wir setzen eine Zahl ein, für die wir keine Anführungszeichen benötigen. Ordnung. Die Bereiche, in denen Sie JSON in dieser Datei settings_schema.json, der Datei settings_ data.json und Ihren Gebietsschema-Dateien, en.default.json, sehen. Wieder gehen wir über JSON und wie das alles mit diesen verschiedenen Dateien in einem späteren Video funktioniert. Mach dir deswegen keine Sorgen. Ich gebe dir nur einen kurzen Überblick, bevor wir in das flüssige Zeug springen. Das deckt so ziemlich alle Bereiche Ihres Shopify-Themes ab. Sie sollten über Themen Struktur aus der letzten Klasse wissen. Wir haben Layout, Vorlagen, Abschnitte und Snippets für die Strukturierung unseres shopify-Themas. Dann haben wir unsere Assets, die das CSS und JavaScript enthalten, Konfiguration, die Daten und die Einstellungen enthält, die wir ändern können, und Gebietsschemas für die Speicherung der Sprache. Das letzte, was ich in diesem Einführungsvideo erwähnen muss , ist etwas, das für Shopify Theme Programming sehr wichtig ist, und das ist die Idee von Vorlagen und Umfang. Wenn wir unsere Theme ansehen und zu bestimmten Seiten navigieren, können Sie unsere Template-Struktur in der URL-Struktur sehen. Im Moment sind wir auf der Root-Domain. Seien Sie nicht verwirrt über dieses kleine zusätzliche Attribut dort. Aber wir sind auf der Stammdomäne, die die Indexvorlage ist. Wenn wir hier gehen, können Sie sehen, dass die URL zu Sammlungen/alle ändert. Das bedeutet, dass wir uns auf der Sammlungsvorlage befinden. Wenn ich die eigentliche Sammlung, die wir auf eine suchen , die ich in meinem Shop genannt vorgestellte Sammlung, Sie können sehen, alles sieht gleich aus, Es ist nur der Titel der Sammlung, die hier angezeigt wird und die tatsächlichen Produkte, die auf der Seite angezeigt werden, sind unterschiedlich. All dies wird durch die eine Sammlungsvorlage gesteuert. Wenn ich auf eines dieser Produkte klicken, werden Sie sehen, dass wir Produkte erhalten und dann den Namen des Produkts in Handle-Form, werden wir mehr über Handles später sprechen, wird der URL hinzugefügt. Jetzt wissen wir, wo in der Produktvorlage. Wenn ich auf meine Sammlungsseite zurückgehe und auf dieses Produkt klicke, wird es so ziemlich wie das andere Produkt angezeigt , da es dieselbe Vorlage verwendet. Wie das in unserem Code aussieht, gehen wir hier in unsere Vorlagen ein, und hier ist der Code, der für jede einzelne Sammlungsseite angezeigt wird. Der Verweis auf die Sammlung hier hängt wirklich davon ab, auf welcher Sammlung Sie sich befinden. Aber es ist völlig dynamisch, so dass jede Sammlung, in die Sie gerade sind, hier über das Sammlungsobjekt eingespeist wird und Sie die Sammlung auf die gleiche Weise manipulieren können wie eine andere Sammlung. Wenn Sie sich auf der Produktseite befinden, befinden Sie sich in der Produktvorlage. Es ist der gleiche Code für jedes Produkt, das auf Ihrer Website angezeigt wird, es sei denn, Sie verwenden alternative Vorlagen, über die wir in der letzten Klasse gesprochen haben, aber im Wesentlichen ist alles, was sich auf der Seite ändern wird, der dynamische Inhalt und das wird hier mit diesem Produktobjekt eingebracht. Ich spreche darüber in dem Artikel, den ich Vorlagen spezifischen Umfang nenne. Wenn wir nach unten scrollen, spreche ich über die Objekte, auf die von überall in Ihrem Thema als globale Objekte zugegriffen werden kann . Wenn Sie den tatsächlichen Namen Ihres Produkts kennen, können Sie mit dem Handle von überall in Ihrem Design darauf zugreifen. Dasselbe gilt für Seiten, Blogs, Artikel, Bilder. Bilder sind durch den Dateinamen dort. Aber dann erhalten Sie spezifische Variablen Vorlage, wenn Sie nach unten scrollen, Vorlage spezifischer Objekte eher. Diese Objekte sind verfügbar, wenn Sie sich in der entsprechenden Vorlage befinden. Wenn Sie sich in der Produktvorlage befinden, haben Sie Zugriff auf das Produktobjekt , und dieses Produktobjekt ist das Produkt, das Sie anzeigen, und Sie können das über die URL sehen. Wir schauen uns schwarze Ledertasche an. Wenn wir Dinge mit dem Produktobjekt in der Produktvorlage machen, schauen wir uns diese schwarze Ledertasche an. Die Vorlagen, die wir hier haben, haben alle ihre eigenen Objekte, die gleich beschriftet werden sollten. In der Sammlungsvorlage haben wir Zugriff auf das Sammlungsobjekt. In der Blog-Vorlage haben wir Zugriff auf das Blog-Objekt. Vorlagen direkt hier, und das ist etwas, was wir mehr in Codierung Vorlagen und Layouts im nächsten Video bekommen, aber Vorlagen sind im Grunde die verschiedenen Gruppen von Seiten, die auf Ihrer Website angezeigt. Abschnitte sehr leistungsfähig und Snippets ideal für die Wiederverwendung von Code. Wir werden in der Lektion nach der nächsten darüber reden. Aber ich glaube, ich habe schon ausführlich über Shopify Liquid gesprochen. Auch hier sind dies alles großartige Referenzen. Ich will nicht das gesamte Dokument durchgehen, weil es riesig ist. Aber im nächsten Video werden wir direkt darauf eingehen, ein gemeinsames Muster in shopify zu programmieren und zu lernen, wie man alternative Layouts verwendet. Wir sehen uns im nächsten. 5. Layouts und Vorlagen programmieren: In dieser Lektion konzentrieren wir uns auf Programmierung, Layout und Vorlagendateien. Die Vorlage, auf die wir uns konzentrieren werden, ist die collection.liquid Vorlage. Der Grund, warum ich mich entschieden habe, dieses zu verwenden, ist , weil Produkte zentral für jeden Shopify-Store sind oder zumindest sein sollten, weil im Wesentlichen ein E-Commerce-Store eingerichtet ist, um Produkte zu verkaufen. Produkte sind höchstwahrscheinlich die wichtigste Ressource in Ihrem Shopify-Shop. Eine der Möglichkeiten, wie Menschen durch verschiedene Produkte blättern können , ist eine Sammlung. Wir können hier eine ziemlich einfache Schleife für die Sammlung Vorlage sehen, aber es ist immer noch ein bisschen los hier. Was ich tun möchte, ist dies zu vereinfachen und diese Linie für Zeile anzugehen. Zuallererst werde ich dies in einer neuen Registerkarte in einer Vorschau anzeigen. Wir können hier gehen und wir können sicherstellen, dass wir in einer Sammlungsvorlage sind , indem wir überprüfen, dass Sammlungen in der URL sind. Jetzt haben wir unser Front-End, wie es mit unserer Vorlage aussieht, die wir bearbeiten. Das erste, was ich tun werde, ist die Paginierung zu entfernen und dies auf eine einfache Schleife zu entfernen. Paginierung ist praktisch, aber ich möchte dich nicht gerade verwirren, also lass es uns einfach vorerst entfernen. Mal sehen, was passiert, wenn wir das tun. Wenn ich die Seite aktualisiere, sehen Sie jetzt, dass jedes Produkt in unserem Shop auf der einen Seite angezeigt wird. Normalerweise möchten Sie das nicht tun, weil Sie Hunderte oder Tausende von Produkten haben könnten und das würde ewig dauern, um eine Seite zu laden. Paginierung ist sehr praktisch, nur entfernen Sie es der Einfachheit willen. Jetzt, um es noch einfacher zu machen, werde ich diesen Code entfernen und ihn noch weiter entfernen. Wir haben gerade diese Schleife jetzt bekommen und schauen wir uns an, wie das am Frontend aussieht. Aktualisieren der Seite Sie können sehen, wir haben jetzt nur eine Liste von Produkten mit einem Link, um sie zu sehen. Wenn ich auf den ersten klicke, tolle Turnschuhe, bin ich jetzt auf der Produktvorlage, die dieses Produkt ansieht, tolle Turnschuhe. Aber wir konzentrieren uns auf diese Kollektionsschleife hier. Lass uns aufschlüsseln, was wir hier vor sich haben. In Flüssigkeit, wie ich bereits erwähnt habe, haben wir zwei Arten von Tags. Es gibt eigentlich drei, und wir können hier und hier einen Bindestrich einfügen und das reduziert nur Leerzeichen, es ändert die Funktionalität überhaupt nicht. Da mache ich mir keine Sorgen. Aber im Wesentlichen haben wir nur zwei verschiedene Arten von Tags, das Ausgabe-Tag und das Logik-Tag. Wenn wir nur etwas auf die Seite ausgeben wollen, verwenden wir einfach das Ausgabe-Tag. Im Moment nehmen wir ein Attribut auf das Sammlungsobjekt des Titels. Hier können Sie sehen, das ist der Titel der Sammlungen. Jetzt ist es ein bisschen anders mit der alten Sammlung, weil es eine automatisch generierte Sammlung von Shopify ist, aber wenn wir zu einer tatsächlichen Sammlung gehen, die ich erstellt, Featured Sammlung, können Sie jetzt sehen, dass der Titel dieser Sammlung ist genau hier. Wenn ich zurück in mein Back-End gehen würde, ändern Sie das, es würde es hier ändern und überall sonst, wo wir auf collection.title verweisen. Dann gehe ich jetzt in eine Schleife, was ich tue, ist, dass ich das Produktattribut der Sammlung nehme, was mir Zugriff auf alle Produkte innerhalb dieser Sammlung gibt und ich durchlaufe sie mit dem Wort Produkt als meinen Haken, um auf die verschiedenen Attribute dieses bestimmten Produkts zuzugreifen. Dieses Wort könnte jedes Wort sein, das ich wollte, aber Produkt macht Sinn. Es macht es besser lesbar. Für Produkte in der Kollektion.products werden wir dies für jedes einzelne Produkt tun. Nun, etwas, das in for-Schleifen in Liquid existiert, was ich nicht weiß, ob es in einer anderen Sprache existiert, ist, dass Sie tatsächlich eine else-Anweisung haben können. Dies ist, wenn collection.products leer ist, wird es nicht durchlaufen und stattdessen wird es dies ausgeben. Die sonst in dieser Instanz ist für, wenn die Objekte, die Sie durchschleifen, leer sind. Es ist nur eine Abkürzung, denn wenn ich hier eine if-Anweisung setzen sollte, um zu überprüfen, ob die Länge größer als Null war, und wenn wir das nicht herausgeben, können wir uns etwas Code sparen und es auf diese Weise schreiben. Für jedes Produkt in collection.products werden wir ein div starten und in diesem div werden wir einen Link haben. Für die tatsächliche Adresse dieses Links, werden wir in der product.url setzen, also den Link zum tatsächlichen Produkt. Dann haben wir diese Pfeife hier. Dieses Rohr hier ist, was einen Filter in Liquid definiert. Wir können das entfernen, es wird genauso gut funktionieren, ohne dass. Schauen wir uns zuerst mit diesem Filter an. Wenn ich gehe und hier inspiziere und ich auf die URL schaue, können Sie sehen, dass die URL Featured-Collection hat und dann an den Enden Produkte/awesome-sneakers. Aber wenn wir diesen Code entfernen und auf Speichern klicken, wird dieser Filter nicht angewendet und die URL, die wir stattdessen erhalten , ist nur Produkte/awesome-sneakers. Dieser Filter, den wir hier in der Sammlung haben, macht es nur die URL des Produkts an die URL anhängen , die wir derzeit für diese Sammlung verwenden, anstatt die Sammlung auszuschneiden. Das ist praktisch, wenn wir Logik auf der Produktvorlage haben wollen und wir die Sammlung referenzieren können , zu der wir navigiert da ein Produkt Teil vieler verschiedener Kollektionen sein könnte. Zurück zur Sammlung Seite hier, der nächste Teil, sehr einfach. Wir geben nur den Produkttitel aus. Sie können sehen, dass wir hier einen Link haben und darin ist der Produkttitel und die a href ist der Link zu diesem Produkt. Sehr einfaches Zeug. Lassen Sie uns in der nächsten Zeile hinzufügen, die wir hier hatten. Ich werde in alle von ihnen hinzufügen, entfernen Sie alle außer einem, und drücken Sie Speichern auf, dass. Was wir hier haben, ist, dass wir jetzt auch den Preis ausgeben. Sehr grundlegende product.price und wir verwenden einen anderen Filter namens Geld, der es in einem schönen Währungsformat formatiert. Wenn ich diesen Filter erneut entfernen sollte , wird er trotzdem funktionieren. Lassen Sie uns die Seite aktualisieren. Sie erhalten den Preis für all diese Produkte kommen in der reinen Zahlenform. In Shopify enthält die reine Zahlenform eines Preises die Cent. Sie können hier sehen, dass das 8.000 Cent sein wird, das sind 11.000 Cent so weiter, so weiter. Offensichtlich wird das für den Endbenutzer nicht so toll aussehen , also was wir normalerweise tun, ist es mit dem Geldfilter zu filtern und das wird diese Zahl in ein viel schöneres formatiertes Währungsformat verwandeln . Jetzt können wir sehen, dass 8.000 Cent 80 Dollar werden und wir diese Dezimalzahlen haben. Wir können andere Geldfilter verwenden, um die Dezimalstellen herauszufiltern, wenn wir wollen, aber Geld ist der Standard. Fügen wir in der nächsten Zeile hinzu und entfernen Sie die letzte Zeile. Jetzt haben wir in einer Aussage hinzugefügt. Das „ausf“ -Tag ist im Grunde das Gegenteil des if-Tags. Es liest sich auf eine andere Art und Weise. Wenn das Produkt nicht verfügbar ist, werden wir dies tun. Wir können dies leicht in eine if-Anweisung verwandeln, wir müssen nur den Zustand hier ändern. Ich denke, in diesem Fall ist es sinnvoller, dass im Hinblick auf das Verständnis des Codes, um dies zu einer if-Anweisung zu machen. Ich werde die entfernen, es sei denn, Worte und was wir hier tun müssen, wenn Produkt verfügbar ist falsch, oder wir könnten auch tun, wenn Produkt verfügbar ist nicht wahr. Lass uns einfach falsch machen. Wir müssen zum Vergleich doppelte Gleichheitszeichen oder dreifache Gleichheitszeichen tun, weil ein einzelnes Gleichheitszeichen für die Zuweisung, nicht für den Vergleich. Denken Sie daran, dass Jungs, das ist ein ziemlich häufiger Grund Anfängerfehler. Ich denke, das liest viel schöner, wenn Produkt verfügbar ist falsch, da in dem Produkt nicht verfügbar ist, wollen wir ausverkauft zeigen, und dies wird auf die gleiche Weise funktionieren. Wenn ich hier rüber gehe, siehst du keines davon ausverkauft, also wird sowieso nichts auftauchen. Aber wenn ich zur alten Kollektion zurückgehe, habe ich ein Produkt eingerichtet, das ausverkauft ist. Ich habe es nur Produkt ohne Bild und ohne Lager genannt und Sie können hier sehen, es ist ausverkauft. Wenn ich gehe und das wieder so setzen, wie es vorher war und ich auf Speichern klicke, werden Sie sehen, dass wir genau das gleiche Ergebnis bekommen. Es sei denn, es ist nur eine Möglichkeit, Ihren Code lesbarer zu machen. In diesem Fall denke ich, dass es sinnvoller ist, wenn zu verwenden, aber sie haben sich entschieden, es sei denn, hier zu verwenden. Erspart sie, dass sie einen Vergleichsoperator schreiben müssen. Ich schätze, deshalb haben sie es getan. Die letzte Zeile innerhalb dieser Schleife ist dieses Link-Tag. Wir erstellen wieder einen Link mit dem gleichen Tag und Filter wie oben. Dies wird auf die Produkt-URL, das eigentliche Produkt, verlinken. Wir werden das Bild einschließen. Die eigentliche Sache, die man sich hier ansieht, ist Zeile acht, weil wir hier ein Bild-Tag mit einigen Attributen und einigen Filtern konstruieren. Ich werde „Speichern“ drücken und wir werden schnell sehen, wie das aussieht. Jetzt werden Sie sehen, dass wir die Bilder hier wie zuvor enthalten haben. Lasst es uns zusammenbrechen. Lassen Sie uns zuerst diesen Filter hier entfernen und sehen, was passiert. Jetzt laden wir nur die Produkt-Featured Bildquelle in diesem Quell-Tag. Bild ist auch ein Objekt. Deshalb können wir hier einen weiteren Punkt verketten, um den eigentlichen src des Bildes zu erhalten. Sie können hier sehen, wir bekommen ein anderes Attribut des Bildes hier, das ALT-Tag, aber wir werden das in nur einer Sekunde erreichen. Wenn ich speichere und ich gehe zurück auf die Sammlungsseite. Im Moment werden Sie sehen, dass alle Links gebrochen sind. Wenn ich einen von ihnen inspiziere, werden Sie sehen, dass wir eine relative URL haben, aber es wird nicht in Shopify funktionieren. Was wir tun müssen, übergeben Sie dieses Bild durch einen Filter. Der Filter, den wir hatten, ist Bild-URL. Hier können Sie einen Parameter von groß sehen, aber wir können diesen Parameter entfernen und nur das Bild URL-Tag ohne Parameter haben. Wenn wir zurück gehen, aktualisieren Sie die Seite, Sie werden sehen, dass wir Bilder erscheinen, aber sie alle mit einer Breite von 100 Pixel. Das ist das Standardverhalten. Aber wir können das in das ändern, was Sie wollen. Vielleicht wollen wir, dass es 200 mal 200 ist. Wir können so etwas tun, oder wenn wir wollen, dass es die gleiche Breite und Höhe hat. Wir müssen nicht wirklich den Wert nach x setzen. Wir können einfach auf „Speichern“ drücken. Jetzt sollten wir sehen, dass unser Bild doppelt so groß ist. Da gehst du. Ich denke, das ist ein ziemlich guter Mittelweg zwischen diesen wirklich großen Bildern und denen, die standardmäßig herauskommen, was ein 100 ist. Jetzt ist das wirklich praktisch, um dies zu haben, da Sie ein wirklich großes Bild in Ihr Shopify-Dashboard einfügen können , aber solange Sie Code schreiben, der die Größe dieses Bildes begrenzt, dann ist das, wie groß das Bild in den Browser geladen wird. Was ich damit meine, ist, wenn wir tatsächlich gehen und auf das offene Bild in neuer Registerkarte klicken. Ob das Originalbild, das wir hochgeladen haben, 1.000 Pixel breit oder 200 Pixel breit war. Es wird nur von Shopify Servern als 200 Pixel x 200 Pixel Bild bedient. Das ist gut für die Bildoptimierung. Also Faustregel hier, wenn Sie ein Bild einschließen, verwenden Sie hier immer den Parameter und geben Sie die maximalen Abmessungen an, die Sie denken, dass das Bild sein muss. Weil es keinen Sinn hat, ein Bild zu liefern, das viel größer ist als das, wofür Sie es brauchen. Dieses letzte Tag ist für das alt-Attribut Ihres Bildes. Sollte mit ALT-Attributen vertraut sein. Sie beschreiben das Bild für Roboter und Menschen, die das Bild tatsächlich sehen können. Hier können Sie alt tolle Turnschuhe sehen Wenn ich den Escape-Filter hier entferne, wurde Ihnen wahrscheinlich kein Unterschied bemerkt. Gehen Sie zurück, aktualisieren Sie die Seite. Sie werden sehen, dass wir immer noch das gleiche Ergebnis bekommen. Aber was der Escape-Filter tut, ist, wenn es einen HTML-Code in diesem Attribut gibt, er stellt sicher, dass es entkommt. Dies ist etwas, das Sie an jedem Punkt mit Shopify Theme-Programmierung und Shopify Theme-Entwicklung fangen kann , ist HTML, das von einem Objekt in Shopify kommt, in Ihren Code injiziert wird und alles bricht. Nur ein Tipp, wenn Sie etwas wirklich seltsames sehen, Sie brechen ganze Seiten und Sie haben keinen Code dafür geschrieben. Der Code könnte tatsächlich von einem Wert stammen, den Sie durchbringen und flüssig sind. Gute Praxis, nur um sicher zu sein, entkommen Sie ihm. Jetzt denke ich nicht, dass es normalerweise HTML in Ihrem alt-Tag geben wird. Aber nur eine sichere kleine Option dort. Sie möchten kein HTML in diesem ALT-Attribut durchkommen. Nun, es ist nicht schön Stil. Wir müssen immer noch mit CSS stylen. Aber wir haben die wichtigsten Punkte. Wir haben Titel, den Preis und das Bild, und sowohl das Bild und den Titel Link zum tatsächlichen Produkt für uns, um es zu überprüfen. Gehen wir zurück zur Sammlungsseite. Jetzt müssen wir nur das paginate Objekt wieder einführen. Dafür, weil ich nicht ganz oben weiß, wie es geht, weil es die meiste Zeit in Shopify für uns geschrieben ist. Ich werde auf das Dokumentenende zugreifen. Dies ist eine gute Gelegenheit, auch mitzuverfolgen , denn das ist, was Sie auch tun werden. Wenn ich nur Shopify Flüssigkeit eintippe, was ich suche, ist die flüssige Referenz, sagen Sie hier. Wonach suchen wir? Wir suchen nach dem paginate Tag. Ich werde in Tags gehen. Ich denke, es wäre als Theme-Tag geschlossen, und es ist. Sie können hier klicken, und da gehst du. Alles, was Sie tun müssen, ist diese Tags um eine for-Schleife zu wickeln und Sie erhalten Paginierung. Ziemlich einfach. Paginierung ist ein Schmerz in den Hintern für viele andere Programmierung, aber Shopify macht es wirklich einfach für uns. Wir sind auf der Sammlung Vorlage, so können wir einfach dieses Beispiel kopieren. Ich kann hier zurück. Ich denke, fünf pro Seite ist eine richtige Nummer für uns. Wir können MRI-End-Tag auch hier codieren und paginieren. Ich werde sparen auf das treffen. Gehen Sie hier zurück, aktualisieren Sie die Seite und Sie werden sehen, dass nur fünf Elemente pro Seite angezeigt werden. Nun, was es uns nicht gibt, ist die Navigation, um tatsächlich zu paginieren. Weil uns ein Stück Code von Anfang an fehlt. Um zu überprüfen, dass wir tatsächlich gehen und klicken Sie hier und sehen Sie sich ältere Versionen. Schauen wir uns das Original an, bevor wir Änderungen vorgenommen haben. Wir können hier sehen, wir haben diese Bedingung. Ich werde das nur kopieren und zu unserer aktuellen Seite zurückkehren. Am Ende der for-Schleife werde ich den Code einfügen, den ich aus dem ursprünglichen Code genommen habe. Jetzt können wir auf das paginate Objekt zugreifen, das innerhalb der paginate Tag verfügbar ist. Dies ist ein Helferobjekt, das Shopify uns gibt, damit wir tatsächlich überprüfen können , wie viele Seiten es in dieser Paginierung gibt. Sie überprüfen die Attributcodepages und wir prüfen, ob es mehr als eine Seite gibt. Jetzt können wir das Paginate-Objekt wieder mit einem einfach zu verwendenden Filter verwenden, der das Paginate-Objekt in eine Standard-Paginierung umwandelt. Hinter den Kulissen gibt es hier eine Menge Magie. Wenn Sie Ihre Paginierung anpassen möchten, können Sie auf die Attribute dieser Paginate Objekte zugreifen und sie so bearbeiten, wie Sie möchten. Aber für unsere Zwecke werden wir nur die Standard-Paginierung verwenden. Ich aktualisiere die Seite hier nach dem Speichern, und jetzt können Sie sehen, dass wir diese Standard-Paginierung haben. Normalerweise, was Sie tun würden, weil Sie wahrscheinlich nicht die Standardpaginierung in einem richtigen Thema verwenden würden, weil Sie nett und entsprechend Ihrem Stil aussehen möchten. Normalerweise würden Sie ein Paginierungs-Snippet erstellen und es hier einfügen. Im nächsten Video werden wir über Abschnitte und Snippets sprechen. Nicht lange, um mehr über Snippets zu erfahren, aber um diese Lektion zu beenden, muss ich mit Ihnen über Layouts sprechen. Wir hätten mit einem Layout beginnen können, aber ich wollte mit der 18-Zeilen-Datei beginnen anstatt dieser 43 Zeilen. Für diejenigen von Ihnen, die eine kleine Zusammenfassung darüber benötigen, was ein Layout ist, wird dies als Wrapper für alle Ihre Vorlagen serviert. Wenn Sie nicht ein alternatives Layout für eine Vorlage angeben, wird dies der Wrapper sein, der jede einzelne Vorlage in Ihrem Shop umgeht. Angenommen, wir haben hier nur ein Layout, und es verwendet den Standardnamen theme.liquid, wird dies der Wrapper sein, der um jede Vorlage wickelt, und der Punkt, den es umschließt, ist genau hier. Dieses spezielle Tag, content_for_layout, ist, wo Ihre Vorlage geladen wird. Ich möchte Ihnen das jetzt in der Praxis zeigen. Wir können sehen, dass dieses Haupt-Tag in der Layoutdatei kommt, und dann laden wir die Vorlage. Gehen wir wieder zu unserer Sammlung Vorlage, und wir werden sehen, es beginnt mit einem h1. Wenn ich hier hineinschaue und den Code inspizieren, habe ich bereits die Inspektion geöffnet, aber Sie werden sehen, dass wir die h1 der Sammlungsvorlage haben, und dann haben wir main. Alles oben hier wird gleich sein, abgesehen von den dynamischen Inhalten, die auf jeder einzelnen Seite geladen werden. Wenn ich auf die Blog-Seite gehe, sehen Sie den Kopf und der Anfang des Körpers ist der gleiche, und Sie haben immer diese Haupt hier, dann in der Haupt, haben Sie den ganzen Code der Vorlage. Zurück zur Seite „Sammlungen“. Content_for_layout, dort wird die Vorlage der Seite, die Sie gerade betrachten, geladen. Aber natürlich haben wir all diese anderen Inhalte um sie herum. Genau hier ist eine Navigation. Genau hier ist ein Link zu einem Einkaufswagen. Wenn Kundenkonten aktiviert sind und ein Kunde eingeloggt ist, wird ein Link angezeigt, um auf seine Konten zuzugreifen. Wenn sie nicht eingeloggt sind, aber Konten aktiviert sind, geben wir ihnen einen Login-Link. Wir werden das in einen eigenen Abschnitt im nächsten Video verschieben. Dafür gibt es einen sehr guten Grund, aber das macht den ganzen Körperbereich Ihres Layouts aus. Dann haben Sie den Kopf Abschnitt, Sie sich nur wirklich Sorgen machen müssen, wenn Sie gehen, um zusätzliche Vermögenswerte. Sie können alle Standard-Sachen sehen, die Sie in einem HTML-Kopf haben würden. Der Titel, Meta-Tags, diese Objekte für SEO. Der Seitentitel ist was auch immer der Titel der Seite ist, es ist nicht das gleiche wie page.title, weil es keine Shopify-Seite ist, die Sie hier anpassen würden, es ist egal, auf welcher Seite Sie sich befinden, die Website, das ist den Seitentitel. Dann ist page_description Ihre SEO-Beschreibung, Sie fügen hier Ihre SEO-Daten hinzu und dann haben Sie dieses spezielle Tag namens content_for_header. Wie hier steht, ist dies einfach ein Header-Hook für Plugins. Dies ist ein Punkt, dass Plugins und ich glaube, Code, den Sie setzen oder Präferenzen, die Sie hier setzen. Wenn ich in Präferenzen gehe, im Grunde alles, was Sie dynamisch zu Ihrem Kopf hinzufügen möchten, wird es eingefügt, wo sich dieses Tag befindet. Ich glaube, dass etwas davon, wenn Sie es in einem Pixel oder einem Google Analytics hinzufügen, und der Ort, an dem es in den Kopf einfügen würde, ist genau hier, aber Sie müssen das überhaupt nicht bearbeiten. In der Tat denke ich, dass der Editor Fehler wird, wenn Sie versuchen, das zu ändern, ist das, was content_for_header ist. müssen es nicht ändern, lassen Sie es einfach dort, wo es ist. Dann ist genau hier, wenn wir unser Vermögen einbringen. Wir haben ein paar Filter hier, und ich zeige Ihnen, was diese schnell machen. Wir haben diese application.scss.css und wenn wir das einfach auf dem Layout selbst ausgeben, Nummer eins wird es alle Stile brechen, die wir erstellt haben, die wir nicht, aber Sie werden hier sehen, es gibt nur diesen Text buchstäblich auf dem Bildschirm aus. Wenn Sie ein Ausgabetag erstellen und nur eine Zeichenfolge darin einfügen, tun Sie im Grunde nichts. Sie könnten dies von beiden Seiten entfernen und es wird das gleiche Ergebnis sein. Aber was wir hier tun, ist, dass wir das nehmen, und wir filtern es, wir finden die vollständige Asset-URL dieses Assets. Lasst uns das zuerst machen. Aktualisieren Sie die Seite und jetzt können Sie sehen, dass dies zu einer vollständigen URL wird , die vom Shopify-Server generiert wird, die Sie mit dem Asset verknüpfen wird. Und schließlich, mit dem letzten Filter, verwandelt es diese URL in ein vollständig konstruiertes Stylesheet-Tag. Wenn ich auf Speichern klicke, aktualisieren Sie die Seite, Sie werden sehen, dass die URL jetzt nicht angezeigt wird, da sie in einem HTML-Tag eingekapselt ist. Wenn ich hier unten schaue, gibt es viele generierte Tags drin. Sie können sehen, dass man es jetzt in unser Projekt für ein Link-Tag bringt und es nicht nur auf dem Bildschirm ausgibt. Wir können tatsächlich einfach dieses HTML-Wort für Wort kopieren, es hier so einfügen. Dann, wenn wir das entfernen, was das Stylesheet-Tag generiert und einfach den href durch diesen Wert ersetzt, sollten wir das gleiche Ergebnis erhalten. Jetzt sollten wir sehen, dass es zweimal auftaucht. Natürlich, weil ich das Stylesheet-Tag von diesem genommen habe. Dieser zeigt nur die Asset-URL und dieser ist der vollständig gebildete Link zum Asset. Was ich gerade mit dieser Zeile getan habe, ist im Wesentlichen das Gleiche, als ob ich dort den Stylesheet-Tag-Filter verwenden würde. Nicht wichtig für Sie, dies in Bezug auf die Bearbeitung zu verstehen , weil Sie dies wahrscheinlich nicht berühren möchten, aber es ist wichtig zu wissen, wie es funktioniert, Sie sind nicht verwirrt, wenn sagen, zum Beispiel, Sie möchten ein anderes Stylesheet -Tag, müssten Sie dies nur duplizieren, unterlegen, und dann wird Ihre nächste Datei vielleicht nur styles.css genannt. So würden Sie überall dort, wo dieses Layout enthalten ist, ein neues Asset hinzufügen, das Sie hier in Ihr Shopify-Theme aufgenommen haben. Aber in Bezug auf die Umwandlung in eine vollwertige Asset-URL und dann ein Tag daraus zu erstellen, müssen Sie sich nicht wirklich damit anlegen. Dasselbe geschieht hier mit JavaScript, wobei der Dateiname übernommen wird, eine vollwertige Asset-URL von Shopify erstellt und diese dann in ein Skript-Tag umgewandelt wird. Ich werde das retten. Dies ist eher eine thematische Strukturierung Sache. Aber nur um zu demonstrieren, werde ich Ihnen zeigen, wie man eine alternative Vorlage macht. Hier können wir erstellen, ich werde es einfach abwechselnd nennen. Du kannst es nennen, wie immer du willst. Lassen Sie uns einfach alle diese Navigationsinhalte entfernen und klicken Sie auf Speichern. Jetzt haben wir dieses alternative Layout, das wir verwenden können. Wie wir dieses Layout tatsächlich auf eine bestimmte Vorlage anwenden würden, ist, dass wir zur Startzeile jeder Vorlage gehen und das Layout-Tag verwenden können. Anstelle von theme.liquid, jetzt wird es Thema alternate sein und wenn ich dieses Tag am Anfang unserer Vorlage setze, aktualisieren Sie die Seite, Sie werden jetzt sehen, es gibt keine Navigation. In Ordnung. Wenn ich es entfernen und auf Speichern drücken, jetzt werden Sie sehen, dass wir das gleiche Thema wie zuvor haben. Meistens ist es nicht wichtig, ein zweites Layout zu haben, aber es ist als Option da. Ich werde das nur löschen, weil wir keine Änderungen an mehreren Designlayouts für dieses Projekt vornehmen müssen , und für diese Klasse benötigen wir nur eine Layoutdatei, aber die Option ist da, um verschiedene Layouts zu erstellen. Vielleicht möchten Sie eine Seite mit weniger Inhalt darauf. Vielleicht wollen wir zum Beispiel nicht die Kopf- oder Fußzeile. Wir können das aus einem alternativen Layout entfernen und dann dieses Layout in der Vorlage verwenden. Hoffentlich hat das wirklich klar gemacht, was in einer grundlegenden Vorlage wie hier für die Sammlung und Ihre Layoutdatei vor sich geht. Was ich Ihnen überlassen möchte, bevor wir in Abschnitte und Snippets gehen, ist dieser Teil meiner Dokumentation , der vorlagenspezifische Objekte ist. Ich habe im vorherigen Video ein wenig darüber gesprochen. Aber ich möchte nur sicherstellen, dass Sie das verstehen. Wir beginnen mit der Layoutdatei und dann die Vorlage für die Seite, auf der gerade in diesem Container geladen wird weil wir dieses content_for_layout-Tag hier eingefügt haben. Jetzt haben wir Zugriff auf die bestimmten Objekte, die mit dieser Vorlage gehen. Was ich möchte, dass Sie hier verstehen, ist, wenn wir auf der Sammlungsvorlage sind, haben wir keinen Zugriff auf ein Produkt da wir kein Konzept davon haben, welches Produkt wir suchen. Es sei denn, wir durchlaufen eine Sammlung und greifen auf ihre Produkte zu, dann können wir ein bestimmtes Produkt innerhalb einer Schleife beeinflussen. Gleiche kann gesagt werden, wenn wir in einem Blog sind. Wenn wir in einer Blogvorlage sind, schauen wir uns einen bestimmten Blog an. Wir können das Blog-Objekt verwenden, aber wir können nicht wirklich auf einen Artikel zugreifen, es sei denn, wir durchlaufen die Artikel in diesem Blog. Das gleiche mit Kollektionen und Produkten. Aber wenn wir dann auf das Produkt oder die Artikelseite gehen, haben wir bereits die Produktseite oder Produktvorlage gesehen. Schauen wir uns die Artikelvorlage an. Wir können auf das Artikelobjekt speziell zugreifen , da dies die Vorlage ist, die geladen wird, wenn ein Artikel angezeigt wird. Ich wollte das nur super klar machen. Wenn es immer noch keinen Sinn ergibt, geben Sie mir einen Kommentar in das Diskussionsfeld unten, aber das sind Vorlagenbereich und Vorlagen spezifische Objekte. Deshalb sind Vorlagen wirklich wichtig. Gleichzeitig möchten Sie jedoch möglicherweise nicht viel Code in Ihre Vorlage einfügen. Vielleicht möchten Sie direkt zu einem Abschnitt verlinken und es gibt einen sehr guten Grund dafür, worauf wir im nächsten Video eingehen werden. 6. Abschnitte, Snippets und Standorte: In dieser Lektion werden wir über Abschnitte und Snippets sprechen. Snippets ist ziemlich einfach und leicht zu verstehen. Grundsätzlich, wenn wir Code in ein Snippet einfügen, können wir es an mehreren Stellen in unserem Thema aufnehmen. Es ermöglicht uns, Code wiederzuverwenden, aber auch unseren Code besser zu organisieren. Abschnitte auf der anderen Seite sind ein bisschen intelligenter und wir werden sehen, warum das in dieser Lektion ist. Wenn wir zu unserem Thema zurückkehren. flüssige Layout, können wir eine wirklich offensichtliche Notwendigkeit für einen Abschnitt hier sehen. Das heißt, wir haben all diesen Header-Inhalt in unserem Layout. Nun, was Sie normalerweise in einem Shopify-Theme tun würden, ist ein Kopf- und Fußzeilenabschnitt. Was ich tun werde, ist, dass ich das alles so schneiden werde, dass es in meiner Zwischenablage ist. Ich will es nicht verlieren, und dann werde ich das durch einen Aufruf an einen Abschnitt ersetzen. Geht zum Abschnittskopf zu schreiben. Wenn ich nun auf Speichern klicke, wird es zu diesem Abschnitt verlinken, den wir noch nicht erstellt haben. Wir gehen hinein, erstellen Sie einen Abschnitt mit dem gleichen Namen, Header. Der Editor wird automatisch die Erweiterung von dot liquid für uns hinzufügen, so dass wir das nicht tun müssen, und es fügt auch automatisch in ein Schema, Stylesheet und JavaScript-Tags, sehr praktisch. Okay, wir werden in der nächsten Lektion ausführlich in Schemas eingehen, aber im Moment werde ich diesen flüssigen und HTML-Code direkt in hier einfügen. Wenn ich auf Speichern klicke, aktualisieren Seite, weil jede Seite in einem Thema gerade das gleiche Layout verwendet, werden wir sehen, dass sich nichts geändert hat, okay? Eigentlich hat sich etwas geändert, und das ist, dass wir jetzt all dies in einem Shopify-generierten Div-Tag gekapselt haben. Es gibt ihm eine ID von Shopify Abschnitt Bindestrich und dann den Namen des Abschnitts. Es gibt ihm auch eine Klasse von Shopify Abschnitt. Lassen Sie uns einen anderen Abschnitt erstellen, und nennen wir ihn Fußzeile. Nach dem Hauptinhalt haben wir normalerweise eine Fußzeile und wir können diese in einen eigenen Abschnitt einfügen. Wenn ich das speichere, wird es mit einer Fußzeile verknüpft, die noch nicht existiert, also müssen wir sie erstellen. Ich werde diese footer.liquid Datei in meinen Abschnitten erstellen. Ich gehe hier hoch und lass uns einfach ein Fußzeilen-Tag öffnen. Schließen Sie das Fußzeilen-Tag, und vielleicht fügen Sie einfach einige Copyright-Informationen dort Copyright, Christopher Dodd. Es gibt eine Sache, die ich vergessen habe, und das ist, den Abschnitt im Schema tatsächlich zu benennen. Wir möchten dies in Fußzeile ändern, und dann in unserer Kopfzeile wollen wir, dass der Abschnittsname Header sein. Dies ist, was im Customizer angezeigt wird. Wie gesagt, wir werden mehr in Schemas gehen, aber im Grunde alles ist für den Customizer. Wenn ich auf eine Seite zurückgehe, weil sie alle das gleiche Layout verwenden, können wir sehen, dass wir auch ein ähnliches Tag für die Fußzeile generiert haben. Shopify Bindestrich, Abschnitt, Bindestrich und der Name des Abschnitts, der Fußzeile ist, und natürlich die Klasse Shopify Abschnitt. Jetzt können Sie hier unten sehen, es ist nicht schön formatiert, aber innen haben Sie das Fußzeilen-Tag mit dem Copyright Christopher Dodd. Jetzt möchte ich Ihnen zeigen, wie das im Customizer aussieht. Dies ist eine gute visuelle Darstellung dessen, was hier vor sich geht. Alles, was ich dort getan habe, war ich mit der rechten Maustaste auf Customizer für dieses Thema zu gehen angeklickt . Jetzt sehen Sie auf der Homepage haben wir Kopf- und Fußzeile. Dies sind die Abschnitte, wie sie erscheinen Enact Design Customizer. Wenn wir zu einer Seite gehen, jede Vorlage, weil wir die gleiche Layoutdatei verwenden, erhalten wir Kopf- und Fußzeile auf jeder Seite. Gehen Sie zurück zur Startseite. Ich werde tatsächlich Fußzeile aus unserer theme.liquid Datei entfernen. Nur um Ihnen zu zeigen, wie das im Customizer angezeigt wird. Wenn ich zum Customizer gehe, aktualisiere die Seite, dann sehen wir nur die Kopfzeile. Das ist etwas, das ich in der letzten Klasse behandelt habe , so dass das nur eine Zusammenfassung für die meisten von euch sein sollte. Aber wie Sie sehen können, was diese wirklich tragen Thema, wir haben alle Abschnitte erstellt, die in diesem Thema existieren. Wenn wir zu einer anderen Seite gehen, gibt es noch keinen Abschnitt zwischen Kopf- und Fußzeile für dieses Thema. Wenn wir zu Theme-Einstellungen gehen, haben wir nur die Standard-Checkout-Liste der Anpassungen hier. Dazu können wir auch noch hinzufügen. Hier können Sie die offizielle Version davon sehen. Es ist das Thema Kit, Vorlage Thema. Auch hier ist dies nur die, die Sie erhalten, indem Sie Thema neu im Theme Kit laufen. Also, um unseren nächsten Abschnitt zu erstellen, können wir eine Sache ändern, und das ist etwas, das ziemlich üblich ist, ist, den ganzen Code innerhalb einer Vorlage zu nehmen und diesen in einen Abschnitt zu verschieben. Nun, das klingt zunächst etwas seltsam, aber wir erklären, warum das in nur einer Sekunde ist. Ich werde diese Abschnittssammlungsvorlage aufrufen, weil das im Wesentlichen das ist, was es ist. Dann werde ich diesen Abschnitt erstellen. Jetzt und hier haben wir ein Schema, und ich werde nur den gleichen Code einfügen, den wir in unsere Sammlungsvorlage hatten. Ich werde diese Sammlungsvorlage im eigentlichen Schema aufrufen. Das ist der Name, der im Customizer angezeigt wird. Wenn wir zu unserer Sammlung Seite gehen, jetzt werden wir Sammlung Vorlage sehen, das ist der Name, den wir in dem Schema definiert ein Abschnitt hier sein. Wie Sie bemerken, weil wir keine Einstellungen in unserem Schema haben, sagt es hier keinen Inhalt oder Einstellungen. Wir können das wirklich anpassen. Der Grund, warum wir eine im Grunde eine leere Sammlungsvorlagendatei haben und direkt zu einem Abschnitt mit dem gesamten Code für diese Vorlage dort verknüpfen , liegt darin, dass wir sie jetzt mit dem Customizer anpassen können. Wenn wir diesen Code hier links, würde er außerhalb eines Abschnitts sitzen und dann hätten wir keinen Zugriff auf ein Schema, für das wir bearbeiten können. Das gilt nicht unbedingt in dem Sinne, dass es ein Einstellungsschema für das Thema als Ganzes gibt, aber wir möchten die Einstellungen für diese bestimmte Vorlage abschneiden. Wir wollen es in einen eigenen Abschnitt verschieben. Okay, im Moment haben wir nichts getan, weil wir keine Einstellungen festgelegt haben. Vielleicht möchte ich hier eine Einstellung erstellen und wir tun das im Einstellungsobjekt. Was ist etwas, das ich als Benutzer an dieser Seite anpassen möchte. Nun, vielleicht möchte ich die Paginierung kontrollieren. Denken Sie daran, wenn ich Benutzer sage, ich spreche über den Shop-Administrator, der diesen Customizer in diesem Fall verwendet. Vielleicht möchte ich die Paginierung kontrollieren. Was ich tun werde, ist ein Objekt zu öffnen, und in diesem Objekt werde ich schreiben, ist übrigens alles JSON-Format, also werden wir ein doppeltes Anführungszeichen öffnen, und was wir hier tun müssen, ist eine Eingabe. Der Ort, an dem Sie mehr darüber erfahren können, ist, wenn wir nur Google Shopify Eingabeeinstellungen. Ich glaube, es liegt in der Konfiguration von Themeneinstellungen direkt hier. Wenn ich nach Eingabeeinstellungen suche, hier können wir die grundlegenden Eingabeeinstellungen sehen. Text zum Beispiel, dies ist die Eingabeeinstellung, die wir in setzen würden. Wir können auch in wie eine Bildauswahl setzen, wir können in eine Reihe von Optionsfeldern, ein Dropdown, alle Dinge, Checkbox setzen . Für die Paginierung denke ich, dass es sinnvoll ist, einen Bereichsschieber zu verwenden. Es wird so auftauchen. Der Grund, warum ein Bereichsschieber in diesem Fall gut wäre, ist, weil wir die Eingabe des Benutzers auf etwas Vernünftiges beschränken wollen. Wir wollen nicht weniger paginieren als zwei sagen, und wir wollen nicht mehr paginieren als 25 sagen. Andernfalls dauert es zu lange, um die Seite zu laden. Was wir tun können, ist, dass wir dieses Beispiel direkt hier kopieren können, zurück in unseren Code gehen. Welcher Tab war das? Okay, los geht's. Anstatt dieses Wort für Wort zu schreiben, werde ich es einfach kopieren und einfügen. Jetzt haben wir ein Objekt, das unsere Einstellung repräsentiert. Das erste, was wir brauchen, ist der Typ, und dies definiert, dass dies eine Bereichseingabe sein wird. Die ID ist, was wir verwenden können, um auf sie in Flüssigkeit zugreifen. Wir müssen das in etwas ändern, das mehr Sinn macht. Ich werde es nur Paginierung nennen. Dann müssen wir hier einen Minimalwert einfügen. Da dies eine Zahl ist, werde ich die doppelten Anführungszeichen loswerden und sagen wir fünf. Das Maximum, durch das sie paginieren können, werde ich sagen, ist 25. Der Schritt ist das Inkrement, das sie verwenden können. Ich möchte nur, dass sie in der Lage sind, eine Auswahl in fünf Schritten zu treffen. Einheiten können wir hier als Produkte pro Seite einfügen, aber leider hat dieses Attribut ein Limit von drei Zeichen. Also werde ich das Gerät einfach nicht in diesem Fall verwenden. Label ist das, was dem Benutzer angezeigt wird. Wir werden hier Produkte pro Seite schreiben, und der Standardwert, den ich machen werde, ist fünf. Wenn ich hier speichern klicke, gibt es keine Fehler, Glück, und dann kann ich die Seite aktualisieren. Wenn ich dann in diesen Abschnitt gehe, können wir unseren Bereichsschieber hier drin finden und ihn aktualisieren. Natürlich haben wir diese Auswahl erstellt, aber wir haben nichts damit gemacht. Wir müssen zu unserem Abschnitt zurückkehren und diesen Einstellungswert anhand seiner ID referenzieren. Anstatt hier, wo es um fünf sagt, was ich tun werde, ist auf diese ID zu verweisen. Die Art und Weise, wie wir das tun, ist durch das Schnittobjekt. Da wir uns in einem Abschnitt befinden, können wir über dieses Abschnittsobjekt auf die Daten innerhalb eines Schemas eines Abschnitts zugreifen . Ich beginne damit, dieses Abschnittsobjekt zu greifen, und jetzt habe ich im Wesentlichen Zugriff darauf und wir wollen hier reingehen. Was ich tun werde, setzen.settings. Jetzt habe ich Zugriff auf alle Einstellungen, und innen möchte ich auf diese zugreifen, der die ID Paginierung ist. Ich werde Paginierung eingeben, und das sollte alles sein, was wir brauchen, um das zum Laufen zu bringen. Gehen Sie zurück, aktualisieren Sie die Seite. Wenn ich jetzt in die Sammlungsvorlage gehe und ich es auf 10 setze, sollte 10 pro Seite angezeigt werden. Diese Kollektion hat nur etwa 10 Produkte. Lasst uns auf die alte Sammlung gehen. Jetzt sind wir in einer Kollektion mit mehr als 10 Produkten. Sie können hier sehen, es ist standardmäßig fünf, 1, 2, 3, 4, 5, aber ich kann es auf 10 ändern, drücken Sie „Speichern“. Die Seite wird aktualisiert, und jetzt werden wir um 10 statt fünf paginieren. Also 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Auf diese Weise können wir unsere Sammlungsvorlage anpassbar machen, indem wir einen Abschnitt verwenden und ihm eine Eingabeeinstellung in seinem Schema geben. In Bezug auf diesen Abschnitt, die Sammlung Vorlage, Ich werde es dort lassen, weil wir mehr über Schemas sprechen, und fügen Sie einige weitere Optionen in späteren Videos. Aber was ich Ihnen zeigen möchte, ist, wie wir eine dynamische Liste von Abschnitten auf unserer Homepage erstellen können , indem wir den speziellen Tag-Inhalt für den Index verwenden. Nun müssen wir zunächst einen Abschnitt erstellen, den wir auf der Homepage setzen möchten. Eine gute Idee, etwas, das in vielen Themen ziemlich üblich ist. Gehen wir einfach auf die Homepage, damit wir einen Blick werfen können. Es gibt derzeit nichts hier, dann wäre es vielleicht schön, eine Reihe von Produkten als vorgestellte Sammlung auf der Homepage erscheinen zu lassen. Lassen Sie uns diesen Abschnitt jetzt erstellen. Wenn ich zurück in unseren Editor gehe, werde ich einen neuen Abschnitt erstellen, und ich werde es Featured-Sammlung nennen. Die Punktflüssigkeitsverlängerung wird natürlich automatisch hinzugefügt. Das erste, was ich tun möchte, ist, den Abschnittsnamen in „Featured Collection“ zu ändern . Jetzt mit diesem Abschnitt werden wir es nicht speziell auf eine Vorlage oder ein Layout einfügen, wie wir es hier getan haben. Aber wir werden in der Lage sein, es in der Homepage zu integrieren, durch diesen dynamischen Inhalt für Index-Tag. Du wirst sehen, was ich meine, in nur einer Sekunde. Was ich tun werde, ist, dass ich eine Schleife aufbauen werde. Lassen Sie uns die Schleife von hier kopieren, für unsere vorgestellte Kollektion. Was wir tun müssen, weil wir dies nicht mehr in der Sammlungsvorlage platzieren, ist eine bestimmte Sammlung anzugeben, und dort sehen wir jetzt das zuweisende Tag. Asset ermöglicht es uns, unsere eigenen Variablen zu erstellen. Was ich hier tun werde, ist auszuwählen, welche Sammlung ich die Sammlungsobjekte dafür sein möchte. Auch hier sind wir nicht mehr in der Sammlungsvorlage. Wir wissen nicht, welche Sammlung durchlaufen soll. Lassen Sie uns dies angeben und wir können das mit dem globalen Sammlungsobjekt tun, und den Zugriff auf sein Handle. Ich werde auf die Featured Collection zugreifen, und lassen Sie uns zu diesem Tag enden. Gehen Sie auf „Speichern“, und jetzt sollten wir eine vorgestellte Sammlung haben , die es uns erlaubt, die vorgestellte Sammlung zu zeigen, wo immer wir sie einschließen. Leider können wir es nicht in unseren Inhalt für den Indexbereich aufnehmen, ohne was als Voreinstellung bezeichnet wird. Wir müssen hier ein voreingestelltes Array schreiben. Dafür gehe ich zurück in die Shopify-Dokumentation. Ich denke, es könnte auf einer anderen Seite als diese sein. Es gibt zwei Seiten, zwischen denen ich die ganze Zeit wechseln kann, wenn ich Abschnitte programmiere. Es ist nicht dieser hier, geben wir „Voreinstellungen“ ein. Ich glaube, es ist in diesem, Thema Abschnitte, das sollte es sein, wenn ich in Presets tippe, hier können wir die Details für Presets finden. Was wir hier sehen können, ist, wenn ein Abschnitt eine oder mehrere Presets hat, wird jede Voreinstellung zu einem dynamischen Abschnitt auftauchende kann zu ihrem Thema Homepage hinzufügen, wenn der Inhalt für Index-Objekt wurde in index.liquid enthalten, so sagen sie es richtig müssen wir eine Voreinstellung mindestens eine Voreinstellung einstellen, so dass wir sie in unserem Inhalt für Index verwenden können. Ich werde nur dieses Array kopieren, das sie hier gesetzt haben, wir brauchen nicht all diese Details. Der Hauptzweck hinter Presets ist, dass wir einige Standardeinstellungen für den Abschnitt festlegen können , wenn er auf einer Seite aufgenommen wird, aber für unsere Zwecke wollen wir nur die Anforderung erfüllen , so dass wir es tatsächlich auf unserer Homepage verwenden können. Ich werde das Einstellungsobjekt loswerden, wir brauchen nur wirklich Kategorie und Namen für dieses, und wir fehlen jetzt endlose Klammer, glaube ich, und wir fehlen auch End-Array-Tag. Hier in der Kategorie werde ich das als benutzerdefinierten Inhalt belassen, und ich werde diese vorgestellte Sammlung benennen, und Sie werden sehen, wo dieser Name kommt später. Alles klar, jetzt, da wir diesen Abschnitt erstellt haben und er eine Voreinstellung hat, können wir es jetzt in unseren Inhalt für den Index aufnehmen, also müssen wir dieses Tag erstellen, ich gehe auf die index.liquid-Seite, ersetzen Sie alle diese mit diesem speziellen Objekt, content_for_index, speichern Sie das, und jetzt, wenn wir auf unsere Homepage im Customizer gehen, müssen wir möglicherweise die Seite aktualisieren. Wir können nun diese Schaltfläche für das Hinzufügen eines Abschnitts sehen, interessant, lassen Sie uns darauf klicken und wir werden hier unsere Kategorie sehen und unser Name unseres Abschnitts erscheint in diesem kleinen Menü, also wenn wir zurück zu der vorgestellten Sammlung, das ist, was wir hier geschrieben haben, die Kategorie und der Name erscheint hier, so dass wir jetzt darauf klicken können, Vorschau darauf, sieht gut aus, und dann können wir es direkt hinzufügen. Wieder haben wir keine Einstellungen dafür noch werden wir einige Einstellungen im nächsten Video einrichten , aber jetzt haben wir diese Feature-Sammlung und wir können mehrere von ihnen hinzufügen, gerade jetzt hatten wir die Sammlung codiert, die wir wollen verwenden, aber wir können diese auch neu anordnen, dies aus- und einschalten, und das ist wirklich benutzerfreundlich für die Person, die mit dem Thema arbeiten wird und sie den Code nicht wirklich berühren müssen, deshalb ist es der Grund, warum Abschnitte sind super mächtig, ich werde auf „Speichern“ drücken, so dass es definitiv auf der Seite enthalten wird, die diese kleine Einführung in Abschnitte einschließen sollte. Wir werden alle diese vorerst entfernen und über Schnipsel sprechen. Ein Snippet, wie ich bereits sagte, ist ein wiederverwendbares Stück Code, etwas, das in der Shopify-Theme-Entwicklung üblich ist, um mehrmals wiederzuverwenden , ist ein Produkt, das in einer Liste von Produkten angezeigt wird, also haben wir das zweimal in unser Thema bisher, können wir in diese vorgestellte Sammlung gehen hier, und innerhalb dieser Schleife können wir tatsächlich machen dies ein Snippet, und auf diese Weise, wenn wir durch Produkte schleifen, vielleicht nicht in einer vorgestellten Sammlung vielleicht irgendwo anders und wir den gleichen Code verwenden möchten, können wir dieses Snippet einfach einfügen, ohne dies jedes Mal ausschreiben zu müssen, also werde ich das schneiden, so dass es in meine Zwischenablage geht, und ich werde das Tag schreiben, um ein Snippet einzuschließen, es wird Produkt-Artikel, ich denke, ich kann es nennen, und ich werde „Speichern“ drücken, jetzt werde ich in Snippets gehen und Produkt-Artikel erstellen, wir fügen diesen Code direkt ein, und jetzt überall, wo dieses Snippet enthalten wird, wird es diesen Code hier. Jetzt ist es wichtig, mit Snippets und Abschnitten zu beachten, dass es immer noch Zugriff auf die Produktobjekte erhält, und es wird auch Zugriff auf die Einstellungen innerhalb des Schemas erhalten, so dass die Verschachtelung in Shopify funktioniert, ist es Feeds von Layouts bis hin zu Vorlagen, bis hin zu Abschnitten, bis hin zu Snippets, aber Snippets können überall einbezogen werden. Was ich damit meine, ist, wenn ich hier in theme.liquid eine Variable setze, könnte ich überall in meinem Thema darauf zugreifen, das dieses Layout verwendet. Wenn ich zum Beispiel in einer Vorlage für die Seite bin und einen Abschnitt eingefügt habe, den ich nur auf Seiten aufnehmen wollte, könnte ich die Seitenobjekte speziell in diesem Abschnitt referenzieren, und dasselbe gilt für Snippets, also für dieses Snippet, wissen wir, dass wir das Produktobjekt überall verwenden können, wo wir Zugriff darauf haben Wenn wir also einen Produktartikel direkt hier in die Schleife einfügen , in der wir Zugriff auf ein bestimmtes Produkt gegeben haben, wird es direkt in die Snippet, okay, wenn Sie dieses Snippet an einem Ort einfügen, an dem kein Produktobjekt angegeben ist, wird es nicht funktionieren,aber solange wir uns darauf verlassen können, dass Produktobjekt angegeben ist, wird es nicht funktionieren, dieses Snippet an einem Ort verwendet wird , an dem es ein Produktobjekt gibt, Es funktioniert gut, genau wie in Abschnitten, denen wir vertrauen können, die Zugriff auf eine Sammlung haben , wenn sie sich auf der Sammlungsvorlage befindet, oder wir können tun, was wir hier getan haben und die Sammlung speziell zuweisen, also geht es darum für Snippets und eine gute Einführung in Abschnitte als auch hoffentlich. Ich möchte nur über ein paar weitere Dinge sprechen, um Shopify Theme Programmierung zu erarbeiten, und das heißt, wir sprachen über CSS und JavaScript in früheren Video, aber lassen Sie uns einfach zeigen, wie wir etwas JavaScript zu unserer Anwendung hinzufügen würden, Ich kann einfach eine lästige Warnung hier werfen, „Sie haben die Seite geladen“, drücken Sie „Speichern“ darauf, jetzt jede Seite, auf die ich in meinem Thema gehe, wird es dieses JavaScript laden, offensichtlich nicht das beste Beispiel, aber Sie bekommen den Punkt, Dieses JavaScript wird in jede Seite geladen, nur dass ich so schnell Demo habe, und das gleiche für CSS, wenn Sie eine Regel überall in Ihrem Thema anwenden möchten, können Sie es hier einfügen, also Vielleicht wollen wir, dass die Schriftgröße von allem, die Schriftgröße des Körpers etwas lächerlich ist, sagen wir, 40 Pixel, es ist ziemlich lächerlich, wenn Sie mich fragen, die Seite aktualisieren, nichts ist passiert, mal sehen, was hier in unserer Konsole los ist, wir haben keinen Zugriff auf unsere Anwendung.css.scss, schauen wir uns das an, ich denke, das liegt daran, dass der falsche Name gesetzt wurde, wie ein Fehler mit dem neuen Thema aussieht, wir gehen in theme.liquid und ändern Sie die Reihenfolge hier, also soll es css.scss sein, speichern Sie das, aktualisieren Sie die Seite, jetzt werden Sie sehen, dass alle unsere Schriftgröße viel größer wird, offensichtlich ist das ein ziemlich dummes Beispiel, also werde ich diesen Stil entfernen. Wir haben über Layouts gesprochen, über Vorlagen gesprochen, über Abschnitte gesprochen und über Snippets gesprochen, und dann haben wir über Assets gesprochen. Config, über die wir im nächsten Video sprechen, wenn wir tiefer in JSON eintauchen, aber Gebietsschemas, nur um kurz zu erwähnen, was das ist, wie Sie sehen können, ist der Titel dieser Datei de.default.json, und was diese Datei tut, ist eine bestimmte Sprache für englische Benutzer können wir andere Gebietsschemas erstellen, und dann können wir das richtige Wort aufrufen, das wir in einer bestimmten Instanz verwenden müssen. Wir können dies auch in einer Benutzeroberfläche bearbeiten, wir können hier gehen und auf „Sprachen bearbeiten“ klicken, und wir werden die gleichen Optionen nicht in JSON-Form, sondern in einer Benutzeroberfläche sehen, siehe hier, wenn ich tatsächlich eingehen und dies ändern sollte, vielleicht sage ich, „Seite nicht gefunden“, drücken Sie „Speichern“ auf, dass, und ich gehe hier bemerken, wie sich dies ändern wird, die tatsächlichen Daten von dem, was wir in dieser Benutzeroberfläche eingestellt haben, da gehen wir, Seite nicht gefunden, und es funktioniert in beiden Richtungen, wenn ich es hier in der Datendatei bearbeiten sollte, auf „Speichern“ klicke, gehe zurück zur Benutzeroberfläche, aktualisiere das, du wirst sehen, dass es der Wert ist, in den wir es gerade geändert haben. Nun, warum dies für uns wichtig ist zu verstehen ist, wenn wir sehen diese Attribute oder diese Objekte im eigentlichen Theme-Code aufgerufen werden, also ist dieser für die 404-Seite, und es definiert die Sprache, die auf der 404-Seite sein wird, Also gehen wir auf die 404-Seite, und wir können hier sehen, wir haben diese speziellen Tags, die mit diesem t-Filter gefiltert werden, also wenn ich das einfach entferne, was denkst du, wird passieren? wir einen Blick, normalerweise kommt die 404-Seite auf, wenn Sie eine Adresse eingeben , die nicht existiert, also werde ich einfach ha ha ha ha ha ha ha ha ha ha ha ha ha, und jetzt, anstatt die übersetzte Version davon zu sehen, werden Sie nur den Code sehen, so wie ich sagte, wenn Sie nur eine Zeichenfolge in ein Ausgabe-Tag mit Anführungszeichen einfügen, ist es das Gleiche, dass nur buchstäblich auf die Seite gesetzt wird, also brauchen wir dieses t-Tag und was das tun wird, ist zu sagen: „Hey, schau nach diesem Objekt und bekomme dann die Wert davon und legte es auf dem Bildschirm“, so dass, wenn wir allgemein.404.title sehen, gehen wir in hier, wir beginnen mit allgemeinen, dann graben wir in 404 Objekt, und dann bekommen wir die Eigenschaft des Titels, also jetzt, wenn ich Aktualisieren Sie die Seite jetzt, dass wir ersetzt oder zurück in diesem t-Tag gesetzt haben, können Sie sehen, dass der Wert durch kommt. Dies ist wichtig zu beachten, wenn Sie durch die Bearbeitung Ihres Themas gehen und Sie auf eine dieser Sprachvariablen stoßen, vielleicht möchten Sie Ihre eigenen erstellen, was total cool ist, Sie aktualisieren einfach diese JSON-Datei hier, aber es ist wichtig zu beachten, dass, wenn Sie Shopify-Themes programmieren. Ich denke, das war eine ziemlich lange Lektion, einige davon werden wahrscheinlich lange Lektionen sein, also werde ich es dort beenden. Im nächsten Video werden wir uns tiefer mit JSON befassen, also wirst du im nächsten Video mehr darüber erfahren, wie das funktioniert und wie du mit JSON arbeitest, also werde ich dich dort sehen. 7. JSON-Schemata: In dieser Lektion lernen wir alles über JSON. JSON ist eine beliebte Möglichkeit, Daten und Shopify-Themen darzustellen, die Art und Weise, wie Sie alle Ihre Daten und Ihr Shopify-Theme darstellen, ist durch JSON-Dateien. Wir haben im letzten Video gesehen, dass wir hier Sprachdatei haben, die in JSON gespeichert ist. Das können wir auch über den Themen-Spracheditor bearbeiten , den wir auch im letzten Video gesehen haben. Das ist ganz einfach. Wir haben Zugriff auf die Schlüssel und Attribute innerhalb dieses Objekts, und wir können dies einfach direkt durch hier bearbeiten, oder wir können es auf der tatsächlichen Datendatei selbst bearbeiten. Was ich in dieser Lektion ausführlicher besprechen möchte, sind JSON-Schemas. Wenn ich darauf klicke und ich gehe in settings_schema, können wir das Schema für unsere gesamte Website sehen. Ich weiß, dass wir uns das noch nicht angesehen haben, aber wir haben uns natürlich kurz Schemas angesehen, da es sich um einzelne Abschnitte handelt. Genau hier ist das Schema, das wir hier sehen, sehr ähnlich wie es hier in unseren Settings_schema.json funktioniert. Wenn Sie mehr über JSON selbst erfahren möchten, steht für JavaScript Object Notation. Es ist eine Möglichkeit, Daten darzustellen, die ähnlich aussehen , wie Sie Daten in JavaScript darstellen würden, aber es ist nicht genau dasselbe. Einige Hauptunterschiede sind doppelte Anführungszeichen um die Eigenschaftsnamen. Aber wenn Sie mehr über JSON, eine schnelle Google-Suche,erfahren möchten eine schnelle Google-Suche, ist es nur J-S-O-N, und Sie haben eine Welt von Informationen über JSON offen. Es ist ganz einfach. Es ist nicht summierend, einen ganzen Kurs zu studieren , es sei denn, Sie wollen wirklich in die Tiefe damit eingehen. Aber für unsere Zwecke, alles, was wir im JSON-Schema verstehen müssen , haben wir Arrays genau wie in JavaScript, und dann wird ein Objekt durch diese geschweiften Klammern dargestellt. Wie wir mit der Sprachdatei gesehen haben, ist dies das Objekt insgesamt. Dann können wir in diesem Objekt das allgemeine Objekt anvisieren. Wenn wir dann innerhalb des allgemeinen Objekts sind, können wir das „404" Objekt greifen und dann Attribute oder verschachtelte Objekte innerhalb dieses greifen. Wir haben gesehen, dass wir hier in unsere Ausgabe kommen. Gehen Sie in die Gebietsschemas, wählen Sie das allgemeine Objekt aus, gehen Sie in das verschachtelte „404" Objekt und greifen Sie den Titel davon. In Ordnung, das ist also ein bisschen auf JSON und der Syntax dahinter. Aber lassen Sie uns mehr über Schemata sprechen und wie alles in Shopify funktioniert. Wir sahen das Schema, wie es sich auf bestimmte Abschnitte in früheren Videos bezieht. Aber ich möchte Ihnen Settings_Schema.json zeigen. Wenn wir zurück zu unserem Customizer gehen und wir auf jeder Seite gehen, sehen Sie, wir haben Abschnitte in der ersten Registerkarte hier. Wir können unsere Abschnitte sehen, wie wir zuvor gesehen haben, und alle Schemas innerhalb dieser Abschnitte werden diese Eingaben generieren. Aber es gibt auch dieses andere Menü namens Theme-Einstellungen. Hier können wir Gruppen von Einstellungen platzieren, die wir in unserem Thema zugreifen können. Es gibt jedoch einige Einschränkungen. Eines der Merkmale einer Einstellungen in Abschnitten ist, dass wir Blöcke haben können , die wir sehr bald in den allgemeinen Themeneinstellungen sehen werden. Wir können keine Blöcke machen. Das ist eine Einschränkung, aber sonst funktionieren sie ziemlich gleich. Gehen wir rein und zeigen Ihnen ein Beispiel. Nach diesem Objekt werde ich ein neues Objekt erstellen und diesem einen Namen geben, sagen wir mal, allgemeine Stile. Dies ist so, wie Sie auch einen Abschnitt definieren würden. Dann, genau wie wir in einem Abschnittsschema würden, definieren wir ein Einstellungs-Array. Innerhalb dieses Einstellungs-Array können wir beliebige Arten von Eingaben erstellen, die wir wollen. Für dieses Video habe ich bereits die beiden Bereiche der Shopify-Dokumentation geladen , die Ihnen beim Erstellen dieser JSON-Schemas helfen. Der erste ist: @themes /development/sections. Der Titel ist Themenabschnitte. Dieser ist praktisch, um zu lernen, wie Sie Ihr Schema strukturieren. Sie haben die verschiedenen Tags, die wir in einem früheren Video gesehen haben. Wir werden auch heute hier über Blöcke erfahren. Hier drüben bei der Konfiguration von Designeinstellungen, ist es frustrierend, dass sie es auf einer separaten Seite. Aber dies ist die Seite, auf der Sie über alle verschiedenen Eingabeeinstellungen lernen, also Text, Textbereich, Bildauswahl, Radio, Kontrollkästchen Bereich auswählen. Das sind die grundlegenden, und dann haben sie einige fortgeschrittene hier unten, glaube ich, ja. Wir können Eingaben für Farbe, Schriftarten, Sammlungen, Produkte, Blogs, Seiten, Links, Listen, URLs, viele verschiedene Sachen erstellen. Wenn Sie sehen möchten, ob es etwas gibt, das Sie eine Benutzereingabe vornehmen können, besteht die Wahrscheinlichkeit, dass es hier drin sein wird. Zurück zu hier, müssen wir eine Einstellung erstellen. Was ich nur zu Demonstrationszwecken tun werde, ist eine Einstellung für die Farbe von Links zu erstellen . Sagen wir es einfach. Ich werde den Farbwähler verwenden. Lassen Sie uns einfach das Beispiel kopieren. Ich gehe hier hinein und ersetze mein leeres Objekt durch das Objekt aus der Dokumentation. Der Typ ist bereits festgelegt wird Farbe sein. Wir müssen dem nur einen Ausweis geben. Ich werde diese Linkfarbe aufrufen, und das Etikett wird dem Benutzer angezeigt. Ich werde es Link Farbe nennen. Ich benutze die amerikanische Rechtschreibung nur um konsistent zu sein und den Standardwert, wir sagen einfach blau. Diese hier Info ermöglicht es uns, ein extra wenig Text zu setzen. Ich denke nicht, dass es in diesem Fall notwendig ist, aber nur um Ihnen zu zeigen, was es tut, wenn Sie es brauchen, werde ich hier eine Beschreibung schreiben. Dies ist für die Linkfarbe. Wenn ich das speichere, sehen Sie, dass wir einen Fehler haben. Die Einstellung mit der Standardeinstellung für die Linkfarbe muss eine CSS-Farbe sein. Wir können nicht blau verwenden, es muss ein HEX-Wert sein, also lass mich einfach schwarz machen. Probieren Sie das aus. Muss eine CSS-Farbe sein. Da gehen wir. Nicht das Beste beim Ausführen von Hex-Codes. Normalerweise schaue ich sie einfach nach. In Ordnung, aber jetzt haben wir diesen Hex-Code, der Schwarz repräsentiert. Wenn wir jetzt in unseren Customizer gehen und die Seite aktualisieren, sieht alles gleich aus, aber wir können hier reingehen. Jetzt haben wir diesen Abschnitt für allgemeine Stile. Klicken Sie darauf, und wir haben Link Farbe. Der Standardwert wurde auf #000 gesetzt und die anderen Nullen ausgefüllt. Wir können reingehen, das in die blaue Farbe ändern und „Speichern“ drücken. Jetzt, genau wie wir es mit den Einstellungen im Abschnittsschema getan haben, wird dies nichts tun, es sei denn, wir verweisen auf diesen Wert. Dafür ist natürlich die ID. Lassen Sie uns voran und machen Sie alle Links in unserem Thema nach diesem Link Farbe. Nun, wo wir einen Stil setzen sollten, der auf jeder Seite unseres Themas sein wird , ist in unserer globalen CSS-Datei. Aber was wir tun wollen, ist Referenzflüssigkeit in diesem Fall, weil wir auf das Einstellungsobjekt in Flüssigkeit zugreifen müssen, um auf diesen Wert zugreifen zu können. Eine Funktion von Shopify-Themes, die Sie möglicherweise nicht erkennen , ist, dass Sie Flüssigkeit auf Ihren CSS-Dateien als auch verwenden können. Was ich tun werde, ist diesen Dateinamen zu ändern und hinzuzufügen.liquid am Ende davon. Dann werde ich „Fertig“ drücken. Jetzt wird es eine lächerlich lange Verlängerung haben, aber, oh, na ja. Nun, was ich tun werde, ist, alle Links mit CSS zu zielen und das Farbattribut basierend auf dem zu ändern, was hier festgelegt ist. Wie ich gerade erwähnt habe, ist der Weg, dies durch das globale Einstellungsobjekt zu tun. Ich kann ein Ausgabe-Tag erstellen, auf mein Einstellungsobjekt zugreifen und dann gehe ich in die Einstellung mit der ID der Linkfarbe. Ich werde hier in Linkfarbe setzen, und dann werde ich es mit einem Semikolon schließen. Nun, wir könnten tatsächlich den Namen dieses inneren Theme.liquid ändern müssen, aber lass uns gehen und schauen und sehen, ob das jetzt funktioniert. Ich werde die DevTools aufrufen. Es gibt keine Fehler in der Konsole. Gehen wir runter, wo wir den Link hineinbringen. Wenn ich die CSS-Datei öffne, öffne in einem neuen Tab, du wirst sehen, dass wir unsere CSS haben, aber anstelle des flüssigen Tags, die sich erinnern, wird alles auf der Serverseite generiert, haben wir die tatsächliche Ausgabe. Genau wie wir Flüssigkeit am Backend mit all diesen berechnen und es nur HTML und CSS ausspuckt, haben wir das Gleiche hier passiert. Wir können eine.liquid am Ende dieser setzen, dann Shopify diejenigen, um jede Flüssigkeit darin zu pausieren. Dann, wenn es zum Frontend kommt, wie wir gesehen haben, ist es nur eine css.scss-Datei. Es gibt keine Flüssigkeitsverlängerung, und es berechnet die gesamte Flüssigkeit und setzt den tatsächlichen Wert ein. Sehr cool. So können wir unser Stylesheet programmgesteuert beeinflussen. Ich werde hier wieder in den Customizer gehen und mal sehen , ob wir unsere Link-Tags ändern können. Ich werde die Seite aktualisieren, um sicherzustellen, dass alles aktuell ist. Gehen Sie in allgemeine Stile, und ändern Sie dies in etwas wirklich Offensichtliches, wie Rot. Ich werde „Speichern“ drücken, und jetzt wird es nicht aktualisiert. Werfen wir einen Blick in das Thema, oh, warte. Los geht's. Jetzt können wir sehen, dass standardmäßig alle Links rot sind, weil wir das einfach hier in unseren allgemeinen Einstellungen festgelegt haben. Wenn wir den Customizer aktualisieren, sollten wir auch hier das gleiche Ergebnis erhalten. Vielleicht wird es ein wenig zwischengespeichert. Nicht sicher, warum es sich nicht im Customizer auswirkt, aber es wirkt sich definitiv auf das Front-End hier aus. Das ist ein großartiges Beispiel für das Erstellen von Designeinstellungen und das Einfügen hier. Dies ist für alles allgemeine, Verknüpfungsfarben, Überschrift Farben , Schriftarten, alles, was Sie das gesamte Thema beeinflussen möchten , würde in Designeinstellungen gehen. Aber am häufigsten werden Sie Einstellungen in Ihrem Abschnitt festlegen. Ich gehe einfach zurück und ändere das, weil es nicht so gut aussieht, rot zu sein. Drücken Sie auf „Speichern“, und gehen Sie hier und aktualisieren Sie die Seite. Da gehen wir. Jetzt haben wir die Farbe, die wir gesetzt haben. Cool. In Ordnung. Gehen wir nun in einen unserer Abschnitte und schauen wir uns den Abschnitt der Featured-Sammlung an. Das erste, was wir tun möchten, ist es dem Benutzer zu erlauben, die Sammlung zu wählen , die angezeigt wird, anstatt sie fest zu codieren. Ich gehe hier in meine Einstellungen, öffne das. Wie immer werde ich hineingehen und überprüfen, welche Eingaben ich zur Verfügung habe. Denken Sie daran, wir sahen einen für die Sammlung. Ich werde darauf klicken. Hier haben wir ein Beispiel, das ich einfach Wort für Wort kopieren kann. Ich mache das schnell, weil ich mich nicht mit der Theorie beschäftigen will. Aber wenn Sie darüber lesen wollen, was wir hier tun, ist alles in der Dokumentation. Gehen Sie zurück, ersetzen Sie unser leeres Objekt hier durch die Attribute, die wir bearbeiten müssen. Der Typ ist bereits für uns eingestellt. Ich werde die ID in Sammlung ändern, weil es nur am sinnvollsten ist. Rufen Sie die Labelsammlung an, und wir brauchen hier wirklich keine Infozeile, weil es ganz einfach ist. Dann hier oben können wir die Sammlung setzen, statt Featured-collection, können wir tatsächlich die Einstellungen referenzieren. Also werde ich dieses Abschnittobjekt greifen, in seine Einstellungen gehen und Sammlung finden. Dann werde ich retten. Nun, das wird es brechen, weil wir keinen Standardsatz haben , den wir dann einfach gehen und aktualisieren können. Wenn ich auf die Homepage gehe, wo sich dieser vorgestellte Sammlungsbereich befindet, sagt es keine Übereinstimmungen, weil wir nichts eingefügt haben. Jetzt wird der Inhalt nicht angezeigt. Schauen wir uns mal an. Was haben wir hier falsch gemacht? Alles sieht gut aus. Vielleicht haben wir vergessen, unseren Customizer zu aktualisieren oder zu aktualisieren. Lasst uns das jetzt machen. Wir sollten immer noch keine Übereinstimmungen bekommen, da wir noch keine Sammlung erstellt haben. Aber jetzt können wir sehen, dass Sammlung jetzt ein Input ist. Jetzt können wir als Benutzer diese schöne Benutzeroberfläche haben, um eine Sammlung auszuwählen, die wir hier einbringen möchten. Dann, wenn wir es auswählen, sollte es von unserem Abschnitt verwendet werden. Also werde ich „Speichern“ drücken und wir haben immer noch ein Problem. Lassen Sie mich gehen und überprüfen Sie das Frontend, ob es auch falsch ist. Keine Streichhölzer Also gehen wir wieder zurück, schauen wir uns mal an. Was ich denke, wir hier erleben, ist ein Problem, das ich mit Shopify-Themes finde, bei dem das Aufrufen eines Ressourcenobjekts uns seinen Namen gibt, aber nicht das Objekt selbst. Nur um dies zu bestätigen, werde ich ein Ausgabe-Tag erstellen und sehen, ob wir nur den Sammlungsnamen erhalten, wenn ich unsere Sammlung setze. Ich vermute, dass dies definitiv der Fall sein wird. Wenn ich die Seite aktualisiere, können Sie sehen, dass das Handle der Sammlung angezeigt wird. Wenn wir tatsächlich auf das Sammlungsobjekt zugreifen würden, würden wir ein anderes Ergebnis erhalten. Das ist eine frustrierende Sache in Shopify. Sie würden denken, dass, wenn wir eine Sammlung hier verknüpfen und dann wir sie codieren, wir das Sammlungsobjekt erhalten würden, aber stattdessen erhalten wir das Sammlungshandle. Die Art und Weise, wie wir dies umgehen können, ist die Verwendung der Sammlungen global. Ich werde „Sammlungen“ gehen und dann kann ich diesen dynamischen Wert als Handle verwenden. Vielleicht sieht das etwas kompliziert aus, aber glaub mir, es ist nicht so kompliziert, wie du vielleicht denkst. Dies ist im Wesentlichen das gleiche wie die Featured-Sammlung, was genau das ist, was wir vorher hatten. Wir haben gerade diesen Griff durch den Griff ersetzt, den wir vom Benutzer hier unten bekommen. Ich werde „Speichern“ drücken und sehen, ob wir ein anderes Ergebnis erhalten. Jetzt können Sie sehen, dass wir tatsächlich das Sammlungsobjekt erhalten und wir in der Lage sind, die Produkte in diesem Sammlungsobjekt durchlaufen zu lassen. Jetzt bin ich wirklich froh, dass wir auf dieses Problem gestoßen sind, denn das ist etwas, das in Shopify-Theme-Programmierung nicht besonders offensichtlich ist, und es ist etwas, das mich ziemlich gut auslöst. Aber aus Erfahrung wusste ich, dass man manchmal ein Objekt erwartet, aber etwas anderes in Shopify zurückbekommt. Denken Sie daran, als wir das rauslegten, bevor wir den Sammelgriff bekamen. Lassen Sie uns jetzt löschen Sammlung und sehen, was wir stattdessen bekommen. Das erwarteten wir, als wir dieses Objekt herausstellten, oder was wir für ein Objekt hielten. Wenn wir zurückgehen und die Seite aktualisieren, können wir sehen, wie Wörter CollectionDrop genannt werden. Nun ist dies eine spezielle Terminologie in Flüssigkeit, die im Grunde sagt, dass dies das Sammlungsobjekt ist. Wenn es also ein leeres Objekt wäre, würde es leeres Drop sagen. Wenn es sich um ein Produktobjekt handelte, würde es „Product drop“ sagen. Leider können wir das gesamte Objekt nicht wie in JavaScript ausgeben. Es sagt uns nur, dass dies ein Sammlungsobjekt ist. Also jetzt wissen wir, denn vorher, denken Sie daran, dass wir die Sammlung hier aus unseren Abschnittseinstellungen genommen haben und wir das auch ausgegeben haben. Wenn ich diese mit einem break-Tag aufteile, können Sie sehen, dass das erste das Handle der Sammlung ist und das zweite das eigentliche Sammlungsobjekt ist. Okay, ich ging wahrscheinlich zu viel auf eine Tangente dort, aber etwas, das Sie wirklich in Shopify-Theme-Programmierung stolpern und etwas ich gelernt habe, die harte Art und Weise ist, wenn Sie Ressourcen in Ihrem Customizer auswählen, manchmal bekommen Sie nur das Handle und nicht das eigentliche Objekt. An diesem Punkt müssen Sie tatsächlich ein globales Objekt verwenden, auf das Handle verweisen und es dann vom tatsächlichen globalen Objekt abholen. Das haben wir hier gemacht, und wir haben es funktioniert. Jetzt kann der Benutzer auswählen welche Sammlung in diesem vorgestellten Sammlungsabschnitt angezeigt wird. Ok. Wenn ich die Seite hier aktualisiere, sollten wir das gleiche Ergebnis erhalten. Ja. So könnte ich hier jede Art von anderen Einstellungen hinzufügen. Ich könnte den Verkaufspreis zeigen, zeigen, wo immer es ausverkauft ist auf nicht, Verkäufer zeigen. Grundsätzlich passen Sie so ziemlich alles über diesen Abschnitt für diese Abschnittseinstellungen an. Das machen wir also genau hier. Ok. Nun, die letzte Sache, die mit Schemas abzudecken ist, ist die Frage, wo die Daten tatsächlich gespeichert werden? Denken Sie daran, dass alle Daten in Shopify in Shopify Themen gespeichert sind speziell im JSO N-Format gespeichert ist. Also, wo finden wir das? Nun, alle Daten für Ihr Shopify-Theme werden in settings_data.json gespeichert, unabhängig davon, woher es kommt, settings_schema, oder es kommt aus einem bestimmten Abschnitt. Also hier haben wir Schemata, und jeder von diesen. Der tatsächliche Wert, der gespeichert wird, alles geht hier hinein. So können Sie dieses aktuelle Objekt oben sehen, und in unserem aktuellen Objekt haben wir die Linkfarbe gespeichert. Ok. Also, wenn ich reingehen sollte, ändern Sie die Linkfarbe wieder. In Ordnung. Ich möchte, dass Sie bemerken, dass dieser Wert hier der gleiche ist wie dieser Wert dort. Nun, wenn ich es wieder in Rot ändere, denke ich, das ist ein etwas anderer Rotton, und wir aktualisieren diese Datendatei. Ich möchte, dass Sie sich ansehen, was mit der Datendatei passiert. Wie Sie sehen können, hat sich der Wert der Linkfarbe in der Datendatei geändert, und genau wie wir es in der Sprachdatei getan haben, können wir diesen Wert tatsächlich ändern und er wird sich auch in der Benutzeroberfläche ändern. Dies sind die Back-End-Daten, die mit der Benutzeroberfläche verknüpft werden. Dies wird es also im Customizer ändern und den Wert ändern, wo es im Thema kalt ist. Wenn Sie also hier reingehen, ist die Linkfarbe zurück zu schwarz, weil ich sie in diesen Daten geändert habe. Dies ist jetzt wichtig, denn wenn Sie Designs migrieren oder Designs kopieren oder versuchen, zwei Designs zusammenzuführen, müssen Sie sich um diese Datendatei kümmern. Ich werde nicht zu viel über die Inszenierung reden, weil ich ein Video auf YouTube darüber habe. Suchen Sie einfach nach Shopify Theme Development auf YouTube und hoffentlich finden Sie meinen Kanal. Wenn ich meine SEO mache, richtig. Aber das ist etwas, das Sie nur mit Ihrer Datendatei beachten müssen. Alles wird hier gespeichert, also seien Sie sehr vorsichtig mit der Datendatei. Versuchen Sie, dies zu vermeiden. Wenn Sie jedoch Daten aus zwei Themen zusammenführen müssen, würden Sie dies tun. In Ordnung, mit dieser Randnotiz aus dem Weg, möchte ich Ihre Aufmerksamkeit auf ein paar weitere Dinge in diesem settings_json-Dokument lenken, und das ist, wir haben das Objekt dieses Abschnitts hier. Jetzt können Sie alle Abschnitte sehen, die wir haben. Wir haben Header, Sammlung Vorlage, Fußzeile und diese wird durch seine ID referenziert. Ich bin mir nicht sicher, warum es durch seine ID anstelle seines Namens referenziert wird, aber egal, wir haben eine Featured Sammlung hier, und Sie können in unseren Einstellungen sehen, wir haben einen Schlüsselwert der Sammlung mit dem vorgestellten Sammlungshandle. Wenn ich also eingehe und dies in ein anderes Handle ändere, würde das es in der Auswahl aktualisieren, die ich hier für meine vorgestellte Sammlung habe. Alles klar, wieder, das ist nur eine schöne Benutzeroberfläche, um das zu ändern, was hier geschrieben ist. Die andere Sache, die ich möchte, dass Sie bemerken, ist der Inhalt für das Index-Array. Es nimmt alle IDs der Abschnitte, die verwendet werden, und legt sie hier. Also, wenn ich einfach diese ID entfernen und auf „Speichern“ klicke. Wenn wir nun auf unsere „Homepage“ gehen, fehlt der Abschnitt, auf den die ID verwiesen wird, nun auf unserer Homepage. Ok. Aber wir können es immer wieder hinzufügen. Fügen Sie die vorgestellte Kollektion hinzu. Wählen Sie eine Sammlung aus, die wir anbieten möchten. Ich habe gerade meine vorgestellte Sammlung angerufen. Speichern Sie das erneut, und wenn wir die Datendatei aktualisieren, werden Sie sehen, dass diese Datendatei im Inhalt für das Index-Array wieder dort ist. Ok. Also settings_data.json speichert alle Daten, die aus all Ihren Schemas an einem Ort generiert werden. Es gibt natürlich Ihr Gebietsschema Foto, aber das ist alles nur für Gebietsschemas. Das ist getrennt von Schemata, okay? Alle Einstellungen, die Sie in Ihrem settings_schema.json eingerichtet haben, und die Schemas in Ihren einzelnen Abschnitten. All diese Auswahlen, die Auswahl selbst geht in diese Datei direkt hier, settings_data.json, und das ist im Grunde für JSON-Schemas. Sie haben gesehen, wie Sie eine Einstellung zu Ihren allgemeinen Designeinstellungen hinzufügen können. Also haben wir das hier gesehen, und wir haben ein weiteres Beispiel für das Einfügen einer bestimmten Einstellung in einen Abschnitt direkt hier gesehen, indem es dem Benutzer erlaubt, zu wählen, welche Sammlung angezeigt werden soll. Ok? Außerdem haben wir in Shopify Liquid etwas über einen kleinen Haufen gelernt. Wenn Sie eine Ressource wie eine Sammlung auswählen, der Objektwert nur ein Handle, nicht das Objekt selbst. Also müssen wir das immer noch mit einem globalen Objekt wie Sammlungen nachschlagen, wie alle Produkte, alle globalen Objekte, die Sie hier im Blogbeitrag finden können. Sehen Sie, wie, wenn ich scrollen Sie nach unten zu „Sammlungen“. Dieser zeigt Ihnen nur, wie Sie Sammlungen durchlaufen können, aber wir greifen über seinen Handle auf eine bestimmte Sammlung zu. Sie können dasselbe mit dem alten Produkt-Objekt tun. Sie können über seinen speziellen Handle auf ein Produkt zugreifen und dann wird das Produktobjekt. Ok. Also sollten wir auf JSON-Schemas ziemlich klar sein. Denken Sie daran, Sie werden wahrscheinlich nicht auswendig wissen, welche Einstellungen Sie hier setzen. Stellen Sie also sicher, dass Sie auf die Dokumentation verweisen. Diese Seite enthält alle verschiedenen Eingabe-Einstellungen, die Sie dort einfügen können. Auf dieser Seite, Themenabschnitte, können Sie über Dinge wie Voreinstellungen und Blöcke lernen. Blocks ist etwas, über das wir im nächsten Video lernen , wo wir tatsächlich unsere eigene Sektion erstellen. Also freue ich mich auf dieses Video. Wir sehen uns im nächsten. 8. Benutzerdefinierte Abschnitte programmieren: In dieser Lektion werden wir alles zusammenstellen, was wir bisher über Shopify Liquid und JSON Schemas gelernt haben , um zu üben, unseren eigenen Abschnitt zu erstellen. Was ich tun werde, ist ein Galerieabschnitt zu erstellen , der ein Abschnitt sein wird, den wir auf der Homepage für Inhalte, für Index oder auf einer bestimmten Seite aufnehmen können , und es wird nur eine Galerie von Bildern zeigen , die der Benutzer im Customizer angibt. Was ich tun werde, gehen Sie über die Abschnitte, fügen Sie einen neuen Abschnitt hinzu, und ich werde es Galerie nennen. Wie üblich gibt Shopify uns ein Schema und wir müssen nur den Abschnittsnamen in Galerie ändern. Drücken Sie „Speichern“ darauf. Ich werde nur ein div mit einer Klasse von Galerie einrichten und da gehst du. Nun, wie diese Galerie funktionieren wird, werde ich dem Benutzer erlauben, anzugeben, wie viele Spalten sie pro Zeile wollen, und dann auch die Höhe des Bildes, und dann werde ich ihnen erlauben, Blöcke einzufügen , die gehen, um die Bilder, die wir einschließen werden. Gehen wir zur Dokumentation und betrachten Sie den Abschnitt über Blöcke innerhalb des Dokuments in Themenabschnitten, lassen Sie uns wieder nach unten nach Blöcken scrollen. Sie können hier sehen, dass wir in Blöcke setzen können, die Container von Einstellungen und Inhalten sind, die hinzugefügt werden können, entfernt und neu sortiert mit Schnittpunkt, und das ist ideal für das, was wir hier tun. Wir möchten, dass sie in der Lage sein, so viele Bilder hinzuzufügen, wie sie wollen, und wir brauchen nur die gleichen Einstellungen für jedes. Ich werde vorerst das Einstellungs-Array überspringen und ein Block-Array erstellen, und in diesem Block-Array werde ich einen Block öffnen. Nun, für einen Block, was wir brauchen, ist ein Typ und ein Name, wie es hier sagt, ein Block muss einen Namen und einen Typ haben. Der Typ eines Blocks kann ein beliebiger Wert sein, der vom Designentwickler festgelegt wird. Der Typ ist also nicht etwas, das in Shopify spezifisch ist, sondern nur etwas, das wir uns selbst gesetzt haben. Ich werde den Typ und das Bild zu machen, und Sie werden später sehen, können wir in verschiedenen Typen hinzufügen und dann den Typ in unserem Abschnitt überprüfen. Ich gebe ihm einen Namen und nenne es Bildblock. Dies wird das Label sein, das dem Benutzer angezeigt wird. Nun, ich glaube, wir können einfach ein Einstellungsarray erstellen, genau wie wir es für das übergeordnete Objekt hier tun würden. Ich werde ein Einstellungsarray hinzufügen, dieses öffnen und innen mit dem ersten Objekt beginnen, das eine Bildeingabe sein wird. Dafür werden wir zu diesem Teil der Dokumentation namens Konfigurieren von Theme-Einstellungen wechseln und ich werde nach Bild suchen. Der Eingabe-Einstellungstyp für ein Bild ist Bildunterstrich Picker und wir können einfach den Einstellwert hier kopieren. Es wird Bildauswahl sein, wir brauchen nur einen Typ, eine ID und das Etikett. Wenn wir hier zu unserem Code zurückkehren und diesen in einfügen, werden wir die ID in Bild ändern, und wir werden nur das Bild hier einfügen, sehr einfach. Das sind also die Einstellungen, die wir für jeden Block haben werden. Wenn ich auf „Speichern“ klicke, sehen wir, ob es irgendwelche Fehler gibt, nein, gibt es nicht. Was ich jetzt tun kann, ist, dass ich eine Schleife durch alle Blöcke im OWL-Abschnitt erstellen kann. Ich werde diese Schleife erstellen und ich werde sagen, „für Block in section.blocks“, und dann werde ich die Schleife betreten. Wir werden dies formatieren, machen dies in ein wenig schöner aussehen, aber jetzt lasst uns diesen Inhalt einfach auf der Seite herausholen. Jetzt können wir den Block direkt referenzieren und ich werde nur ein Bild-Tag mit dem Bild erstellen , das gesetzt wird, also block.settings.image. Denken Sie daran, wie wir auf verschiedene Attribute zugreifen, ist nur die Navigation dieses JSON-Objekt. Also oben hier finden wir Blöcke auf dem Abschnittsobjekt und jetzt durchlaufen wir einen einzelnen Block und dann haben wir Zugriff auf das, was hier drin ist, das Einstellungsobjekt, und dann können wir auf die -Attribut mit seiner ID. Das ist es, was hier los ist. Wenn ich das nur ausgebe, bekomme ich nur die Bildadresse. Bevor wir es tatsächlich betrachten können, müssen wir es irgendwo einschließen und was ich dafür tun werde, ist eine alternative Vorlage für Seitenvorlage zu erstellen, und dann werden wir die ultimative Vorlage verwenden, um diesen Abschnitt anzuzeigen. Glücklicherweise gibt es ein paar Schritte, um dies zu tun. Wir müssen zuerst in unseren Vorlagenordner gehen und eine alternative Seitenvorlage hinzufügen. Ich werde nur diese eine Galerie aufrufen, die Vorlage erstellen. Eine Sache, die mit Shopify frustrierend ist , dass wir dies auch auf dem aktuellen Thema erstellen müssen. Wenn Sie also gerade an dem Thema arbeiten, das Sie Vorschau sehen und nicht tatsächlich auf Ihrer Website leben, müssen Sie dieselbe Vorlage für Ihr aktuelles Thema erstellen, sonst können Sie es nicht auswählen. Aber für jetzt, was ich tun werde, ist, diesen Abschnitt hier aufzunehmen. Also werde ich all dies entfernen und in dieser benutzerdefinierten Seitenvorlage rufen Sie einfach den Galeriebereich auf, und ich werde „Speichern“ drücken. Jetzt, wie ich sagte, um es aus der Liste auswählen zu können, muss ich in das aktuelle Live-Thema gehen, das Debüt ist und die gleiche Vorlage erstellen, die ich vielleicht bereits hier gemacht habe. Es gibt bereits eine Vorlage mit dem Namen page.gallery. Wenn das nicht existiert, kann ich das einfach löschen, Seite hinzufügen gehen, genau wie wir es zuvor für das andere Thema getan haben, und was wir tun werden, wird den gleichen Inhalt wie die reguläre Seitenvorlage einfügen. Sie müssen sich also keine Sorgen machen, wenn Sie dies innerhalb der Seite wechseln, es wird immer noch die gleiche Seitenvorlage zu diesem Thema zeigen, wenn das sinnvoll ist. Wenn ich nun auf Seiten gehe und eine Seite hinzufüge, nenne es Galerie, kann ich diese spezifische Vorlage verwenden , die wir gerade erstellt haben, indem Sie sie hier auswählen. Wenn ich die Seite speichere, können wir jetzt sehen, wie die Adresse davon ist. Es wird @pages /Galerie sein. Also gehen wir zurück in den Code. Wie wir gesehen haben, haben wir bereits den Abschnitt zu dieser alternativen Vorlage aufgenommen. Jetzt müssen wir nur auf die Seite gehen, die wir gerade eingerichtet haben. Seiten Galerie. Im Moment haben wir keine Inhalte hinzugefügt, so dass nichts auftauchen wird. Was wir tun möchten, ist diese Seite im Customizer zu öffnen. Wir müssen zuerst aktualisieren, weil wir Änderungen an unseren Theme-Codes vorgenommen haben , da wir dies geöffnet hatten und jetzt sollten wir in der Lage sein, zu sehen, dass wir die Galerie-Vorlage bearbeiten können. Ich habe darauf geklickt. Jetzt können wir den Abschnitt für Galerie sehen. Wenn wir es nur ein wenig langsamer machen, sind wir auf der Seite für die Galerie und da es diese spezifische alternative Vorlage verwendet, wird es direkt zu diesem Abschnitt und dann innerhalb dieser Seite jetzt für den Customizer verlinken , können wir den Abschnitt sehen, der hier auftaucht. In der Galerie können Sie nun sehen, dass es diesen Inhaltsbereich geben wird und Sie einen Bildblock hinzufügen können. Das ist alles aus den Einstellungen, die wir in unserer Galerie eingerichtet haben. Also brauchen wir das nicht mehr, wir brauchen nur diesen einen Tag. Wir können direkt aus dem Galeriebereich direkt hier arbeiten. Aber denken Sie daran, wir nannten es einen Bildblock und so hier im Customizer, es ist Bild Block hinzufügen. Wenn es mehrere Typen gibt, würden wir in der Lage sein, dies zu klicken und es gibt uns verschiedene Optionen, aber wir haben nur die eine Option für jetzt. Wie Sie sehen können, gibt es unsere Bildeinstellung, die wir hier haben. Wir können jetzt ein Bild hinzufügen. Wir haben Männer auf der Vorderseite und wir können ein weiteres Bild hinzufügen, blockieren, den Kerl mit dem Anzug und Sie können hier sehen, was passiert, wenn ich das mache. Anstelle des tatsächlichen Bildes haben wir einen URL-Abschnitt. Was hier passiert ist, ist, dass das Bild, das ausgewählt wird , Ihnen nicht wirklich ein Bild-Tag geben wird. Also, um das Bild-Tag zu erhalten, was ich tun werde, ist, den Bild-Tag-Filter genau hier zu verwenden. Nun müssen wir vielleicht auch einen eindeutigen Pfad angeben, lassen Sie uns einen Blick werfen, also gehen Sie, sie werden angezeigt und weil wir keinenParameter hinzugefügt haben sie werden angezeigt und weil wir keinen , werden sie ziemlich klein erscheinen, sollte dies 100 mal 100 sein. Wenn wir einen Blick haben, so ist die Breite ein 100 und dann ist die Höhe relativ zur Breite in Bezug auf sein Seitenverhältnis. Wir müssen sie etwas größer machen. Ich werde einen Parameter für dieses Bild-Tag von hinzufügen, sagen wir 500x. Jetzt werden sie fünf Mal größer, fünfmal so groß, eher fünfmal so groß. Ich habe hier einen Fehler gemacht und ich sehe, dass der Parameter tatsächlich das alt-Tag darstellt. Wenn Sie den Alt-Wert eingeben möchten, legen Sie ihn dort ab. Was ich tun muss, ist hier einen weiteren Filter zu verketten. Ich werde dies wie zuvor nach Bild-URL filtern und hier kann ich die Dimension des Bildes angeben. Ich werde das speichern, die Seite aktualisieren, und jetzt ist das Bild fünfmal so groß. Was wir hier haben, ist, dass wir haben, wenn ich nur die Seite im Customizer aktualisieren, haben wir diese Galerie. So können wir einen weiteren Bildblock hinzufügen. Wenn das Bild noch nicht gesetzt ist, fügt Shopify nur einen Platzhalter ein, was nicht sehr schön ist, aber es zeigt uns, dass es zumindest ein Bild dort sein soll und ich kann ein anderes Bild hinzufügen, und im Grunde, was passieren wird, ist, dass sie alle 500 breit sind und sie werden nur über den horizontalen und vertikalen Raum unserer Seite stapeln. Wenn ich die Seite aktualisiere, ist das vielleicht gut genug für Ihre Galerie, aber ich möchte auf diese Weise reaktionsfähiger machen. Was ich tun werde, ist, dass ich diesem eine reaktionsschnelle Breite geben und eine Höhe erstellen werde , die der Benutzer ändern kann. Was ich tun werde, ist hier drin, anstatt nur ein Bild auszugeben, was ich tun werde, ist ein Bild-Wrap zu erstellen und in diesem Image-Wrap Tag werde ich ihm ein Hintergrundbild des Bildes geben, das wir hier gesetzt haben. Der Vorteil, dies zu tun, wenn Sie nicht vertraut sind, ist, dass wir die Höhe und Breite des div steuern können und dann wird das Bild darin passen und es wird basierend auf den Abmessungen dieses div-Tags genau hier zuschneiden. Was ich tun werde, ist ein Style-Attribut hinzuzufügen und eine Hintergrundbild-URL zu haben und ich brauche das Bild-Tag nicht mehr, und ich kann dies hier einfügen. Jetzt müssen wir ihm einige Dimensionen geben. Nur um ihm sofort etwas zu geben, werde ich ihm eine Breite von 500 Pixeln und eine Höhe von 500 Pixeln geben, und dann werde ich ihm eine [unhörbare] geben, hier etwas Raum schaffen. Los geht's. Dann werde ich ihm eine Hintergrundgröße des Deckels geben. Speichern Sie das. Sehen Sie, was passiert, wenn wir die Seite aktualisieren. Sie werden jetzt sehen, wenn wir einen Blick haben, sind dies keine Bild-Tags mehr, sie sind tatsächlich divs, und deshalb stapeln sie übereinander, weil diese auf Standard gesetzt sind , um Block anzuzeigen, wie Sie hier in den berechneten Werten sehen können. Wir möchten, dass sie nebeneinander angezeigt werden, also inline-Block. Jetzt können wir es entweder in unserer Haupt-CSS-Datei einrichten oder wir können es im eigentlichen Abschnitt tun, indem wir dies auf Stil umgestalten, nicht Stylesheet und unsere Stile hier einfügen. Nun, in diesem Fall werde ich es in den eigentlichen Abschnitt einfügen und es gibt einen guten Grund dafür, denn wenn wir diese Style-Tags verwenden, können wir die Dinge live aktualisieren im Customizer sehen. Wir könnten immer nur Stile mit HTML werfen. Aber wenn wir dies tun, wenn es einen vom Benutzer generierten Stil gibt, wie etwas, das sie im Customizer festgelegt haben und wir das geändert haben. Es wird nicht sofort auftauchen. Mit diesen flüssigen Tags können wir also unsere Styles im Abschnitt speichern und das wird es einfacher zu finden machen. Aber auch wir werden die Möglichkeit bekommen, diese Live-Update zu sehen , wenn wir eine Daten anpassen hier in. Also werde ich Ihnen zeigen, was ich damit in nur einer Sekunde meine, aber zuerst werde ich hier eine Style-Regel für Bild-Rap erstellen und was ich tun werde, ist, alle Bild-Wraps so zu setzen, dass Inline-Block angezeigt wird und wenn wir zu unserer Seite gehen, sogar den Customizer oder hier und aktualisieren Sie die Seite. Wir werden sehen, dass sie jetzt nebeneinander gestapelt sind. Wenn wir hier rüber gehen, werden wir sehen, dass wir einen Inline-Block haben. Dies ist ein wenig besser, denn wenn wir die Größe des Fensters ändern, also werde ich dies zur Seite bewegen und sehen, wie sich das Fenster ändert. Es wird es auf die neue Linie fallen, wenn es keinen Platz gibt. Aber um es ein bisschen reaktionsfähiger zu machen, was ich tun werde, ist, dass ich die Breite auf einen relativen Wert setzen werde. hier wieder hineingehen, werden wir den Image-Rap auf eine Breite von 33 Prozent setzen. Auf diese Weise bekommen wir drei hintereinander. Also werde ich diesen Wert hier entfernen und tatsächlich diese Werte in die Klasse verschieben, nur um es ein bisschen sauberer zu machen. Genau hier werden diese für jeden Image-Rap gleich sein, also werden wir das hier in der eigentlichen Style-Reihe hier unten setzen. Aktualisieren Sie die Seite und jetzt können Sie sehen, unsere Bilder reagieren. Also wieder, wenn ich die Größe ändern sollte, können Sie sehen, dass es immer drei in einer Reihe geben wird und sie werden die Größe ändern, um das auf jeder Bildschirmgröße zu erreichen. Nun, für den Benutzer, können sie wählen, wie viele Bilder sie für eine Reihe stehen , und sie wollen auch in der Lage sein, die Höhe der Bilder zu ändern, weil, wie gesagt, mit reaktionsfähigen Bildern, sie automatisch zuschneiden. Wie wir vorher gesehen haben, wenn ich das verkleinere, werden sie immer drei in jeder Reihe sein, also verlieren wir jetzt Teile des Bildes. Vielleicht wollen wir das weniger groß machen, wenn wir viele Bilder pro Zeile verwenden. Jedenfalls. Also möchte ich dem Benutzer die Möglichkeit geben, diesen Wert und auch die Fähigkeit, diesen Wert zu beeinflussen, beeinflussen zu können. Da dies mit dem gesamten Raster geschehen wird, wird dies hier eine Einrichtung sein, nicht in einem bestimmten Block. Die erste Einstellung, die ich tun möchte, ist, dass ich eine Auswahl haben werde. Wir haben Select vorher noch nicht benutzt. Also lassen Sie uns in die verschiedenen Eingabetypen gehen, die wir zur Verfügung haben, und schauen Sie sich wählen. Ich werde das Beispiel als Ausgangspunkt greifen und diese leeren Objekte durch das Beispiel ersetzen. Also haben wir die Art der Auswahl, ich werde dies auf, pro Zeile setzen und es wird den Benutzerprodukten zeigen, oh sorry, Bilder pro Zeile, und dann für unsere Optionen, brauchen wir keine Gruppe, wir brauchen nur einen Wert und ein Label. In unserem Options-Array werde ich drei verschiedene Werte haben, und das wird die Breiten sein. Wenn sie zwei pro Reihe wählen, wird es 50 Prozent sein. Also zwei pro Zeile und wenn sie drei pro Zeile wählen, wird es 33 Prozent, drei pro Reihe sein. Wir müssen das quer duplizieren, endet dieses 44 pro Zeile, wird 25 Prozent sein. Lass uns auch fünf pro Reihe machen. Fügen Sie eine andere Option hinzu und wir machen diese fünf pro Zeile. Die Standardeinstellung, es muss einer von diesen sein. Lassen Sie uns die Standardeinstellung drei pro Zeile machen. Das werden 33 Prozent sein und die Informationen, die wir nicht brauchen. Ich werde hier „Speichern“ drücken und ich habe absichtlich einen Fehler hinzugefügt, oder ich habe absichtlich einen Fehler in meinem JSON-Schema hinterlassen. Jetzt, leider, in Shopify in ihrem Code-Editor und wenn Sie auch Theme Kit verwenden, sagen sie nur Fehler ungültig JSON und wenn Sie ein großes Schema haben, könnte es dauern, um herauszufinden, was das Problem ist. Also weiß ich, was ich falsch gemacht habe, aber vielleicht kannst du es jetzt nicht auswählen. Zum Glück, weil es nur ein JSON-Objekt ist, können wir es tatsächlich durch eine JSONLinta setzen und sehen, was das Problem ist.Also möchte ich Ihnen nur zeigen, wie Sie das jetzt tun. Ich weiß, dass das Problem hier ist, dass wir hier am Ende ein Komma haben. Denken Sie daran, dass wir diesen Wert entfernen. Der letzte Wert kann kein Komma danach haben, aber wir wissen vielleicht nicht, dass eine Sache, die wir tun können, ist eine Online-JSONLinta zu verwenden, also habe ich gerade das gesamte JSON-Objekt kopiert und ich gehe zu einer Website namens jsonlint.com, glaube ich. Ich werde unser JSON-Objekt einfügen, spielt keine Rolle, dass es Shopify-Daten darstellt. All dies tut, ist das Format des JSON zu nehmen und zu überprüfen, ob es korrekt formatiert ist. Also genau hier haben wir eine viel detailliertere Fehlermeldung, die heißt, wir haben einen Fehler in Zeile 24. Es erwartete eine Zeichenfolge, die es eine schließende geschweifte Klammer bekam. Also könnte das immer noch ein wenig entziffern, um herauszufinden, was das Problem hier ist. Aber wenigstens bekommen wir eine bestimmte Zeilennummer und wir können sagen, oh, ich habe dieses Komma hier. Also, wenn ich zurückgehe, nehme das Komma weg, klicke auf Speichern, jetzt wirst du sehen, dass wir keine Fehler haben. Das nächste, was ich tun muss, ist tatsächlich auf diesen Wert zu verweisen , der hier im Customizer festgelegt wurde. Also anstelle von 33 Prozent werde ich, wie wir es in dieser Klasse mehrmals getan haben, das Abschnittsobjekt verweisen, in seine Einstellungen gehen und pro Zeile greifen. Ich werde auf speichern, dass und gehen wir zurück in unseren Customizer und aktualisieren. Alles klar, jetzt gehe ich in den Galeriebereich und Sie können sehen, dass wir jetzt ein Dropdown-Menü haben, um auszuwählen, wie viele Bilder pro Zeile. Wenn ich dies auf zwei ändere, funktioniert es leider nicht mit 50, aber wenn ich dies zu vier ändere, können Sie diese Live-Aktualisierung sehen. Leider gibt es einige Ränder, die beeinflussen, wie viele pro Zeile passen können, also müssen wir das nur ändern. Aber Sie können sehen, dass dies Live-Aktualisierung ist. Also gehen Sie zu speichern auf, dass, können Sie sehen, wenn wir dies im Browser betrachten, diese werden jeweils 50 Prozent sein. Dies ist ein kleines Problem mit Inline-Block, aber wenn wir es um 0,5 Prozent reduzieren, sollte das das Problem der Margen umgehen und jetzt können Sie sehen, dass wir ein zwei mal zwei Raster haben. Also werde ich hier einfach wieder in unseren Code gehen. Ändern Sie zwei pro Reihe, geben Sie ihm einen Prozentsatz des Wackelraums. Das Gleiche hier, und das Gleiche hier. Das sollte hoffentlich dieses Problem umgehen. Nun, wenn wir die Seite auf beiden von ihnen aktualisieren, lassen Sie es im Customizer tun, so dass wir tatsächlich live aktualisieren können. Ändern Sie es in drei pro Zeile, ändern Sie es in zwei pro Zeile, vier pro Zeile und wir haben keine fünf, aber wenn wir eine fünfte haben, wird es hier angezeigt. Alles klar, ziemlich cool. Nun, wie ich bereits erwähnt habe, wenn wir zwei pro Zeile zeigen, dann haben wir hier ein nettes Seitenverhältnis. Aber wenn wir es auf vier pro Zeile setzen, werden wir viel von dem Bild verlieren, weil denken Sie daran, dass sie automatisch zuschneiden, um reaktionsschnell zu bleiben. Also möchte ich dem Benutzer auch die Möglichkeit geben, die Höhe all dieser Bilder anzugeben. Also lassen Sie uns das jetzt hinzufügen. Ich werde es als eine andere Auswahl hinzufügen. Also, whoops, lassen Sie uns dieses Beispiel noch einmal aus der Dokumentation kopieren und dieses leere Objekt dadurch ersetzen. Dieser wird die Höhen sein, und ich werde es Bildhöhe nennen. Wir brauchen keine Gruppe, wie ich bereits erwähnt habe, der Standardwert wird sein, sagen wir, was wir jetzt haben, 500 Pixel. Nehmen wir an, es wird 500 Pixel sein. Brauchen Sie keine Informationen. Also machen wir die letzten 1500 Pixel und diese 1300 Pixel. Jetzt wollen wir wahrscheinlich mehr Optionen machen. Also lassen Sie uns einfach eine zusätzliche Option erstellen, Sie möchten wahrscheinlich auch ein paar mehr, aber es ist der gleiche Prozess für jeden. Also lasst uns das einfach irgendwo zwischen 400 setzen. Bevor ich jetzt auf Speichern klicke, werde ich es tatsächlich einfügen. So wie ich es hier getan habe, anstatt in einer Höhe zu codieren oder hart zu codieren, werde ich diese Einstellung referenzieren, also setze sie dort als Höhe ein. Auch hier haben wir einen Fehler im JSON-Schema. Ich weiß, dass gerade von der letzten haben wir die gleiche Ära, wir haben dieses Komma hier. Wenn Sie das nicht aufgenommen haben, können Sie es immer für die JSONLinta setzen. Wenn ich mich das jetzt im Customizer anschaue, haben wir hier ein Problem. Schauen wir uns mal an, was wir hier falsch machen könnten. Ich habe vergessen, das Semikolon am Ende zu setzen, die Seite zu aktualisieren. Also jetzt sollten wir in der Lage sein, als Benutzer im Customizer, die Bildhöhe zu ändern. Da gehst du. Wenn wir also vier Bilder pro Zeile machen, möchten wir wahrscheinlich, dass die Bildhöhe auch kleiner wird. So können wir eine kleinere Bildhöhe einstellen. Wir können es auf 400 setzen, es sind 500, also eine gute Kombination, vielleicht auf zwei pro Reihe haben wir es auf 500 gesetzt. Aber wenn wir vier pro Reihe machen, setzen wir es auf etwas kürzeres, wie 300. Nun, ich weiß, dass dieses Video wahrscheinlich schon ziemlich lang ist, aber ich möchte Ihnen eine andere Sache zeigen, und das heißt, wir können verschiedene Arten von Inhalten in dieser Galerie hinzufügen. Muss nicht nur Fotos sein, wir können tatsächlich in eingebettete Videos als auch hinzufügen. Dafür möchte ich nicht viele Codes schreiben, ich werde über etwas kopieren, aber es sollte ziemlich einfach sein, unabhängig davon zu verstehen, was ich zuerst tun werde, weil wir einen anderen Typ verwenden, wird in eine bedingte gesetzt. Ich werde sagen Blocktyp, denken Sie daran, wir haben jetzt Zugriff auf den einzelnen Block, weil wir durchlaufen, und wenn der Blocktyp Bild ist, dann weiß ich, dass ich eine Bildeinstellung haben werde. Ich werde das schließen, und wenn jetzt, weil alle unsere Block bisher, die Art des Bildes, nichts ändern sollte, wenn wir die Seite aktualisieren. Nun, alles ist normal, aber wir können hier einen anderen Typ hinzufügen. Statt wo immer wir hier sind, werde ich in einem anderen Block für ein Video einbetten hinzufügen. Ich werde nur kopieren und einfügen, um dies ein wenig schneller zu machen, und dieses anstelle von Bild wird ein Videoblock sein, und das wird das Etikett sein, das dem Benutzer angezeigt wird, und für die Einstellungen, ich Ich glaube, es wird eine Video-URL genannt, und so wird die ID, die Video-URL sein wird, ist es nur eine Video-URL genannt wird, und das Label wird Video-URL sein. Ich denke, es gibt noch ein paar Attribute, die ich hier ansehen muss, wir können auch das einfügen, was es akzeptiert. Wir können es schaffen, außer YouTube und Vimeo. Wir müssen das Komma des Endes entfernen, sonst erhalten wir einen Fehler. Wenn ich auf Speichern klicke, hoffentlich keine Fehler, und jetzt, wenn ich die Seite und unseren Customizer aktualisiere, und ich gehe in die Galerie, anstatt Bildblock hinzuzufügen, wird es nur sagen, Inhalt hinzufügen. Der Grund, warum ist, wenn ich darauf klicke wird es mir jetzt die Möglichkeit geben, die verschiedenen Typen hinzuzufügen. Ich kann einen anderen Bildblock wie zuvor hinzufügen, oder ich kann einen Videoblock hinzufügen. Hier kann ich einen YouTube- oder Vimeo-Link einfügen. Dafür muss ich nur ein YouTube-Video finden, ich werde schnell eines von meinem eigenen YouTube-Kanal finden. Was besseres Video dann zu verwenden, eines meiner Videos aus meiner Serie auf Shopify Theme Entwicklung, lassen Sie uns das als Beispielvideo direkt hier verwenden, und lassen Sie uns speichern. Nun, obwohl wir diesen Videoblock gespeichert haben, müssen wir tatsächlich etwas auf dem Bildschirm ausgeben. Was ich tun werde, ist hier eine Logik zu kopieren, aber was ich tun werde, ist, weil es anders Code für den Videoblock anstelle desBildblocks sein den Videoblock anstelle des wird, ist, dass ich die Bedingung sofort einfüge. Dieser Wert hier ist, was wir hier erstellt haben, also haben wir Typ, Bild, Typ Video, das ist, was wir gerade überprüfen. Jetzt werde ich einen Code kopieren und einfügen, um uns ein bisschen Zeit zu sparen. Um diesen Code kurz zu erklären, was wir hier los sind, ist, wenn der Blocktyp Video ist, wir wissen, dass dies ein Videoblock ist, und wenn die URL leer ist, werden wir ein Platzhaltervideo mit diesen verschiedenen -Attribute. Wenn es nicht leer ist, dann hat es definitiv einen Wert, also überprüfen wir nur, ob der Typ YouTube ist, wenn ja, verwenden wir den YouTube-Embedded-Link, wenn nicht, suchen wir nach Vimeo, und wenn es Vimeo ist, wir verwenden den Vimeo-Embedded-Link, und dann greifen wir die ID der Video-URL. Dies ist ein bisschen komplizierter, weil wir tatsächlich ein Objekt aus dieser Video-URL bekommen, und so haben wir eine ID und einen Typ für dieses Objekt. Deshalb habe ich diesen Code kopiert und eingefügt, weil er ein wenig komplexer ist und es nicht sehr üblich ist, dass Sie dies ohnehin verwenden würden, aber das ist ein gutes Beispiel für verschiedene Typen. Was wir tun müssen, um dies zu beenden, ist auch diesen Effekt unseren iframe zu haben. In jedem dieser Szenarien wird der iframe das Video enthalten, also habe ich gerade den iframe auch hier hinzugefügt. Es wird Anzeige Inline-Block Breite und Höhe haben , die wir im Customizer festgelegt haben. Dieser wird keinen Sinn für den iframe machen, aber hoffentlich funktioniert es immer noch, wenn ich jetzt hineingehe, schauen wir uns im Customizer an. Sie werden sehen, dass mein Video angezeigt wird, leider die Breite nicht korrekt, also lasst uns die Seite aktualisieren und sehen, was los ist. Hier haben wir unsere Image-Wraps, Image-Wraps, und dann haben wir den iframe hier, dem keine Stile zugeordnet sind, also macht es nur Breite und Höhe. Lassen Sie mich sehen, was ich hier falsch machen könnte, und ich kann sehen, dass ich einen Punkt vor iframe gesetzt habe, vorausgesetzt, es ist eine Klasse, aber ich ziele auf das Element selbst, also muss ich diesen Punkt nicht verwenden. Wenn ich die Seite aktualisiere, sehen Sie jetzt, dass sie unserem Raster entspricht, das wir eingerichtet haben. Lassen Sie uns das im Customizer anpassen, vielleicht lassen Sie uns es auf fünf pro Zeile setzen. Lassen Sie uns fünf pro Zeile machen, und jetzt können Sie sehen, dass die Video-Einbettung das fünfte Element in dieser Zeile ist und wir den Inhalt tatsächlich neu anordnen können. Jetzt kann der Benutzer in gehen, fügen Sie eine beliebige Anzahl von Bildblöcken und Video Blöcke, vielleicht einige nette Frauen Mode Videos und Fotos, und das wird auf die neue Linie gehen. Wir müssen vielleicht mit mobilen Stilen herumspielen, das Raster so ändern, dass es auf Mobilgeräten anders ist, also brauchen wir einige Medienabfragen, aber das ist vielleicht ein Projekt für sich selbst, ich wollte nur uns einige Praxis mit Schemata und Flüssigkeit, und was besserer Weg, das zu tun, ist durch einen Abschnitt. Wenn wir in der Lage sein wollen, dies auf der Homepage zu setzen, vergessen Sie nicht, wir müssen hier eine Voreinstellung einfügen. Lassen Sie uns das einfach tun, um die Lektion zu beenden, also werden wir ein Presets-Array setzen, und wieder, ich werde auf die Referenz viele Male Voreinstellungen direkt hier zurückgehen, wir brauchen nur eine mit einer Kategorie und einem Namen. gehe zurück, setze ein Objekt ein, ich habe das Objekt aufgestellt. Wir haben eine Kategorie, wie wir die andere nennen. Ich denke, es war benutzerdefinierte Inhalte, so können Sie es in der gleichen Kategorie erscheinen lassen, und wir geben diesem einen Namen der Galerie, drücken Sie Speichern auf, dass. Nun kann dieser Abschnitt auch auf der Homepage aufgenommen werden. Wenn ich zur Homepage gehe, einen Abschnitt hinzufüge, haben wir hier ein Problem. Das ist richtig. Ich habe nicht neu geladen, ein Customizer noch, immer denken Sie daran, diese Jungs zu tun. Wenn ich nun einen Abschnitt hinzufüge, sehen Sie, dass Galerie hier ist, und es enthält nicht die gleichen Daten wie der Ort hier drüben, weil jedes Mal, wenn ein Abschnitt enthalten ist, seine eigenen Daten hat. Wir können hineingehen und verschiedene Galerien erstellen. Da gehen wir, lassen Sie es uns in einen anderen Bildblock setzen, die Mode der Frau, und machen wir den letzten ein Video, mal sehen, ob ich das Add-up bekommen habe. haben den Videolink nicht, aber dort können Sie den Platzhalter dort sehen. Wir haben unseren benutzerdefinierten Galeriebereich, wir können ihn jetzt in unsere Homepage einfügen, wir können ihn auf bestimmten Seiten verwenden, und mittlerweile sollten Sie ein ziemlich solides Verständnis für eine Shopify-Flüssigkeit und Schemata haben. Jetzt natürlich, je mehr Erfahrung Sie mit Shopify Flüssigkeit gewinnen, desto besser werden Sie es bekommen, aber ich glaube, das sollte eine gute Grundlage für Sie sein. Erinnern Sie sich an die Dokumentation, die Flüssigkeitsreferenz hier, wo ist sie? Flüssige Referenz dort gehen Sie. Dies ist Ihr Lehrbuch, das ist Ihre Dokumentation, Sie haben auch meinen Artikel , den ich dringend empfehlen werde, Ihnen eine andere Perspektive auf Shopify Flüssigkeit zu geben, und dann haben Sie auch das Spickzettel, aber das ist eher eine kurze Referenz. Für alles, was mit dem Lernen all der verschiedenen Teile zu tun hat, gibt es vielleicht einen Bereich von Flüssigkeit über den Sie nicht zu viel wissen und Sie mehr darüber erfahren möchten. Entweder schauen Sie sich den Blogbeitrag an oder schauen Sie sich die offizielle Dokumentation an. Schauen Sie nach, sehen Sie, ob Sie ein Verständnis auf diese Weise gewinnen können, denn jetzt werden wir von Flüssigkeit weitergehen, um über die Ajax-API zu sprechen. Denken Sie daran, ich sagte, dass Shopify Liquid wie die Back-End-Programmiersprache mit Shopify ist . Wenn wir etwas rein auf der Client-Seite tun wollen, müssen wir JavaScript verwenden, und glücklicherweise haben wir innerhalb unseres Themas diese API namens Ajax-API, um uns zu erlauben, bestimmte Dinge zu tun. Wir werden alles darüber in der nächsten Lektion lernen und vielleicht zwei Lektionen, wenn es eine besonders lange ist, jedenfalls, ich freue mich auf die nächste, ich sehe dich dort. 9. Die Shopify AJAX API: Willkommen zurück Jungs. In dieser Lektion werden wir alles über die Shopify Ajax API sprechen. Ich bin derzeit in der offiziellen Shopify-Dokumentation, ich fand diese Seite nur durch die Suche nach einer Shopify Ajax-API und Google sollte das erste Ergebnis oder eines der ersten Ergebnisse sein und dies ist die Seite in der Dokumentation für den Shopify Ajax API. Es ist ziemlich gut, deckt fast alles ab, was Sie mit der Ajax-API tun können. Es gibt ein paar versteckte Edelsteine in Shopify. Grundsätzlich ist die Shopify Ajax-API hauptsächlich zum Hinzufügen von Artikeln zum Warenkorb, Aktualisieren von Mengen im Warenkorb, im Grunde alles mit dem Warenkorb ohne Seitenaktualisierung zu tun, wie es hier steht, habe ich ein Beispiel für einen Shopify-Shop das Impuls-Thema. Impulse ist ein Premium-Shopify-Thema, das ziemlich modern ist. Ich möchte, dass Sie einen Blick darauf werfen, was passiert, wenn ich auf dieser Produktseite bin, ich wähle eine Abweichung und ich klicke auf „In den Warenkorb“. Hier können Sie sehen, dass es diesen Seitenkorb oder Seitenschublade, die mit dem Wagen kommt, und ich kann tatsächlich erhöhen die Menge hier und die Preisaktualisierungen, und ich kann die Menge verringern und ich kann es auf Null setzen und jetzt ist der Wagen leer. Die ganze Zeit, die ich mache, lade ich die Seite nicht neu. Wie Sie von hier oben sehen können, wird keine neue Seite geladen, es öffnet einfach diese Schublade, die sich bereits auf der Seite befindet. Wie macht es das? Es tut dies über die Shopify Ajax-API, und ich kann es beweisen, indem ich meine Entwickler-Tools öffne Hier auf der Registerkarte Netzwerk kann ich alle Netzwerkanfragen sehen. Lassen Sie uns einen Artikel zum Warenkorb hinzufügen und Sie sehen den ersten, der kam, add.js, und Sie können hier sehen, der Endpunkt, der geht, ist cart/add.js, und es sendet durch, eine Reihe von Informationen. Jetzt können Sie die Antwort sehen, es ist eine Reihe von Schnitt-Informationen für diese bestimmte Produktvariante. Sie werden hier sehen, dass wir auch eine get Anfrage an cart.js haben, und Sie können hier sehen, dass wir den vollständigen Warenkorb hier in diesem Objekt haben. Wir haben ein Array für Elemente, und Sie können das Element sehen, das wir gerade hinzugefügt haben, also ist dies die Shopify Ajax-API in Aktion. Das hier ist ein Shopify Ajax API-Endpunkt, und der Grund, warum ich weiß, ist, dass Sie es hier finden können. Hier sind die verschiedenen Endpunkte, und wie Sie hier sehen können, kann ich, wenn ich eine Get-Anfrage an diesen Pfad in einem Shopify-Store stelle, wenn ich eine Get-Anfrage an diesen Pfad in einem Shopify-Store stelle,verwenden, um den Warenkorb zu erhalten und es kommt wieder im JSON-Format zurück. Nur ein Vorsprung, dies könnte für einige Zuschauer, die APIs verwenden, ein wenig fortgeschritten sein und was JSON ist, wir haben in einem vorherigen Video über JSON erfahren, aber hier senden wir tatsächlich Anfragen an einen Server und kehren zurück Objekte in JSON-Form, wenn wir sie tatsächlich in unserem Projekt verwenden möchten, müssen wir diese JSON-Objekte analysieren. Dies kann ein ziemlich langes Thema sein und Sie benötigen wahrscheinlich ein wenig Wissen über JavaScript, um Ihren Kopf herum zu bekommen. Auch hier handelt es sich nicht um einen JavaScript-Kurs, hier geht es um Shopify, also sollten Sie einige Grundlagen in HTML, CSS und JavaScript haben. Wenn nicht, habe ich hier auf skillshed.com auf JavaScript eine Klasse. Wenn Sie das überprüfen möchten oder einen anderen Ort, den Sie darüber erfahren möchten. Aber das ist, was wir tun werden, wir werden diese Endpunkte abfragen und tun, was hier vor sich geht. Jetzt leider habe ich keine Zeit, einen Side Cart und all diese Benutzeroberfläche in dieser einen Lektion zu erstellen , was wir tun wollen ist, dass ich Ihnen die Anfragen nur in JavaScript zeigen werde, und dann werde ich Ihnen eine Beispiel, dass ich getan habe, dass ich euch auch geben werde, wo ich einen Warenkorb auf die Seite gemietet habe und ich bin in der Lage, es zu aktualisieren, wegzunehmen Artikel, aktualisieren Mengen direkt auf der Seite. Ich werde ein Beispiel dafür zeigen, wie Sie die Benutzeroberfläche tatsächlich implementieren können und was die Ereignis-Listener am Ende dieses Videos genannt wird. Aber zuerst, was ich tun möchte, ist, dass ich das schließen werde, ich gehe zurück zu meinem Testshop, und ich werde auf das neue Thema gehen, an dem wir arbeiten. Da wir Daten rein über JavaScript abrufen werden, muss ich meinen Code-Editor nicht wirklich öffnen, ich kann es tatsächlich einfach über die Konsole tun, was ich tun werde, ist ein Produkt auf diese Weise zu öffnen wir können dieses Produkt tatsächlich in den Warenkorb legen und dann werde ich meine Entwickler-Tools öffnen und auf die Registerkarte Konsole gehen . Theme wird schöner sein, wenn wir hier nach unten gehen, und schreiben wir unsere erste Anfrage, die eine grundlegende ist, was den Warenkorb bekommen wird, wenn Sie mit einem leeren Projekt beginnen, sollten Sie einen leeren Warenkorb haben, aber Sie werden immer noch ein Warenkorbobjekt erhalten, bevor wir anfangen, es wird viel einfacher machen, wenn wir etwas haben genannt jQuery installiert, wenn Sie nicht wissen, ob jQuery in Ihrem Theme ist, es ist in vielen Themen, Sie können einen grundlegenden jQuery-Befehl schreiben und sehen, ob es undefiniert ist, ich habe für die $ Zeichen-Version von jQuery undefiniert und ich habe jQuery ist nicht definiert. Was ich tun muss, ist jQuery in mein Projekt aufzunehmen . Ich muss eine Codeänderung vornehmen, nur um jQuery einzubringen. jQuery ist eine Bibliothek, die es uns einfacher macht , diese Ajax-Anfragen zu tun. Ich werde jQuery in Google eingeben und einen Link zum CDN finden, genau hier, und ich kann einfach die verkleinerte Version der neuesten Version greifen. Ich werde dieses Skript-Tag kopieren, in meine Layoutdatei gehen, und ich werde das einfach einfügen. Klicken Sie auf „Speichern“. Jetzt, wenn ich die Seite aktualisiere, kann ich überprüfen, ob ich jQuery installiert habe, indem ich den gleichen Befehl mache, und jetzt können Sie sehen, dass ich eine Funktion zurück bekomme. Ich kann dasselbe mit dem jQuery-Schlüsselwort selbst versuchen, und ich bekomme das gleiche. Es gibt keinen Fehler zu sagen, was jQuery ist, also wissen wir jetzt, dass wir jQuery haben und jetzt haben wir ein paar schönere Funktionen zu tun, um Anfragen zu erhalten. Die erste ist eine Anfrage, JS zu schneiden, um den Warenkorb zu erhalten, also ist dies eine sehr einfache. Ich werde die get-Funktion in jQuery verwenden, und ich werde als ersten Parameter die Endpunkte einfügen, die einfach /cart.js sind, und dann werde ich meine Callback-Funktion einfügen. Was hier passieren wird, ist, dass ich eine Anfrage an diesen Endpunkt stellen werde und dann werde ich auf die Daten zugreifen, die zurückkommen, also was ich tun werde, ist die Konsolenprotokollierung der Daten, damit wir sie hier in unserer Konsole sehen können. Ich bin mir nicht sicher, warum ich diesen Fehler hier bekomme, aber wie Sie sehen können, habe ich die Daten zurück. Das Problem damit ist jedoch, dass es in einer riesigen Zeichenfolge ist, also was ich tun muss, ist dies zu analysieren, weil dies nur eine JSON-Zeichenfolge ist, aber wir sind leicht in der Lage, das zu analysieren, und wir erhalten ein JavaScript-Objekt, mit dem wir arbeiten können. Anstatt nur Daten einzugeben, werde ich das in eine Parse einbinden, und jetzt können Sie sehen, dass wir ein JavaScript-Objekt zurückbekommen , das wir tatsächlich navigieren und hineinschauen können. Jetzt sieht es so aus, als ob ich bereits einen Artikel in meinem Warenkorb habe, und um zu überprüfen, dass das die richtigen Informationen ist gehe ich eigentlich nur auf meine Warenkorbseite, und ich sehe, ja, ich habe drei dieser tollen Turnschuhe in Mein Warenkorb. Lassen Sie uns das Produkt aus meinem Warenkorb entfernen. Warenkorb ist jetzt leer, gehen wir zurück zu dieser Produktseite, jeder Produktseite, und ich werde diesen „Befehl“ erneut ausführen. Jetzt können Sie in unserem Warenkorb sehen, wir haben Artikel Warenkorb Null und wir haben die Reihe von Artikeln, die derzeit leer ist, genau wie wir es erwarten würden. Was hier passiert, ist, ohne in unseren Back-End-Code gehen zu müssen, ich bin in der Lage, den Warenkorb aus unserem Shopify Store alle im Browser abzurufen. Aus praktischer Sicht ermöglicht es uns, Dinge rein am Frontend zu machen und in Shopify ist der Ort, an dem es am sinnvollsten ist, diese Funktionalität mit dem Warenkorb zu haben. Weil der Warenkorb der wichtigste Punkt der Interaktion mit Ihrem Shopify Store ist. Leute durchsuchen Produkte die meiste Zeit, sie betrachten Inhalte. Die Hauptinteraktion geschieht, wenn die Person zum Kauf bereit ist. Sie legen den Artikel in den Warenkorb und dann verwandeln sie diesen Wagen in eine Kasse und schließen ihre Kasse ab. Es ist kein Wunder, dass Shopify diese API für Sie bereitstellt , um solche Dinge mit Ihrem Warenkorb zu tun. Lasst uns den nächsten durchlaufen. Lassen Sie uns tatsächlich, fügen Sie einen Artikel in unseren Warenkorb. Ich werde nach oben scrollen und das ist diejenige, nach der ich suche. Verwenden Sie diese, um eine Variante in den Warenkorb zu legen. Denken Sie daran, es ist eine Variante, die dem Warenkorb hinzugefügt wird, nicht dem Produkt. Was wir tun müssen, ist die Variantenauswahl aus diesem Formular zu greifen und sie dann in den Warenkorb mit dieser Post Anfrage zu senden. Wir können das auf zwei Arten tun. Wir können die Varianten-ID und die Menge angeben, die wir in den Warenkorb legen möchten. Aber das Problem dabei ist, dass wir die Variante noch nicht kennen, bis eine Person ihre Auswahl eingibt und die Variante aus dieser Auswahl bestimmt wird. Was wir tun können, ist stattdessen das Formular serialisieren und was das tun wird, ist alle Daten des Formulars zu nehmen und es wird als Objekt hier für uns herauskommen. Lassen Sie uns dieses Beispiel hier verwenden. Ich gehe hier wieder rein. Solange wir ein Formular auf unserer Seite mit der Aktion Warenkorb Schrägstrich hinzufügen, wird dies funktionieren. Ich werde auf „Enter“ drücken. Jetzt laden wir den Wagen wieder und sehen, was passiert ist. Wenn wir unseren Warenkorb öffnen, können wir jetzt sehen, dass die Artikelanzahl eins ist. In unserem Array haben wir einen Artikel, und der Artikel ist die Abweichung unserer Auswahl hier. Ich werde hier klicken, um das ein bisschen zu bereinigen. Ich möchte die Add to Cart Ajax Anfragen noch einmal ausführen und ich möchte einen Blick in einem Netzwerk-Tab werfen, was hier tatsächlich passiert. Denken Sie daran, dass wir unser Formular serialisiert haben und wir senden diese Daten an Shopify und Sie können hier sehen, was das getan wird, ist ein Objekt mit der ID der Variante, die wir hinzufügen möchten und wie viele von ihnen wir hinzufügen möchten. Wir brauchen nicht unbedingt ein Produktformular, wenn wir in der Lage sind, die Variante auf andere Weise zu finden , genau wie eine FYI dort. Wir könnten eigentlich, anstatt das Formular zu serialisieren, wenn wir die Varianten-ID für andere Mittel kennen, können wir einfach ein Objekt hier mit der Varianten-ID einfügen, es von hier kopieren, und dann die Menge und dann wird genau das Gleiche tun. Wenn ich die Konsole lösche und den Wagen wieder laufe, wirst du jetzt sehen, dass wir drei dieser Schuhe jetzt in unserem Warenkorb haben. Nur noch ein paar Dinge, die Sie mit der Ajax-API tun können. Wir können den Wagen abräumen. Wir können eine Post-Anfrage an /cart /clear.js stellen, setzt alle Mengen aller Positionen auf Null, so löscht Ihren Warenkorb. Gehen wir zurück hier, stellen Sie eine Post-Anfrage mit jQuery und die Endpunkte waren Warenkorb klar und wir müssen keine weiteren Daten damit senden, also können wir es einfach so schreiben. Nun, wenn wir wieder den Warenkorb holen, werden Sie sehen, dass unser Warenkorb komplett leer ist. Das letzte, was Sie wahrscheinlich mit Ihrem Warenkorb mit der Ajax-API tun möchten , ist, die Menge zu aktualisieren. Hier können Sie die Post Request zum Warenkorb Schrägstrich ändern Endpunkt, und Sie können die Menge eines Artikels ändern, der sich bereits im Warenkorb befindet. Was wir tun werden, ist eine Variante wieder in den Warenkorb zu legen. Kopieren Sie einfach und führen Sie die gleiche Anfrage erneut aus. Jetzt kann ich eine Post-Anfrage an diesen Endpunkt erstellen und ein Objekt wie zuvor einfügen. Ich kann es hier abziehen und vielleicht möchte ich die Menge auf fünf aktualisieren. Jetzt kann ich diese Post-Anfrage senden. Lassen Sie uns die Konsole löschen und öffnen Sie den Wagen. Ich habe gerade noch einen hinzugefügt. Wir sollten sechs haben, die ich suche, und wie Sie sehen können, haben wir sechs von diesem Artikel. Wir haben nur eine Zeile, weil es alle die gleiche Variante ist, aber die Menge ist sechs. Hier gibt es alle Informationen über die Variante. Jetzt, im Zeilenartikelformular, wie Sie auf dem Warenkorb sehen. In Ordnung, cool. Das sind die wichtigsten Dinge, die Sie mit Ihrem Warenkorb tun möchten. In dem Beispiel sahen wir und das Beispiel, Ich werde Ihnen in einer Sekunde zeigen. Dafür verwenden wir die Ajax-API. Die Shopify Ajax API macht es wirklich einfach, diese Endpunkte zu verwenden , um Daten über Ihren Warenkorb abzurufen und Ihren Warenkorb zu ändern. Die eigentliche Herausforderung besteht darin, Ereignis-Listener zu senden und diese Antwort zu verarbeiten, um Ihre Benutzeroberfläche zu aktualisieren. Leider ist das eine sehr schwere JavaScript-Lektion und nicht besonders spezifisch für Shopify. Deshalb werde ich Ihnen jetzt nur ein Beispiel zeigen und es durchlaufen, aber wir werden es in dieser Lektion nicht von Grund auf programmieren. Der Grund, warum ist, es ist allgemeine JavaScript-Kenntnisse, wie dies zu tun. Wenn Sie mehr über JavaScript erfahren möchten, habe ich wieder eine Klasse über Skill Share, oder Sie können etwas über JavaScript erfahren woanders. Dies betrifft nur Shopify, aber ich möchte Ihnen ein Beispiel geben, wie es aussehen würde. Wenn ich diese Vorschau schließe und wir wieder in den Laden gehen, habe ich tatsächlich ein Thema mit einem Beispiel eines reaktiven Einkaufswagens eingerichtet. Genau hier habe ich dieses Thema namens Ajax API Demo, und es basiert auf dem neuen Thema. Im Grunde genommen habe ich das einzige, was ich geändert habe, ist, dass ich Bootstrap hinzugefügt habe, das ein CSS-Framework ist. Sie werden sehen, die Stile sind ein bisschen anders und wir haben diese Tasten, Stile direkt aus dem Tor. Wenn ich zu einem Produkt gehe, können Sie sehen, dass der Warenkorb direkt neben dem Produkt sitzt, und wenn ich einen Artikel zum Warenkorb hinzufüge, muss ich nicht auf die Warenkorbseite gehen, um die Aktualisierung meines Warenkorbs zu sehen. Ich kann sogar die Mengen ändern und alle verschiedenen Teile meines Einkaufswagens werden aktualisiert. Wie gesagt, in der Regel müssten Sie auf die Warenkorb-Seite gehen und es dort sehen. Aber selbst von hier aus können Sie keine Mengen aktualisieren, ohne die Seite neu laden zu müssen. Um einen Einkaufswagen wie den, den wir gerade gesehen haben, zu machen Gehen wir zurück zur Produktvorlage, müssen wir JavaScript und die Ajax-API verwenden. Nur um Ihnen zu beweisen, dass dies die Ajax-API verwendet, werde ich meine Entwicklertools öffnen und ich werde einen Blick in die Registerkarte Netzwerk werfen. Das erste, was ich tun möchte, ist eigentlich, bevor wir in der Registerkarte Netzwerk suchen, ich möchte nur den Warenkorb vollständig löschen. Ich werde auch diese Konsole freimachen. Lassen Sie uns nun einen Artikel in den Warenkorb legen. Wie Sie sehen können, haben wir eine Anfrage an add.js. Wenn ich da hineinschaue, können wir sehen, was wir senden, ist eine ID und eine Menge. Dies sind die Daten aus dem Formular. Was es tut, ist das Formular tatsächlich serialisieren , diese Daten erfassen und dann an die Ajax-API senden. Eigentlich vorher, bevor wir sogar ein Element zum Schnitt hinzufügen, wenn ich nur die Seite aktualisiere. Sie werden sehen, dass wir den Schnitt von der Ajax-API bekommen. Der Grund, warum Sie sagen können, dass, wenn wir hier schauen, können wir eine get Anfrage an cart.js sehen. Wenn ich das öffne, muss ich das nur ein wenig bewegen. Sie können sehen, dass wir nichts geschickt haben, weil wir nur darum bitten, zum Warenkorb zu kommen, wir veröffentlichen nichts. Sie werden sehen, dass die Antwort, die wir zurückbekommen, der ganze Wagen als Objekt ist. Denken Sie daran, dass wir das vorher gesehen haben, als wir gerade in unserer Konsole gearbeitet haben. Aber der Unterschied ist jetzt, dass das Laden der Seite dies tatsächlich auslöst. Dann nehmen wir diese Daten und stellen sie auf der Seite dar. Schauen wir uns an, was passiert, wenn ich einen anderen Artikel in den Warenkorb füge. Wir stellen eine Anfrage an add.js. Sie können hier sehen, was wir zurückbekommen, ist ein Einzelposten. Wir erhalten nicht den ganzen Warenkorb zurück, aber wir erhalten eine Zeile zurück, und das gibt uns die notwendigen Informationen, um unseren Warenkorb zu aktualisieren. Nun, wenn ich die Menge erhöhen, können Sie sehen, dass wir eine Anfrage an change.js stellen, was ein weiterer Endpunkt ist. Sie können hier sehen, dass change.js. Was wir tun, ist, dass wir die ID senden und die Menge durchsenden, zu der wir wechseln mussten. Was das tun wird, ist, dass es die Daten nimmt und dann den ganzen Wagen wieder zurückgibt. Sie können hier sehen, wenn wir in den Artikel schauen, können wir die Menge irgendwo hier sehen. Da gehen wir, es sind drei, und dann ist die Gesamtzahl der Artikel drei dort. Wenn wir eine weitere Zeile hinzugefügt haben, so müssen wir nur eine andere Variante auswählen, fügen Sie diese in den Warenkorb. Jetzt können Sie sehen, dass wir diese Zeile hinzufügen und jetzt haben wir alle seine Daten hier. Wenn ich die Menge ändern sollte, schauen Sie sich die nächste Anfrage an. Sie werden sehen, wir haben fünf Gegenstände, die über zwei Linien verteilt sind. Die erste Zeile hat eine Menge von zwei und die zweite Zeile hat eine Menge von drei, für insgesamt fünf. Dann können Sie sehen, dass wir den Gesamtpreis und alles haben. Ich wollte Ihnen zeigen, wie die Ajax-API funktioniert und die Benutzeroberfläche auf der Seite aktualisiert. Nun, wie ich bereits sagte, gibt es ein paar Teile dazu. Zuallererst die Ereignis-Listener. Bestimmte Dinge passieren auf der Seite Ereignisse genannt. Dann werden diese Ereignisse so eingestellt, dass Anforderungen an die Ajax-API ausgelöst werden. Nun, natürlich, wenn die Daten zurückkommen, müssen wir tatsächlich etwas tun und dann, dass etwas unsere Benutzeroberfläche aktualisiert. Werfen wir einen Blick auf den Code jetzt. Wenn ich zurück in dieses Thema gehe und ich auf Code bearbeiten klicke, gibt es hier ziemlich viel Code, und ich werde nicht Zeile für Zeile erklären. Aber was ich hier getan habe, ist, dass ich einen Vorlagen-Bibliothek-Code Schnurrbart verwendet habe, richtig sie. Was ich tun kann, ist diese Vorlagen zu erstellen. Dies ist also die Vorlage für den ganzen Wagen. Dies ist die Vorlage für den Einzelposten. Wenn Sie mehr über Schnurrbart erfahren möchten, ist mustache.js wo Sie mehr über das Thema Schnurrbart erfahren können. Logik-Listenvorlagen können Sie das Handbuch hier lesen. Es ist nicht die anspruchsvollste Dokumentation, aber im Wesentlichen können Sie sich Schnurrbart wie eine JavaScript-Version von Flüssigkeit vorstellen. Es verwendet tatsächlich die gleichen Trennzeichen, weshalb wir die Trennzeichen tatsächlich in benutzerdefinierte ändern müssen , damit sie nicht wirklich in Konflikt stehen. So wie Sie hier in dieser Vorlage sehen können, genau wie wir es in Flüssigkeit würden, würden wir eine URL wie diese einfügen. Aber natürlich, weil wir in Flüssigkeit sind und die flüssige Engine das als Flüssigkeit interpretieren wird, müssen wir benutzerdefinierte Trennzeichen verwenden, um diese Template-Variablen von denen in Flüssigkeit zu unterscheiden. Wir haben die beiden Vorlagen hier und wir haben eine ganze Reihe von JavaScript, das unsere Ereignis-Listener und dann jetzt Ajax API-Anfragen enthält, und dann behandeln wir die Antwort. Wir haben auch einige Styles hier drin, um den Wagen zu stylen. Wie gesagt, ich werde dieses Dokument nicht Zeile für Zeile durchlaufen , weil hier viel los ist. Ich habe umfangreiche Kommentare zu all den verschiedenen Funktionen geschrieben. Ich hätte definitiv eine Lektüre dieser Datei, und wenn Sie irgendwelche Fragen haben, lassen Sie es mich wissen. Sie können auf diese Datei über meine GitHub-Seite zugreifen, ich habe ein Repository namens skillshare, wo Sie auf Ressourcen für alle meine Klassen auf skillshare zugreifen können . Genau hier können Sie sehen product.liquid ist eine dieser Ressourcen. Dieser ist eigentlich ein bisschen schöner zu betrachten, weil er Syntax-Hervorhebung auf diesen JavaScript-Vorlagen macht. Aber Sie müssen dies tatsächlich in Ihr Theme verschieben, um tatsächlich mit diesem Code zu interagieren und zu sehen, was er tut. Eine weitere Sache, bevor ich den Code ein wenig durchschreibe, ist, dass Sie jQuery auf Ihrem Theme installiert benötigen. Wenn Sie es also noch nicht haben, müssen Sie es entweder installieren, indem Sie es herunterladen und in Ihren Assets-Ordner aufnehmen. Oder der einfache Weg ist nur, einen Link über ein Skript-Tag zum CDN hinzuzufügen. So können Sie einfach, wie ich diesen Link bekam, war ich zu jQuery, jQuery CDN gegangen , und ich habe die URL gefunden. So wie wir es vorher getan haben, als wir unsere Anfragen in der Konsole machten, müssen wir dieses Skript tatsächlich in unsere theme.liquid aufnehmen. Oder wenn es bereits existiert, ist das cool. Aber es gibt einige Teile hier, wo wir jQuery verwenden. Wie ich bereits erwähnt habe, haben wir hier unsere beiden Vorlagen. Davor. Wir haben die Produktseite so, wie sie normalerweise erscheint. Hier ist also, wo unser normaler Produktvorlagencode ist , den ich hier drüben habe. Wir haben hier ein div für den Seitenwagen. Genau hier haben wir dieses div mit einer ID des Warenkorbs geht hier. Das div des Warenkorbs geht hier, ID ist, was wir verwenden, um Schnurrbart zu sagen, wo die Vorlage zu setzen. Wenn die Seite geladen wird, wird diese Vorlage direkt hier in dieses div laden. Nun, diese andere eine Zeile Artikel ist für, wenn wir eine neue Position in den Warenkorb hinzufügen. Es ist also ein Abschnitt des Einkaufswagens. Was das tun wird, ist, dass es an einen bestimmten Teil dieser Vorlage angehängt wird. Dies ist im Grunde alles nur Mockup mit den entsprechenden Daten in verschiedenen Teilen dieses Modells platziert. Die wahre Magie ist genau hier. Also, um diesen Code in ähnlicher Weise zu durchlaufen wie das, was ich Ihnen hier gezeigt habe. Denken Sie daran, dass wir hatten, also werde ich das einfach wieder auf eins setzen, die Seite aktualisieren und Sie werden sehen, dass der Warenkorb generiert wird. Nun, wenn ich die Seite erneut aktualisiere, können Sie sehen, dass dies zuerst gerendert wird und dann dies gerendert wird, weil dies durch Flüssigkeit gerendert wird. Dies kommt aus dem Back-End und dies wird tatsächlich auf dem Front-End mit Schnurrbart gerendert. Also, was das tut, ist diese Funktion hier, lauf get cart. Wenn die Seite geladen wird, das ist, wenn wir diese get cart Funktion ausführen/wenn wir hier nachschlagen, was get cart tut, ist, dass es eine Anfrage an die AJAx API sendet, um den Warenkorb zu erhalten, es übergibt diese Daten, und dann sendet es es an diese Funktion, die die Daten verarbeitet. Ich habe diese Verarbeitung der Daten an ein paar verschiedenen Stellen durchgeführt, weshalb ich das in eine andere Funktion verschoben habe. Dann können Sie die Funktion hier oben sehen. Was dies tut, ist es aktualisiert die Warenkorbsumme und die Artikel basierend auf dem, was von der API zurückkommt, die API hat alle Preise im Sinne, was wir tun müssen, ist sie alle durch 100 zu teilen, um den Preis in $ zu erhalten, und dann machen wir den Wagen mit Schnurrbart. Dies ist die Schnurrbart Methode, um unsere Vorlage zu nehmen, nehmen Sie unsere Daten, und kombinieren Sie sie zusammen, um unsere Ausgabe zu erstellen. Dann, wie Sie hier sehen können, nehmen wir das Element, das die ID des Einkaufswagens hat, hier, und wir setzen diesen Schnurrbart Ausgabe direkt dort hinein. Okay, das ist also, was passiert, wenn ich die Seite zum ersten Mal lade. Es macht diese Ajax-Anforderung und rendert diese Vorlage mit Schnurrbart. Was ist, wenn ich ein Produkt in den Warenkorb füge? Also lassen Sie uns einfach diese Größe neun Variante wählen und ich klicke auf In den Warenkorb. Oh, wir haben bereits Größe neun, also wird das nur die Menge erhöhen. Wenn ich hier hineingehe und ich mir den Senden Ereignis-Listener für den Warenkorb anschaue, machen wir hier eine Reihe verschiedener Dinge, bei denen verhindert wird, dass das Formular ein Standardformular sendet, so dass wir das Formular mit JavaScript behandeln können. Wir machen es so, wie wir es vorher getan haben. Wir serialisieren das Formular, damit wir seine Daten erhalten können. Dann übergeben wir es an die Ajax-API für eine Postanforderung. Wir gehen die Antwort übergeben, aktualisieren die Warenkorbsumme. Dann werden wir die Antwort vom Server zurückbekommen und damit umgehen. Denken Sie daran, dass die Antwort für das Hinzufügen eines Artikels zum Einkaufswagen in der Ajax-API der Artikel ist. Es ist also nicht der ganze Wagen wie bei cart.js oder diesem, cart/change.js. Die Antworten für diese sind der gesamte Warenkorb, aber die Antwort für diese spezielle Anforderung ist die Position. diesem Grund, der Wagen insgesamt, müssen wir uns selbst herausfinden, weil es nicht in den Daten zurückkommt. Also, das habe ich hier getan. Es ist ziemlich einfach herauszufinden, ist dies der vorherige Warenkorb insgesamt plus was auch immer der Preis dieses Artikels ist. Dann müssen wir es tatsächlich in der Benutzeroberfläche finden und aktualisieren, indem wir es durch 100 teilen, um es i $ zu bekommen. Hier werden wir prüfen, ob der Artikel bereits im Schnitt vorhanden ist. Denken Sie daran, dass wir einen weiteren Artikel derselben Variante hinzugefügt haben. Das bedeutet, dass wir keine neue Position benötigen, sondern nur die Menge dieser Position aktualisieren müssen. Wenn ich hier reingehe und eine andere Variante wähle, werden Sie sehen, dass wir eine neue Zeile erhalten. Das ist es, was diese Bedingung tut. Es prüft, ob eine Variante bereits existiert. Sie können die Funktion hier oben sehen. Wir geben ein Array zurück, basierend darauf, ob eine Übereinstimmung gefunden wurde. Wenn es bereits eine Übereinstimmung gibt, dann müssen wir anstatt Schnurrbart ausführen, um eine ganz neue Zeile zu rendern, nur einige Dinge auf der vorhandenen Zeile aktualisieren. Wir greifen einfach den Artikel aus dem DOM mit diesem und aktualisieren dann die Menge und den Preis. Hier können Sie sehen, ob ich noch einen hinzufüge, die Dinge, die sich ändern, sind die Menge und der Preis hier , und natürlich die Summe, die wir hier bereits behandelt haben. Aber wenn es sich um ein ganz neues Element handelt, was wir tun werden, ist, diesen Artikel in unser Items Array zu schieben. Wir nehmen die Daten, die Preise und wir werden sie wieder durch 100 teilen, um Dollarwerte zu erhalten. Dann werden wir die Zeile Item Vorlage rendern. Jedes Mal, wenn wir ein ganz neues Stück HTML rendern, habe ich mich dafür entschieden, mit Schnurrbart zu gehen, anstatt jQuery zu machen. Wenn Sie eine ganze Menge Mark-up schreiben, hilft es, eine Templating-Sprache zu haben. Aber wenn Sie hier nur ein paar kleine Dinge wie eine Nummer aktualisieren, dann brauchen Sie sich keine Sorgen zu machen. Die letzte, die ich gerade gemacht habe, ist die Aktualisierung der Menge. Wenn ich auf eines davon gehe und ich die Menge aktualisiere, wenn ich sie auf Null zurücksetze, wie Sie hier sehen können, wenn die neue Menge weniger als eins ist, was ich tun werde, ist, dass ich diesen Artikel direkt nach der Post-Anfrage ausblenden werde. Wenn ich ein wenig zurücktrete, ich hier Ereignis-Listener auf diesen Mengenanpassungsschaltflächen ein. Das „Plus“ wird die Menge um positive anpassen. Die Schaltfläche „Minus“ wird die Menge um negative anpassen. Das wird hier zusammen mit dem Ereignis weitergegeben werden, und wir werden die aktuelle Menge und Varianten-ID des Artikels finden, die Anpassung auf die aktuelle Menge anwenden, um eine neue Menge zu erhalten, und dann senden wir hier den Beitrag -Anfrage. Der Grund, warum wir die Menge und die Varianten-ID finden müssen , liegt darin, dass diese zum Senden der API erforderlich sind. Dann ist die Antwort, die wir zurück bekommen, der ganze Wagen, also können wir das pausieren und dann, wenn wir einen Artikel aus dem Warenkorb entfernen, dann werden wir ihn einfach verstecken, und dann werden wir diese Variablen aktualisieren. Wenn nicht, werden wir ein völlig neues Warenkorb-Objekt behandeln. Es macht es einfach einfacher zu scheinen, dass wir den ganzen Wagen von der API zurückbekommen. Alles, was wir tun müssen, ist, diese Daten zurück in diese Handle Warenkorb Antwort zu übergeben und dann wird es den ganzen Warenkorb erneut rendern. Wenn ich das drücke, rendern wir den ganzen Wagen mit all den Daten. Wie Sie sehen können, wird dieser Betrag aktualisiert und diese Summe wird ebenfalls aktualisiert. Das ist eine Menge Code und ich benutze ES6 viel hier. Das ist etwas fortgeschrittenes Level Zeug. Das ist definitiv kein Anfänger-Zeug. Auf jeden Fall, keine Sorge, wenn Sie das nicht vollständig verstehen. Dies erfordert ziemlich viel JavaScript-Wissen und Sie müssen auch über die ES6-Syntax wissen. Zum Beispiel, was ich hier mit der Pfeilfunktion gemacht habe, ist das Äquivalent in traditionellem JavaScript so. Ich benutze ES6, nur weil ich denke, es sieht schöner aus, aber vielleicht ist es für dich verwirrend. Auch hier ist dies ein bisschen eine fortgeschrittene Lektion. Die Hauptsache, die ich möchte, dass Sie davon nehmen ist das, was wir hier mit der Ajax-API gelernt haben. Ich möchte, dass Sie verstehen, dass wir, wenn wir Karren erstellen, die keine Seitenneuladungen erfordern, um sie zu aktualisieren, die Ajax-API verwenden. Denken Sie daran, alles, was auf der Client-Seite bleibt und Programmierung beinhaltet, Zugriff auf Daten von Back-Ends erhalten, wenn wir die Seite nicht neu laden und eine neue Serveranfrage auf diese Weise stellen, dann verwenden wir Ajax, und die Ajax-API und Shopify ist, wie wir auf diese Daten zugreifen können. Das ist die Hauptsache, die ich in diesem Video überlegen möchte. Dies sollte Ihnen neue Möglichkeiten mit Shopify eröffnen, aber Sie sind vielleicht noch nicht bereit, dies voll auszuschöpfen. Es gibt viel Tiefe zu JavaScript und der API. Aber genau hier, denke ich, ist ein Beispiel, das es wirklich zusammenfasst. Wenn Sie gehen, wieder, überprüfen Sie den Wagen, verbringen Sie einige Zeit mit Blick auf ihn, sehen Sie, ob Sie es herausfinden können. Wenn nicht, arbeiten Sie an Ihren JavaScript-Fähigkeiten. Wenn es auch ist, mach dir keine Sorgen. Sie haben immer Ihre Standard-Warenkorbseite. Eigentlich haben viele Shopify-Geschäfte, sogar einige wirklich große, keinen vollständig clientseitigen Einkaufswagen. Es gab einen Laden, den ich sah, ich war wirklich überrascht, dass sie das nicht hatten als ich für diese Klasse recherchierte. Luxy Hair ist ein wirklich großer Shopify Store. Wenn wir tatsächlich zu einem Produkt gehen, sind wir hier. Wir haben dieses Produkt hier. Wenn ich auf „In die Tasche hinzufügen“ klicke, was dem „In den Warenkorb hinzufügen“ entspricht, werden wir auf die Warenkorbseite weitergeleitet, und wenn ich einen Artikel entferne, wird die ganze Seite ebenfalls neu geladen. Selbst auf einer großen Shopify-Website verwenden sie keinen vollständig clientseitigen Einkaufswagen. Es ist keine große Sache, wenn Sie noch nicht bereit sind, das zu implementieren. Viele Themen haben das bereits. In Bezug auf Ihr Shopify-Theme-Programmierwissen hängt es davon ab, wie weit Sie damit gehen möchten. Aber wenn Sie Ihren eigenen clientseitigen Einkaufswagen codieren möchten oder in der Lage sein möchten, ein aktuelles Thema mit dieser Funktion zu manipulieren, dann müssen Sie über diese Ajax-API wissen und JavaScript kennen. Aber es ist nicht wichtig, ein erfolgreiches Geschäft zu schaffen. Sie können immer Ihre Warenkorbseite verwenden. Sie müssen nicht unbedingt einen clientseitigen Warenkorb oder einen Seitenwagen haben, der herauskommt. Diese Lektion, denke ich, war eine wirklich große, aber es ist ein ziemlich großes Thema. Es ist kein Pflichtthema. Ich glaube nicht, dass Sie einen Kurs zur Shopify-Theme-Programmierung erstellen können , ohne über diese tolle Funktion und diese API zu sprechen. Wenn Sie interessiert sind, finden Sie hier die Dokumentation auf der offiziellen Website. Schauen Sie sich meinen Beispielcode an, wenn Sie meine Implementierung sehen möchten. Aber das ist, wo ich Sie auf der Shopify Ajax API lassen. In der nächsten Lektion gehen wir zurück in Shopify Liquid und lernen einige fortschrittlichere Patente in Shopify kennen. Ich seh dich da. 10. Erweiterte Liquid-Muster: In dieser Lektion wenden wir unsere Aufmerksamkeit auf Shopify Flüssigkeit zurück, und wir werden über einige der Einschränkungen und Macken innerhalb der Vorlagensprache sprechen . Ich gehe zurück zu meinem neuen Thema, gehe zum Code, und ich werde die Indexvorlage öffnen. Ich gehe hier rüber und klicke auf Index. Was ich für diese Lektion tun werde, ist, dass ich Beispiele kopieren und einfügen und dann werden wir sie durcharbeiten. Was ich getan habe, ist, dass ich durch die Sprache gegangen bin und eine Reihe von Einschränkungen Macken und die Wege um sie herum ausgesucht habe. Ich habe diesen ersten Absatz hier. Dies ist nur ein Kommentar, etwas für uns zu lesen, und dann werde ich die spezifischen Beispiele einbringen. Was ich hier geschrieben habe, ist, dass man Flüssigkeit als Programmiersprache vorstellen kann, es eigentlich nur eine Templatingsprache ist. Bestimmte Dinge, die ein gegebenes sein sollten, wie eine globale Liste von Artikeln oder Produkten durchlaufen zu können , sind in Shopify Liquid einfach nicht möglich. Sehr frustrierend, wenn Sie nach dieser Konsistenz und Konvention suchen. Dies ist die Vorlagensprache von Shopify. Sie nehmen viele Freiheiten und trotzen Konvention in mehreren Bereichen. Die einzigen Datentypen, die Sie erstellen und flüssig können, sind Primitive und Arrays, einschließlich Arrays von Arrays und Primitiven, und was ich mit Primitiven meine, sind im Grunde nur Strings und Zahlen. Strings sind natürlich nur Textstücke, wenn Sie mit diesem Begriff nicht vertraut sind. Eine andere Sache, die ich nur im Voraus erwähnen sollte, ich werde eine Menge Programmierterminologie verwenden. Ich werde im Grunde nehmen, ein Programm ist Annäherung an Flüssigkeit und zeigen, wie wir mehr von den fortgeschrittenen Programmiersachen in dieser Templating-Sprache, die eine sehr begrenzte Sprache ist, tun können . Hier sind einige der Einschränkungen. Wie ich gerade erwähnt habe, können Sie kein Objekt in Flüssigkeit erstellen. Sie werden sehen, dass Sie in nur einer Sekunde bestimmte Array-ähnliche Objekte durchlaufen können. Es ist sehr frustrierend, aber Sie können nicht wirklich durchlaufen alle Artikel in Ihrer Shopify-Website, und Sie können nicht durch alle Produkte auf Ihrer Shopify-Website suchen auch. Die einzige Möglichkeit, dies zu tun, ist durch die gesamte Kollektion, die alle Produkte zeigt. Es gibt keine Möglichkeit für uns, selbst Produkte mit Flüssigkeit zu durchschauen. Sehr komisch. Aber vielleicht haben sie einen Grund dahinter. Sie können auch keine eigenen Funktionen erstellen. Dies ist etwas, das Sie in jeder Programmiersprache tun würden, aber Sie können keine Funktionen in Flüssigkeit erstellen. Dafür gibt es eine Problemumgehung. Sagen Sie zum Beispiel, wenn Sie eine Funktion verwenden wollten, um Code wiederzuverwenden, und Sie hatten Code, der gerade eine Eingabevariable nahm und jedes Mal dasselbe getan hat, können Sie immer noch etwas wie eine Funktion erreichen, indem Sie ein Snippet verwenden, und mit Snippets Sie können tatsächlich Parameter übergeben, und auf diese Weise könnten Sie bestimmte Funktionen imitieren , die Sie in anderen Programmiersprachen finden würden. Das letzte, was ich hier bemerkt habe, ist, dass Sie einen booleschen Wert erstellen können, der ein wahrer oder falscher Wert ist. Aber Sie können das Ergebnis eines Vergleichs nicht einer Variablen zuweisen und dann diesen booleschen Wert abkühlen. Du wirst sehen, was ich meine, in nur einer Sekunde. Lassen Sie uns über das erste Beispiel sprechen, das String-Verkettung ist. Ich werde einen Kommentar hier für String-Verkettung und eine Überschrift kopieren und einfügen, damit wir es in unserem Front-End sehen können. Was ich hier getan habe, ist, dass ich zwei Variablen gemacht habe. Einer ist mein Vorname und der andere mein Nachname. Jetzt wollte ich vielleicht eine neue Variable mit meinem vollständigen Namen erstellen. In JavaScript oder anderen Programmiersprachen könnten Sie dies alles in einer Zeile tun. Wenn ich meine Konsole öffne, lösche sie, erstelle einen FirstName, erstelle einen LastName, und dann, um den FullName zu erstellen, könnte ich einfach die so genannte String-Verkettung verwenden. Ich kann so Strings zueinander hinzufügen. Ich würde die Variable anstelle des expliziten Christopher verwenden. Vorname plus ein Leerzeichen dazwischen plus der Nachname, und jetzt, wenn ich nach einem FullName rufe, habe ich den Vorname plus ein Leerzeichen plus den Nachname. Ich denke, ich kann einfach Plus- und Minuspunkte verwenden, um Strings hinzuzufügen. In Shopify funktioniert es nicht so. Werfen wir einen Blick darauf, wie wir das tun würden. Die Art und Weise, wie wir das in Shopify tun, ist durch das Capture-Tag Was Capture tut, ist, dass es im Grunde alles innerhalb der Capture-Tags erfasst. Wir können hier drinnen eine Schleife laufen. Wir können alle möglichen Dinge tun. Alles, was ich tun werde, ist ein sehr einfaches Beispiel. Ich werde den Vornamen ausgeben, dann ein Leerzeichen, dann Last_name ausgeben. Jetzt haben wir eine Variable namens FullName erstellt. Was ich einfach tun kann, ist, diese Variable, Full_name, auszugeben, und nur damit wir wissen, wo es am Frontend kommt werde ich auch full_name davor setzen. Nun, öffnen wir unsere Vorschau in einem neuen Tab und wir werden sehen, ich habe eine Überschrift, String Concatenation, Full Name, Christopher Dodd. Leider habe ich auch hier meine Fußzeile, was sie hässlich aussehen lässt. Lassen Sie mich das einfach kurz aus der Fußzeile entfernen , denn dies wird die letzte Lektion sein, die wir über Flüssigkeit machen. Wenn ich hier zurück gehe, haben wir diesen Fußzeilentext nicht mehr. Jetzt können Sie sehen, die Ergebnisse von FullName herausgekommen ist. Dies ist ein sehr einfaches Beispiel, aber Sie können sich vorstellen, was Sie hier tun könnten. Du könntest alle möglichen Operationen hier reinbringen. Sie können eine vollständige Schleife erstellen und wir werden tatsächlich in einem späteren Beispiel in diesem Video sehen , wie wir eine vollständige Schleife in eine Aufnahme setzen, um ein Array zu erstellen. Schauen wir uns das nächste Beispiel an. Für das nächste Beispiel werde ich den Code direkt kopieren und einfügen weil es ziemlich viel hier ist und ich ihn nicht neu schreiben möchte. Grundsätzlich ist dieses Beispiel auf Teilzeichenfolgen. Sub-Strings, wie der Name schon sagt, ein Teil einer Zeichenfolge. Sagen wir zum Beispiel, wir wollten den tatsächlichen Video-ID-Teil einer YouTube-Video-URL greifen. In anderen Programmiersprachen wie JavaScript könnten wir eine Funktion namens Teilzeichenfolge verwenden, und wir könnten auswählen, wo die Teilzeichenfolge beginnen und enden soll, und dann könnten wir diese einer neuen Variablen zuweisen. Nun, es ist ein bisschen anders in Shopify Flüssigkeit, weil es keine Teilstring-Funktion oder -Methode in Shopify Flüssigkeit gibt. Was wir tun müssen, ist tatsächlich ein Array aus der Zeichenfolge zu erstellen, und dann werden wir den Teil finden, nach dem wir suchen , indem wir eines der Elemente des Arrays nehmen. Wir haben diese YouTube-Video-URL in dieser Variablen gespeichert, und zuerst werden wir überprüfen, ob es youtube.com Schrägstrich Watch enthält. Dies ist ein optionaler Schritt. Es ist nicht unbedingt relevant für das Beispiel, aber das ist, was Sie tun möchten. Sie möchten überprüfen, ob es dies tatsächlich in der URL hat, und wenn es das tut, was wir tun werden, ist, dass wir die Zeichenfolge um die v gleich teilen und dann haben wir Zugriff auf das, was auf beiden Seiten davon ist. Jetzt wird es hier verwirrend, weil wir dies in mehreren Schritten tun müssen, und es macht es schwierig, Ihre Variablen korrekt zu beschriften. In diesem Beispiel haben wir video_id hier, und dann ordnen wir es etwas völlig anderes hier unten zu. Hier macht video_id nicht notwendigerweise Sinn als Variablenname. Aber was wir hier tun, ist nur ein Array zu erstellen, um auf unsere Video-ID zuzugreifen. Wenn ich es ein wenig durchsprechen kann, was wir tun, ist, dass wir eine Variable erstellen, wo wir die URL nehmen und wir werden es nach v teilen gleich. Wenn wir uns erinnern, was Split tut, erstellt es ein Array. Jetzt haben wir dieses video_id-Array und es hat zwei Elemente. Es hat alles, bevor die v gleich ist, und nach dem v gleich. Wir werden hier einen zusätzlichen Scheck einlegen. Auch hier ist es nicht obligatorisch, aber wenn du ein zweites Argument in deiner YouTube-URL hast, wirst du es überprüfen wollen. Wenn das der Fall ist, werden wir uns wieder trennen, weil wir das Teil nach dem Ende nicht wollen. Sagen Sie zum Beispiel, ich ging hier rüber und vielleicht habe ich eine Zeit, ich denke, der Code ist t in YouTube, t oder s, ich denke, lassen Sie mich einfach speichern, weil wir hier filtern und den Teil nach dem Ende herausnehmen, sollten wir Jedenfalls in Ordnung sein. Nun, was ich tue, ist, dieses Array hier oben zu nehmen, den zweiten Wert in diesem Array zu finden , der der Teil nach v gleich sein wird, und dann werde ich es wieder zu diesem Zweck teilen. Ich werde es erneut teilen, und in der gleichen Zeile werde ich das erste Element im resultierenden Array nehmen. Ich habe diese Zeichenfolge, die wir in ein Array verwandeln werden. Dann teilen wir es mit diesem als das erste Element des Arrays auf, und dann dies als das zweite Element des Arrays. Dann müssen wir genau dasselbe in diesem Abschnitt tun. Dies wird das erste Element des Arrays sein, und dies auf der anderen Seite des Endes, das dieses geteilte Zeichen ist, wird das zweite Element im Array sein. Dann rufen wir einfach zuerst an, um das erste Element im Array zu erhalten, kümmern wir uns nicht um das zweite. Was passiert, ist, dass wir unsere endgültige video_id bekommen und dann können wir diese direkt in einen Embedded-Link einfügen. Lassen Sie uns überprüfen, ob das funktioniert. Wir gehen hier rüber und aktualisieren die Seite. Jetzt können wir sehen, dass wir meinen Video-Link hier haben. Was wir gerade getan haben, war, dass wir diese YouTube-URL in eine YouTube-Einbettungs-URL umgewandelt haben, die die gleiche ID von hier nimmt. Jetzt weiß ich, dass dies viele Zeilen sind, und wie gesagt, sind die Variablennamen verwirrend, weil wir es mehrere Schritte unternehmen müssen. Vielleicht möchten Sie das etwas anderes nennen. Vielleicht möchten Sie dies ein Video URL_Parts nennen und es dann als video_ Teile hier referenzieren. Lassen Sie uns das einfach für ein Beispiel tun, um es einfacher zu machen. Wir haben Video-Teile und nennen es dann video_parts hier. Speichern Sie, dass es immer noch funktionieren sollte, und stellt sich heraus, dass es tut. Das ist nur ein Tipp, wenn Sie es für sich selbst lesbarer machen möchten und es klingt verwirrend, Sie können die Variable etwas anderes beschriften, aber oft werden Sie es so sehen. Sie haben gerade einen Variablennamen recycelt. Das nächste Beispiel ist wahrscheinlich das komplizierteste der Beispiele, über die ich in dieser fortgeschrittenen flüssigen Lektion sprechen werde, und das ist das Erstellen von Arrays von Objekten. Ich setze Objekte hier in doppelte Anführungszeichen, weil wir, wie bereits erwähnt, keine Objekte und Flüssigkeit erstellen können und wir nicht unsere eigenen Arrays von Objekten erstellen können, wie wir zuvor gesehen haben. Die einzige Möglichkeit, ein Array zu erstellen, besteht darin, eine Zeichenfolge zu nehmen und sie basierend auf einem Begrenzungswert aufzuteilen. Dann haben wir ein Element für jeden der Teile der Zeichenfolge, die zwischen diesen Aufteilungswerten liegen. Das bedeutet also, dass wir keine Arrays von Objekten erstellen können. Wie ich hier geschrieben habe, erlaubt Shopify liquid keine Objekte zu machen und Sie können auch keine Arrays von Objekten erstellen. Sie können jedoch Arrays von Strings und Zahlen sowie Arrays von Arrays mit Capture und Split erstellen. Wie möchte ich das erklären, für diejenigen von Ihnen, die vielleicht nicht vollständig bekommen, was ich hier sage ist Ihnen zuerst ein Beispiel in JavaScript zu zeigen. In JavaScript könnte ich also zwei Objekte erstellen. Lassen Sie uns zwei Personenobjekte erstellen, die ich person1 haben werde, die einen Vornamen und Nachnamen von Christopher Dodd haben wird. Dann kam ich mit einem zufälligen Personennamen für Person2, was Michael Jordan sein wird. Ich weiß nicht, warum ich Michael Jordan gewählt habe. Sein Name kam einfach zu mir und machte dort überhaupt keine Vergleiche. Also, was ich tun könnte, ist ein Personen-Array zu erstellen. Ich könnte beide Objekte in diesem Array speichern. Die Art und Weise, wie Sie ein Array in JavaScript erstellen, öffnen Sie eine eckige Klammer, setzen Sie Ihr erstes Objekt setzen Sie Ihr zweites Objekt oder einen Wert ein. Dann, wenn ich jetzt Personenarray ausgebe, können Sie sehen, dass ich diese Liste von Objekten habe. Was mir das erlaubt, wie wir es mit dem Durchlaufen von Produkten in einer Sammlung getan haben, ist, dass ich dieses Array durchlaufen kann und zum Beispiel den Vornamen jeder Person schnappen kann. Leider können wir das nicht selbst in Shopify Liquid machen. Das Äquivalent zu dem, was ich gerade getan habe, wenn es in Shopify Liquid existierte, wäre, ein Array namens zu erstellen, lassen Sie uns es einfach Sammlungen nennen, die wir nicht bereits verwenden. Ich könnte einfach keine eckigen Klammern in Flüssigkeit verwenden, aber es wäre schön, wenn Sie so etwas wie diese Sammlung erstellen könnten, collection2 und dann beenden wir es so. So haben wir jetzt dieses Array von Sammlungen erstellt. Also, wenn ich das speichere, werden wir hier oben einen flüssigen Fehler bekommen. Flüssiger Syntaxfehler erwartet Ende der Zeichenfolge, aber fand Komma in der Sammlung, collection2. Es sagt uns also, dass wir es nicht tun können und wenn wir versuchen, den ersten Punkt in diesem zu referenzieren. Wenn ich also versucht habe, Sammlungen zu machen, nimm das erste Element im Array und sag Titel, wenn ich ausgebe, dass nichts auf dem Bildschirm erscheint. Wir haben gerade die Überschrift für diesen Abschnitt. Aber wir haben eigentlich nicht den Titel der ersten Sammlung, weil wir das nicht wirklich tun können. So kann das manchmal frustrierend sein, es gibt Zeiten, in denen wir vielleicht unsere eigenen Kollektionen kreieren wollen, denke ich. Aber der offensichtliche Weg ist, Ihre Sammlung in Shopify zu erstellen und dann können Sie sie wie normal durchlaufen. In Shopify können Sie keine Objekte in Flüssigkeit erstellen, aber Sie können natürlich Sammlungen in Ihrem Geschäft erstellen, und das ist ein Objekt mit einer Reihe von Produkten darin. Dafür gibt es einige Problemumgehungen. Ich werde nur noch etwas mehr Code kopieren und einfügen, um durchzugehen, wenn ihr jetzt Jungs. Dieses erste Beispiel ist ein bisschen knifflig, aber sobald Sie Ihren Kopf um ihn herum haben, sollte es sinnvoll sein. Was wir tun werden, ist, dass wir dieses Capture-Tag verwenden , bevor wir eine Liste von Produkten erstellen. Wie werden wir jedes dieser verschiedenen Attribute einschränken? Werden wir ein Pfeifen-Symbol verwenden, und dann am Ende dieses Produkts werden wir in einen Doppelpunkt setzen? Lasst uns durch das gehen, was hier vor sich geht. Also erfassen wir das Ergebnis davon in eine Variable. Also, was wir tun werden, ist eine Schleife durch eine Reihe von Produkten in einer Sammlung und dann werden wir die Töpfe zu greifen, auf die wir Zugriff haben wollen. Also haben wir Produkttitel. Dann fügen wir ein Zeichen für uns ein, um das mit dem nächsten Wert, der Produkt-URL , teilen Sie es erneut und teilen Sie es erneut mit diesen Werten, die wir vom Produktobjekt gezogen haben, zu teilen. Dann fügt dieser ein Trennzeichen ein, um das Produkt zu beenden, solange es nicht das letzte ist. Weil wir unseren Split-Filter hier nicht verwirren wollen , um zu glauben, dass es danach noch einen Artikel gibt. Also, wenn es der letzte ist, dann ist es das. Keine Spaltung mehr erforderlich. Am Ende dieser, was wir haben werden, ist eine Zeichenfolge mit all diesen Informationen aufgeteilt nach Pipes, und am Ende des Produkts, diese beiden Spalten. Ich denke, es wird am sinnvollsten machen, wenn ich nur auf der Seite ausgegeben habe. Also, wenn ich nur Produkte ausgebe, listen, speichern, und wir werden uns die Ergebnisse in unserer Vorschau ansehen. Wenn wir also nach unten schauen, haben wir den Titel, dann haben wir eine Pipe, um es von der URL dieses Produkts zu trennen , und wir haben eine andere Pipe um es von der Beschreibung des Produkts zu trennen. Dann haben wir eine andere Pipe, um es von der Bild-URL zu trennen, und dann können wir hier sehen, wir haben die zwei Doppelpunkte, um es vom nächsten Produkt zu trennen, und dann haben wir das gleiche wieder. Das ist also nicht allzu nützlich, da dies alles nur eine Zeichenfolge ist, aber da wir diese Zeichen drin haben, um anzuzeigen, wann sie geteilt werden sollen, können wir jetzt den Split-Filter verwenden, um dies tatsächlich zu einem Array zu machen. Also, jetzt werde ich ein Produkt-Array aus dieser Produktliste erstellen und es durch dieses Trennzeichen aufteilen. Also, jetzt werde ich nur diesen Teil haben. Ich werde ein Array mit Elementen haben, die nur diesen Teil haben. Aber wieder möchte ich das weiter teilen, wenn ich darin bin und ich durch diese Pfeife trennen möchte. Also, jetzt werde ich durch alle Produkte und das Produkt-Array schleifen und dann ein anderes Array namens erstellenproduct_vals und wir werden es jetzt teilen. Jetzt kann ich die Werte innerhalb dieses Arrays anhand ihrer Position referenzieren. Also leider, natürlich erstellen wir hier kein Objekt. Ich kann nicht wirklich sagen, geben Sie mir den Produkttitel. Es ist also kein sehr lesbarer Code, aber wieder, es ist eine Problemumgehung. Also kann ich dies tatsächlich verwenden, um den ersten Wert zu finden , und wenn ich weiß, dass der erste Wert immer Produkttitel sein wird, dann gibt mir dies den Produkttitel. Das wird mir den dritten Wert geben. Also, wenn ich mir das hier ansehe und dann zu Nummer drei hier rüber gehe, wird es mir die Produktbeschreibung geben. Wenn ich das speichere, denke ich, dass der Code sowieso vorher ausgeführt wurde, aktualisieren wir die Seite. Sie werden sehen, dass wir den Titel und die Beschreibung aller dieser Produkte innerhalb dieses Arrays haben. Dies ist also kein sehr praktisches Beispiel, aber es zeigt Ihnen eine Möglichkeit, Dinge zu tun, für die Sie ein Objekt verwenden würden, aber tun Sie es in Shopify Flüssigkeit, wo Sie keine Objekte erstellen können. Ich werde noch ein Beispiel machen und dann werden wir weitermachen. Dieses Beispiel könnte für Sie tatsächlich sinnvoller sein. Also dieses Beispiel habe ich von raisedbyturtles.org genommen, auf jeden Fall überprüfen Sie sie aus und geben Sie ihnen einen Schrei für mich. Also, was wir hier tun, ist, dass wir mehrere Arrays erstellen. Das erste Array wird beschreiben, was dieses Objekt ist, und dann das zweite Array und die Arrays danach werden Werte haben, Attribute im Grunde innerhalb dieses Arrays. Also, wenn Sie sehen können, was ich hier mache oder was der Autor bei raised by turtles.org getan hat. Wir haben dieses Items Array erstellt und wir teilen uns durch dieses Hash-Symbol. Also werden wir in unserem Items Array zwei Elemente haben, item1 und item2. Dann werden wir in diesem Farben-Array blau und grün haben. Die Art und Weise, wie wir diese miteinander verknüpfen können, ist durch ihre Position im Array. Solange wir also das erste Element in unserem Farben-Array schreiben , um mit dem ersten Element in unserem Items Array übereinzustimmen, können wir sie nach demselben Index referenzieren und das ist, was wir hier tun. Also, was wir hier tun, und ignorieren diese Zeilen hier. Das ist nur, um den Leerraum zu reduzieren, macht es genau dasselbe wie das. Aber im Grunde, was wir hier tun, ist, dass wir jedes Element im Elemente-Array durchlaufen, und wenn es das erste Element ist, werden wir das Farbattribut erhalten, indem wir den Index der Schleife referenzieren. Also lassen Sie uns einfach diese Bedingung entfernen und was wir bekommen ist, dass wir eine Reihe von Elementen erhalten, die die Farbe ausgeben, die dazu gehört. Wenn ich also auf Speichern klicke, die Seite aktualisieren und nach unten scrollen, werden wir blau und grün. Wir können sogar hierher kommen und wenn wir den Elementnamen hinzufügen wollten, der mit dieser Farbe verbunden ist, was wir tun könnten, ist, weil wir bereits innerhalb des Elements und des Element-Arrays sind, wir können nur Element ausgeben und dann werde ich ein Break-Tag setzen, um diese aufzuteilen. Wir sollten den Punkt 1 blaues Element zu grün sehen. Aktualisieren Sie die Seite, und Sie sehen Element ein blaues Element auf grün. Ich habe das Gefühl, dass ich hier etwas sagen muss, und das ist, wenn Sie die praktische Anwendung dieses jetzt nicht vollständig verstehen, mach dir keine Sorgen. Das ist fortgeschrittenes flüssiges Zeug. Deshalb nannte ich es die Fortgeschrittene flüssige Lektion. Im Wesentlichen, was ich hier zu tun versuche, ist, wenn Sie tiefer in Ihre Shopify flüssige Programmierreise einsteigen und anfangen, die Sprache mehr zu beherrschen. Du wirst wissen müssen, wie man Dinge am Rande macht und darum geht es in dieser Lektion. Verwenden Sie die Referenzen, die ich Ihnen bereits gezeigt habe, verwenden Sie Ihre Armpraxis mit Shopify-Themenprogrammierung und kommen Sie dann zu einem Punkt, wo es bestimmte Dinge gibt , die ich in der Programmiersprache machen möchte. Welche Einschränkungen habe ich und wie kann ich das umgehen? Also, wenn du noch nicht in dieser Phase bist, mach dir keine Sorgen, ich dachte, ich würde das gerade jetzt erwähnen denn das ist ein Bereich, in dem du denkst , okay, Chris, warum muss ich das tun? Nun, wenn du es noch nicht tun musst, mach dir keine Sorgen. Aber das ist Zeug, wenn Sie wirklich tief in Shopify Flüssigkeit bekommen , die Sie sich bewusst sein wollen. Okay, wie das Programm ist, würden wir gerne denken, dass es eine konsistente, konventionelle Art gibt , Dinge zu tun. Aber die frustrierende Sache mit Shopify Flüssigkeit ist, dass es eine Templating-Sprache ist, die von Shopify entwickelt wurde und es gibt viele Macken und Unterschiede darin. Sie trotzt der Konvention in vielerlei Hinsicht. Diese Lektion ist also wie das Gegenmittel dafür. Also nochmal, das ist etwas fortgeschrittenes Zeug. Mach dir keine Sorgen. Wenn dies nicht etwas ist, können Sie sofort verwenden. Aber vielleicht ist es etwas, auf das man zu einem späteren Zeitpunkt zurückkommen kann. Davon abgesehen, lassen Sie uns zu unseren letzten Beispielen übergehen. Im nächsten Beispiel geht es um das Speichern von booleschen Werten. Also, wie ich oben erwähnt habe, lass mich das aufteilen. Nennen Sie dies Erstellen von Booleans. Wie ich oben erwähnt habe. Wir können einen Boolean erstellen, aber nur durch Zuweisung explizit true oder false. Wir können tatsächlich das Ergebnis eines Vergleichs einer Variablen zuweisen. Was ich damit meine, ist, wieder, ich werde Ihnen ein Beispiel in JavaScript zeigen. 11. Bonus: Die Storefront-API: Alles klar alle, willkommen zu dieser Bonusstunde auf der Schaufenster-API. Bis jetzt haben wir nur mit dem Online-Shop-Vertriebskanal gearbeitet. Wenn ich in meinem Shopify-Shop schaue, sehen Sie eine Liste des Vertriebskanals und der Online-Shop ist derjenige, der mit Ihrem Shopify-Konto vorinstalliert ist. Natürlich ist die Art und Weise, Ihren Onlineshop-Vertriebskanal anzupassen, durch Themen. Wir haben alles aus einem Thema gemacht. Nun, die Storefront-API ermöglicht es uns tatsächlich von überall im Web auf unsere Store-Daten zuzugreifen. Ich habe darüber nachgedacht, wie ich das am besten erklären kann, und ich denke , der beste Weg ist für euch, es sofort zu sehen. Was ich tun werde, ist Ihnen eine App zu zeigen, die ich erstellt habe. Ich nenne diese App die Shopify Customer Storefront App. Ich habe auf einem kostenlosen App-Host namens Heroku App gehostet. Um diese App zu verwenden, muss ich einige Shop-Details einfügen. Ich habe das Zugriffstoken, das ich bereits erstellt habe, bereits einsatzbereit und die Store-Domain ist genau hier. Wenn ich auf „Senden“ klicke, wird es eine Verbindung zu meinem Shop herstellen und dann sehen Sie plötzlich ein benutzerdefiniertes Schaufenster, das ich auf einer völlig anderen Adresse als Shopify aufgebaut habe. Genau hier ist diese App mit einem JavaScript-Framework namens View JS gemacht, das ich kürzlich gelernt habe und es ist wirklich cool, um interaktive clientseitige Apps zu erstellen. Was Sie mit dieser App tun können, ist, dass Sie Sammlungen in einem bestimmten Geschäft durchsuchen können, in diesem Fall mein Geschäft, der Chris Test-Shop. Sie können die verschiedenen Seiten des Inhalts durchsuchen, Sie können auf einen bestimmten Artikel klicken, Sie können eine Variante auswählen, Sie können die Variante in den Warenkorb legen, und dies geschieht alles auf der Client-Seite. Wie Sie sehen können, gibt es überhaupt keine Seitenaktualisierungen, weil ich dies komplett mit einem JavaScript-Framework namens View JS gemacht habe . Sie können diese API auch verwenden, um Apps eckig zu erstellen oder zu reagieren Es ist eine großartige Möglichkeit für Sie, Ihre Store-Daten vollständig clientseitig zu verwenden. Nun, wenn ich hier auf Kasse klicke, geht es an die eigentliche Kasse meines Shops, und so geht es zurück zu Shopify, aber dieses ganze Einkaufserlebnis hier einschließlich Blick auf Blogs, ist alles auf dieser Drittanbieter-Hosting-Plattform. Jedes Mal, wenn ich auf etwas klicke und Daten lade, kommt es über die Storefront-API durch. Lassen Sie uns meine Netzwerk-Tab öffnen und wir können tatsächlich sehen, dass diese Anfragen durch kommen. Ich gehe zu meiner Registerkarte Netzwerk und klicke auf die Registerkarte für XHR. Lassen Sie uns meine App aktualisieren. Sie können sehen, dass wir hier drei Anfragen gestellt haben. Die Storefront-API verwendet etwas namens GraphQL, das ein ganzes Thema an sich ist. Wenn Sie mit der GraphQL-Methode der Ausführung von APIs nicht vertraut waren, aber im Wesentlichen GraphQL haben, gibt es einen einzelnen Endpunkt anstelle mehrerer Endpunkte, und Sie senden eine Abfrage an diesen Endpunkt und es gibt Ihnen die genauen Daten, die Sie suchen. Wenn Sie zuvor Rest-APIs verwendet haben, gibt es vielleicht einen API-Endpunkt, an dem Sie alle anfordern, sagen wir die Sammlungen in Ihrem Shop, aber in diesem Fall möchte ich nur das Bild, ich möchte den Titel und ich möchte den Link zum -Kollektion. Nun, in einer Rest-API Sie möglicherweise nicht nur diese Daten auswählen, und was Sie tun würden, ist, dass Sie alle Informationen über Sammlungen anfordern würden. Das bedeutet, dass Sie möglicherweise mehrere API-Anforderungen stellen oder nur Anfragen stellen müssen, die größer sind als sie sein müssen. Auch hier ist dies ein bisschen mehr ein fortgeschrittenes Thema, aber ich wollte nur, dass Sie das Konzept erhalten und vielleicht können Sie die Schaufenster-API für Ihre eigenen Zwecke auf der Strecke verwenden. hier zurück zu diesem Netzwerk-Tab gehe, wenn ich auf die erste Anfrage klicke, wenn ich in den Header gehe, können Sie die Abfrage sehen, die ich an die API sende und diese Abfrage hier ist eine GraphQL-Abfrage. Es sagt im Grunde, dass ich das Shop-Objekt möchte und ich diese Attribute auf dem Shop-Objekt möchte. Das ist nur eine GraphQL-Syntax. Hier können Sie sehen, was wir von der API zurückbekommen. Wir erhalten die Shop-Daten und wir erhalten Dinge wie Währungscode, den Namen des Ladens, primäre Domain und der Grund, warum diese Anfrage existiert, ist, weil ich den Namen des Ladens hier verwende. Schauen wir uns das nächste an. Es sieht so aus, als würde dieser auf die Sammlungen zugreifen. Wie Sie hier sehen können, ist dies die GraphQL-Abfrage. Ich weiß, es ist ziemlich groß, wenn Sie GraphQL nicht verstehen, keine Sorge, Sie werden das nicht verstehen, aber der Punkt, den ich mache, ist, dass Sie etwas von der Schaufenster-API zurückbekommen. Es sind alle Sammlungsdaten, aber nicht mehr als das, was Sie angefordert haben. In meinem Fall, was ich getan habe, ist, dass ich jede Sammlung angefordert habe und ich möchte ihren Griff kennen, es ist ID, und ich möchte das erste Produkt jeder Kollektion und das erste Bild jedes Produkts in dieser Sammlung. Der Grund, warum ist, wenn das Bild null ist, möchte ich stattdessen auf das erste Bild des ersten Produkts zugreifen können, also habe ich tief in diese Sammlung zugegriffen. Dann haben Sie die dritte Anfrage. Die dritte Anfrage, wie Sie hier sehen können, ist der Zugriff auf die Seiten mit in meinem Shop. Wo ich das benutze, ist hier unten, um einige Links zu verschiedenen Seiten zur Verfügung zu stellen. Ich verwende den Namen der Seite und dann verwende ich das Handle, um auch einen eindeutigen Link zu dieser Seite zu erstellen. Wenn ich auf über uns klicke, können Sie sehen, dass dies die Daten von der Über uns Seite zieht. Wenn wir hier klicken, können wir eine weitere Anfrage sehen, um weitere Informationen zu erhalten, die in der Tat die gleichen Informationen sind. Wenn wir noch mehr klicken, wenn ich auf Blog klicke, können Sie sehen, dass wir eine weitere Schaufenster API-Anfrage machen. Wenn ich hier reingehe, können Sie sehen, dass wir eine Liste von Artikeln haben. Dann werden diese Daten natürlich mit View JS auf der Seite dargestellt. Also, um Ihnen einen kleinen Blick in die App zu geben, wenn Sie interessiert sind, habe ich es genau hier, der Dienstordner ist, wo ich alle meine API-Anfragen mache. In meinem Basisdienst habe ich die Einstellungen für die Storefront-API-Anfrage. Dann erstelle ich diese API-Aufruffunktion, die eine Bibliothekscode-Achse verwendet, um die Storefront-API tatsächlich abzufragen, und ich stelle diese Funktion dem Produktservice zur Verfügung und hier sind alle meine GraphQL-Abfragen. Jetzt noch einmal, dies geht tief in viele verschiedene Konzepte wie View JS, die Sie vielleicht nicht kennen, GraphQL, mit dem Sie vielleicht nicht vertraut sind und vielleicht haben Sie nicht einmal viel Erfahrung mit APIs, also lass dich hier nicht überwältigen. Wir werden nicht viel Zeit damit verbringen, dies zu durchlaufen, aber was ich in dieser Lektion tun möchte, ist ein Beispiel dafür zu zeigen wie wir diese Daten in unserem Thema verwenden können. Diese Klasse ist natürlich über Shopify Thema Programmierung und es ist möglich, die Storefront API in Ihrem Theme zu verwenden, wenn Sie so wählen. Darauf konzentrieren wir uns in dieser Lektion, aber für die meisten Menschen wird die Schaufenster-API am nützlichsten sein, wenn Sie auf die Daten Ihres Shopify-Stores zugreifen müssen. Aber Sie möchten in der Lage sein, dies auf eine völlig benutzerdefinierte Weise zu tun, zum Beispiel, indem Sie eine benutzerdefinierte Schaufenster oder vielleicht eine Telefon-App erstellen, die die Daten Ihres Stores verwendet. Im Store für eine API geht es darum, auf Daten zuzugreifen, die der Kunde sieht. Nichts davon hat also mit dem Zugriff auf Dinge zu tun, wie das Hinzufügen von Produkten, Hinzufügen von Kunden, das Erstellen von Rabatten. Das ist alles über die Admin-API, was Sie verwenden, um Apps zu erstellen, die direkt hier in Ihren Apps Abschnitt gehen. Auch hier möchte ich nicht zu viel darüber sprechen, weil dies außerhalb des Kontexts der Shopify-Theme-Programmierung liegt , aber was ich in dieser Lektion tun möchte, ist Ihnen ein Beispiel dafür zu zeigen, wie wir die Schaufenster-API tatsächlich in einem Thema in unserem eigenen Geschäft. Was wir tun müssen, ist, wenn ich zurück zu meiner App gehe und ich eine Option gesendet habe, um die Verbindung zu trennen. Wir können sehen, dass ich eine scharfe Domain brauche und ich einen Speicher für ein Zugriffstoken brauche. Wie Sie zuvor gesehen haben, hatte ich bereits ein Token und ich habe es hinein, aber lass uns gehen und ein Token neu erstellen , so dass Sie sehen können, wie Sie das selbst tun würden, also wenn ich in Apps gehe, dann gehe ich in private Apps verwalten. Sie sollten mit diesem Prozess vertraut sein, wenn Sie Theme Kit vorher konfiguriert haben, denn wie Sie hier sehen können, mussten wir eine private App erstellen, um Theme Kit zu verwenden. Wie Sie hier unten sehen können, habe ich diese Storefront-API-App. Ich werde das löschen und es für euch neu erstellen, damit wir sehen können , wie wir selbst eine Schaufenster API-App erstellen können. Hier oben gibt es eine Schaltfläche für Erstellen einer neuen privaten App, ich werde darauf klicken und diese App etwas Angemessenes nennen. Ich werde es nur Storefront API-App nennen. Dies ist im Grunde die Schnittstelle, mit der Sie eine Verbindung mit der Storefront-API herstellen können. Wir werden die Notfall-Entwickler-E-Mail eintragen. Wie Sie hier sehen können, können wir einige Admin-API-Berechtigungen festlegen. Das brauchen wir nicht. Was wir brauchen, sind einige Storefront-API-Berechtigungen. Genau hier müssen wir nur dieses Kontrollkästchen aktivieren und dann können wir anpassen, welche Berechtigungen wir diese API aktivieren werden. Diejenigen, die bereits überprüft wurden, sollten gut genug sein , aber lassen Sie uns einfach alles überprüfen, nur für den Fall. Wenn wir auf „Speichern“ klicken, wird es uns warnen, dass jeder, der diese Anmeldeinformationen hat, Anfragen an die API stellen kann . Seien Sie also vorsichtig, mit wem Sie diese API teilen. Ich werde auf „Ich verstehe, erstellen Sie die App“ klicken. Jetzt können Sie sehen, dass die App erstellt wird und wenn ich nach unten scrolle, gibt es mir das Storefront-Zugriffstoken. Ich lasse diese Seite offen, damit wir später auf dieses Token zugreifen können, und ich werde meinen Onlineshop-Vertriebskanal in einer neuen Registerkarte öffnen. Was ich tun werde, ist der Kopf zurück in unser neues Thema und lassen Sie uns die Indexvorlage bearbeiten. Wir haben all diesen Code hier aus unserer fortgeschrittenen Liquid Lektion, um das zu entfernen. Was ich stattdessen tun werde, ist ein div zu setzen, das unseren Inhalt halten wird. Eigentlich werde ich ihm eine ID geben, weil es nur eine geben wird und ich werde einige Skript-Tags öffnen. Da wir eine API verwenden, die von überall im Internet auf Daten zugreifen kann, können wir dies in jeder Vorlage tun. Es muss nicht in der index.liquid Vorlage sein, könnte buchstäblich überall sein. Für dieses Video, zu Demonstrationszwecken, ist es nur sinnvoll, es in der index.liquid Vorlage zu tun. Was ich tun werde, ist einige Daten mit der Storefront-API zu greifen und sie dann über jQuery auf der Seite darzustellen , um diesen Inhalt in dieses div einzufügen. Ich werde den API-Code kopieren und einfügen, weil es eine Konfiguration erfordert. Dies ist eine Funktion, die ich früher erstellt habe, offensichtlich. Was es tut, ist, dass es eine Abfrage benötigt und diese Abfrage dann an die Ajax-API sendet. Dann können wir mit dieser Antwort tatsächlich auf die Daten zugreifen, die zurückkommen. Lassen Sie uns das wirklich schnell durchgehen. Wir verwenden die eingebaute Fetch-Funktion in JavaScript, um eine Anfrage an den Storefront-API-Endpunkt zu stellen , der nur Ihr Shopfront-Name/api/graphql.json ist. Wenn wir diese Anfrage von Shopify abstellen würden, müssten wir natürlich den Shopnamen angeben. Wenn ich zu meiner App umschalte und ich zu den Einstellungen in meinem ApiCall hier gehe, sehen Sie, dass wir den Shopnamen hier einstellen mussten. Aber da wir bereits im Laden selbst sind, können wir einfach die relative URL verwenden und eine Anfrage an /api/graphql.json senden. Dann öffnen wir dieses Objekt hier. Wir stellen sicher, dass die Methode post ist und wir müssen diese Header senden. Wir müssen sicherstellen, dass der Inhaltstyp GraphQL ist, wir müssen Steuerungsursprung zulassen und natürlich brauchen wir unser Zugriffstoken. Das haben wir vorher erzeugt. Wenn ich zu meiner privaten App zurückgehe, erinnere dich daran, dass ich das offen halten wollte, ich muss hier nach unten gehen,dieses ich muss hier nach unten gehen, Zugriffstoken kopieren und das Zugriffstoken hier durch mein eigenes ersetzen. Als nächstes setzen wir den Körper der Anfrage auf die Abfrage, die hier übergeben wird. Dann mit der Antwort werden wir es mit json codieren. Wir müssen dies tun, damit wir die Daten tatsächlich lesen können. Die zwei Dinge, die wir brauchen, sind, dass wir eine tatsächliche Abfrage benötigen. Ich werde nur eine leere Abfrage hier einrichten. Dann müssen wir tatsächlich die API aufrufen. Ich werde sie jetzt einrichten, gehe zur API-Abfrage, und dann werde ich dieses Versprechen verwenden. Ich werde Antwort, Konsole, Log-Antwort sagen. All dies wird tun, sobald wir die Abfrage senden ist Konsolenprotokoll, was wir vom Server zurück bekommen. Um diese Abfrage zu erstellen, befindet sich ein praktisches Tool in der Schaufenster API-Dokumentation. Ich glaube, es geht um die ersten Schritte oder um die erste Seite der API-Referenz. Um zu beachten, dass es hier viele Informationen gibt, wenn Sie Ihre eigenen Recherchen über die Storefront-API durchführen möchten . Dies ist eher eine praktische kleine Show und erzählen, wie Sie die API tatsächlich verwenden können. Wenn Sie jedoch auf diese Seite, die API-Referenzseite für die Storefront-API, gehen , können Sie nach unten scrollen und Sie erhalten diesen interaktiven GraphQL-Explorer. Dies hilft Ihnen, GraphQL-Abfragen zu erstellen. Wie Sie hier sehen können, haben wir eine sehr einfache, die das scharfe Objekt packt und dann den Namen davon bekommt. Wenn ich das durchführe, siehst du, was wir zurückbekommen, ist so etwas. Lassen Sie uns dies einfach verwenden, um zu testen, ob unser API-Aufruf korrekt eingerichtet ist. In dieser Abfrage werde ich diese GraphQL-Abfrage senden. Wenn ich auf „Speichern“ klicke und dann eine Vorschau auf das Thema,sollten wir sehen, dass und dann eine Vorschau auf das Thema, nichts auf der Seite außer der Kopfzeile auftaucht. Aber wenn ich meine Konsole öffne, werden wir sehen, dass wir einen Fehler haben, wir haben eine fehlende Klammer nach einer Argumentliste. Gehen wir einfach zurück. Vielleicht gab es hier irgendwo einen Fehler. Ja, ich habe vergessen, eine zusätzliche Halterung dort zu setzen. Lassen Sie uns diese Seite aktualisieren. Jetzt, da wir diese Konsole geöffnet haben, können wir sehen, dass wir ein Objekt haben, das von der Storefront-API zurückkommt. Wir können überprüfen, dass dies von der Storefront-API ist, indem wir zu unserer Netzwerk-Registerkarte gehen, und Sie können hier sehen, ist eine Antwort von der API. Wir können die Abfrage sehen, die wir durch gesendet haben, und wir können die Antwort sehen. Da wir dieses Objekt konsolenprotokolliert haben, haben wir es nun auch in unserer Konsole verfügbar. Wir haben unseren Shop-Namen, was wir ohnehin leicht innerhalb eines Themas tun könnten. Lasst uns etwas etwas mehr tun. Was ich tun werde, gehe zurück zu hier, und ich werde eine GraphQL-Abfrage kopieren, die ich in meiner benutzerdefinierten Storefront-App hatte. Wenn ich zu meinem Projektcode gehe, werde ich nur den API-Code hier greifen, um die ersten 20 Produkte des Ladens zu greifen, und ich werde unsere Abfrage hier aktualisieren. Lass uns das speichern und mal sehen, ob das funktioniert. hier hineingehen, haben wir ein Objekt, das mit all diesen Produkten zurückkommt. Wenn wir das alles öffnen, können wir sehen, dass wir alle Daten haben, um die wir gebeten haben. Wenn wir in die Registerkarte Netzwerk gehen, ist alles noch gut. Wir haben das, was wir in unserer GraphQL-Abfrage durchgeschickt haben, und wir haben das Ergebnis zurück. Auch hier werde ich nicht viel Zeit damit verbringen, dir GraphQL beizubringen , weil das ein ganzes Thema an sich ist. Aber ich will dir nur zeigen, was wir hier tun können. Wir haben all diese Daten, was schön ist. Aber wir wollen diese Daten tatsächlich nutzen. Was wir tun können, ist jQuery zu verwenden, um unsere Seite zu aktualisieren. Die meisten Designs haben jQuery bereits installiert. Wenn Sie an einem vorhandenen Thema arbeiten, überprüfen Sie definitiv, ob Sie jQuery bereits haben weil dies das neue Thema ist und es sehr einfach ist. Ich muss jQuery tatsächlich aus dem CDN importieren. Wenn ich nur jQuery auf Google nachschaue, sollte es hier einen Link zum jQuery CDN geben, und dies gibt uns einen Link zu einer verkleinerten Version von jQuery. Ich kann das greifen, und mit meinem Wissen über flüssige Tags kann ich das als String einfügen und dann den Skript-Tag-Filter verwenden , um daraus tatsächlich ein Skript-Tag zu erstellen. Was ich tun werde, um zu testen, ob jQuery funktioniert, ist eine jQuery-Funktion zu verwenden, die nicht funktionieren sollte, wenn jQuery nicht installiert ist, aber funktionieren sollte, wenn jQuery installiert ist. Was ich tun werde, diese nur Konsolenprotokoll bereit, wenn das Dokument fertig ist. Wenn ich auf „Speichern“ klicke, aktualisiere ich die Seite, öffne zuerst die Konsole und aktualisiere dann die Seite, du wirst sehen, dass wir fertig sind und dann Daten. Wir wissen, dass wir jetzt definitiv jQuery installiert haben. Ich werde diese Bereitschaftsfunktion loswerden. Was wir jetzt tun müssen, ist unsere Antwort anders zu handhaben. Was ich tun werde, ist hier einige geschweifte Klammern zu setzen, und ich werde die Antwort auf das Konsolenprotokoll behalten, weil ich darauf verweisen werde. Aber was wir tun werden, ist tatsächlich die Produkte hier durchlaufen und etwas auf dem Bildschirm herauskommen zu lassen. Ich verwende, was sich im Konsolenprotokoll befindet, um herauszufinden, wie man durch diese Objekte navigiert. Wir haben ein Datenobjekt, dann haben wir Produkte, dann haben wir Kanten darin. Kanten ist ein Array. Dann werden wir durch dieses Array Schleife, finden den Knoten jedes dieser Array-Elemente, und dann sind das die Daten für jedes unserer Produkte. Ich gehe zurück in hier, und ich werde die Antwort nehmen, dann werde ich in Daten navigieren, dann werde ich in Produkte navigieren, dann Kanten. Ich weiß, dass es hier viele Punkte gibt. Dann beginnen wir hier unsere Schleife. Also kann ich für jeden sagen und ich kann das Produkt greifen, und dann, was wir für jedes Produkt tun ist, ich möchte nur sicherstellen, dass wir auf das Richtige suchen. Ich werde eigentlich nur Konsolenprotokoll product.node. Schauen wir uns mal an, ob das funktioniert. Ich werde „Speichern“ drücken, aktualisieren Sie die Seite hier drüben mit geöffneter Konsole. Wie Sie sehen können, haben wir das anfängliche Konsolenprotokoll, das die gesamte Antwort hat, die wir zurückerhalten haben. Dann können Sie ein individuelles Konsolenprotokoll für jedes der Produkte mit ihren Attributen sehen , die wir in diesem Datenobjekt zurückerhalten haben. Jetzt sind wir in dieser Schleife, wir können diese Daten tatsächlich in Inhalte auf der tatsächlichen Seite übersetzen. Was ich tun werde, ist eine Vorlage zu erstellen. Ich werde diese const-Vorlage aufrufen, und in dieser Vorlage werde ich etwas HTML konstruieren. Nehmen wir an, div Klasse, Produkt. Lassen Sie uns das in eine andere Zeile aufteilen, so dass wir einige schöne Abstände haben, es ein bisschen lesbarer macht, und dann werde ich eine Überschrift für jeden machen. Mit String-Interpolation werde ich in diesen Produktknoten navigieren, also product.node, und das Attribut, nach dem ich suche, ist title. Ich werde den Titel des Produkts nehmen, dann darunter, was sollen wir zeigen? Vielleicht die Produktbeschreibung, product.node.description, noch eine Sache, vielleicht das Bild. Es wird mehrere Bilder für ein bestimmtes Produkt geben. Nun, die Möglichkeit zumindest für ein paar Bilder für ein bestimmtes Produkt, also wird dieses ein wenig komplizierter, aber wir werden dorthin kommen. Was ich tun werde, ist ein HTML-Bild-Tag zu öffnen, und um den src zu erhalten, die tatsächliche Adresse zum Bild. Was ich tun muss, ist in unseren Produktknoten zu navigieren, und dann muss ich innerhalb unseres Knotens auf diese Bilder, das Objekt und dann innerhalb der Ränder zugreifen . Ich werde dieses kleine bisschen Schritt für Schritt tun, so Bilder, Kanten, und ich möchte das erste Bild der Liste der Bilder in diesem Produkt zur Verfügung. Ich werde das mit seinem Null-Index auswählen. Jetzt werden wir in diesem ein sein, und wir wollen den Knoten erhalten, und dann innerhalb des Knotens, die TransforMedSRC, Node.TransforMedSRC. Wenn Sie sich fragen, was TransForMedSRC ist, können wir tatsächlich in unserer Graph QL-Anfrage angeben, was wir wollen die MaxWidth und MaxHeight des Bildes sein, wie das, was wir mit Bild-URL-Tags oder Filtern in Liquid gemacht haben. Hoffentlich haben wir unsere Objekte richtig navigiert, ich habe hier einen letzten Schritt verpasst, und das heißt, ich muss die Vorlage tatsächlich an dieses div hier oben anhängen. Ich werde einen jQuery-Selektor öffnen, Ziel dieses div, und dann werde ich die Vorlage anhängen. Dies wird für jedes Produkt in der Schleife zu diesem Inhalt div hier oben hinzugefügt werden, also werde ich auf „Speichern“ drücken, die Seite aktualisieren. Jetzt werden Sie sehen, dass wir die Daten haben, die wir von hier in unserer Storefront API auf unserer Seite dargestellt haben. Wir haben den Titel, wir haben das Bild, wir haben die Beschreibung, und Sie können es sehen, alle ersten 20 Produkte in unserem Shop kommen heraus. Nun, das ist alles durch JavaScript, wir verwenden hier keine Liquid, das ist alles Client-Seite. Sie können dies vielleicht auf einer langsameren Verbindung sehen oder vielleicht, wenn ich nur die Seite aktualisiere, sehen Sie, dass es eine leichte Verzögerung gibt, bevor alles geladen , und dann werden die Produkte und ihre Namen und Bilder geladen. Im Grunde, was passiert, ist, der serverseitige Code zuerst generiert wird, Sie erhalten die Seite zurück , die Seite wird geladen , und kurz danach erhalten wir die asynchrone Last in JavaScript. Auch hier ist nicht ganz klar, warum wir die Storefront-API verwenden würden, um auf diese Daten zuzugreifen, wenn wir bereits in Liquid darauf zugreifen können. Dies ist jedoch ein Beispiel dafür, wie Sie die Storefront-API in Ihren Designs verwenden können. Auch hier ist die beste Verwendung der Storefront-API, wenn Sie eine vollständig clientseitige Anwendung erstellen möchten. Wenn ich nur meinen Store für ein Zugriffstoken wieder in diese App werfe, ist dies hier ein perfektes Beispiel für eine rein clientseitige App, und es macht Sinn, dass wir die Daten mit einer JSON-API verwenden würden, was uns nicht dazu bringt, die Seite jedes Mal. Sie können hier sehen, dass dies alles auf der Client-Seite geschieht, was bedeutet, dass wir die Seite nie neu laden müssen. Ich denke, das wäre ein großer Vorteil der Verwendung der Storefront-API. Auch dies ist der Grund, warum dies eine Bonusstunde ist, und es ist eine Bonusstunde, weil Sie wahrscheinlich nicht die Storefront-API verwenden werden, aber ich wollte Ihnen eine kurze Lektion zu dieser API geben, um Ihnen zu zeigen, was möglich ist. Vielleicht möchten Sie tatsächlich einen benutzerdefinierten Storefront erstellen, oder vielleicht müssen Sie tatsächlich auf einige Daten zugreifen, die in der API verfügbar sind, die in Liquid nicht verfügbar sind. Ich kenne tatsächlich ein paar Beispiele, in denen die Storefront-API Ihnen Daten gibt, die Liquid nicht tut, also möchten Sie sie vielleicht für diese Randfälle verwenden. Wenn Sie alles über die verschiedenen Objekte in der Storefront-API erfahren möchten, können Sie dies hier tun. Wie wir in der Shopify Liquid Dokumentation gesehen haben, können wir uns hier die Objekte ansehen, die in der Storefront API verfügbar sind. Es hat eine Weile gedauert, um herauszufinden, wie man das richtig liest, aber wenn wir einen Blick darauf werfen, was wir für die heutige Lektion mit Produkten gemacht haben, können Sie hier sehen, dass dies Ihnen alle, was man nennt, Verbindungen zeigt. Dies sind andere Ressourcen, auf die Sie von einem Produkt als Einstiegspunkt zugreifen können, und dann unten sind alle Attribute. Wenn ich zum Beispiel auf das Produkthandle zugreifen wollte, würden Sie dies tun. Die Beschreibung in HTML, das CreatedAt-Datum direkt hier und das Metafield, das auf diesem Produkt gespeichert ist. Schließlich ist hier, was man QueryRoute nennt, die der Einstiegspunkt für Abfragen ist, das ist, was wir verwendet haben, um auf alle Produkte zuzugreifen. Wie Sie aus der QueryRoute sehen können, können wir auf Artikel, Blogs, Sammlungen, Seiten und Produkte zugreifen , wie wir es getan haben. Wenn Sie sich dann innerhalb des Produkts befinden, können Sie hier klicken, um mehr über die Produktverbindung zu erfahren, und Sie navigieren dieser API-Dokumentation, als ob Sie in einer QL-Antwort des Graphen navigieren würden. Dies imitiert, was wir hier gesehen haben, in dem Sinne, dass wir hier auf der QueryRoute sind. Also gehen wir zurück zu QueryRoute, und in unserer QueryRoute gehen wir in Produkte, also hier unten, Produkte. Wenn ich auf Produkte Verbindung klicken, werden Sie jetzt sehen, wir können Kanten oder Seite infundieren, hier gehen wir. Kanten. Wenn ich in Kanten gehe, wird jede Kante einen Knoten und einen Cursor haben, wenn wir danach fragen. Wie Sie sehen können, hat jeder einen Knoten, und dann, wenn wir auf „Knoten“ klicken, gibt es uns ein Produkt, und dann können Sie die Verbindungen zu diesem Objekt und die verfügbaren Felder sehen. Wie Sie sehen können, haben wir auf einige dieser Felder zugegriffen, wir haben auf Beschreibung zugegriffen, Handle ID, und wir haben auch Verbindungen zu den Bildern und Tags zugegriffen. Dies ist definitiv eine fortgeschrittenere Lektion, und es dauerte eine Weile, um herauszufinden, wie man die Storefront-API selbst verwendet. Es ist definitiv nicht etwas, das Sie in einer 20-minütigen Lektion lernen können, aber deshalb ist es eine Bonusstunde. Es ist ein bisschen ein Augenöffner, Ihnen eine andere Möglichkeit zu zeigen , wie Sie Ihre Shop-Daten in einem benutzerdefinierten Storefront darstellen können, oder vielleicht auf einzigartige Weise in Ihrem Online-Design. Es gibt natürlich eine weitere API, die ich zuvor erwähnt habe, nämlich die Admin-API, und wenn Sie in Shopify App Development gehen möchten, ist dies die API, die Sie lernen müssen. Ich habe tatsächlich eine Shopify App selbst mit dieser API erstellt, es war eine ziemlich coole Erfahrung, aber definitiv nicht etwas, das ich in einem 20-minütigen Video jemals abdecken konnte. Das ist vielleicht ein Thema für eine andere Klasse. Aber das ist so ziemlich es Jungs, das sollte einen ziemlich guten Überblick über alles, was mit Shopify Theme Programmierung zu tun haben. Wenn Sie es so weit geschafft haben, möchte ich Ihnen danken und Ihnen gratulieren, dass Sie daran festhalten. Es gibt eine Menge zu Shopify Theme Programmierung, und wenn Sie mehr darüber erfahren möchten, ist der Blog-Beitrag auf meiner Website, Christhefreelancer.com/shopify-liquid-guide/. Es sind über 10.000 Wörter auf Shopify, also wenn Sie sich langweilig oder abenteuerlustig fühlen und eine lange Lektüre über alles haben wollen , Shopify Liquid, offensichtlich können wir nicht 10.000 Wörter des Inhalts in einer einzigen Skill-Share-Klasse abdecken, aber hier würde ich gehen, um mehr über die verschiedenen Töpfe zu erfahren. Wenn Sie Fragen haben, wie immer, lassen Sie sie in Diskussionsfeld unten. Vielen Dank, und wir sehen uns im nächsten. 12. Schlussbemerkung: Das schließt diese Klasse auf Shopify Theme Programmierung so ziemlich ab. Für Ihr Klassenprojekt möchte ich, dass Sie Ihren eigenen Vorlagenabschnitt, Snippet oder ganzes Thema erstellen , wenn Sie sich abenteuerlustig fühlen. Wie wir in dieser Klasse gesehen haben, ermöglicht die Kombination von Liquid Code und JSON Schema es uns, unsere eigenen anpassbaren Vorlagen und Abschnitte zu erstellen. Jetzt ist es deine Chance, etwas zu kreieren, das du dir wünschst , und es mit der Klasse zu teilen, wenn du es so wählst. Wenn Sie mehr über Shopify Theme-Entwicklung und Theme-Programmierung erfahren möchten, folgen Sie mir online und schauen Sie sich meinen YouTube-Kanal für weitere Tutorials an. Schließlich, wenn Sie irgendwelche Tipps oder Anleitungen zu dem, was wir in der heutigen Klasse behandelt haben, müssen Sie unbedingt einen Kommentar in das Diskussionsfeld unten hinterlassen und ich werde mein Bestes tun, um Sie in die richtige Richtung zu zeigen. Vielen Dank wie immer für das Anschauen und ich hoffe, Sie wieder in einigen meiner anderen Klassen zu sehen.