Shopify Hydrogen: So erstellt man eine Headless eCommerce Storefront mit React

1. Einführung: Hallo, Schüler und willkommen zu diesem Kurs auf Shopify Hydrogen. Das React-basierte Framework von Shopify zum Erstellen benutzerdefinierter Storefronts. Ich bin Christopher Dodd. Ich bin freiberuflicher Webentwickler und Top-Lehrer hier auf skillshare.com. Nachdem ich mich in den letzten drei bis vier Jahren auf die Frontend-Webentwicklung auf der Shopify-Plattform spezialisiert habe, habe ich viel Zeit damit verbracht, Storefronts mit einem davon, einem Shopify-Thema, anzupassen . Mitte 2022 startete Shopify jedoch einen neuen Vertriebskanal auf der Shopify-Plattform, über den Händler ein React-Projekt in ihrem Shopify-Shop hosten können . Dieser neue Wasserstoff-Vertriebskanal Kombination mit dem Wasserstoff-Framework von React Hooks, Komponenten und Dienstprogrammen, die speziell für Shopify-Storefronts entwickelt wurden, bietet eine brandneue Möglichkeit das Internet anzupassen Store-Erlebnis für Kunden und eine neue Art der Entwicklung für Entwickler. In der heutigen Klasse werden wir das Shopify Hydrogen-Framework durchgehen , über die wichtigsten Umgebungskonzepte informieren mithilfe des Systems unsere eigene einfache Storefront erstellen. Ich zeige dir, wie du deine neue App im Shopify-Shop installieren kannst . Für diejenigen unter Ihnen, die bereit sind, dieses Paradigma der nächsten Generation für den Aufbau von Storefronts auf Shopify zu lernen dieses Paradigma der nächsten Generation , klicken Sie auf das nächste Video und ich sehe Sie auf der anderen Seite. 2. Schlüsselkonzepte: Bevor wir mit dem Bau unserer eigenen Wasserstoff-Storefront beginnen , ist es wichtig, dass wir eine Reihe von Schlüsselkonzepten verstehen , die alle beim Aufbau einer benutzerdefinierten Storefront zum Tragen kommen Wasserstoff. Wenn ich Wasserstoff sage, könnte ich mich zunächst auf zwei Dinge beziehen. Die meiste Zeit werde ich über das Hydrogen React-Framework sprechen . Aber wenn wir anfangen, unsere Wasserstoff-App in unserem Geschäft bereitzustellen , der Name des Vertriebskanals auf wird der Name des Vertriebskanals auf Shopify auch Hydrogen genannt. Technisch gesehen heißt der Name der Hosting-Lösung, die Shopify für Hydrogen-Storefronts anbietet, Oxygen, wird jedoch aus irgendeinem Grund im Shopify-Adminbereich als Hydrogen angezeigt . Also behalte das im Hinterkopf. Das Shopify Hydrogen-Framework selbst ist so konzipiert, dass es auf einer vorhandenen Technologie namens React aufbaut . Einige von Ihnen sind vielleicht bereits mit React vertraut und/oder versiert, aber unabhängig davon werden wir im folgenden Video kurz auf React eingehen. Es wird definitiv kein tiefer Einblick in React in diesem Kurs sein , aber es ist wichtig, die Grundlagen von React zu verstehen um Wasserstoff nutzen zu können. Der andere Aspekt, der ebenfalls wichtig zu verstehen ist, ist wie wir Daten aus dem Shopify-Backend abrufen werden. Dies geschieht über die sogenannte Storefront-API, eine API, die Shopify für den Abruf von Daten in Bezug auf Kundenerlebnisse bereitstellt . Die API wird als GraphQL-API bezeichnet, was bedeutet, dass unser Projekt, anstatt verschiedene Endpunkte zu treffen , um verschiedene Datenbits zu erhalten, einen einzigen API-Endpunkt gibt , mit dem sich unser Projekt verbindet und fordert die spezifischen Daten , die wir benötigen, über eine sogenannte Abfrage an, die ein bisschen so aussieht. Diese Konzepte allein könnten ein ganz anderer Kurs sein. In den nächsten beiden Videos schauen wir uns jedes einzeln an und dann werde ich ein wenig über das Wasserstoff-Set von Hooks, Komponenten und Dienstprogrammen sprechen , die in diesem Setup eine Rolle spielen. 3. Reagieren: In dieser sehr wichtigen Lektion gehen wir auf einige Grundlagen von React ein. Wenn Sie bereits Erfahrung mit Reaktionen haben, können Sie dieses Video gerne überspringen. Aber für den Rest von Ihnen möchte ich nur sagen, dass Sie keinen vollständigen Kurs über React absolvieren müssen , um mit Wasserstoff zu arbeiten. Bevor ich mit der Wasserstoffentwicklung begann, hatte ich über ein paar Jahre ein wenig React studiert, aber das ist etwas, in dem ich zu diesem Zeitpunkt nicht besonders Experte bin , und dennoch konnte ich es lernen Wasserstoffentwicklung ziemlich einfach. Nein, Sie müssen kein unerfahrener Reaktionsentwickler sein , um Wasserstoff-Ladenfronten zu bauen. Aber wenn Sie keine Ahnung haben, wann es darum geht, zu reagieren, hören Sie sich auf jeden Fall an, was ich Ihnen sagen werde. Reagieren. Was ist das? React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, aber sie wird oft als Framework bezeichnet, da sie eine legitime Alternative zu JavaScript-Frameworks wie Angular oder view darstellt, zwei sehr beliebte Frameworks Sie vielleicht schon einmal gehört haben oder nicht. Sie fragen sich vielleicht , was der Unterschied zwischen einer Bibliothek und einem Framework ist . Im Grunde würde ich sagen , dass Frameworks viel eigensinniger sind. Sie zwingen Sie, Apps auf bestimmte Weise zu erstellen. Gegensatz zu einer Bibliothek können Sie einfach alle Module importieren, die Sie Im Gegensatz zu einer Bibliothek können Sie einfach alle Module importieren, die Sie möchten, und sie einfach verwenden, wie Sie es benötigen. Nehmen wir zum Beispiel React. Hier ist ein Beispiel dafür, wie einfach React sein kann. Ich habe einen Reacts-Spielplatz hier bei playcode.io/react geöffnet. Dies ist nur eine Online-IDE zum Testen einiger Reaktionscodes. Alles was ich getan habe war zu dieser Adresse zu gehen und jetzt habe ich eine einfache React-App. Ich habe hier meine Datei index.html, die im Wesentlichen nur die index.jsx-Datei über die Skript-Tags einbringt . Dann steckt das hier in dieses Root-Div. Wenn wir uns unsere index.jsx ansehen, können Sie hier sehen, dass wir create route on react DOM verwenden , um uns in dieses Route-Element einzufügen und unsere App zu rendern, die sich genau hier befindet. Ein paar Dinge, auf die ich Sie hier aufmerksam machen möchte. Sie können hier sehen, welche Pakete wir verwenden. Sie können hier sehen, dass wir React und React DOM verwenden. Das ist hier wichtig zu beachten, da React eine Bibliothek ist , die für eine Reihe verschiedener Anwendungen verwendet werden kann . Es muss nicht unbedingt eine Sache mit der Frontend-Webentwicklung sein. Es muss keine Web-App oder Website sein . Es könnte sich auch um eine native Telefon-App handeln. Im Fall von React Native. Deshalb ist React ein eigenständiges Paket, aber dann können Sie etwas namens React DOM verwenden. Das verwenden Sie, um Web-Apps und Websites zu erstellen. Es wendet alle Kernfunktionen von React mit der Umgebung unserer Frontend-Webentwicklung an. Das erste, was Sie beachten werden, ist, dass am Anfang praktisch aller dieser JSX-Dateien Importanweisungen sind. Wie gesagt, React ist sehr modular und alles, was wir tun müssen, um es zu nutzen, ist sicherzustellen, dass wir es importieren. In diesen beiden Dateien siehst du, dass du React aus React importierst. Das klingt hier vielleicht offensichtlich, aber wo dies nach oben schaut, befindet sich in Ihren Node-Modulen, siehe hier. Sie können es in diesem Dateibrowser hier nicht wirklich sehen. Wenn Sie React jedoch auf Ihrem Computer installieren und eine package.json-Datei erstellen, werden Sie feststellen, dass auch ein Node-Modul-Ordner erstellt wird, in dem alle Ihre Node-Module installiert werden. Wir werden das etwas später sehen, wenn Sie nicht mit dem Erstellen von JavaScript- oder Node-basierten Projekten vertraut sind. Das Wichtigste zuerst, was wir importieren werden, reagieren. Ein übliches Muster, das Sie sehen werden, ist , dass wir hier eine funktionale Komponente erstellen werden. Du wirst sehen, dass es als Funktion beginnt und dann geben wir dieses HTML-aussehende Zeug zurück. Also, was ist das für ein HTML-Zeug? Das heißt eigentlich JSX. Es sieht aus wie HTML, aber es ist nicht wirklich HTML. Was passiert ist, dass dies in HTML kompiliert und hier auf dem Bildschirm gerendert wird. Sie können hier sehen, dass wir einen H1 Hello React haben einen H1 Hello React und mit der Bearbeitung beginnen, um zu sehen, wie etwas Magie passiert. Das sieht genauso aus wie HTML, und hier wird HTML produziert. Aber das ist kein HTML. Lassen Sie uns eine kurze Pause auf JSX machen, weil es wichtig ist , und einige Dinge mit JSX behandeln. Was ich tun werde und es gibt genug für die App. Aber nur um JSX zu demonstrieren, werde ich hier nur eine weitere JSX-Datei erstellen. Wir können es script.jsx nennen. Ich möchte dir ein paar Dinge zeigen. Insbesondere möchte ich Ihnen einige Dinge zeigen, bei denen JSX von der Syntax von HTML unterscheidet. Es sieht sehr ähnlich aus wie gesagt, aber es ist nicht dasselbe. Hier sind einige Unterschiede. Einer der Unterschiede besteht darin , dass es in JavaScript keine Bindestriche gibt. Wenn wir zum Beispiel sagen, füge ich hier einfach etwas SVG-Code ein. Sie können hier sehen, dass es nicht sehr verbreitet ist, aber bei einigen HTML-Elementen haben Sie möglicherweise einen Bindestrich zwischen zwei Wörtern für einen Attributnamen. Das wird in JSX nicht funktionieren. Wenn Sie so etwas sehen, müssen Sie es nur in CamelCase konvertieren. Ich werde einfach den Strich entfernen und Breite groß schreiben. Wenn wir das jetzt ausführen, weiß ich nicht, ob wir unseren eigenständigen JSX ausführen können Lassen Sie mich das hier in unsere App kopieren. Wenn ich das hier anziehe, siehst du, dass es funktioniert. Aber wenn wir einen Bindestrich verwenden, erhalten wir eine ungültige DOM-Eigenschaft. Hast du das ernst gemeint? Das liegt daran, dass wir in JSX keine Bindestriche in Attributnamen haben können. Das ist ein Unterschied. Der andere Unterschied, den Sie hier sehen werden, anstatt class zu verwenden, müssen wir className in diesem CamelCase-Format erneut verwenden. Der Grund dafür ist class ein reserviertes Schlüsselwort in JavaScript. Wir können hier keinen Unterricht gebrauchen. Das ist ein weiterer Unterschied. Der dritte Unterschied ist, wenn wir hierher zurückkehren, können Sie sehen, dass wir hier einige Zahlen haben. Wir können JavaScript-Ausdrücke in diese Attribute in JSX einfügen. Wenn ich das wegnehmen würde, sind es jetzt 100. Eigentlich wollen wir dieses Rendering auf unserem Bildschirm sehen. Wahrscheinlich keine gute Idee, das als separate Datei zu speichern. Stellen wir das einfach wieder hier ein, damit wir sehen können , wie es auf unserem Bildschirm gerendert wird. Ziehen Sie hier ein wenig ein. Wir können hier tatsächlich einige JavaScript-Ausdrücke einfügen. Was wir tun können, ist anstelle von 100, ein anderes wirklich einfaches für Sie wird hier in einige Klammern gesetzt . Was ist 100? Ist 50 mal 2. Hier können Sie sehen, dass Sie das gleiche Ergebnis erzielen. Wir können hier einen JavaScript-Ausdruck setzen. Natürlich können wir dafür eine Variable setzen . Wenn ich const x gleich 50 mal 2 gehen würde, und dann können wir einfach x hier einstecken. Wenn ich es dann um 4 mal hätte, kannst du unseren Kreis sehen. Wird es größer? Die Höhe sollte größer werden, aber wir müssen vielleicht auch eine größere Breite erstellen. Ich bin mir nicht sicher, was dort los ist. Aber Sie können sehen, ob wir diesen Code überprüfen, wenn ich ihn überprüfe, werden Sie sehen , dass das Ergebnis durchkommt. Es ist ein bisschen eng hier. Los geht's. Sie werden sehen, dass das Ergebnis, das durchkommt, in der Tat 500 für die Höhe beträgt, was 5 mal 10 ist. Wir werden das in dieser Klasse ziemlich oft sehen. Wenn wir React verwenden, setzen wir JavaScript-Ausdrücke und Variablen in Attribute, in Requisiten um. Das ist ein Unterschied zu HTML, wenn wir es mit JSX vergleichen. Eine andere Sache, die ich in diesem Video demonstrieren wollte war, wie dieser JSX-Code in React-Funktionen kompiliert wird , die dann den HTML-Code generieren. Es ist nicht besonders wichtig, aber ich möchte, dass ihr versteht, was hinter den Kulissen vor sich geht. Leider kann ich es dir in dieser Umgebung nicht zeigen. Vielleicht später in der Klasse, wenn wir dieses Projekt oder unser eigenes Projekt einem lokalen Gastgeber unterbreiten. Aber wenn wir in der React-Dokumentation ausführlich auf JSX eingehen , können Sie sehen, ob wir mehr darüber erfahren. Was tatsächlich passiert, ist, dass dieser Code hier in React.createElement kompiliert wird. und dann wirst du den ganzen Code sehen. Was wir tun können, wenn wir wollten, ist, dass wir anstelle von JSX Code wie diesen schreiben könnten. Auf diese Weise müssen wir JSX nicht kompilieren. Aber das ist natürlich viel schöner, als eine Reihe solcher React-Methoden aufzuschreiben , insbesondere wenn Sie verschachteln. Wenn wir eine ganze Reihe von Elementen innerhalb von Elementen verschachteln, würde dies sehr chaotisch und es wäre fast unmöglich, damit zu arbeiten. Es ist sehr praktisch, JSX zu verwenden. Aber ich wollte nur darauf hinweisen, dass dies nicht wirklich das ist, was es für Ihren Browser ausmacht. Das ist es, was es in Ihrem Browser ausmacht, und genau das erzeugt diese Elemente in Ihrer React-Umgebung. Sie können hier auch mehr über die Einführung von JSX lesen. Sie können alles über JSX in der offiziellen React-Dokumentation erfahren. Nochmals, ich ermutige Sie, dies so zu tun, wie wir gesehen haben JSX ist auch ein Ausdruck. Dies wird uns zeigen, wie wir Werte in unser JSX einfügen können , indem wir Attribute angeben Wir können Variablen und andere Daten verwenden , anstatt sie nur als String einzugeben, wie wir es in HTML tun würden. jetzt von JSX herauszoome, um mehr über React im Allgemeinen zu sprechen , entferne ich diese Variable, weil wir sie nicht mehr verwenden. Wir haben bereits über die Inputs gesprochen. Wir werden React nach Bedarf in diesen beiden JSX-Dateien importieren . Aber um das virtuelle DOM zu erstellen, werden wir hier React DOM verwenden. In unseren speziellen Projekten, die Wasserstoff verwenden, müssen wir React DOM nicht verwenden. Ich glaube, dafür sorgt Wasserstoff für uns. Aber wie Sie hier sehen können, werden wir immer Sachen aus React oder aus einer anderen React-Bibliothek importieren , die für diese Klasse React sein wird. Dann wirst du sehen, wie wir Sachen aus Wasserstoff importieren. Was Sie dann haben, sind Ihre Exporte. Wie Sie hier sehen können, importiere ich React und exportiere dann diese Funktionskomponente. Warum exportiere ich es? Nun, ich verwende es tatsächlich in dieser index.jsx-Datei. Sie können hier sehen , dass ich diese App-Komponente aus dieser App-Datei importiere . Wenn ich es in dieser Datei verwende, muss ich es nicht exportieren. Aber wenn ich es in einer anderen Datei verwenden möchte , muss ich es exportieren. Jetzt, wenn ich nur exportiere, ohne Standard danach zu setzen. Ich kann hier mehrere verschiedene exportieren. Ich muss angeben, welche ich importiere, und diese geschweiften Klammern auf beiden Seiten setzen. Diese geschweiften Klammern hier machen das, was als Destrukturierung bezeichnet wird. Wenn ich mehrere Komponenten innerhalb einer Datei exportiere , auch wenn ich hier nur eine exportiere, sage ich nicht Standard. Deshalb muss ich hier rein und das zwischen diesen lockigen Hosenträgern herausziehen. Um Ihnen den Unterschied zu zeigen, wenn ich nur hierher gehe und weil wir nur einen Export haben, kann ich hier einfach Standard setzen. Dann kann ich sie hier drinnen entfernen, und es funktioniert genauso. Aber wenn ich zum Beispiel sagen wollte, eine andere Komponente hier zu erstellen, dann kann ich nicht einfach Standard machen. Sagen wir einfach, ich erstelle eine App2, und dann, whoops, falscher Tab. Ich gehe hier rüber und dann kann ich app2 machen. Ich kann mehrere aus einer Datei importieren. Aber wenn Sie nur einen exportieren, diese gerne entfernen Lassen Sie uns diesen jetzt loswerden und dann hier Standard setzen. Das ist wichtig zu beachten. Sie sehen Standardeinstellungen und nicht die verwendeten Standardwerte. Sie werden sehen, dass die geschweiften Klammern und geschweiften Klammern nicht verwendet werden. Deshalb destrukturiert man manchmal und manchmal nicht. Das sind die Importe und Exporte. Offensichtlich haben wir in dieser Rückkehr gesehen, hier ist JSX. Wenn ich eine andere Funktion erstellen sollte, wie ich sie zuvor gesehen habe, lassen Sie uns diese Standardeinstellung hier entfernen. Nennen wir das einfach eine benutzerdefinierte Schaltfläche. Ich kann durch das Argument hier auf die Requisiten dieser benutzerdefinierten Schaltfläche zugreifen . Was ich tun werde, ist in dieser Rückkehr, ich werde eine Schaltfläche einfügen, gleiche Syntax wie HTML, weil es ein HTML-Element ist. Dann sage ich einfach: Klick mich, sagen wir mal. Dann hier oben, statt dieser SVG, setzen wir unseren benutzerdefinierten Button in Camel Case ein. Wie Sie hier sehen können, haben wir unseren kleinen Klick mich hier. Vielleicht wollen wir dieses Feld dynamisieren. Was wir tun können, ist, dass ich den Text hier eintragen kann. Dann muss ich die Kinder von den Requisiten ziehen. Das wird alles ziehen, was sich zwischen diesen beiden Tags befindet. Ich kann Requisiten holen, Kinder. Da hast du es. Sie können hier sehen, hier klicken oder jetzt klicken, alles, was ich hier eingebe, ist die untergeordneten Elemente dieser Komponente, sodass ich über ihre Requisiten darauf zugreifen kann. Jetzt werden Sie das normalerweise nicht mehr sehen, was Sie sehen werden, ist die erneut verwendete Destrukturierung. Anstelle von props.children kann ich die Kinder in diesem Abschnitt hier destrukturieren und direkt von den Requisiten nehmen . Anstelle von props.children ziehe ich Kinder von den Requisiten und dann kann ich sie dort hinstellen. Dann können Sie hier klicken. Dann könnten Sie einige andere Daten weitergeben . Ich gebe hier einfach ein Attribut ein, nennen wir es einfach Nachricht, und ich sage, ich bin deine Nachricht. Jetzt haben wir diese Requisite, auf die wir von hier aus zugreifen können, und alles, was wir tun müssen, ist das auch durchzuziehen. Wir ziehen Kinder ab, lassen Sie uns eine Nachricht senden, und dann mache ich einfach einen einfachen OnClick. Dann setzen wir einen ClickHandler ein, um meinen ClickHandler hier zu finden , ClickHandler. Dann mache ich einfach eine einfache Warnung mit der Nachricht, die weitergeleitet wurde. Wenn ich jetzt hier klicke, werden Sie sehen, dass wir hier oben eine Warnung erhalten. Ich bin Ihre Nachricht, und das wird über unsere Komponente hier weitergeleitet. Die beiden Requisiten, wir haben unsere Kinder, die wir weitergeben können, und dann können wir auch alle Requisiten weitergeben, die wir definieren. Wir müssen das nur aus unserem Props-Objekt hier oben herausziehen, und dann können wir es verwenden, wie wir wollen, in unserer eigenen benutzerdefinierten Komponente. Wir haben dort einiges durchgemacht, aber hoffentlich habt ihr das Wesentliche verstanden. Auch hier müssen wir nicht eine ganze Klasse in React durchlaufen , um genug zu verstehen, um mit Wasserstoff zu arbeiten. Aber wenn Sie Probleme haben, können Sie natürlich alles recherchieren, was keinen Sinn ergibt, indem Sie in die React-Dokumentation gehen oder einfach bei Google danach suchen. Ehrlich gesagt ist React ein so beliebtes Framework. Es gibt so viele Informationen da draußen. Wenn Sie irgendwelche Probleme haben, fangen Sie einfach an zu googeln, schauen Sie sich einfach die Dokumentation speziell mit React an, und wenn Sie das tun und es fehlschlägt, können Sie jederzeit einen Kommentar hinterlassen unten mit allem, womit Sie zu kämpfen haben. Bevor wir zu den anderen Teilen übergehen , die Sie verstehen müssen bevor wir speziell mit Wasserstoff arbeiten, möchte ich nur die drei wichtigsten Dinge aufschlüsseln , die wir tun werden um aus React zu importieren und zu verwenden. Wie Sie hier sehen können, haben wir Komponenten erstellt, aber wir können auch Komponenten aus bestimmten Bibliotheken importieren. Das werden wir sehen, wenn wir beginnen Komponenten, die bereits von Shopify für uns erstellt wurden, auf Shopify Hydrogen zu importieren . Das wirst du sehr bald sehen. Aber dann können wir natürlich unsere eigenen Komponenten erstellen , wie wir es gerade hier getan haben. Eine weitere Sache, die wir von React und von Shopify Hydrogen importieren werden, ist ein sogenannter Hook. Wenn Sie zur Dokumentation gehen möchten , gibt es irgendwo hier eine Einführung in Hooks. Hooks, los geht's. Hier gibt es einen ganzen Abschnitt, und Sie können über Hooks lesen. Einfach ausgedrückt, ermöglichen Hooks die Verwendung State- und anderen React-Funktionen, ohne eine Klasse zu schreiben. Das könnte für euch schwer zu verstehen sein, für diejenigen unter euch, die React eine Weile nicht benutzt haben. Aber wie Sie hier sehen können, können wir einen gemeinsamen Hook namens useSate aus React importieren. Schauen wir uns dieses Beispiel an. Wenn ich hier darauf eingehe, können Sie Destrukturierung mit dem Gesamtobjekt selbst kombinieren . Los geht's. Ich schnappe mir einfach UseState und importiere jetzt diesen Hook aus React. Was wir tun können, ist erneut zu destrukturieren, wir können die Zustandsvariable und dann die Funktion, die sie setzt, greifen und diese dann von useState übernehmen, indem wir einen Standardwert von Null übergeben. Schnappen wir uns zuerst diesen Teil. Jetzt können wir in unserer Komponente eine count - und eine setCount-Methode abrufen. Das ist alles, was wir brauchen , um diesen Button zu erstellen. Ich ersetze meinen Button hier durch diesen. Jetzt, wo wir darauf klicken, steigt die Zählung , aber Sie können sie nicht sehen, also werde ich hier die Zählung eingeben. Ich setze es einfach direkt in die Schaltfläche, nicht in ein anderes Element, und wenn ich darauf klicke, steigt die Anzahl. Ich möchte das Konzept eines Hooks nur sehr früh in diesem Kurs vorstellen , da wir bestimmte Hooks in Shopify Hydrogen verwenden werden. Die gebräuchlichste davon ist UseShopQuery , mit der wir Daten aus unserer Shopify Storefront-API abrufen und in unserem Projekt verwenden werden. Wir haben hier Komponenten gesehen, und wir haben Hooks gesehen. Die einzige andere Sache sind Dienstprogramme, bei denen es sich im Grunde um alle anderen Funktionen handelt, die wir verwenden werden , um unser Leben beim Bau von Ladenfronten zu erleichtern. Ich gebe ein Beispiel, ich habe dieses Dienstprogramm irgendwo online gefunden. Es ist nur eine Funktion zum Formatieren von Währungen. Wir haben dieses Dienstprogramm bereits in Shopify Hydrogen, daher sollten wir so etwas nicht verwenden müssen. Aber wie Sie hier sehen können, können wir dieses Dienstprogramm nutzen. Fügen wir es einfach direkt in unseren Code ein. Ich werde diesen Komponentencode loswerden. Dies ist in TypeScript geschrieben, also muss ich nur die Typdefinition dort entfernen. Jetzt können Sie sehen, dass es funktioniert. Sagen wir einfach, ob wir einen Preis machen würden. Auch hier kann ich einen Ausdruck einfügen, und sagen wir einfach formatCurrency und werfen 110.10 ein. Jetzt können Sie hier sehen, weil wir die Währung USD und den Währungsstil verwenden . Sie können jetzt sehen, dass die Währung gut formatiert ist. Wenn wir hier einige zusätzliche Dezimalstellen hinzufügen würden, wird es hier immer noch auf die nächsten Cent aufgerundet, und dann setzen wir das $-Zeichen vor. Wenn wir das zum Beispiel so etwas wie Great British Pounds machen würden wie Great British Pounds , können Sie sehen, dass es jetzt stattdessen das Pfundsymbol ist. Das ist es, was ein Dienstprogramm tun wird. Es ist nur eine Funktion, die unser Leben einfacher macht. Wie Sie hier sehen können, haben wir es importiert oder einfach gepackt. Wir könnten natürlich eine neue Datei erstellen und sie dann exportieren und sie dann überall in unserem Projekt verwenden, was das wahrscheinlichere Szenario wäre. Aber ich wollte nur demonstrieren, was ein Dienstprogramm ist, da wir möglicherweise auch einige Utility-Funktionen in unserer Shopify Hydrogen-Storefront verwenden . Das ist es wirklich, Leute. Du kannst natürlich tief in React eintauchen, aber für diesen Kurs ist das alles, was wir wirklich brauchen, um loszulegen. All diese Konzepte, die wir gerade besprochen haben, werden uns helfen die Benutzeroberfläche für unsere neue benutzerdefinierte Storefront-App zu generieren. Aber die andere Seite davon wird sein, wie wir diese Benutzeroberfläche tatsächlich mit der Storefront-API verbinden. Genau das werden wir im nächsten Video behandeln. 4. Storefront API: In dieser Lektion werden wir über die Storefront-API sprechen, die wir zum Abrufen der Daten verwenden würden, die erforderlich sind, um unsere Storefront mit allen Produkt-, Seiten- und Blogbeiträgen zu füllen mit allen Produkt-, Seiten- und Blogbeiträgen Informationen, die wir dem Benutzer zeigen möchten. Um hier einen kleinen Kontext zu bieten, ist die Shopify-API eine der wenigen APIs, die von Shopify bereitgestellt werden. Die beiden gebräuchlichsten, würde ich sagen, sind die Storefront-API und die Admin-API. Die Admin-API ist das, was Sie verwenden würden , um Admin-Funktionen abzuschließen. Während die Storefront-API die API zum Abrufen von Kundeninformationen ist. Ich habe in einigen meiner anderen Videos über die Storefront-API gesprochen . Möglicherweise haben Sie gesehen, wie ich mich mit der API und weniger als 11 meiner Shopify-Theme-Programmierkurse verbunden der API und weniger als 11 habe, und für eine Minute 1820 in meinem YouTube-Video mit JavaScript bei der Themenentwicklung. Wie ich in diesen Videos erwähnt habe, wurde die Storefront-API jedoch nicht für Shopify-Themen entwickelt, sondern ist für jedes andere Szenario gedacht , in dem Sie auf Storefront-Daten zugreifen müssten . Wie Shopify in seiner Dokumentation sagt, kann es überall dort verwendet werden, wo sich Ihre Kunden befinden, z. B. in einer Website-App oder einem Videospiel Dies schließt jetzt auch Shopify-Wasserstoff-Apps ein. Wie funktioniert es in Shopify-Wasserstoff? Die gute Nachricht ist, dass Wasserstoff über einen eingebauten Haken verfügt , mit dem Sie problemlos eine Verbindung zu Daten herstellen und diese abfragen können. Es heißt Use Sharp Query Hook und später in dieser Klasse richten wir unsere Zugriffsdetails in der Hydrogen-Konfigurationsdatei und verwenden dann den Hook, um alle Daten abzurufen , die wir benötigen. Was ich vorerst kurz behandeln möchte, ist die Syntax von GraphQL, der Sprache , mit der wir die Storefront-API abfragen. Das hier heißt grafisch. Es ist eine grafische GraphQL-IDE im Browser. Das klingt vielleicht sehr technisch, aber im Grunde ist das alles eine Möglichkeit für uns, Abfragen zu erstellen und zu testen , bevor wir sie in einer App ausführen. Ich werde Ihnen später zeigen , wie Sie das für Ihr spezielles Projekt einrichten , aber im Moment können Sie sehen, dass ich einen lokalen Server betreibe. Dies ist eigentlich ein Wasserstoffprojekt und zum Glück für uns ist eines der Merkmale diese Grafik. Es ist im Grunde GraphQL mit einem i zwischen dem Graphen und dem QL. Graphiql, ich schätze, so könnte man es sagen. Wir haben dieses Tool integriert und alles, was wir tun müssen, ist, wenn dies unser lokaler Root-Domain-Host 3.000 ist, müssen wir nur Graph iQL danach setzen, und dann erhalten wir Zugriff auf dieses kleine Tool, mit dem wir Führen Sie GraphQL-Abfragen an das Storefront-API-Wasserstoffprojekt aus, mit dem Dieser ist tatsächlich mit dem Hydrogen Preview Store verbunden . Dies ist der Standardspeicher, der in Ihre Storefront-API-Konfigurationseinstellungen geladen wird , wenn Sie Ihre erste Wasserstoff-Storefront erstellen Sie können diese Einstellungen aktualisieren, werden das in einem späteren Video sehen, aber in dieser Klasse werden wir einfach den Hydrogen Preview Store verwenden und enthält bereits eine ganze Menge Daten, sodass wir nicht einmal Beispieldaten für diese Klasse erstellen müssen, wir können einfach verwenden, was wurde uns bereits von Shopify zur Verfügung gestellt. Wir haben hier schon eine Abfrage. Wenn ich hier auf „Ausführen“ klicke, kannst du sehen, dass wir eine Datenstruktur zurückbekommen , die nachahmt, was wir hier schreiben. Ich benutze gerne Einrückungen, also lege ich das hier hin. Was wir zurückbekommen, ist etwas JSON , das die Struktur unserer Abfrage nachahmt. Das ist das Coole an GraphQL, es ahmt nach, was wir in Bezug auf JSON zurückbekommen. Um das ein wenig zu erklären, haben wir hier nur eine grundlegende Abfrage, wir nehmen die Abfragewurzel von sharp, und dann öffnen wir hier eine Auswahl und definieren dann, welche Felder wir zurückgeben möchten. Wir geben nur den Namen des Sharp zurück , der Wasserstoff ist. Aber ich könnte auch diese Feldbeschreibung hinzufügen, und wenn ich das ausführe, werden Sie sehen, dass wir, wenn unsere Anfrage zurückkommt , auch unsere Beschreibung erhalten haben, okay? Wir können hier alle Felder hinzufügen , die auf dem scharfen Objekt existieren Wenn ich die Auswahl komplett entfernen und versuchen würde, das auszuführen, wird es nicht funktionieren, es heißt, dass wird es nicht funktionieren, es heißt, Feld eine Auswahl haben muss. Es gibt bestimmte Felder in Ihrer API, für die eine Auswahl erforderlich ist, und shop ist eines davon, also wird es nicht so funktionieren, als das gesamte Objekt angefordert werden, wir müssen es anfordern die spezifischen Felder innerhalb dieses Objekts. Wie finden wir heraus, auf welche Felder wir auf dem Objekt zugreifen können? Gehen wir zur Dokumentation. Wenn ich einfach in Google nach der Storefront-API suche, sollte ich sie finden können. Hier ist die Seite in der Dokumentation, die GraphQL-Storefront-API von Shopify und ehrlich gesagt ist ihre Navigation etwas schwierig zu navigieren, aber ich möchte in Kommentarobjekte gehen, hier reingehen und Wenn wir nach unten scrollen, ist das nicht das, wonach ich suche, Online-Shop ist die Kategorie, nach der ich suche, ich gehe zu Objekten, wir können hier das Shop-Objekt sehen, sodass wir sehen können, dass der Shop eine Sammlung von allgemeinen Einstellungen und Informationen über den Shop und hier sind die Felder, also greifen wir auf den Namen des Shops, die Beschreibung, wir können auch Metafelder darauf bekommen. Wir können die primäre Domain bekommen, also wenn ich diese primäre Domain hinzufügen möchte, ist das Gute an der Verwendung dieser Schnittstelle, dass das Gute an der Verwendung dieser Schnittstelle sie automatisch vervollständigt wird. Ich kann dort die primäre Domain einwerfen und es erfordert eine Auswahl. Wenn wir das verwenden wollen, müssen wir uns nur das ansehen, was der Datentyp ist. Wie Sie sehen können, gibt es auch hier eine Reihe von Auswahlmöglichkeiten , also muss ich eine Auswahl für diese öffnen und dann ist URL eines der Felder darauf. Ich kann das ausführen und dann können wir jetzt die primäre Domain-URL bekommen. Nun, eines der schwierigsten Dinge an GraphQL, das ist bis jetzt ziemlich einfach. Aber wenn wir anfangen, mit relationalen Verbindungen zu arbeiten, werden wir anfangen, etwas zu sehen, das als Kanten und Knoten bezeichnet wird. Damit meine ich, wenn wir hier reingehen und etwas eingeben, das ein Plural ist, können wir es nicht für ein Shop-Objekt tun, aber gehen wir zurück zu unserer Abfrageroute hier und wenn ich Sammlungen eintippe, wie Sie hier sehen können, wird die Collection-Verbindung zurückgegeben. Hier können wir auf eine bestimmte Sammlung abzielen, aber wenn ich hierher gehe und Sammlungen mache, muss ich jetzt Kanten und Knoten verwenden, okay? Ich muss auf die Kanten dieser Sammlungsliste zugreifen und dann die gewünschten Daten für jede Sammlung innerhalb dieser Sammlungsliste hier unter Knoten abrufen jede Sammlung innerhalb dieser Sammlungsliste . Ich kann mir den, sagen wir den Namen mit dem Griffgummi schnappen sagen wir den Namen mit und wenn ich dann hier auf Run drücke, muss ich ihn wahrscheinlich hier in den Umkreis legen. Wie es hier heißt, müssen Sie zuerst oder zuletzt angeben. Das bedeutet , dass ich angeben muss wie viele Collection-Objekte ich zurückgeben möchte, damit ich die ersten 10 anfordern kann. Ich führe das aus. Sie können hier sehen, dass ich ein Objekt zurückbekomme , das der Struktur hier ähnelt , ich erhalte zehn Sammlungen oder maximal zehn Sammlungen zurück, es gibt nur 1, 2, 3, 4, 5, 6, glaube ich, Kollektionen in unserem Geschäft insgesamt, also bekommen wir die ersten 10. Wenn nur sechs existieren, erhalten wir sechs zurück und weil wir nur nach dem Handle gefragt haben, erhalten wir nur das Handle auf jedem Knoten zurück. Nun, diese Sache mit Kanten, Knoten ist ein bisschen verwirrend aber Sie werden sich daran gewöhnen, so wie ich es mir gerne vorstelle , ist, dass wir mehr als nur die Kanten einer bestimmten Sammlungsliste zurückbekommen können , jede Liste für diese Angelegenheit. Wenn ich hier unter Kanten gehe, kann ich hier auch ein Objekt namens Seiteninfo bekommen, das eine Auswahl ist und dann kann ich sehen, ob es eine nächste Seite hat. Wenn ich hier rübergehe und das erneut ausführe, erhalte ich nicht nur die Daten, nach denen ich suche, sondern auch die Informationen für die Paginierung, die mir sagen, ob es eine nächste Seite gibt, aber nicht. Wenn ich das auf drei setze, werden mir nur die ersten drei und die zweiten drei angezeigt und ich führe das erneut aus. Wenn wir jetzt nach unten schauen, erhalten wir nur die ersten drei Ergebnisse und wir werden jetzt wahr für die nächste Seite. Ähnlich wie bei node können wir unter den Knoten gehen und etwas eingeben, das sich Cursor nennt. Lass uns das überprüfen und sehen, was zurückkommt. Wie Sie sehen können, haben wir jetzt diese kleine ID hier auf jedem Knoten, die uns eine Adresse für diesen bestimmten Knoten gibt. Es klingt vielleicht ziemlich kompliziert, warum können wir nicht einfach eine Liste zurückgeben, aber es geht zurück zu relationalen Verbindungen zwischen diesen verschiedenen Ressourcen. Weil diese verschiedenen Knoten selbst Ressourcen sind und wir eine Verbindung zu ihnen zurückgeben. Es sind nicht nur Daten innerhalb einer Sammlung. Es sind auch Produktdaten, die Teil mehrerer Sammlungen sein könnten und daher sieht es kompliziert aus, aber alles, woran wir uns erinnern müssen, ist , auch wenn wir keine Paginierung verwenden, also wenn ich diese entferne, achten Sie nur darauf, Kanten und Knoten zu verwenden , wenn wir Verbindungen in dieser Liste behandeln . Bevor wir über das Hydrogen-Framework sprechen , wollte ich Ihnen nur ein paar weitere Beispiele zeigen , womit Sie in Bezug auf GraphQL umgehen könnten , während Sie benutzerdefinierte erstellen Ladenfronten, die Wasserstoff verwenden. Ein paar Beispiele finden Sie in diesem Tutorial, das von Shopify bereitgestellt wird. Im Wesentlichen handelt es sich bei dieser Klasse sowieso um eine Videoversion davon. Wir werden viel von dem verwenden, worüber in diesem Tutorial gesprochen wird. aber wir werden auch nicht viel davon verwenden. Ich werde versuchen, es ganz einfach zu halten. Ein Großteil dieses Tutorials, das ich gefunden habe, ist wirklich vorangekommen, wenn es darum geht, viel Code hinzuzufügen, was vielleicht nicht viel Sinn ergibt. Die Klasse wurde so konzipiert, dass sie für euch etwas langsamer durchläuft. Aber ich möchte Ihre Aufmerksamkeit auf einige GraphQL-Abfragen lenken, die Sie möglicherweise verwenden. Wie Sie sehen können, haben wir die Abfrage, die wir zuvor gesehen haben, bei der auf Name und Beschreibung im Shop zugegriffen wird, also ist das eine sehr einfache Abfrage dort. Wenn ich etwas weiter nach unten scrolle, bin ich mir nicht sicher, ob es auf dieser Seite oder auf der nächsten Seite ist. Lass uns eine Sammlungsseite erstellen, scrolle nach unten. Hier können Sie sehen, dass wir hier Sammlungen haben. Wir können den Kantenteil tatsächlich überspringen, also können wir einfach Knoten schreiben anstatt Kanten zu schreiben, und dann Node Singular. Wenn ich hier Kanten entfernen und das ausführen möchte, werden Sie sehen, dass wir die Knoten zurückbekommen, ohne das Wort Kanten eingeben zu müssen, also ist das auch eine Option. Wie Sie hier sehen können, haben wir dann den Parameter um die ersten acht Acht einer bestimmten Sammlung zu erhalten, durch einen Griff gehen , den wir später in dieser Klasse sehen werden, und dann holen wir uns die erste Variante von jedem Produkt. Auch hier werden wir in der Klasse etwas Ähnliches machen. Ich wollte nur ein paar Beispiele durchgehen und sehen, ob es etwas Theoretisches gibt, das ich euch sagen muss, bevor wir anfangen, obwohl das ziemlich ähnlich ist wenn ich auf die nächste Seite gehe. Folgendes wollte ich Ihnen zeigen , bevor wir anfangen, ist die Verwendung dieser Fragmente. Fragmente sind so, als ob Sie an die Entwicklung von Shopify-Themen gewöhnt sind , können Sie sich das fast wie ein Snippet vorstellen. Es ist ein wiederverwendbarer Code, den wir in andere Teile unserer GraphQL-Abfrage einbinden können . Wir definieren hier dieses Fragment, das angibt, welche Felder wir in den Medien haben möchten. Dieses ganze Fragment hier sagt uns , welche Auswahl von Feldern wir wollen und dann können wir sie mit diesem Punkt, Punkt, Punkt dort einfügen, wo wir es brauchen. Anstatt hier alle Medienfelder aufzuschreiben, können wir einfach das Fragment erweitern , das wir hier oben erstellt haben. Das ist praktisch, wenn wir diese Auswahl in mehreren Bereichen unserer Abfrage wiederverwenden möchten. Die andere Sache hier drüben, die Sie bemerken sollen, ist dieser Punkt, Punkt, Punkt und dann weiter. Hier sieht es ähnlich aus in Bezug auf die drei Punkte, aber genauso unterschiedlich in dem Sinne, dass diese Auswahl nur zurückgegeben wird, wenn es sich bei dem Typ um ein Medienbild handelt. Es wird diese Auswahl zurückgeben, wenn das Medienfeld, das zurückkommt, ein Medienbild ist. Diese Auswahl wird zurückgegeben, wenn es sich um ein Video handelt. Diese Auswahl wird zurückgegeben, wenn es sich um ein 3D-Modell handelt , und diese Auswahl, wenn es sich um ein externes Video handelt. Ich denke, das ist der Grund, warum es in einem Fragment erstellt wurde , damit wir nicht den gesamten Code in unserer Auswahl hier verschachteln. Ich bin mir nicht sicher, ob wir in dieser Klasse unbedingt Fragmente verwenden werden. Wir werden es sehr einfach halten. Aber ich wollte das nur erwähnen, während Sie sich Beispiele von Shopify ansehen Außerhalb dieses Kurses fragen Sie sich vielleicht, was hier vor sich geht. Schauen Sie auf jeden Fall nach GraphQL-Fragmenten , wenn Sie mehr darüber erfahren möchten. Lass mich runtergehen und sehen, ob ich noch etwas mit euch teilen möchte. Wie ihr hier sehen könnt, Leute, wirft dieses Tutorial sehr schnell viel Code ein, weshalb ich das nicht genau für diese Skillshare-Klasse verfolge . Ich denke, sie springen etwas zu schnell in bestimmte Teile. Ich lasse mich zwar nicht gerne in die Länge ziehen, ich mag es, viele Dinge in einer Schritt-für-Schritt-Reihenfolge zu behandeln , damit ihr verstehen könnt, was in jeder Phase vor sich geht, also denke ich, dass es besser ist langsamer zu werden und tatsächlich tief zu verstehen, was vor sich geht , anstatt so viel voranzukommen. Meiner Meinung nach glaube ich, dass sie ein bisschen zu weit voraus sind , besonders für jemanden, der React noch nie benutzt oder neu bei React ist Dieses Tutorial geht und springt direkt rein, hat viele Details. Offensichtlich ist vieles davon nur React-Code. Das ist das Wichtigste, was ich euch zeigen wollte. Ich wollte euch zeigen, wenn ich hier zurückkehre , das Fragment-Zeug. Lass mich das einfach in der Dokumentation für euch finden, wenn ihr euch das später ansehen wollt. Hier sehen Sie die GraphQL-Dokumentation, die offizielle auf graphql.org. Wenn wir uns den Abschnitt über Fragmente ansehen, können Sie hier näher darauf eingehen, was Fragmente sind. Das ist das einzige komplexe Beispiel, das ich in den Shopify-Beispielen von GraphQL gesehen habe . Wir werden wahrscheinlich keine Fragmente in dieser Klasse verwenden, aber nur für den Fall, dass Sie das an einem Beispiel wie in der Shopify-Dokumentation sehen an einem Beispiel wie in der und sich fragen , was dort vor sich geht. Aber wir werden versuchen, es so einfach wie möglich zu halten und dann versuchen , von dort aus zu erweitern. Aber es ist wichtig, GraphQL zumindest auf einer grundlegenden Ebene zu verstehen GraphQL zumindest auf einer grundlegenden Ebene Bevor wir uns mit der Erstellung unserer Projekte beschäftigen, müssen wir wissen, wie wir die Storefront-API abfragen um die Daten zu erhalten, die für den Aufbau benutzerdefinierter Storefronts erforderlich sind. Deshalb müssen wir eine kleine Lektion über GraphQL machen. Im nächsten Video werden wir das Shopify Hydrogen-Framework behandeln . 5. Das Shopify Hydrogen: In dieser Lektion werden wir nun über das Hydrogen-Framework sprechen, dh die Reihe von Hooks, Komponenten und Dienstprogrammen, die Shopify bereitstellt um uns bei der Erstellung benutzerdefinierter Storefronts zu unterstützen. Für den größten Teil dieses Kurses werde ich Wasserstoffhaken und -komponenten erläutern, während wir unser eigenes Wasserstoffprojekt durcharbeiten. Aber es gibt ein paar Konzepte in Bezug auf Wasserstoff, die ihr verstehen sollt, bevor wir nicht weiterkommen. Erstens, wenn wir hier zur Datei App.Server.jsx gehen, werden Sie feststellen, dass diese Datei ziemlich ähnlich aussieht , egal welches Wasserstoff-Projekt Sie sich ansehen. Sie haben genau hier diese RenderHydrogen-Funktion, die für die Flüssigkeitszufuhr verantwortlich ist. Flüssigkeitszufuhr bezieht sich in diesem Fall auf serverseitiges Rendern. Im Grunde ist dies die Funktion, die Ihr Projekt als Wasserstoff-App einrichtet. Nachdem Sie RenderHydrogen hier oben importiert haben, die anderen Top-Level-Komponenten, die Sie wahrscheinlich bemerken werden beziehen sich die anderen Top-Level-Komponenten, die Sie wahrscheinlich bemerken werden, auf Routing und Bereitstellung. In einem typischen React-Projekt können Sie etwas wie React Router verwenden, eine weitere Bibliothek für die Handhabung des Routings, aber Hydrogen verfügt über ein integriertes Routing. Durch die Kombination der Router-Komponente und der FileRoutes-Komponente können wir auf einfache Weise ein grundlegendes Routing in unserer Anwendung einrichten , das die Dateistruktur unseres Projekts nachahmt . Zum Beispiel in unserem Routenordner, wenn ich hier drüben klicke, wenn ich einen Katalog erstelle. Das werden wir später in der Klasse tun, aber nur um Ihnen im Voraus zu zeigen, wenn ich eine catalog.server.jsx-Datei erstelle, kann ich darauf zugreifen, indem ich catalog nach der Route-Domain unserer Anwendung eintippe. Wenn ich das ausführe; es läuft momentan nicht, aber wenn ich den Befehl yarn dev oder npm run dev ausführe, werden wir das auf localhost 3001 ausführen. Ich betreibe gerade ein anderes Geschäft, weshalb es bei 3001 und nicht bei 3000 liegt. Wenn ich befehle, klicke darauf, du siehst Hello World hier. Wenn ich zurück in meinen Code-Editor gehe und lass uns einfach etwas in catalog.server.jsx einfügen. Nehmen wir uns das, was wir in index.server.jsx haben , und ersetzen wir es einfach Catalog und ersetzen es hier durch Catalog mit einem Kapital. Drücke darauf „Speichern“. Wechseln Sie im Browser zurück zu unserer App. Wie Sie hier sehen können, wird die Indexroute ausgeführt, die, wenn wir schauen, nur ein Div mit Hello World erstellt, damit es übereinstimmt. Wenn ich dann hier rüber gehe und nach unserem Route-Domain-Katalog stelle, können Sie jetzt das Wort Katalog sehen. Auf diese Weise erhalten wir integriertes Routing in unsere Anwendung. Wir legen einfach einen Router ein und wickeln ihn in FileRoutes ein, sodass unser Routing nachahmt, was wir in diesen Routenordner legen. Wir können die Verschachtelung über verschachtelte Ordner durchführen. Es ist eigentlich ganz einfach, die Verschachtelung mit Shopify Hydrogen einzurichten . Ich kann auch einen dynamischen Wert erzielen. Sagen wir einfach, ich hatte eine verschachtelte Route für Sammlungen. Ich erstelle hier einen Sammlungsordner. Dann kann ich auch eine dynamische Route erstellen. Ich kann handle als Variable verwenden, server.jsx, und dann werden wir es in diesem Video nicht tun , weil wir den Use Shop Query Hook einbringen und mit der Abfrage der API beginnen müssen, die wir später eingehen werden Video. Aber im Grunde ändere ich das jetzt einfach in Collection. Wenn wir Zugriff auf die Sammlung hätten, können wir beginnen, die Sammlung, die wir uns ansehen, dynamisch zu nehmen und vielleicht ihren Titel oder so etwas herauszugeben. Wir können auch diese dynamischen Routen erstellen. Das wird leben, sagen wir einfach, unsere Kollektion hieß Schuhe, also gehen wir einfach auf diesen Weg, Kollektionen-Schuhe, und dann wird dieser Schuhteil zum Griff, und so würde es uns das dienen Datei über diese Route. Ich kann auch die Routes-Komponente verwenden. Es ist derzeit nicht importiert, aber wir können die Route-Komponente aus Shopify Hydrogen importieren . Damit können wir hier unten eine Route definieren. Dies ist praktisch, um beispielsweise eine Sammelroute für ganze 404 Seiten zu erstellen . Wenn ich eine NotFound-Komponente erstelle, kann ich diese dort laden. Wenn die URL dann nicht über FileRoutes geht, kann sie stattdessen diese Sicherungsroute durchlaufen. werden wir auch in dieser Klasse sehen. Dann sind die anderen Komponenten, die Sie sehen werden, die Provider-Komponenten. Wie Sie hier oben sehen können, ist Shopify Provider die Top-Level-Anbieterkomponente von Shopify Hydrogen. Wir haben das um den Router gelegt, sodass wir auf jeder Seite Zugriff auf die wichtigsten Shopify-Funktionen wie den Use Shop Query Hook haben , den wir auf praktisch jeder Route verwenden werden. Dieses Muster der Verwendung einer Provider-Komponente mit verwandten Komponenten und Hooks ist etwas, das Sie wahrscheinlich in verschiedenen Teilen Ihrer Anwendung sehen werden. Beispiele hierfür sind der CartProvider für die Bereitstellung der Warenkorb-Funktionalität, der ProductOptionsProvider zum Einrichten von Zuständen zur Verfolgung der aktuell ausgewählten Variante und die auf einer Produktseite ausgewählte Option . und CartlineProvider, der einen einfachen Zugriff auf Daten einer einzelnen CartLine ermöglicht. Dies sind nur einige Beispiele für einige der verfügbaren Komponenten im Shopify Hydrogen-Framework, deren vollständige Liste Sie hier in der offiziellen Shopify-Dokumentation finden . Als Tipp: Wenn Sie sich jemals verloren fühlen, was eine bestimmte Komponente oder ein bestimmter Hook tut, können Sie einfach Google Shopify Hydrogen, gefolgt vom Namen des Hooks oder der Komponente, und das sollte leiten Sie normalerweise auf die entsprechende Seite der Shopify Hydrogen-Dokumentation weiter. Denken Sie daran, dass Hooks im Allgemeinen mit einem kleinen Anfangsbuchstaben so aussehen , während Komponenten alle mit einem Großbuchstaben beginnen. Dies dient dazu, sie von normalen HTML-Tags zu unterscheiden. 6. Erste Schritte mit Wasserstoff: Lassen Sie uns kurzerhand mit Bau unserer Wasserstoff-Ladenfront beginnen. Wir haben viel über Theorie gesprochen, es ist Zeit, hier in die Praxis einzusteigen. Es gibt zwei Möglichkeiten, wie wir loslegen können. Nummer 1, du kannst es so machen, wie ich es gemacht habe, was dieser Dokumentation hier gefolgt ist, shopify.dev/custom-storefronts/hydrogen/ getting-started/quickstart. Suchen Sie im Grunde einfach in der Navigation danach. Hier können Sie in Schritt 1 sehen, dass wir eine Wasserstoff-App erstellen können. Ich habe NPM benutzt, bis ich auf dieses Caching-Problem gestoßen bin , das mich dazu zwang, Yarn zu verwenden. Wir werden in einer Sekunde ein bisschen darüber sprechen. Jetzt benutze ich Yarn, aber du kannst auch NPM verwenden. Es ist wichtig zu beachten , dass Sie diese Tools installiert haben müssen, wenn wir sie verwenden. Sie müssen auch sicherstellen, dass Sie auch die neueste Version von Node installiert haben . Dies wird jedes Mal auftauchen , wenn wir Paketmanager einsetzen. Wenn Sie nicht vertraut sind, ist node.js die JavaScript-Laufzeit, wir brauchen das, das ist der Kern von NPM und allem, was wir in diesem Projekt tun werden. Stellen Sie sicher, dass Sie die neueste Version davon haben. Dann ist NPM Node Package Manager, es sitzt darüber und hilft Ihnen bei der Installation und Ausführung von Node-Paketen. Wir müssen sicherstellen, dass wir die neuesten Versionen davon haben. Wenn Sie Yarn verwenden möchten, können Sie auch Yarn installieren. Die Details zur Installation all dieser Befehlszeilenschnittstellentools Sie auf den jeweiligen Websites. Ich werde dir zuerst zeigen , wie es so geht. Ich öffne meine Lieblingsterminal-Anwendung, sie heißt iterm. Ich maximiere das für Sie, damit Sie leichter sehen können. Räumen Sie das ganze Zeug dort ab. Ich navigiere dafür einfach zu meinem Desktop, also gehe ich zu CD Desktop. Dann lassen Sie uns diese Befehle ausführen. Lass uns einfach NPM init laufen lassen, Shopify Hydrogen. Es heißt, dass Sie die folgenden Pakete installieren müssen. Ja. Ich muss mir nur etwas Zeit geben, um es hier zu verarbeiten. Hier haben Sie die Möglichkeit, den Demo Store oder Hello World zu betreiben . Demo Store ist ein Wasserstoffprojekt mit umfassenderem Funktionsumfang. Ich empfehle nicht, den Demo Store zu installieren , um Wasserstoff zu lernen, da er viel Code und viel Setup enthält . Wenn Sie nur Wasserstoff lernen, ist es besser, es einfach zu halten. Ich gehe gerne mit Hello World. Dann ist hier eine Frage der Präferenz: Wenn Sie nicht wissen, was TypeScript ist oder nicht TypeScript verwenden, dann wählen Sie einfach JavaScript. Ich nenne das Custom Storefront. Jetzt wird der Code aus dem Wasserstoff-Repository heruntergeladen . Jetzt, nach einiger Zeit, ist die Installation abgeschlossen. Jetzt öffne ich ein neues Fenster oder Visual Studio Code, und wir können mit der Ausführung dieses Projekts beginnen. Ich werde ein neues Fenster öffnen und die Größe einfach an Ihren Bildschirm anpassen. Dann klicke ich auf „Öffnen“, gehe zu unserem Desktop und öffne diesen benutzerdefinierten Storefront-Ordner. Wenn wir ein Terminal innerhalb dieses Projekts ausführen, können wir dies innerhalb des Projekts mit Visual Studio-Code oder mit unserer anderen Terminalanwendung tun. Ist in unserem Code-Editor einfach einfacher, da wir bereits zu diesem Ordner navigiert sind. Jetzt muss ich nur noch npm run dev tun , um das auszuführen. Wie Sie hier sehen können, heißt es, dass wir jetzt bei localhost 3.000 laufen. Ich drücke die Befehlstaste , um das zu öffnen. Wie Sie sehen können, steht nur Hello World. Der Grund, warum dort Hello World steht, ist, wenn wir hier in unseren src-Ordner gehen und in unsere Indexroute gehen. Gleich hier im Routenindex siehst du Hello World. Denken Sie daran, dass wir im letzten Video bereits ein wenig darüber gesprochen haben , was in der app.server.jsx-Datei hier vor sich geht, also werde ich nicht näher darauf eingehen, aber das ist das Herzstück Ihrer App hier. Wir haben unseren Shopify-Anbieter , der im Grunde alle Funktionen bietet , die wir für unsere Wasserstoff-App benötigen. Dann ziehen wir ihm natürlich Router- und Dateirouten für unser Routing. Diese andere Komponente, die wir aus React importieren, ist zu diesem Zeitpunkt eine experimentelle Funktion in React. Wenn wir uns die Seite für Spannung auf der Reacts-Website ansehen, können Sie hier sehen, dass hier viel Rot ist. Im Grunde handelt es sich um eine Suspense-Komponente, mit der Sie warten können, bis ein Code geladen wurde, und deklarativ einen Ladestatus angeben. Dies ermöglicht uns das asynchrone Laden innerhalb dieser beiden Tags. Wir könnten stattdessen, und lassen Sie mich das jetzt einfach tun , anstatt einen Null-Fullback zu haben, nur zum Laden. Was ich getan habe, um uns Einstieg zu erleichtern, damit wir hier keine Zeit verschwenden, ist, dass ich das gesamte CSS für Sie erstellt habe, sodass wir kein CSS schreiben , während wir dieses Projekt codieren. Ich habe auch die Route index.server.jsx aktualisiert, damit wir das Muster sehen können , das in vielen Routen passieren wird , wo wir eine Reihe von Komponenten und Hooks eingeben, wir exportieren eine bestimmte Komponente, und darunter schreiben wir unsere Anfrage. Was du tun kannst, das ist die zweite Option, ist, dass du das Storefront-Projekt klonen kannst, das ich auf meinen GitHub hochgeladen habe, das ist ein öffentliches Repository. Das ist im Grunde dasselbe als ob Sie das tun würden, was wir hier in unserem Terminal getan haben hier in unserem Terminal , indem Sie ein neues Wasserstoffprojekt und Hello World ausgewählt haben, außer dass ich das aktualisiert habe index.server.jsx-Datei, um das fortlaufende Muster zu demonstrieren , das wir auf vielen Routen sehen werden. Ich habe hier auch ein paar CSS hinzugefügt. Ich werde auch die Zweige aktualisieren, damit Sie auch den Endpunkt sehen können. Ich ermutige Sie, anstatt es so zu machen, ermutige ich Sie, dieses Projekt zu klonen, npm auszuführen , zu installieren und dann gemeinsam mit genau demselben Projekt weiterzumachen. Was ich tun werde, lass das und dann werde ich, lass uns das einfach beenden. Dann navigiere ich in meinem Item hier zu meinem Code-Ordner, gehe in meinen Skillshare-Ordner, dem ich meine Skillshare-Projekte abgelegt habe, und lass uns git clone hier ausführen. Ich gehe Git Clone und kopiere diese URL. Alles was ich tun muss, ist auf die Bildschirmschaltfläche zu klicken und dann die HTTPS-Adresse zu kopieren, und jetzt wird es das Repository auf meinen Computer herunterladen. Lassen Sie uns in die Storefront der Wasserstoffklasse navigieren. Dann führen wir von hier aus einfach npm install aus, um alle unsere Node-Module zu installieren. Dies geschieht automatisch , wenn wir den vorherigen Befehl von npm init Shopify hydrogen ausführen . Es führt npm install für dich aus. Wenn wir ein GitHub-Repository herunterladen das das Node-Projekt besagt, wird die Node-Moduldatei ignoriert, da dies kein Code ist, der spezifisch für dieses Projekt ist und nur gespeichert die Verweise in der package.json-Datei. Wenn Sie dann npm install ausführen , werden alle Abhängigkeiten installiert. Nur ein bisschen zusätzlicher Kontext für diejenigen , die mit Node-Projekten nicht allzu vertraut sind. Los geht's, wir haben unsere Abhängigkeiten installiert. Jetzt öffne ich Visual Studio Code erneut. Bringt das auf unsere Bildschirmgröße für euch. Dann öffne ich diesen Ordner. Gehen Sie in Code, Skillshare, Storefront der Wasserstoffklasse. Diese Registerkarte wird dort entfernt. Sie können sehen, ob wir in den SRC-Ordner gehen, in index.css haben wir das gesamte CSS, das ich bereits für dieses Projekt geschrieben habe , und wenn wir dann in unsere index.server.jsx-Route gehen , haben wir das hier. Lassen Sie uns ein neues Terminal direkt in unserem Projekt betreiben . Wir werden all diesen nervigen Code löschen , der auftaucht. Das ist nur eine Sache mit mir. Mach dir darüber keine Sorgen. Dann lassen Sie uns unseren Befehl zum Ausführen des Servers ausführen, npm run dev, und dann öffnen wir localhost:3000. Ich werde diese anderen Tabs los. Jetzt, da wir unser Projekt bereits vor Ort haben und Sie sehen können, haben wir einen Titel und eine Beschreibung. Also, wo kommt das her? Ich wollte die Datei index.server.jsx aktualisieren, um Ihnen ein Muster zu zeigen , das wir auf praktisch allen unseren Routen verwenden werden . Wie wir dieses Projekt durchgehen werden, ist, dass wir jeweils einen Abschnitt erstellen. Wir machen die Katalogseite. wir machen die Sammlungsseite. Wir machen die Produktseite und aktivieren dann die Code-Funktionalität. Im Grunde das Muster, das wir verwenden werden, und wenn Sie dies in Shopify verstehen können , wie die Entwicklung durchgeführt wird, dann sind Sie auf dem besten Weg, jede Art von Projekt zu programmieren. Das Muster ist das. Wir importieren, was wir brauchen, aus Shopify-Wasserstoff , exportieren eine Komponente und erstellen dann unsere Abfrage. Jetzt ist das nicht in Ordnung, weil wir die Abfrage hier oben in unserem UseShopQuery-Hook verwenden. Aber aus welchem Grund auch immer in den Beispielen setzt Shopify die Definition ihrer Abfrage am Ende, also werde ich dieser Reihenfolge folgen. Ich werde das nur für eine Sekunde minimieren . Warte mal, das hat es maximiert. Lassen Sie mich sehen, ob ich hier einfach etwas mehr Platz schaffen kann, damit wir, nein, das erstellt einen neuen Tab. Vielleicht lege ich das für eine gewisse Zeit weg, weil ich möchte, dass Sie sich ansehen , was hier in seiner Gesamtheit vor sich geht. Lassen Sie uns das entfernen, damit wir uns das genauer ansehen können. Was hier passiert ist, wenn Sie sich daran erinnern, dass es in der vorherigen index.server.jsx nur eine einfache Komponente gab , die ein Div mit Hello World enthielt. Das wird nicht besonders nützlich sein, da es sich überhaupt nicht um dynamische Inhalte handelt. Aber was wir in diesem Kurs tun werden , ist, dass wir dynamische Inhalte aus Ihrem Geschäft einbringen werden . Ich werde die Seite hier nicht neu laden , weil ich sie bereits heruntergefahren habe, aber hier können Sie sehen, dass wir Wasserstoff haben und dann haben wir eine benutzerdefinierte Storefront, die mit Wasserstoff betrieben wird, Shopifys reaktionsbasierte Rahmen für kopfloses Bauen. Woher kommt das? Denn wenn wir hier hineinschauen, können Sie sehen, dass dies beide dynamische Werte sind. Was wir tatsächlich tun, ist, dass wir diese Informationen aus der Storefront-API abrufen. Die drei Dinge, die wir hier aus Shopify-Wasserstoff importieren , sind der wichtige UseShopQuery-Hook, dem wir die Storefront-API abfragen. Wir bringen hier dieses Objekt namens CacheLong ein. Dies ist nur eine Caching-Strategie, daher ist hier nichts allzu komplexes los. Wir können dies leicht ersetzen , indem wir die Caching-Strategie aufschreiben. Es hilft uns nur, ein bisschen Zeit zu sparen , indem wir diesen kleinen Nutzen aus Wasserstoff herausholen. Dann ist das hier ein Dienstprogramm , das uns hilft, Syntaxhervorhebung mit unseren GraphQL-Abfragen durchzuführen , obwohl es nicht wirklich so aussieht , als würde es in meinem speziellen Setup funktionieren , aber das ist in Ordnung. Das brauchen wir nicht unbedingt, das ist einfach schön zu haben. Was wir hier tun, also haben wir hier unsere Home-Komponente die auf der Indexroute läuft, und in unserer Rückgabeanweisung hier geben wir JSX zurück, das wir zuvor in der Theorie gesehen haben. Ich habe hier schon einen Kurs eingerichtet. Auch dies wird kein CSS-Kurs sein, also werde ich nur Klassennamen eingeben , die mit dem von mir erstellten CSS übereinstimmen , damit wir von Anfang an etwas Styling bekommen können. Alles was wir tun müssen, ist die Übereinstimmung mit unserer CSS-Datei hier herzustellen . Aber auch hier können Sie dies vollständig bearbeiten, wie Sie möchten. Ich wollte mich einfach nicht mit CSS in dieser Klasse beschäftigen, da dies keine CSS-Klasse ist. Zurück zu unserer index.server.jsx-Datei hier, was wir tun, ist, dass wir mit unserer GraphQL-Abfragezuweisungsstrategie ein Objekt an useShopQuery übergeben mit unserer GraphQL-Abfragezuweisungsstrategie ein Objekt an useShopQuery unserer GraphQL-Abfragezuweisungsstrategie ein Objekt an useShopQuery und dann sagen wir preload: true. Dies ist nur eine grundlegende Standardeinstellung , die Sie in den Shopify-Beispielen sehen können. Das Wichtigste, was Sie hier verstehen müssen , ist, dass wir unsere Abfrage hier in GraphQL schreiben und sie dann in UseShopQuery einfügen. In den Beispielen werden Sie nun sehen, dass Objektzerstörung genau hier stattfindet. Es gibt diese Zeile nicht, aber ich breche sie gerne aus, oder zumindest für diese Klasse weil es sie nur ein bisschen weniger kompliziert macht. Sie können die Stufen ein wenig herunterbrechen. Was wir tun, ist, dass die Daten, die von der API zurückgegeben werden hier in dieses Datenobjekt gelangen und dann werden wir es destrukturieren, um die zurückgegebenen Daten zu erhalten. Hier ist etwas, das Sie in diesem Kurs tun können , um festzustellen, was von der API zurückkommt. Sie können console.log (data) gehen. Also, wo finden wir diese Informationen? Nun, wir sind hier tatsächlich auf einer serverseitigen Komponente. Wie Sie hier sehen können, glaube ich nicht, dass wir noch irgendwelche clientseitigen Komponenten haben , aber wie Sie hier sehen können, haben alle unsere Komponenten.server enthalten. Wenn wir dies ausführen, wird das Konsolenprotokoll in unserem Terminal angezeigt, aber nicht in unserem Browser. Lass uns unser Terminal wieder öffnen, all das loswerden und dann lass uns npm run dev ausführen. Jetzt müssen wir uns einfach damit auseinandersetzen. Ich werde die Seite aktualisieren und wenn wir hier zu unserer Konsole zurückkehren, öffne ich das und Sie können die Daten sehen , die zurückkommen. Es kommt tatsächlich zweimal hier zurück. Sie können sehen, dass wir dieses Datenobjekt bekommen und im Inneren erhalten wir das scharfe Objekt, und dann darin erhalten wir den Namen und die Beschreibung. Auf diese Weise können wir untersuchen, was sich darin befindet. Wie Sie sehen, entspricht diese Destrukturierung dem, was von diesem Datenobjekt zurückkommt. Wir können dies entfernen und anstatt Shop hier zu haben, können wir Daten erstellen. Daten. Shop. Aktualisieren Sie die Seite und Sie sehen, dass wir das gleiche Ergebnis erhalten. Aber das ist offensichtlich etwas hässlicher. Das mag etwas komplizierter aussehen, aber es hilft uns, diese scharfen Objekte zu entfernen, sodass wir keine Daten oder Daten davor stellen müssen . Das ist im Wesentlichen das, was dort passiert. Ich entferne das Konsolenprotokoll und Sie können sehen, dass wir das Shop-Objekt aus der Rückkehr zu den Daten ziehen und dann auf den Namen und die Beschreibung zugreifen können dann auf den Namen und die Beschreibung zugreifen , weil wir das sind in unserer GraphQL-Abfrage angefordert. Das ist die Grundlage für alles, was wir in diesem Kurs tun werden, wir werden Komponenten importieren, Dienstprogramme aus dem Wasserstoff-Framework einhängen. Wir werden diese Hooks verwenden , um einige Daten einzubinden. Wir werden diese Daten hier in unseren Komponenten verwenden , und wenn es erforderlich ist, werden wir Abfragen schreiben, die wir im Falle einer UseShop-Abfrage einbinden im Falle einer UseShop-Abfrage einbinden , um unsere Daten. Wenn Sie dieses Muster verstehen, sind wir auf dem besten Weg, unser allererstes Wasserstoffgeschäft zu programmieren . 7. Erstellung einer Layout: In der letzten Lektion, in der wir mit unserem Projekt begonnen haben, haben wir es eingerichtet und auf unserem Computer ausgeführt . Sie können es hier sehen. Eines der Dinge, die ich im letzten Video vergessen habe zu erwähnen , ist, dass diese Daten aus dem Shopify-Vorschau-Shop stammen. Wenn wir hier in unseren Explorer gehen und zu, glaube ich, es ist hydrogen.config.js, können Sie sehen, dass die StoreDomain hydrogen-preview.myshopify.com ist hydrogen-preview.myshopify.com und das StoreFrontToken was ist wir brauchen, um uns damit zu verbinden. Deshalb haben wir diese Daten direkt vor der Tür. In dieser Klasse müssen wir eigentlich kein erstellen oder unseren Shop mit Demo-Daten aktualisieren , da wir diesen Demo-Store einfach für die gesamte Klasse verwenden können . Wenn wir dies jedoch in unserem eigentlichen Shopify-Shop bereitstellen , werden wir diese Details durch unsere eigene Shop-Domain und unser eigenes Storefront-Zugriffstoken ersetzen wollen Shop-Domain und unser eigenes , okay? Ich dachte nur, dass ich das erwähne, bevor wir anfangen. Einige von Ihnen fragen sich vielleicht, woher wir diese Informationen beziehen? Nun, es ist vorinstalliert, um den Hydrogen Preview Store zu nutzen, was ich in dieser Klasse sehr nett finde. Zum Beispiel wollen wir nicht all diese Demo-Daten erstellen müssen , wir können sie einfach in vorhandene Demo-Daten einbinden , was sehr praktisch ist. Nachdem das aus dem Weg ist, möchte ich in diesem Video eine Layout-Komponente erstellen. Unsere Layout-Komponente wird sich um unsere gesamte Website wickeln und im Grunde einen Header und die notwendige Suchmaschinenoptimierung bereitstellen , die auf jeder Route in unserem Wasserstoffgeschäft ausgeführt werden. Was ich tun werde, ist, ich gehe hier in den SRC-Ordner, erstelle einen neuen Ordner für meine Komponenten, und dann werde ich in diesem Komponentenordner eine layout.server.jsx-Komponente erstellen, okay? Nun wird diese Komponente zwei Funktionen erfüllen: Sie wird einen Header rendern und auch SEO-Informationen rendern, sodass auf jeder Seite unserer Website bereits SEO integriert ist, okay? Lass uns einfach, um unser Leben einfacher zu machen, kopiere ich einfach alles hier rein und lege es hier hin, okay? Was ich jetzt tun werde, ist, das zu entfernen und lass uns einfach ein Div hier einfügen , damit wir keinen Fehler bekommen, und dann nennen wir es nicht home, sondern layout. Dann, wie ich Ihnen im Theorievideo gezeigt habe, werde ich Objektzerstörung verwenden, um alle Kinder zu greifen , die in diese Layout-Komponente weitergegeben werden, okay? Dieselbe Abfrage hier, wir werden den Namen und die Beschreibung für den Header sowie die SEO-Informationen verwenden . Dann werde ich in unserer index.server.js-Datei eine Menge vereinfacht, wir werden diese Daten nicht auf unserer Homepage verwenden, also kann ich das alles entfernen, ich kann das hier oben entfernen, und wir werden einfach eine sehr einfache Komponente zurückgeben, und hier drin werde ich einfach die Homepage stellen, okay? Werde das los. Dann werde ich diese Layout-Komponente einbringen. Ich kann importieren, und ich glaube, wir exportieren Standard hier drüben, also müssen wir nicht die geschweiften Klammern verwenden, wir können einfach das Layout von Komponenten und dann erstellen wir einfach einen Pfad zu die Layout-Komponente. Dann möchte ich das alles zwischen unseren neuen Layout-Komponenten-Tags weitergeben , okay? Wie Sie hier sehen, greifen wir auf die Kinder zu. Was ich hier tun möchte, ist die Kinder zwischen diese Divs zu stellen, okay? Mal sehen, ob das jetzt für uns funktioniert. Wenn ich hier rübergehe, siehst du, ja, es gibt keine Fehler, okay? Zurück zu hier, was wir um diese grundlegende Homepage wickeln möchten , ist eine Kopfzeile und SEO-Informationen. Lassen Sie uns anfangen, an dem zu arbeiten, was in unserer Rücksendeerklärung steht, unserem JSX. Zuallererst möchte ich alles zurückgeben , was durch diese Layout-Tags übergeben wird. Was ich tun werde, ist das Main zu nennen , weil dies unser Hauptteil unserer Seite sein wird, und dann werde ich Kinder in ein paar Spannungs-Tags einpacken , weil wir nicht wissen was Sortierdaten könnten durchkommen. Denken Sie daran, dass sich das um jede Route drehen wird, nicht nur um die index.server.jsx-Route, okay? Jetzt werden wir diesen Fehler hier bekommen und das liegt daran, dass wir Suspense noch nicht importiert haben. Ich werde Spannung aus React importieren. Wie Sie sehen können, hat es das gerade für uns ausgefüllt. Jetzt holen wir Kinder egal ob sie asynchron geladen werden oder nicht, okay? Jetzt müssen wir nur noch unsere SEO und unseren Header einbringen . Die Art und Weise, wie wir SEO in Shopify-Wasserstoff durchführen, besteht darin einfach eine SEO-Komponente aus dem Wasserstoff-Framework zu importieren , und dann können wir diese SEO-Komponente hierher bringen. Wir brauchen kein Endtag, aber wir müssen es in diesen Strich stecken, um es zu schließen. Dann geben wir hier die Art der Standard-SEO ein. Dann fügen wir im Datenfeld ein Objekt für Titel und Beschreibung ein, und hier verwenden wir den Shop-Namen und die Beschreibung, die von der Storefront-API stammen. Wir können das hier eintragen, Namen des Ladens und die Beschreibung des Ladens. Was Sie hier bemerken werden, nachdem wir das getan haben , ist, dass wir all diese roten, verschnörkelten Linien erhalten, und das liegt daran, dass wir mit JSX nicht mehrere Elemente auf der obersten Ebene zurückgeben können , also sind wir einfach Wir müssen ein Top-Level-Element erstellen, und wir können eines dieser leeren erstellen, wie dieses, ein bisschen wie ein Hack, aber jetzt bekommen wir diese roten, verschnörkelten Linien nicht mehr. Wenn ich hierher zurückkehre, führe unsere Homepage erneut aus und öffne meine Entwicklertools. Ich habe gerade Option Command I gedrückt, um das zu tun, sonst musst du in dein Menü gehen und DevTools öffnen. Ich mache das in jeder Klasse, also hoffe ihr folgt mir hier. Wenn ich dann hier auf unsere Elemente eingehe, können Sie sehen, dass Sie sehen können, dass wir unseren Titel und unsere Beschreibung in diesen Meta-Eigenschaften durchkommen, wenn wir hier in unser Head-Tag gehen Sie sehen können, dass wir unseren Titel und unsere Beschreibung in diesen Meta-Eigenschaften durchkommen, wenn wir hier in unser , welches sind unsere SEO-Tags, okay? Wir haben jetzt unsere Suchmaschinenoptimierung rübergebracht. Jetzt wollen wir nur noch einen Header erstellen. Auch hier werde ich einige der Klassen nutzen, die ich bereits im CSS geschrieben habe. Dies ist keine CSS-Klasse, also werde ich mir diesen Container-Header-Inner als Klasse schnappen. Dann erstelle ich hier einen Link, damit wir die Link-Komponente in Shopify verwenden können, und ich werde das mit der Homepage verlinken, indem ich dort einfach einen Schrägstrich einfüge. Dieser Link wird im Grunde das Header-Logo sein, es ist ein übliches Muster bei Headern, dass, wenn Sie auf das Logo klicken Sie zurück zur Startseite geleitet werden, also genau das tun wir hier. Dann werde ich hier den Namen des Ladens eintragen, okay? Jetzt müssen wir Link aus unserem Wasserstoff-Framework importieren , weil wir das noch nicht getan haben. Wenn ich dann bei der Aktualisierung hier auf „Speichern“ klicke, kannst du sehen, dass wir jetzt diesen Header haben. Wenn ich dann darauf klicke, gelangen wir zu der Homepage, auf der wir uns bereits befinden , okay? Das wird sich später als nützlich erweisen. Was ich jetzt einfügen werde, ist eine ungeordnete Liste mit der Klasse der Header-Navigation. Dies wird natürlich unsere Header-Navigation beherbergen. Dann werde ich hier etwas Emmet benutzen , um drei Links einzufügen. Ich werde in dieser Phase nur leere Links haben, Link 1, Link 2, weil wir keine anderen Seiten haben, also werde ich im Grunde nur einige Platzhalter einfügen. Dann haben wir endlich einen Platz hier , um auf die Warenkorbseite zu verlinken. Das haben wir noch nicht, also werde ich hier einfach einen Platzhalter einfügen. Der Klassenname davon wird Header-Cart-Link sein, also lege ich das einfach da rein, okay? Ich drücke da auf „Speichern“. Wenn wir hier rübergehen, können Sie sehen, dass wir unseren Header haben und alles nett und zentriert ist. Im Grunde werden wir, während wir durch die Klasse gehen, unseren Header aktualisieren, während wir gehen. wir neue Seiten erstellen, Wenn wir neue Seiten erstellen, können wir hier Links zu diesen Seiten hinzufügen und dann unser Warenkorbsymbol hier mit der Anzahl der Artikel in unserem Warenkorb hinzufügen. Darauf kommen wir später in der Klasse zurück. Aber jetzt, da wir diese Layout-Komponente erstellt haben, werden Sie hier alle Ihre Routen mit diesem Layout-Komponenten-Tag umschließen, um sicherzustellen, dass die Header- und SEO-Informationen angezeigt werden auf jeder Route. Nachdem das aus dem Weg ist, erstellen wir tatsächlich eine Katalogseite, auf der wir alle unsere Produkte in unserem Shopify-Wasserstoff-Schaufenster anzeigen können. 8. Erstellung einer Catalog: Im letzten Video haben wir diese Layout-Komponente erstellt, die wir als Standardlayout für alle unsere Routen verwenden werden. Wir haben unsere Indexroute aktualisiert und jetzt haben wir unsere super einfache Homepage in unserem Layout, die uns dann unseren Header und unsere SEO gibt, die wir im letzten Video gesehen haben. In diesem Video erstellen wir eine neue Route. Ich nenne das die Katalogrouten, sorry, das ist der falsche Ordner, genau hier in unserem Routenordner, catalog.server.jsx. Nur als kleiner Kontext hier ist der Grund, warum es sich hier um eine.server.jsx-Datei handelt, weil wir die Storefront-API abfragen werden . Es ist eine gute Idee, jedes Mal, wenn Sie die Storefront-API in jeder Router-Komponente abfragen die Storefront-API in , dies zu tun. Sie möchten das als server- oder serverseitige Komponente tun , sodass wir dem Endbenutzer nicht das, was wir abfragen, im Wesentlichen die Datenbank, zugänglich machen. Beginnen wir damit, hier eine Funktionskomponente zu exportieren. Dies wird unsere Katalogseite sein , auf der alle Produkte, die es in unserem Geschäft gibt, untergebracht werden. Ich gebe dann hier eine Rückgabeanweisung ein und dann beginnen wir natürlich mit der Layout-Komponente. Wir müssen das importieren, sonst bekommen wir eine Fehlermeldung. Importieren Sie also das Layout vom Navigieren zum Pfad, zu unserem Layout. Nur damit ihr es wisst, Leute, dieser Punkt bedeutet, einen zurück in den SRC-Ordner zu gehen, und dann können wir in Komponenten schauen und dann das Layout finden. Wenn Sie mit dem hier nicht vertraut sind, bedeutet das genau das. Wir werden hier einige asynchrone Inhalte einzeichnen , also werde ich direkt nach meinem Layout eine Spannung einlegen. Wir müssen auch Spannung aus React importieren . Dann ein bisschen Struktur hier, die ich bereits eingerichtet habe, ich habe etwas CSS für die Klassen der Katalogseite und des Containers erstellt . Wir legen unsere Seite einfach in einen schönen Container. Dann erstellen wir ein Div mit dem Klassenraster der Produktklasse, dem alle unsere kleinen Produktrasterelemente untergebracht sind. Wenn ich darauf „Speichern“ klicke, rufen wir derzeit keine Daten ab, aber wenn ich hier zur Katalogseite gehe, haben wir eine ziemlich leere Seite. Wenn wir das überprüfen, werden Sie jedoch feststellen, dass wir die Divs haben, die wir eingerichtet haben, die Katalogseite und das Produktraster. Dies ist im Grunde nutzlos, bis wir einige Daten einbringen. Schreiben wir unsere Anfrage hier unten auf. Ich werde eine Konstante namens query erstellen und dann werde ich die GQL-String-Vorlage verwenden und unsere Abfrage hier eingeben. Weil ich das benutze, muss ich es aus Wasserstoff importieren, also mache ich das hier oben. Importieren Sie GQL aus Shopify Hydrogen. Lassen Sie uns das in unserer grafischen Oberfläche tun. Sobald wir es getestet haben und wissen, dass es funktioniert, können wir es in unser Projekt einbringen. Ich finde das ein bisschen netter. Ich gehe hier zur grafischen Darstellung. Wir können unsere DevTools schließen. Ich werde diese Standardabfrage gleich hier loswerden , öffne sie. Dann können wir unsere Anfrage zuerst benennen. Es ist eine gute Konvention, das zu tun, also erstelle ich einfach eine benannte Abfrage. Ich nenne es Abfrageprodukte. Dann fangen wir hier an , einige Daten anzufordern. Ich werde Produkte anfragen. Es wird ein Fehler auftreten, wenn ich nicht feststelle, wie viele ich möchte. Ich frage nach den ersten Neun. Dann öffne ich hier eine Auswahl und schnappe mir alle Knoten und die Gegenstände, die ich darauf haben möchte. Fangen wir mit Titel und Handle an. Lass uns das ausführen. Es besagt, dass die Abfrage auf der Typabfrageroute nicht existiert. Das liegt daran, dass ich das verschieben muss. Ich sollte das dort nicht in einem Objekt verschachteln. Wie Sie sehen können, sieht es jetzt viel schöner aus, es gibt Syntaxhervorhebung, also denke ich, dass wir dieses Problem gelöst haben. Lass es uns einfach herausfinden. Da haben wir es. Wir sind in der Lage, die ersten neun Produkte aus dem Geschäft zurückzubekommen die ersten neun Produkte , auf das wir zugreifen, bei dem es sich nur um den Hydrogen Preview Store handelt, und wir können den Titel und das Handle all dieser Produkte zurückerhalten produkte. Fangen wir damit an. Lassen Sie uns das wieder in unser Projekt aufnehmen. Versuche es hier schön einzurücken, so. Dann müssen wir scharfe Abfragen verwenden. Das importieren wir natürlich aus Wasserstoff. Dann wollen wir hier auf unsere Komponente eingehen. Wir können im Grunde einfach dasselbe kopieren, aber scharfe Abfragen verwenden. Jetzt machen wir es hier drüben. Legen Sie sie aus der Datei layout.server.jsx hier ein. Statt einer scharfen Abfrage wird es nur eine Abfrage sein. Wir können das nennen, wie wir wollen. Wir könnten diese Katalogabfrage benennen, aber ich nenne sie vorerst einfach Query. Dann werde ich einfach die zurückkommenden Daten auf der Konsole protokollieren lassen , damit wir wissen, wie man sie D-strukturiert. Schauen wir uns das mal an. Wir haben einen kleinen Fehler. CacheLong ist nicht definiert, daher müssen wir sicherstellen , dass wir das auch aus Shopify Hydrogen importieren . CacheLong. Mal sehen, ob das jetzt funktioniert. Gehen wir zurück. Öffne localhost 3.000 in einem neuen Tab und lass uns unsere Dev-Tools erneut öffnen , um zu sehen, ob es irgendwelche clientseitigen Fehler gibt . Wir haben hier einen Fehler. Es heißt, es konnte keine Verbindung zur Storefront-API hergestellt werden. Das könnte an meiner Internetverbindung liegen. Ich habe vergessen, dort ein C zu setzen , also ist das wahrscheinlich das Problem. Erfrischen wir uns hier. Jetzt müssen wir nur noch in die Katalogroute gehen, und jetzt gibt es keine Fehler mehr. Hier ist ein Fehler aufgetreten. Aber bevor wir diesen Fehler gesehen haben, können Sie hier sehen, vielleicht etwas schwer zu erkennen, aber wir melden tatsächlich das Datenobjekt, das von der Verwendung Sharp Query zurückkommt, von der Konsole ab. Sie können hier sehen, wir können dies als unser Format für die D-Strukturierung verwenden, wir können hier Knoten innerhalb von Produkten innerhalb von Daten erfassen. mache ich. Lassen Sie mich das noch einmal verschieben, damit wir kopieren können , was wir hier haben. Genau wie wir es hier getan haben, als wir D-strukturiert haben und zu diesen scharfen Objekten kamen, was wir hier tun können, wenn ich das kopiere, werden wir noch einmal in die Daten gehen, aber dann statt scharf werden wir auf Produkte eingehen. Dann werden innerhalb der Produkte Knoten abgezogen. Wenn ich dann Knoten als mein Konsolenprotokoll hier ausführe, aktualisieren wir unsere Katalogseite. Wenn ich dann hier reinschaue, können Sie sehen, dass alle Knoten zurückkehren. Das sind unsere Produkte. Sie können sehen, dass es ein paar Mal zurückkehrt, aber Sie können ein Array von Knoten sehen. Wir erhalten den Titel und das Handle jedes dieser Produkte zurück . Was wir dann tun können, ist, dass wir das hier drin verwenden können. Ich könnte Knoten gehen. Hier werden wir, anstatt eine Schleife auszuführen , die Map ausführen. Ich erkläre in einer Sekunde , warum wir das machen. Wir werden Map laufen lassen. Dann werden wir jedes Produkt durch JSX durchlaufen. Ich werde hier einfach ein grundlegendes Div eingeben und dann kann ich einen JavaScript-Ausdruck in dieses JSX einfügen. Ich kann den Produkttitel gleich hier machen. Eigentlich machen wir daraus eine Liste, also erstelle ich eine ungeordnete Liste. Dies wird nicht die endgültige Form sein, aber für dieses grundlegende Beispiel wird es einfach besser aussehen. Dann drücke ich darauf „Enter“. Hier liegt ein Syntaxfehler vor. Ich glaube, wir brauchen dort eine weitere Klammer. Manchmal, wenn ein Syntaxfehler auftritt wird Ihr Server vollständig angehalten, also müssen wir den Server erneut ausführen, npm run dev. Wenn wir jetzt auf unsere Katalogseite gehen, werden Sie feststellen, dass wir eine ungeordnete Liste mit all unseren verschiedenen Produkten haben . Nun, zumindest die ersten neun von ihnen, was wir hier angefordert haben. Um diese Map-Sache hier zu erklären, wollen wir im Grunde alle Knoten zurückgeben, aber wir müssen jeden dieser Knoten in etwas JSX einbinden, weshalb wir map verwenden. Wenn wir nur Nodes selbst ohne JSX gemacht haben, schauen wir mal, ob das etwas zurückgibt. Wir können nicht einfach ein zufälliges Array zurückgeben. Wir müssen dieses Array tatsächlich in JSX konvertieren, deshalb verwenden wir hier map, das im Grunde ein Array von JSX erstellen wird . Dieser Ausdruck wird zwischen diesen ungeordneten Listen-Tags eingefügt . Hoffentlich erklärt das die Verwendung der Kartenfunktion dort in JavaScript. Nachfolgend finden Sie eine grundlegende Liste aller unserer Produkttitel. Zumindest die ersten neun im Moment. Aber was wir tun wollen, ist darauf auszudehnen. Präsentieren Sie den Preis und präsentieren Sie das Bild in einem schönen kleinen Raster, wie Sie es auf jeder E-Commerce-Website erwarten würden . Was wir tun werden, ist eine Komponente für dieses Produktrasterelement zu erstellen . Was ich tun werde, ist hier in meine Komponentendatei zu gehen und, ich nenne es, ProductGridItem.Server.jsx zu erstellen . Dann mache ich den üblichen Export, eine Standardfunktion und damit unsere Komponente. Ich werde es in der eigentlichen Komponente selbst vereinfachen und es ProductCard nennen. Dann brauchen wir natürlich eine Rückgabeanweisung für den JSX. Lassen Sie uns vorerst ganz einfach sein und diesen Listeneintrag hier in unsere Komponente verschieben . Jetzt werden wir versuchen , auf das Produkt zuzugreifen, was bedeutet, dass wir das als Requisite analysieren müssen. Ich werde das Produktobjekt von der Requisite dieser Komponente ziehen , und dann müssen wir auf dieser Seite dieses ProductGridItem oder ProductCard importieren, wie wir es hier genannt haben. Ich tippe es zuerst hier raus, ProductCard und klicke darauf auf „Speichern“. Manchmal importiert es es automatisch für Sie, aber es sieht so aus, als müssten wir es diesmal selbst machen. Ich werde diese ProductCard importieren. Wie Sie sehen können, wurde der Rest für uns ausgefüllt, was sehr nett ist. Lass uns versuchen, das ein bisschen schöner zu ordnen. Ich setze meine Komponenten , die ich nach meinen Importen aus React und Wasserstoff selbst herstelle , so ein. Dann erstellen wir eine Requisite namens product und analysieren diese Produktobjekte. Wenn wir jetzt hier rübergehen und aktualisieren, werden Sie sehen, dass wir genau das gleiche Ergebnis erhalten. Jetzt kapseln wir diesen Code nur noch in eine eigene Komponente ein. Natürlich müssen wir das exportieren und dann hier oben importieren und dann können wir es hier unten verwenden jedes Produkt in seine Requisiten analysieren. Es gibt eine Menge Dinge, die wir in dieser ProductCard tun werden. Lassen Sie uns diese UL entfernen weil wir sie als Raster erstellen werden, nicht als Liste. Also werde ich diese UL-Komponente loswerden , die Verschachtelung aktualisieren und dann hier drüben werde ich ein div mit der Klasse product-grid-item erstellen , was wiederum ein vorhandenes CSS ist das entspricht dem, was ich hier geschaffen habe. Was ich dann tun möchte, wenn ich hier drin bin , ist natürlich den Titel einzubringen, aber ich möchte auch das Bild und den Preis einbringen. Wenn es nun um Bilder in Shopify Hydrogen geht, hat Shopify diese erstaunliche Komponente namens Image. Wenn ich nur die Bildkomponente von Shopify Hydrogen importiere die Bildkomponente von Shopify Hydrogen und dann das Bildfeld hier hinzufüge , lass uns diese Abfrage in einer grafischen Oberfläche hier drüben durchführen . Wenn ich dann das Feld finde, nach dem ich suche, ist dies der praktische Teil der grafischen Verwendung. Ich habe hier die automatische Vervollständigung. Wenn ich vergesse, wie der Name des Bildfeldes auf diesem speziellen Knoten lautet, wird es für mich automatisch vervollständigt. Wenn ich dann versuche, das auszuführen, werden Sie feststellen, dass es Fehler weil ich hier eine Auswahl haben muss. Ich glaube, das wird eine Image-Verbindung zurückgeben. Wenn ich den Mauszeiger darüber bewege, wird ein Bild zurückgegeben. Was wir tun können, ist in der Dokumentation nachzuschlagen , welche Felder sich auf dem Bildobjekt befinden. Ich bin hier bei der Storefront-API-Referenz. Gehen wir in den Online-Shop, gehen wir in Objekte. Jetzt glaube ich, dass es in gewöhnlichen Objekten liegt. Hier ist der letzte Ort, an dem du nachsiehst. Hier können Sie das Bildobjekt sehen, und dann können Sie hier sehen, um die URL des Bildes zu erhalten, wir können so darauf zugreifen. Wir können den AltText bekommen, wir können die Breite bekommen. Was wir tun könnten, ist hier reinzugehen, die URL zu holen, und dann könnten wir einfach unser eigenes grundlegendes HTML-Bild erstellen und diesen SRC einfügen. Aber dann würden wir nicht von responsiven Bildern profitieren. Was wir stattdessen tun können, ist die Image-Komponente, wenn ich hier rübergehe, aus dem Shopify Hydrogen-Framework zu verwenden . Ich zeige Ihnen in einer Sekunde, wie das funktioniert. Aber zuerst müssen wir diese Anfrage hier veröffentlichen. Ich werde mir auch den AltText schnappen. Ich werde mir die Höhe schnappen und mir die Breite schnappen. Lassen Sie uns das einfach ausführen, stellen Sie sicher, dass es keine Fehler gibt. Wir haben das Titel-Handle und die Daten zum vorgestellten Bild. Ich nehme das und füge wieder hier in unsere Anfrage ein. Da haben wir's. Die Verschachtelung ist ein bisschen falsch. Tippe es so an. Dann werde ich hier eine Image-Komponente öffnen, genau hier. Wie das funktioniert, können wir in Alt einfügen, auf die vorgestellten Bildobjekte auf dem Produkt zugreifen und dann den AltText abrufen. Aber dann können wir für den Rest der Bilddaten einfach diese Datenstütze, das Bildobjekt selbst, analysieren . Ich muss das nur schließen. Wenn ich dann auf „Speichern“ klicke und wir hier in unserer Wasserstoff-App aktualisieren, kannst du sehen, wie alle unsere Bilder durchkommen. Wenn ich mit der rechten Maustaste klicke und sie überprüfe, kannst du sehen, dass Lazy Loading integriert und wir all diese verschiedenen responsiven Größen basierend auf der Bildschirmbreite haben. In Shopify Liquid können Sie diese Optimierung durchführen, indem Sie ein Snippet erstellen und mithilfe des Bild-URL-Filters verschiedene Bild-URLs erstellen, die basierend auf den Abmessungen des Bildes in Ihrem Shopify bereitgestellt werden. Geschäft. Aber hier müssen wir nur die Bildkomponente in Shopify verwenden . Um Ihnen die Alternative zu zeigen, zum Beispiel, wenn wir gerade ein Image-Tag mit SRC erstellt haben und wir dann einfach product.featuredImage.URL analysieren, das speichern, hier aktualisieren, Sie erhalten das gleiche Ergebnis, aber Sie sehen , dass es etwas langsamer geladen wird. Wenn wir dann hier reingehen, sehen wir, dass wir nur die eine SRC haben. Für reaktionsschnelle Bilder müssen wir nicht den gesamten Code selbst durchgehen und schreiben, wir müssen nur diese praktische Bildkomponente verwenden , die von Shopify Hydrogen bereitgestellt wird. Wie Sie sehen können, es bereits neu geladen und Sie können wurde es bereits neu geladen und Sie können sehen, dass Lazy Loading aktiviert ist und all diese verschiedenen URLs automatisch für uns generiert wurden. Das ist die Stärke der Verwendung einiger dieser Komponenten , die durch Wasserstoff gewonnen werden. Einige von ihnen sind unnötig und einige machen unser Leben einfach so viel einfacher. werden wir sehen, wenn wir Produktoptionen machen und wir schneiden auch. Vielleicht könnten wir das ohne diese Komponenten machen, aber sie machen unser Leben einfach so viel einfacher und ich hoffe, ihr fängt jetzt an, das zu erkennen. Was ich tun werde, ist das in einen Bildcontainer zu packen. Dies ist nur ein bisschen CSS, damit es genau so angezeigt wird, wie wir es wollen. Uns geht hier der Platz aus, also mache ich das auf. Dann werde ich unter dem Bildcontainer hier ein div mit der Klasse product-grid-item-title einfügen. Dann kann ich hier product.title eingeben , und dann lass uns auf „Speichern“ klicken, hier aktualisieren und du kannst sehen, dass wir den Titel des Produkts und das Bild haben . Aber normalerweise möchten Sie in einem Produktraster auch den Preis sehen , also lassen Sie uns das als nächstes tun. müssen wir einige zusätzliche Daten einbringen , da wir derzeit nur das Titel-Handle und das vorgestellte Bild haben. Gehen wir noch einmal zur grafischen Darstellung über. Dann unter dem vorgestellten Bild, wenn wir etwas wie den Preis eingeben, wodurch die Preisspanne und die CompareAtPriceRange angezeigt werden. Etwas genauer ist es, tatsächlich in das Produkt einzutauchen und sich seine Variante zu schnappen. Sie werden sehen, dass wir auf die Preisspanne zugreifen und sie bei PriceRange vergleichen können . Wenn wir jedoch einen bestimmten Preis erhalten möchten, können wir uns mit den Varianten befassen. Ich werde nur nach der allerersten Variante suchen . Natürlich ist dies eine Auswahl mit Knoten darin, also müssen wir Knoten öffnen. Dann werde ich innerhalb der Abweichung greifen, mal sehen , was für den Preis ansteht. Wir haben PriceV2, und das ist eigentlich eine Auswahl selbst, also müssen wir reingehen und uns den Betrag und den Währungscode holen . Wenn wir dann auch den CompareAtPrice haben wollen, müssen wir genau das Gleiche für diesen Währungscode tun . Wenn ich auf „Speichern“ klicke, wird es nicht gespeichert, sondern läuft darauf. Wir schauen hier unten. Sie können sehen, dass der Preis für dieses Wasserstoff-Snowboard 600 US-Dollar beträgt, aber es hat tatsächlich einen CompareAtPrice von fast 650 US-Dollar. Offensichtlich funktioniert das, ich werde das kopieren. Fügen Sie es wieder in unser Projekt ein. Leider glaube ich, dass wir unsere Nistplätze verlieren werden. Nein, mit dem Nisting geht es eigentlich nicht gut. Drücke auf „Speichern“ und dann hier drüben kann ich hier ein neues Div erstellen. Ich werde die Klasse der Product-Grid-Preise verwenden und hier kann ich product.priceV2.amount machen , um es wirklich einfach zu machen. Was habe ich hier falsch gemacht? Dies entspricht nicht den Produkten, die ich hier habe. Ich habe vergessen, in die Variante zu gehen. Wir gehen in die Varianz und gehen in Knoten, schnappen uns den ersten Knoten. Das ist ein Rechtschreibfehler, variants.nodes , Preis zu Betrag. Dort können Sie sehen, dass wir den Preis haben, aber er ist nicht formatiert. Was werden wir tun? Nun, in Shopify Liquid gibt es dafür einen Filter , der den Preis für uns gut formatiert. Wir haben eine ähnliche Sache innerhalb von Shopify-Wasserstoff, die als Geldkomponente bezeichnet wird. Ich werde die Geldkomponente hier importieren und dann lass uns das wegnehmen und dann hier eine Geldkomponente öffnen. Dann kann ich, genau wie beim Bild, den gleichen Preis für die Datenvorbereitung angeben, aber ich möchte nicht speziell auf den Betrag eingehen. Diese Komponente wird herausfinden, wie hoch der Betrag und die Währung ist, und ihn basierend auf diesen beiden gut formatieren . Ich habe hier einen Fehler gemacht. Ich habe zwei geschweifte Klammern, und das hat meinen Server gestoppt. Lassen Sie uns den Server erneut ausführen, npm run dev ausführen und dann unsere Katalogseite hier erneut ausführen. Sie können jetzt sehen, dass wir das Währungssymbol haben und diese Preise als Währung formatiert sind. Wir haben hier eine gut formatierte Währung. nun der Vollständigkeit halber Lassen Sie uns nun der Vollständigkeit halber auch den Preisvergleich einbauen. Was ich hier unten tun kann, wir das einfach, um loszulegen, und dann räumen wir das auf. Ich werde hier reingehen und mir den Vergleich schnappen. Gehen wir zurück zu hier. Vergleichen Sie zum Preis V2, fügen Sie das hier ein und schließen Sie es einfach so. Jetzt werden wir die beiden Preise nebeneinander bekommen. Vielleicht nicht. Wir haben hier einen Fehler , der interessant ist und mit dem übereinstimmt , was wir hierher zurückgeben. Lassen Sie uns hier einfach ein Konsolenprotokoll zum Debuggen verwenden. Ich gehe hier zum Konsolenlog-Produktobjekt. Wir können sehen, was zurückgegeben wird. Du hast Titel, Handle vorgestelltes Bild. Gehen wir in Varianten, Knoten und wiederholen die Ausführung. Scrollen Sie hier hoch, wenn wir gehen. Ich verstehe. Manchmal ist der Vergleichspreis V2 null und deshalb gibt es einen Fehler. Manchmal gibt es einen Vergleich zum Preis V2, aber manchmal ist es null. Was die Geldkomponente versucht, ist auf ein Objekt zuzugreifen und es zuzuordnen, das jetzt ist. Wir müssen sicherstellen , dass wir überprüfen ob das tatsächlich null ist. Wir können hier tun, wenn es einen wahrheitsgemäßen Wert zurückgibt, dann können wir diese im Grunde genommen Rückgabeanweisung hier eingeben diese im Grunde genommen Rückgabeanweisung und dann diesen Vergleichspreis ausführen. Hier können Sie sehen , wo es keinen Preisvergleich gibt , sondern nur einen Preis anzeigt. Wo es einen Preisvergleich gibt, werden beide Preise angezeigt. Das ist offensichtlich chaotisch. Schau dir das an, das ist nicht sehr nett. Was wir tun werden, ist das hier oben aufzuräumen und dann hier unten etwas Schöneres reinzulegen. Ich werde dieses Konsolenprotokoll loswerden. Was ich tun werde, ist, dass ich die Objektzerstörung verwenden werde, um diese Attribute hier von diesem Knoten zu entfernen. Was ich tun werde, ist mir den Preis V2 zu schnappen, und ich werde ihn nur als Preis durchziehen. Dann werde ich mir den Vergleich zum Preis schnappen und das einfach als Vergleich zum Preis durchführen, nicht als Vergleich zum Preis V2. Wir brauchen diese V2 nicht wirklich. Ich denke, das ist genau dort nur API-Versionierung. Dann holen wir uns das von dem, was wir hier unten haben, product.variants.nodes, und uns dann den ersten in diesem Array schnappen. Aber wir brauchen einen Fallback für den Fall, dass eines davon null ist. Wir setzen hier ein Fragezeichen. Wenn es null oder undefiniert ist, passieren wir einfach ein leeres Objekt. Anstatt zu überprüfen ob wir das jetzt tun werden, was etwas ausgefeilter und netter ist, prüfen wir einfach, ob der Preisvergleich höher ist als der Preis. Ich nenne es ist ermäßigt. Dann geben wir hier einen booleschen Wert ein, vergleichen zum Preisfragezeichen, falls es Null zurückgibt. Der Betrag ist größer als das Preisfragezeichen, Betrag ist größer als falls er einen Nullbetrag zurückgibt. Dann, also hier, werde ich diese auch hier ändern , ist ermäßigt. Wenn es rabattiert ist, wird es zurückgegeben. Anstatt dass der Preis hier wirklich lange dargestellt wird, können wir einfach den Preis , den wir hier oben erzielt haben, den Preis verwenden und dann zum Preis vergleichen. Wenn ich darauf auf „Speichern“ klicke und wir hier aktualisieren, wirst du sehen, dass wir das gleiche Ergebnis erhalten, aber es ist ein bisschen sauberer und in unserem JSX ist es viel schöner zu lesen. Ich werde diesem Produkt auch einen Klassennamen für Produkte geben , die zum Preis verglichen werden. Wenn ich dann auf „Speichern“ klicke und neu lade, können Sie jetzt sehen, dass der Preisvergleich visuell eindeutig der Abschlagspreis ist , da wir jetzt etwas CSS haben, das darauf gilt. Eine andere Sache, die ich Ihnen zeigen werde, bevor wir fertig sind, ist, wie Sie sehen können, einige davon 0,00 haben, die Sie vielleicht nicht im Frontend zeigen möchten. Wenn es einen Wert in diesen Dezimalstellen gibt, möchten Sie wahrscheinlich nicht aufrunden. Aber wenn es etwa 600 gibt, müssen wir nicht wirklich auf zwei Dezimalstellen gehen. Was wir verwenden können, ist in Shopify Liquid mit Preisformatierung ähnlich Shopify Liquid mit Preisformatierung Wir können so etwas wie ohne nachfolgende Nullen eingeben. Wenn ich dann auf „Speichern“ klicke und zurückgehe, kannst du sehen, dass alle Produkte mit 0,00 entfernt werden. Das ist eine weitere coole kleine Formatierungsoption. Ich lasse es dort für die Katalogseite. Was wir in Zukunft tun werden, ist , diese verknüpfbar zu machen. Da wir jedoch noch keine Produktroute erstellt haben, wird dies nur dazu führen , dass wir zu einer 404-Seite gehen. Wir behalten es vorerst so. Im nächsten Video erfahren wir, wie Sie ein Collection-Handle in der URL senden und unsere Storefront-API abfragen, um nur die Produkte innerhalb dieser Kategorie zurückzugeben. Im Wesentlichen werden wir im nächsten Video eine Sammlungsseite erstellen . 9. Errichtung einer Collection: Deshalb haben wir im letzten Video eine Katalogroute erstellt, die alle Produkte in unserem Geschäft zeigt. Es filtert nicht nach einer bestimmten Sammlung. Eigentlich Korrektur, es werden nur die ersten neun angezeigt , weil wir nur die ersten neun abgefragt haben. Aber wenn wir dies auf 100 oder was auch immer erweitern, erhalten wir die ersten 100 oder bis zu so viele, die sich zunächst in unserem Geschäft befinden. Wenn wir hier 100 eingeben und ich auf „Speichern“ klicke und das erneut ausführe, erhalten wir keine 100, weil es insgesamt nicht 100 gibt, aber wir werden bis zu 100 bekommen. Ich glaube also, dass es in dieser Wasserstoff-Vorschau 1, 2, 3 , 4, 5, 6, 7, 8 , 9, 10,11,12 Snowboards gibt. Ich setze das wieder auf neun. Beachten Sie, dass unsere Website schneller ausgeführt wird, aber wir können sie jederzeit auf die Anzahl aktualisieren, die wir benötigen. In diesem Video werden wir etwas erstellen, das diesem sehr ähnlich ist, also erstellen wir ein weiteres Produktraster, aber mit dieser speziellen Route wird es eine dynamische Route sein. Wir können also zu Kollektionen/so etwas wie Schuhen gehen , wie ich es hier vorgefüllt habe, und dann können wir uns ein Produktraster ansehen , das nur nach dieser Kollektion filtert. Was wir dafür tun werden, ist, dass wir hier in unseren Code-Editor zurückkehren und hier auf Routen eingehen, und weil es eine verschachtelte Route sein wird, also werden es Sammlungen sein und dann geht es den Namen der Sammlung oder das Handle der Sammlung haben. Wir müssen hier einen Ordner in unserem Routenordner erstellen, ihn Sammlungen nennen, und dann werden wir hier etwas tun , das ein wenig interessant ist. Wir legen eine dynamische Route ein, wir geben das Handle als Variable ein und geben dann server.jsx ein. Was ich hier tun werde, ist, dass ich all diese Informationen abrufen werde, im Grunde alles von hier kopieren und einfügen , und dann muss ich natürlich aktualisieren das vom Katalog zur Sammlung, und das ist alles, was ich vorerst tun werde. Mal sehen, wir haben hier ein Problem. Wir müssen die Puffs hier oben aktualisieren, die zu unseren Komponenten führen , da wir jetzt, wie Sie hier sehen können, in einem anderen Ordner innerhalb unserer Route verschachtelt wie Sie hier sehen können sind, also müssen wir Punkt , Punkt, Strich, ein weiterer Satz dieser beiden, beide, damit wir an die richtige Stelle navigieren oder npm ausführen können , führe dev erneut aus. Wenn wir uns dann hier erfrischen, sollte alles in Ordnung sein. Das war eine Sache, die wir ebenfalls aktualisieren mussten , bevor es ausgeführt werden kann. Der einzige Unterschied hier auf dieser Route im Vergleich zu unserer Katalogroute besteht darin, dass wir den Griff passieren und den Griff passieren und diese Informationen natürlich verwenden müssen. Wir müssen das an unsere Anfrage hier unten weiterleiten und dann gibt die Anfrage nur die Produkte zurück , die aus dieser Kollektion stammen. Aber im Wesentlichen gibt es hier in unserem JSX praktisch nichts zu aktualisieren. Was wir tun werden , um die Routenparameter zu verwenden, ist einen neuen Hook von Shopify Hydrogen einzugeben, könnte ihn hier platzieren. UserouteParams, ist der Name der Komponente und dann können wir diesen Haken verwenden, um den Griff von den Routenparametern abzuziehen , also werde ich die Strukturierung hier verwenden, den Griff greifen, der kommen wird von UserouteParams. Um nun diese Variable, die mit dem UseShopQuery-Hook an unsere Abfrage übergeben die mit dem UseShopQuery-Hook wird, zu übergeben, muss ich hier meine Variablen hinzufügen . Ich öffne ein Objekt und gehe dann einfach durch den Griff. Wenn ich jetzt nach unten scrolle, kann ich dieses Handle in unserer Abfrage verwenden. Wie machen wir das? werde ich diese Abfrage in etwas Passenderes umbenennen . Ich nenne es CollectionDetails und dann wollen wir in unserem Titel angeben, dass wir eine Zeichenfolge als Handle durchlaufen. Anstatt nach Produkten zu suchen, verwende ich Command X, um darauf zuzuschneiden, also entferne ich es zunächst aus unserer Abfrage, aber dann werde ich es später wieder einfügen. Was wir jetzt tun müssen , ist Suche nach einer Sammlung abzufragen, und die Art und Weise, wie wir das tun werden, ist anhand ihres Handles, genau so. Dann hier drinnen werden wir uns einige Details zu dieser Sammlung holen, ld, Titel, Beschreibung. Lassen Sie uns auch ein paar SEO-Informationen holen. Das ist eine Auswahl, also müssen wir innerhalb dieser Auswahl die Beschreibung und den Titel erfassen. Wir könnten uns das Bild der Sammlung schnappen. Wir werden es nicht in dieser speziellen Klasse verwenden, das ist nur ein Beispiel. Aber wir können alle Informationen , die wir benötigen, aus diesem Collection-Objekt abrufen , und dann füge ich den Code ein, den wir zuvor hatten. Wir können dann auf diese spezielle Sammlung eingehen. Finden Sie die ersten neun Produkte und verwenden Sie dann dieselben Informationen. Versuchen wir einfach, die Einrückung hier ein wenig zu korrigieren , das war zwecklos. Wenn ich dabei auf „Speichern“ klicke, lass uns jetzt laufen. Eigentlich müssen wir wissen, was eine Kollektion in unserem Geschäft ist , also um das zu tun, gehe ich einfach hier rein und frage unseren Laden hier nach den ersten neun Kollektionen, und dann tippe ich in Knoten, um auf jeden Knoten zuzugreifen, und dann werde ich nach dem Handle suchen. Dies ist nur, um zu sehen welche Griffe derzeit im Geschäft erhältlich sind . Also hier sind all die verschiedenen Kollektionen über ihre Griffe. Die ersten neun mindestens, aber es gibt nur 1, 2, 3, 4, 5, 6. Dies sind alle Sammlungen in diesem speziellen Geschäft. Ich kann jetzt hierher gehen, zu Sammlungen gehen und dann diese dynamische Route eingeben , die in den Griff der Sammlung Ich drücke darauf Enter. Wir haben einen Fehler, also was haben wir? String ist kein definierter Eingabetyp, also gehen wir zurück zu unserer Abfrage hier drüben und ich habe mich falsch eingegeben. Ich muss das als String mit einem Ausrufezeichen setzen. Das ist nur ein Syntaxfehler meinerseits und wenn ich dann hier aktualisiere, was haben wir jetzt? Undefinierte Leseknoten. Das hängt mit dem Setup zusammen, das ich hier oben habe, denn jetzt sind unsere Knoten in Produkten verschachtelt, in Sammlungen, nicht nur in Produkten. Lassen Sie uns das für eine Sekunde auskommentieren und ich werde die Daten, die von der API zurückgegeben werden, auf der Konsole protokollieren. Wenn ich also hier nach oben scrolle, werden Sie sehen, dass Wenn ich also hier nach oben scrolle, wir zuerst eine Sammlung haben. Also müssen wir das aktualisieren. Lassen Sie uns das wie zuvor mit der Abfrage ausschneiden, in die Sammlung einfügen und danach einfügen. Wir müssen weitere geschweifte Klammern und dann Produktknoten einsetzen . Jetzt können Sie sehen, dass es funktioniert. Dies sieht offensichtlich der Katalogseite ziemlich ähnlich Wenn wir also bestätigen möchten , dass dies tatsächlich diese Sammlung ist, kann ich hier ein h1 eingeben und wir können uns den Datenerfassungspunkt schnappen. Worauf haben wir zugegriffen? Titel? Ich habe hier versehentlich wieder zwei geschweifte Klammern geöffnet. Wir brauchen nur einen auf beiden Seiten, und wenn ich dann auf „Speichern“ klicke, aktualisiere hier drüben, habe hier einen weiteren Fehler bekommen. Ich habe das nicht richtig eingerichtet, also Datenerfassung, ich denke, wir müssen hier zweimal Daten eingeben, data.data.collection.title, und hier können Sie Freestyle Collection sehen. Wenn ich dann darauf eingehe, was war einer der anderen? Back Country, also wenn ich ins Backcountry gehe, können wir jetzt definitiv sehen, dass die Liste der Produkte, die diesmal anders angezeigt werden, definitiv im Vergleich zur Freestyle-Kollektion. Jetzt können Sie sehen, dass wir das Collection-Handle übergeben und nur diese Sammlung zurückgeben können . Das ist hässlich, also lass uns das ein bisschen bereinigen. Lassen Sie uns Daten sammeln, anhand von Daten sammeln und dann in der Lage sein, den Sammlungstitel einfach so abzuziehen, und wir können das wahrscheinlich noch schöner machen , indem wir das hier platzieren . Dann diese Strukturierung aus der Sammlung, whoops. Jetzt müssen wir nur noch hoops, Sammlung. Mal sehen, ob das funktioniert. Also das ist auch ein bisschen netter. Ich habe das ein bisschen schnell durchgemacht, aber im Grunde strukturiere ich gerade genug aus dem Datenobjekt, um die Sammlung zu bekommen und dann sehe ich mich, ich habe jetzt dieses Collection-Objekt. Ich ziehe dann jetzt die Produktknoten daraus ab. Das führt zu weniger verschachtelter Destrukturierung und ermöglicht es uns, Dinge wie collection.title und Knoten aus diesen Objekten genau hier herauszuholen. Da wir unseren Produktrasterartikel bereits erstellt und recycelt haben, gibt es hier nicht viel zu tun. Was wir in diesem Video im Vergleich zum letzten gemacht haben , ist, dieses Handle zu durchlaufen, sodass dieses Video offensichtlich kein Handle hatte und wir gerade auf Produkte in unserem Abfragestamm zugegriffen haben . Jetzt greifen wir auf die Produkte in unserer Kollektion und müssen natürlich angeben, nach welcher Kollektion wir suchen. Wir machen das über den Griff und wir finden den Griff über die Routenparameter heraus, und es bedeutet nur, dass wir eine Ebene der Verschachtelung tiefer haben , weil wir in eine Sammlung schauen, also das zwang uns, unsere Objektzerstörung hier oben auf den neuesten Stand zu bringen. Aber ansonsten haben wir jetzt Sammlungsseiten in unserem Geschäft eingerichtet. Im nächsten Video werden wir jetzt unsere Produktseite erstellen, damit wir, wenn wir auf diese Artikel klicken, auf jedes dieser Produkte zugreifen können wenn wir auf diese Artikel klicken, auf . 10. Erstellung einer Produktseite: In den letzten beiden Videos haben wir unser Produktraster auf dieser Katalogseite eingerichtet, das alle Produkte in unserem Geschäft zurückgibt. Dann unsere individuelle Sammelroute , eine dynamische Route, die wir durch den Griff jeder Sammlung, die wir laden möchten, passieren können . Ich entschuldige mich für die langsame Verbindungsgeschwindigkeit hier. Aber los geht's. Hier ist unsere Freestyle-Kollektion. Aber wie Sie sehen können, wenn wir auf eines dieser Elemente klicken, verlinken sie nicht auf eine einzelne Produktseite, da wir diese noch nicht erstellt haben. Das werden wir in diesem Video machen. Im Video danach erstellen wir die Warenkorb-Funktionalität. In den nächsten beiden Videos könnten wir sehen, die Komplexität etwas zunimmt da die beiden größten Teile der Interaktivität dass die Komplexität etwas zunimmt, da die beiden größten Teile der Interaktivität innerhalb einer Shopify-Website häufig die Variantenauswahl sind und die Warenkorb-Funktionalität Dies sind die Bereiche unserer Shopify-Website , die wir normalerweise sofort aktualisieren möchten , um den Status im Frontend zu verwalten. Zum Glück verwenden wir React und Shopify Hydrogen. All diese asynchronen Funktionen werden für diese Plattform selbstverständlich sein. Dies ist einer der Vorteile der Verwendung von React und Hydrogen. Aber das bedeutet, dass wir ein paar mehr Anbieter und ein paar weitere Hooks verwenden werden, um diese Funktionalität zum Laufen zu bringen. Aber wie Sie sehen werden, werden Sie, nachdem wir das durchgearbeitet haben, nachdem wir das durchgearbeitet haben, feststellen, dass Wasserstoff so viele Komponenten und Haken enthält, die es uns ermöglichen, dies zu tun. Es wird ganz einfach sein, wenn Sie es einmal verstanden haben. Bevor wir diese Produktseite tatsächlich erstellen, werde ich unsere Links hier oben aktualisieren, da wir jetzt eine Katalogseite und eine Sammlungsseite haben. Ich gehe zu unserer Layout-Komponente und verlinke sie dann im ersten Link mit unserem Katalog. Der zweite Link, ich werde das mit den Sammlungen Freestyle verknüpfen. Du könntest genauso gut das machen, Freestyle. Wenn ich darauf auf „Speichern“ klicke und es hier aktualisiert wird, wirst du jetzt sehen, dass wir über unsere Header-Navigation zu unserem Katalog navigieren können und wir können direkt zu dieser Freestyle-Sammlung navigieren unsere Header-Navigation auch. Lassen Sie uns diese Produktroute erstellen. Genau wie bei Kollektionen werden wir eine dynamische Route erstellen, aber wir müssen sie in unserem Produktordner verschachteln. Dann werde ich hier den gleichen Titel wie zuvor machen , handle.server.jsx. Dann exportieren wir, wie ich es normalerweise tue, sofort eine Komponente. Ich rufe einfach dieses Produkt auf und dann eine Rücksendeerklärung für unseren jsx. Es gefällt mir nicht, dass ich das mache. Du musst hier immer etwas jsx dazwischen legen, sonst flippt es aus. Lass uns hier einfach etwas jsx einbauen. Auf diese Weise wird es unseren Server nicht davon abhalten npm run dev auszuführen. Denn bevor wir mit dem Aufbau dieser Komponente beginnen, möchte ich hier einige GraphQL-Abfragen testen . Anstatt Produkte abzufragen, erstellen wir ein Abfrageprodukt. Um dann ein bestimmtes Produkt ins Visier zu nehmen, werden wir dasselbe tun wie zuvor mit Kollektionen. Ich werde angeben, dass wir ein Handle übergeben werden und der Typ ein String sein wird. Lass uns das Zeug hier ausschalten. Dann schnappe ich mir ein Produkt über den Griff. Das Handle wird in den Variablen unseres UseShopQuery-Hooks übergeben , genau wie wir es für die Sammlung getan haben. Sobald wir das Produkt ermittelt haben, gebe ich den Titel des Produkts zurück . Was brauchen wir noch? Beschreibung, HTML, und dann wollen wir das Bild des Produkts zurückgeben. Wir können durch die Medien gehen. Medien können 3D-Modelle sein, es können Bilder sein, es können Videos sein. Aber um es für diesen Kurs wirklich einfach zu halten, werden wir uns nur mit Bildern befassen. Ich werde hier die Medien öffnen. Um es einfach zu halten, zeigen wir nur ein Produktbild an. Ich werde nur das erste Bit der Medien auswählen. In diesem speziellen Shopify-Shop können wir bestätigen, dass das erste Medium ein Produktbild sein wird. Andernfalls möchten wir vielleicht nach mehreren Medien suchen und dann sicherstellen, dass wir ein Bild aus dieser Medienliste finden. Aber ich denke, man kann mit ziemlicher Sicherheit davon ausgehen, dass die ersten Medien ein Bild sein werden. mit dieser Annahme fortfahre, ich mit dieser Annahme fortfahre, werde ich hier Knoten öffnen. Für die Medienbereiche wird wiederum davon ausgegangen, dass es sich um ein Bild handelt. Wenn Sie möchten, dass dies mit allen Arten von Medien funktioniert, müssten Sie das tun, was ich Ihnen in einer der Theoriestunden gezeigt habe , nämlich diese drei Punkte zu haben und auf MediaImage zu sagen. Lass uns das eigentlich immer noch machen. Wenn es sich um ein MediaImage handelt, gibt es diese Auswahl, ID und dann das Bild selbst mit der URL, Breite und Höhe zurück , ID und dann das Bild . Auch hier werden wir uns nur mit Medienbildern in dieser speziellen Klasse befassen . Wenn wir jedoch eine andere Auswahl haben möchten , je nachdem, ob es sich um ein Video handelt, können wir einfach auf Video gehen und dann unsere Auswahl für Videos treffen. Du tust keine Quellen. Dies ist genau wie das Beispiel, das wir zuvor in der Shopify-Dokumentation gesehen haben . Aber damit dieser Kurs es einfach hält, gehe ich einfach davon aus dass wir uns nur Bilder ansehen, von denen ich glaube, dass sie an diese spezielle Wasserstoff-Ladenfront glauben. Ich weiß sowieso nicht, ob es 3D-Modelle oder Videos gibt. Es ist eine ziemlich sichere Annahme hier. Dann lass uns das einfach von Anfang an ausführen . Eigentlich müssen wir hier eine Variable durchgehen, also wird es wahrscheinlich nicht funktionieren. Wir haben keine Variable. Vielleicht möchte ich hier damit herumspielen weil wir die Arbeit nicht wirklich im Griff haben, aber lassen Sie uns das tatsächlich greifen und das hier in eine Abfrage setzen. Wenn es kaputt geht, wird es in unserer Anwendung kaputt gehen und wir testen es einfach hier. Wir werden GQL tun, um unsere Anfrage zu bearbeiten. Dann legen wir es dort hin. Dann müssen wir natürlich importieren, ShopQuery diesen wichtigen Hook von Hydrogen verwenden. Wir brauchen auch GQL. Wenn wir dann CacheLong verwenden wollen, schnappen Sie sich auch CacheLong. Dann machen wir hier einfach Const-Daten. Wir werden es noch nicht zerstören. Dann verwenden wir ShopQuery. Wir werden die Abfrage als konstante Abfrage durchführen , die wir hier unten aufgelistet haben. Cache wird wie zuvor CacheLong sein. Dann übergeben wir die Variablen von handle. Wie wir das Handle weitergeben werden, müssen wir wieder Routenparameter verwenden. Ich schnappe mir UserouteParams. Ich gehe das ziemlich schnell durch, weil dies das gleiche Muster ist , das wir auch für die Kollektion gemacht haben. Wir ziehen einfach den const-Griff vom UserouteParams-Haken ab. Wenn wir dann hier kein handle angeben, können wir die Kurzform von just handle schreiben. Offensichtlich haben wir hier einen kleinen Fehler bekommen, der dazu geführt hat, dass unser Server gestoppt wurde. Aber lassen Sie uns diese Daten einfach auf der Konsole protokollieren und prüfen, ob wir im Moment ein Problem mit unserem Code haben. Das sieht okay aus. Jetzt müssen wir immer noch ein Handle durchlaufen, also bauen wir das in unser ProductsGridItem ein. Ich werde hier oben eine weitere Komponente von Wasserstoff eingeben , die Link-Komponente, und ich werde diese von einer Div in eine Shopify-Link-Komponente umwandeln . Dann mache ich hier rein, schnappe mir das Produkt und gehe zu seiner URL. Bevor ich das mache, muss ich die vorherigen Produkte in einen Teil dieses Pfades einbauen. Klicken wir darauf auf Speichern. Wenn wir zurück zu hier gehen und zu dieser Freestyle-Sammlung oder einer beliebigen Sammlungs- oder Katalogseite gehen beliebigen Sammlungs- oder Katalogseite , auf der ProductGridItem verwendet wird. Jetzt sind unsere Bilder derzeit verlinkt. Wenn wir eines davon untersuchen, können Sie sehen, dass es auf undefiniert zugeht. Das wird nicht undefiniert funktionieren [GELÄCHTER]. Wir müssen herausfinden, wo das Problem liegt. Produkt-URL. Vielleicht haben wir das nicht verlangt. Gehen wir zum Katalog. Wir werden die URL nicht verwenden, wir werden das Handle verwenden. So werden wir die URL konstruieren. Erfrischen Sie sich hier und schauen Sie dann hier nach. Sie können sehen, dass Snowboard der Griff an diesem ist. Das Handle für diesen ist Mail-it-in-Freestyle-Snowboard. Interessante Namen hier. Wenn wir hierher gehen, können wir diesen bestimmten Weg einschlagen. Derzeit kommt im Frontend nichts hinzu. Kehren wir hier zu unserem Code zurück, und natürlich protokollieren wir die Daten auf der Konsole. Hier können Sie sehen, und ich werde das erweitern, damit Sie es einfacher sehen können. Wir sehen, was von der Storefront-API zurückgegeben wird. Es sieht so aus, als hätte unsere Abfrage funktioniert, wir haben das Handle übergeben und wir haben den Titel und die Beschreibung HTML sowie ein Objekt, das die Medien enthält, zurückbekommen den Titel und die Beschreibung HTML sowie ein Objekt, . Wir müssen tiefer in dieses Objekt eindringen, wenn wir sehen wollen, was sich darin befindet. Jetzt füge ich nur noch die Varianteninformationen zu dieser Abfrage hinzu, da wir sie definitiv verwenden müssen , um die Variantenauswahl durchzuführen, sobald wir dazu kommen. Ich werde versuchen, alle Varianten zu ergattern. Ich denke, die Gesamtzahl der Varianten, die Sie in einem Shopify-Shop erstellen können , beträgt sowieso 100. Ich werde versuchen, die gesamte Varianz mit dem Argument der ersten 100 zu erfassen . Dann wird das offensichtlich eine Liste von Knoten zurückgeben. Innerhalb von Knoten werde ich mir die Varianten-ID und eine Reihe anderer Eigenschaften holen die Varianten-ID und , die uns helfen werden. Wir müssen uns den PriceV2 schnappen. Dann ist das natürlich eine Auswahl, also müssen wir uns den Betrag und den CurrencyCode schnappen . Schauen wir uns auch den CompareAtPriceV2 an. Nochmals dasselbe, Betrag, CurrencyCode. Wenn wir möchten, können wir uns das Variantenbild schnappen, aber wir verwenden nur das eine Bild, das auf dem Produkt für diese bestimmte Klasse vorhanden ist . Aber eine Sache, die wir einbringen müssen , um herauszufinden, welche Variante ausgewählt wird, ist SelectedOptions, damit wir den Namen und den Wert ermitteln können. Ich denke, das ist vorerst alles. Wenn wir hier nachladen, wie Sie sehen können, heißt es nur Objekt. Werfen wir einen Blick in die Datenvarianz. Alles was wir tun, müssen wir nisten. Jetzt müssen wir auf data product.variant eingehen. Lass uns die Seite hier aktualisieren. Wir haben hier einen undefinierten Fehler bei Varianten. Lass uns einen Blick darauf werfen. Daten, Produkt, Varianz. Das Produkt kommt undefiniert zurück, was interessant ist. Kehren Sie zu den Anmeldedaten der Konsole zurück. Ich lasse das in der Klasse damit ihr seht, wie man debuggt. Wenn Sie nicht wissen, was in den Daten durchkommt, können Sie es jederzeit einfach auf der Konsole protokollieren und dann können Sie herausfinden, wie Sie Ihre Destrukturierung durchführen und auf verschiedene Teile der Daten zugreifen , die kehrte zurück. Wie Sie hier sehen können, haben wir ein Datenobjekt. Ich glaube, ich muss erneut Daten eingeben. Daten, Daten, Produktvarianten. Hier siehst du, dass ich das tun musste. Los geht's. Wenn wir hier nach unten gehen, sehen wir die Liste der Variantenknoten und Sie können die Storefront-ID dieser Variante, den Preis als Objekt und die ausgewählten Optionen als Array sehen den Preis als Objekt . Wenn wir noch tiefer darauf eingehen wollen, gehen wir zur ersten Variante, also gehen wir zu Nodes, dem ersten Knoten, der in diesem Varianten-Array durchkommt, und gehen dann zu SelectedOptions nur um einen Blick hinein zu werfen. Wie Sie hier sehen können, für diese spezielle Variante die Größe von 154 cm und die Farbe der Syntax. Das müssen wir wissen , um die Variante zu bestimmen. Im Grunde müssen wir hier das Produkt aus diesen Daten herausholen , genau hier. Ich kann hier unten entweder wie zuvor destrukturieren und das aus den Daten machen. Oder ich kann etwas Platz sparen und das hier nach oben verschieben, wodurch es etwas komplizierter aussieht, aber es ist ein bisschen sauberer. So sehen Sie es auch in den Shopify-Beispielen. Wir sollten jetzt Zugriff auf dieses Produkt haben , wenn wir einen korrekten Griff durchlaufen. Dann kann ich hier product.title tun. Wenn wir uns dann hier erfrischen, kommen wir immer noch nicht durch. Was machen wir hier falsch? In diesem Div kommt nichts durch , was interessant ist. Werfen wir einen Blick auf unsere Produktobjekte. Wenn ich es aktualisiere, können Sie den Produkttitel hier sehen. Ich glaube, dass es tatsächlich verschachtelt sein könnte. product.product.title. Ja, und das funktioniert. Das ist ein bisschen funky, nicht wahr? Lass uns Daten machen. Ups. Wir räumen das ein bisschen auf. Daten, Datenprodukt. Dann sollten wir jetzt in der Lage sein, eines dieser Produkte zu entfernen. Nein, das gefällt mir auch nicht. Ich mache Produkte, und da haben wir sie. Wir mussten unsere Destrukturierung hier aktualisieren , um dieses Produktobjekt zu erhalten. Aber jetzt haben wir dieses Produktobjekt, wir können es genau hier verwenden. Jetzt werden Sie feststellen, dass wir unser Layout verloren haben, also lassen Sie uns das aktualisieren. Wir wollen hier unsere Layout-Komponente einfügen und diese darin verschachteln. Lassen Sie uns dieser Produktseite auch einige SEO-Informationen geben. Ich schnappe mir die SEO-Komponente. Da wir innerhalb des Layouts die Datenbank abfragen oder die Storefront-API abfragen, um die SEO-Informationen zu erhalten, werde ich sie in Spannung setzen. Wir müssen Spannung aus React importieren. Dann hier drinnen, die SEO-Komponente. Dazu müssen wir nur den Typ Produkt eingeben und dann einfach das Produkt als Datenobjekt übergeben. Die SEO-Komponente erledigt den Rest der Arbeit für uns. Dann hier unten gebe ich dem einen Klassennamen von Produktseite und Container mit unserem vorbestimmten CSS übereinstimmt. Ein weiterer Bereich hier, das Layout ist nicht definiert. Cool. Lassen Sie es uns eigentlich hier ablegen, weil es unsere eigene Komponente ist. Importieren Sie das Layout und der Rest ist bereits für uns vorgefüllt. Wunderschön. Da hast du es. Wir haben jetzt unser Header-Layout zurück Wenn ich also zu einem der Produkte in einer der Kollektionen gehe und darauf klicke, wirst du sehen, dass es zu diesem Handle geht und dann das Produkt geladen wird Informationen. Im Moment verwenden wir nur den Titel. Lassen Sie uns diese Produktseite tatsächlich ein bisschen weiter ausbauen . Um dies zu tun, erstelle ich eine Client-Komponente für die Speicherung unserer Produktseite, um diese Abfrage der Storefront-API innerhalb der Serverkomponente zu entkoppeln die Speicherung unserer Produktseite, um diese Abfrage der Storefront-API innerhalb der Serverkomponente erstelle ich eine Client-Komponente für die Speicherung unserer Produktseite, um diese Abfrage der Storefront-API innerhalb der Serverkomponente zu . Dies wird wahrscheinlich ein etwas längeres Video sein weil es hier eine Menge Code gibt, den man durchstehen muss. Aber lass uns das hier ein bisschen bereinigen. Ich werde mir das auf jeden Fall ansehen wollen, aber dann werden wir auch unsere ProductDetails-Komponente hier erstellen wollen , Client.jsx. Andererseits, wie ich es tue, wenn ich jede Komponente starte, exportiere die Standardfunktion, den Namen der Komponente, wir nennen es Produktdetails. Wir werden die Produktdaten natürlich als eine ihrer Aufforderungen weitergeben . Dann werden wir natürlich irgendeine Form von jsx zurückgeben. Stellen Sie sicher, dass Sie nicht speichern, ohne etwas hier drin ist, sonst wird es zu einem Fehler kommen. In diesem Sinne erstellen wir einfach ein Div, um diese Situation zu vermeiden. Wie wir es zuvor getan haben, werde ich den Produkttitel dort platzieren. Dann importiere ich stattdessen importiere ich ProductDetails von dieser Adresse. Dann ersetze ich dies durch ProductDetails und gebe das Produkt dann als Requisite weiter. Da haben wir's. Wenn ich hier auf Speichern klicke, aktualisiere es hier. Ein weiterer Fehler. Wir haben diesen Fehler „Kein Lokalisierungskontext verfügbar hier diesen Fehler „Kein Lokalisierungskontext verfügbar“, der schwierig zu debuggen ist. Ich fand heraus, dass ich nur Yarn verwenden musste , um den Cache zu leeren. Das habe ich vorhin über Yarn erwähnt. Ich habe anfangs jedes Mal npm run dev benutzt, aber dann habe ich Yarn installiert, weil es die einzige Möglichkeit war, dieses Problem zu umgehen und stattdessen werden wir den Server schließen , den ich habe ich gerade gemacht und dann werde ich yarn dev —force laufen lassen. Dadurch wird unser Server erneut ausgeführt, und wie Sie jetzt sehen können, funktioniert es. Das ist nur eine seltsame Eigenart in der Shopify Hydrogen-Entwicklung. Wenn Sie jemals wieder einen seltsamen Fehler wie diesen haben und nicht herausfinden können was vor sich geht, geben Sie diesen Befehl vor, yarn dev —force. Offensichtlich hat es in diesem Fall funktioniert und wir können weitermachen. Was ich Ihnen zeigen wollte, bevor dieser Fehler auftrat , ist, dass wir diesen Entwickler mit dem Produkttitel jetzt in eine eigene Komponente verschoben mit dem Produkttitel jetzt in eine eigene Komponente und diese dann durch den Verweis auf die Komponenten ersetzt haben. Wenn wir es uns jetzt in unserem Browser ansehen, sieht es genauso aus. Aber der Grund, warum wir dies in eine eigene Komponente übertragen wollen , hängt mit dem serverseitigen und clientseitigen Rendering zusammen. Wie es in der Dokumentation heißt, wenn ich hier zur React Server Components Übersicht in der Dokumentation schaue React Server Components Übersicht in und nach unten scrolle, kannst du hier sehen, dass wir Serverkomponenten verwenden sollten , wenn wenn wir Aufrufe an die Storefront-API tätigen, sollten wir im Allgemeinen Client-Komponenten verwenden , wenn wir clientseitige statusbehaftete Interaktivität durchführen. Deshalb brechen wir jetzt die Produktdetails ab. Wir sollten es trotzdem tun, nur um den Code sauberer zu machen, aber das erklärt vielleicht mehr, warum wir hier oben eine clientseitige Komponente verwenden. Wir sehen bisher unsere erste kundenseitige Komponente in der Klasse. Gehen wir hier rüber. Um diese Produktseite zu erweitern, werde ich eine Menge Sachen von Shopify Hydrogen importieren, also lass uns sofort loslegen. Ich werde hier einige Anbieter und Hooks importieren , denen wir die Variantenauswahl viel einfacher durchführen können. Ich werde hier zuerst den Weg zu Wasserstoff einbauen , und dann werde ich die geschweiften Klammern so aufbrechen , weil es eine kleine Liste geben hier eine kleine Liste geben wird, die wir machen werden importieren. Zuerst wollen Sie den ProductOptionsProvider, dann verwenden wir darin den UseProductOptions-Hook und dann rendern wir natürlich ein Bild; ProductPrice das ist sehr ähnelt der Geldkomponente, bezieht sich aber speziell auf ProductPrice. Dann die Schaltfläche In den Warenkorb, die wir in dieser Lektion möglicherweise nicht verwenden, aber wahrscheinlich in der nächsten Lektion, wenn wir beginnen die Warenkorb-Funktionalität zu integrieren. Anstelle dessen, was wir hier haben, werde ich jetzt die gesamten Produktdetails im ProductOptionsProvider einpacken . Dieser Anbieter wird uns einige wichtige Funktionen für den Variantenwechsel zur Verfügung stellen, und da dies alles beeinflussen kann, einschließlich des Produktbildes, werde ich das theoretisch und da dies alles beeinflussen kann, einschließlich des Produktbildes, werde ich das theoretisch als Komponente der obersten Ebene. Damit dies funktioniert, müssen wir nur das Produkt als Datenstütze übergeben. Hier werde ich ein Bild erstellen und wir müssen nur die Daten genau dort weitergeben , wo sich das Bild befindet. Lassen Sie uns console.log hier oben haben, damit wir herausfinden können, wie wir zu navigieren, an dem sich diese Bildinformationen befinden. Ich gehe zu console.log, dem Produktobjekt, das übergeben wird, und zu ProductDetails. genau hier werde ich das entfernen , sonst wird es wahrscheinlich einen Fehler geben. Jetzt wechseln wir zu unserer Client-Seite um unsere console.log zu lesen. Da es sich um eine clientseitige Komponente handelt, sehen wir jetzt die Konsolenprotokolle in unserem Browser auf der Clientseite und nicht hier in unserem Terminal auf der Serviceseite Das ist also zu beachten. Wenn wir mit serverseitigen Komponenten arbeiten, werden hier alle Konsolenprotokolle erstellt. Wenn wir uns auf clientseitigen Komponenten befinden, werden alle Konsolenprotokolle unserer Clientseite in unserem Browser ausgeführt. Wir haben hier einen Fehler, weil wir nichts in ein Image einfügen, aber im Grunde haben wir immer noch das Konsolenprotokoll durchgekommen. Wenn wir in Medienknoten gehen und dann hier auf dieses Bild eingehen, sollte dieses Objekt alles sein, was erforderlich ist, um das Bild zum Laufen zu bringen. Lass uns einen Blick darauf werfen. Wir gehen zu Produktmedien-Nodes , dem ersten Node und dann dem Image. Lass uns das machen, data= {products.media nodes [0]; wir schnappen uns den ersten Knoten und dann.image}. Ich klicke bei der Aktualisierung hier auf „Speichern“ und lass uns sehen, was passiert. Das Daten-Prop sollte die Eigenschaft Alt Texts haben. Das gefällt mir nicht, schauen wir uns das an. Vielleicht müssen wir nur den Alt eingeben, wie es hier steht, also lass uns zu unserem Bild gehen und Alt Text hier machen. Werfen wir einen Blick in das Hauptbild unserer Elemente. Es wird gerendert, aber es ist ein verdammter Riese. Es sah aus, als würde es nicht auftauchen, aber es taucht tatsächlich auf. Ich muss hier nur einen Klassennamen eingeben, damit er sich verhält, also mache ich className. ich wieder auf das CSS verweise, das ich bereits für dich erstellt habe , wird es ein Produktseiten-Bild sein, und jetzt kannst du sehen, dass es dort schön auf der Seite ist. Auch dies setzt voraus, dass wir nur Bilder für unsere Produktmedien verwenden. Dies würde im Wesentlichen zusammenbrechen, wenn jemand Video- oder 3D-Modelle in seinen Produktmedien verwenden würde. Denken Sie daran, dass dies eine vereinfachte Version für die Zwecke dieser Basisklasse auf Shopify Hydrogen ist. Lassen Sie uns nun innerhalb dieser ProductOptionsProvide-Komponente eine zweite Komponente einfügen, und hier werde ich mein Produktformular einfügen. Lass es uns zuerst erstellen. Dies ist das erste Mal, dass wir zwei Komponenten in einer Datei sehen . Wir müssen es nicht exportieren, da wir es direkt in dieser Datei verwenden , also nenne ich dieses eine Produktformular. Lass uns hier eine Rückkehr mit einem div , damit die gesamte Anwendung nicht nur als Platzhalter kaputt geht. Dann möchte ich sicherstellen, dass ich ein Produkt als Requisite durchgehe, und dann kann ich mir die ProductForm-Komponenten schnappen , die wir gerade definiert haben. Lassen Sie es uns so selbstschließend machen, und dann kann ich das Produkt als Produktrequisite durchgehen . Dann, genau wie zuvor, werde ich products.title hier platzieren. Lassen Sie uns das ausführen und sehen, ob es funktioniert. Jetzt haben Sie das Produktbild und den Titel hier. In dieser ProductForm-Komponente wird nun der UseProductOptions-Hook verschachtelt sein. Hier werden wir beginnen, unsere Funktionalität zur Variantenauswahl zu erstellen. Genau hier; und das ist wahrscheinlich der komplizierteste Teil des Videos, also habt Geduld mit mir, Leute, ich werde ein paar Dinge aus diesem Haken ziehen; useProductOptions und diese UseProductOptions ist der Hook, um den Status zu verwalten, welche Optionen ausgewählt sind und welche Variante daher aus diesen Optionen ausgewählt wird. Was wir tun können, ist die Optionen abzurufen, wir können die SelectedVariant abrufen, wir können die SelectedOptions abrufen und wir können die setSelectedOption-Methode aufrufen. Es ist einfacher für euch zu lesen, lasst es uns so verschachteln. Wir holen uns das alles aus dem UseProductOptions-Hook, und dann werde ich hier mit einem Div beginnen, aber ich werde den Titel als h1 setzen und dann darunter bin ich Ich werde diese ProductPrice-Komponente verwenden, also nehme ich den ProductPrice gebe ihm einen Klassennamen von product-Page-Preis. Für CSS werde ich wie zuvor ohne nachfolgende Nullen durchgehen . Lasst uns das für euch in mehrere Zeilen aufteilen. Ohne nachfolgende Nullen übergebe ich das Produktobjekt als Daten-Prop und dann gebe ich auch die Varianten-ID ein. Dies ist wichtig, da der ProductPrice basierend auf der ausgewählten Varianten-ID ändern kann und wir die ausgewählte Varianten-ID tatsächlich so abrufen können. Das ist echt cool. Wir schnappen uns das, was eine Variable für dieses Zustandsobjekt ist, also wird es tatsächlich aktualisiert, wenn es basierend auf unserer Auswahl aktualisiert wird . Das ist die Macht der Verwendung dieses Hooks, und das ist der Zustand , über den wir in dieser speziellen Komponente gesprochen über den wir in dieser speziellen Komponente haben , die wir verwenden werden. Sie werden in nur einer Sekunde feststellen, dass das funktioniert. Wenn ich hier aktualisiere, kannst du sehen, dass hier ein Preis ansteht. Es hat eigentlich keine nachfolgenden Nullen, sodass es ohne nachfolgende Nullen nicht auf dieser speziellen Seite funktioniert , sondern für jede Seite, die zwei Nullen hat; zwei nachfolgende Nullen, wird es entfernt diese aber wie Sie hier sehen können , kommt der Preis durch. Wieder macht meine schlechte Internetverbindung das langsam. Die Internet-Situation ist vorerst geklärt, tut mir leid. Da hast du es. Wir haben unseren Preis genau dort durchgekommen. Eine gute Idee wäre natürlich hier einen weiteren ProductPrice zu erstellen und das zu tun, was wir auf ProductGridItem getan haben, um zu überprüfen, ob es rabattiert ist, auch den Vergleich zum Preis anzuzeigen. Aber ich habe dir schon gezeigt, wie das geht, also solltest du das selbst herausfinden können. Im Interesse der Zeit und um sicherzustellen, dass diese Lektion nicht zu lang wird, wollen wir mit dem wichtigsten Teil fortfahren, nämlich der ProductForm selbst. Was Sie hier sehen werden, ist, dass ich eine weitere Rückgabeanweisung verschachteln werde, also wird dies auf einem Array basieren und diesen Abschnitt werden wir in einem div mit der Klasse von Produktoptionen. Dann greifen wir hier auf alle Optionen zu , um unser Produktformular zu erstellen. Wir werden wieder map verwenden, wir werden jede der Optionen wählen. Wir werden die Strukturierung verwenden, um den Namen und die Werte aus jeder Option herauszuholen. Dann erstellen wir hier einen vollständigen Rücken, müssen dort nur eine Klammer hinzufügen. Das geht also nicht kaputt und entfernt das nicht. Sie müssen das einfach hierher verschieben, um diesen Fehler zu beheben. Da haben wir's. Die roten, verschnörkelten Linien sind weg. Dann setzen wir hier eine if-Anweisung , nur für den Fall, dass es nur einen Wert gibt In diesem Fall gibt es keine Auswahloption. Wenn es einen gibt, geben wir einfach null zurück. Dies ist nur ein Fallback für den Fall, dass es nicht mehrere Werte gibt. In diesem Fall macht es keinen Sinn, aus Optionen auszuwählen , wenn es nur eine Option gibt. Wenn das nicht der Fall ist, geben wir einen weiteren Satz JSX zurück. Ich werde versuchen, dies Schritt für Schritt wie möglich zu machen. Daher erstellen wir zunächst eine Produktoptionsgruppe für jede Gruppe von Produktoptionsgruppen. Ich werde hier einen Schlüssel eingeben weil es eine Voraussetzung für eine Reaktion ist. Wir können den Namen hier als Schlüssel verwenden und dann werde ich hier ein Elegance-Element mit dem Dash Name der Produktklassenoption einfügen, und dann kann ich den Namen der Option eingeben. Lass es uns vorerst dort lassen und lass uns einen Blick darauf werfen. Wie Sie sehen können, erhalten wir die Liste der verschiedenen Optionen zurück. Wenn ich hier in meinen Katalog gehe und zu mir gehe, glaube ich, dass es dieser mit den meisten Optionen ist. Sie können sehen, wenn Sie jetzt alle verschiedenen Optionen auflisten. Was wir aber noch nicht auflisten, sind die Werte. Lass uns das jetzt durchgehen. In diesem nächsten Teil werden wir eine weitere Rückgabeanweisung verschachteln. Hier sage ich, dass es hier langsam etwas funky aussieht. Hier wird viel geschachtelt. Es liegt leider nur in der Natur des Tieres. Wir werden hier eine andere Map verwenden, um unsere Werte an ein JSX zur Anzeige zu übergeben . Ich nehme den Wert, öffne ihn und setze dann etwas Code vor die Rückgabeanweisung. Aber nur um uns zu beginnen, nur um etwas auf die Seite zu bringen, werde ich meine Rücksendungen sofort öffnen. Hier werde ich ein Div mit einem Optionswert einer Klasse von Produkten eingeben , und hier drin werde ich ein Optionsfeld setzen. Wir machen eine Art Radio. Der Name entspricht dem Namen der Option. Dann wollen wir natürlich den Wert aufzeichnen. Wir durchlaufen derzeit alle Werte, damit wir den Wert, den wir gerade betrachten, übergeben können , und dann werden wir die OnChange-Methode durchlaufen . Dies ist der Zeitpunkt, an dem wir beginnen die Optionsmethode für Sets verwenden , die wir aus dem Haken der Produktoptionen genommen haben. Jetzt füge ich eine anonyme Funktion ein , setze ausgewählte Option, Parsing, Name und Wert ein und schließe dieses Eingabeelement. Jetzt schauen wir mal, ob wir irgendwelche Fehler bekommen. Es ist noch nicht vollständig, aber ich wollte Ihnen zeigen, was wir bisher haben. Wir haben hier etwas Platz, aber es kommt nichts durch. Lass uns einen Blick darauf werfen. Wir haben die Legende und dann haben wir für jeden von ihnen einen Input. Oh, ich habe vergessen, das Etikett hier anzubringen. Der Grund, warum ich diese Eingaben in diese Divs geschachtelt habe , ist, dass wir ein Label einfügen können, was ein schöneres Aussehen für die Eingabe ist , als diese hässlichen Optionsfelder zu haben. Es ist nur eine HTML-Sache hier. Ich werde dieses Label erstellen und dann den Wert hier eingeben , damit wir sehen können , welchen Wert wir auswählen. Wie Sie sehen können, kommen die Werte jetzt zum Vorschein. ich den Mauszeiger über jede Option bewege, gibt es eine Linie, die darunter liegt. Da ich gerade auf diese klicke, sollte die Set-Auswahloption funktionieren. Wir bekommen einfach kein visuelles Feedback auf unserem Formular. Um das zu erreichen, wir erstellen wir hier oben eine Variable namens checked und wir greifen auf das Objekt zu, auf das wir noch nicht zugegriffen haben. Wir greifen auf diese ausgewählten Optionen zu, die wir noch nicht verwendet haben. Wenn der Name bei der Übergabe an ausgewählte Optionen dem Wert entspricht, den wir gerade betrachten, dann ist check true. Jetzt müssen wir es nur noch in unseren Input hier eintragen. Checked entspricht dem Wert dieses Werts. Drücke darauf „Speichern“. Jetzt können Sie sehen, dass es immer noch nicht funktioniert, weil wir hier noch eine Sache zu tun haben, und das hat unsere ID erstellt . Lassen Sie uns hier eine kleine Zeichenfolge mit dem Namen und dem Wert erstellen . Dann können wir das sowohl hier als auch dann auch in das Label schreiben, HTML für ID eingeben, und das verknüpft unser Label mit unserer Eingabe. Das sollte alles sein , was zum Arbeiten erforderlich ist. Wenn ich jetzt auf eines davon klicke, okay. Es funktioniert immer noch nicht. Was haben wir hier vor sich? Jedes Kind in der Liste sollte eine eindeutige Schlüsselstütze haben. Vielleicht ist das das Problem, das wir hier haben. Genau hier, lasst uns diese neu erstellte ID hier als unsere Hauptrequisite verwenden . Drücke darauf „Speichern“. Erfrischen Sie sich hier. Wir sind immer noch nicht in der Lage, unsere Optionen hier zu ändern. Wir haben hier einen Fehler in Bezug darauf, was wir auf zwei Kinder mit demselben Schlüssel gestoßen sind . Lass uns einen Blick darauf werfen. Ich habe vergessen , hier meine geschweiften Klammern einzufügen. Es setzt buchstäblich den Wert eines Dollarzeichens ein. Es ist kein dynamischer Wert. Wie Sie hier sehen können, können Sie bereits jetzt sehen , dass eine andere Auswahl gespeichert wird. Hoffentlich war das nicht allzu schwer zu verfolgen. Wie Sie hier sehen können, wenn ich die Varianz wechsle, ändert sich das Bild nicht, aber der Preis ist so, dass die Verwendung der Produktoptionen Hook hier tatsächlich unseren Staat für uns verwaltet, was wirklich cool ist. Jedes Mal, wenn wir hier eine neue Auswahl erstellen, wählen wir eine neue Variante aus und das aktualisiert automatisch unseren Preis und alles andere, was mit der Varianz auf unserer Seite zusammenhängt. Das einzige, was wir hier vermissen, nur um es zu beenden, bevor wir zur Warenkorbseite übergehen , ist die Beschreibung hier. Was ich tun werde, ist ein Div mit der Klasse der Produktbeschreibung zu erstellen . Anstatt HTML dort einzufügen, werde ich diese sehr seltsam aussehende Requisite eingeben , die hier gefährlich in einem HTML gesetzt wird , und dann hier rein, um HTML zu unterstreichen, unterstreichen und dann zu setzen in unserer Beschreibung HTML für das Produkt. Beschreibung HTML. Lass uns das schließen, damit wir es uns ansehen können. Wie Sie sehen können, ist hier unsere Beschreibung. Nun, warum haben wir es in diese Requisite gesteckt und nicht einfach, lass uns das alles löschen und es dann hier reinwerfen. Schauen wir uns an, was passiert, wenn wir das tun. Ich klicke auf „Speichern“ und wie Sie sehen können, durchläuft es das wörtliche HTML. Wir müssen diesen HTML-Code tatsächlich durch eine Requisite zum Rendern einfügen . Der Grund, warum die Requisite in HTML gefährlich gesetzt heißt und nicht nur in einem HTML, ist eine Erinnerung von React, beim Einfügen von HTML in ein kommendes Element sehr vorsichtig zu sein beim Einfügen von HTML in ein kommendes Element sehr vorsichtig in ein kommendes Element aus einer Datenbank oder einer externen Quelle. Der Grund dafür ist etwas, das als HTML-Injektion bezeichnet wird. Jemand könnte Ihre Seite tatsächlich beschädigen indem er hier falsches HTML eingibt. Es ist also eine Warnung von React, um Sie wissen zu lassen , dass dies ein bisschen gefährlich ist. Aber in unserer Situation , in der wir Produktbeschreibungs-HTML einfügen , sollte dies funktionieren, solange wir, die Benutzer oder die Administratoren keinen fehlerhaften HTML-Code in unser Produktbeschreibungsfeld eingeben keinen fehlerhaften HTML-Code in die Benutzer oder die Administratoren keinen fehlerhaften HTML-Code in unser Produktbeschreibungsfeld eingeben. Aber wenn der Kunde oder der Administrator oder wer auch immer Beschreibungen zu Produkten hinzufügt, defektes HTML eingibt, dann wird das kaputt gehen. All dies hat das Potenzial, zu brechen. Deshalb heißt es gefährlich in HTML gesetzt. Das ist da etwas zu beachten. Das ist ein kleines Risiko. Dieser war ein großer. Ich hoffe du hast mitgemacht. Wenn Sie zu irgendeinem Zeitpunkt nicht weiterkommen, hinterlassen Sie natürlich einen Kommentar. Aber wenn wir jetzt zu einem Produkt in einem Geschäft gehen, sind einige davon weniger kompliziert. Dieser hat nur eine Option. Wir können nur eine Größe auswählen. Aber dieses hier, das Hydrogen-Snowboard, ist meiner Meinung nach das komplexeste. Es hat Größe, Bindungshalter und Material. Wir werden im nächsten Video sehen wenn wir die Schaltfläche „In den Warenkorb“ hinzufügen, dass, wenn wir auf die Schaltfläche „In den Warenkorb“ klicken, die Variante bereits aus unserer Auswahl bestimmt ist und diese Variante erhalten wurde dem Warenkorb hinzugefügt. Also danke, dass du in diesem Video mitgemacht hast. Im nächsten Video werden wir den größten Teil unserer App machen , nämlich die Warenkorb-Funktionalität. Grundsätzlich funktioniert das Geschäft erst, wenn wir eine Warenkorbfunktion haben also ist dies der letzte Teil, damit unser Geschäft funktioniert. Machen Sie vielleicht eine Pause, machen Sie sich bereit und kommen Sie zur letzten Lektion zurück, bevor wir unsere App in unserem Shopify-Shop bereitstellen. 11. Wart Funktionalität pt. 1: Ordnung Leute, es ist Zeit für den letzten und wichtigsten Teil , um diesen Laden zum Laufen zu bringen. In diesem einfachen Geschäft gibt es natürlich eine ganze Reihe von Verbesserungen, die Sie hier vornehmen können, aber um ein einfach funktionierendes Geschäft zu erhalten, müssen wir noch eine Sache tun , nämlich den Warenkorb zu aktivieren -Funktionalität. In diesem Video werden wir uns hier auf viele verschiedene Komponenten konzentrieren. Wir werden unsere App-Komponente aktualisieren, unsere Layout-Komponenten aktualisieren, um einen Warenkorb-Button einzufügen, unsere Produktseite hier aktualisieren, um eine Schaltfläche „In den Warenkorb“ einzufügen , und eine Warenkorbseite erstellen. Lassen Sie uns ohne weiteres loslegen. Wir müssen dies möglicherweise in zwei Videos aufteilen je nachdem, wie lang das dauert. Aber als erstes, wie ich bereits erwähnt habe, werde ich hier unsere app.server.js-Datei öffnen. Um die Warenkorb-Funktionalität in unserer App zu erhalten, müssen wir uns die Komponente des Warenkorbanbieters schnappen und dann unseren Router darin einbinden. Ich werde das karren. Es befindet sich immer noch in der Zwischenablage, legen Sie dort unseren Warenkorbanbieter und fügen Sie dann wieder in diesen Router zwischen den Warenkorbanbieter-Tags ein. Ich drücke da auf „Speichern“. Jetzt können wir einfach so die Hooks und Funktionen des Warenkorbs in unserer App verwenden . Gehen wir hier in unseren Datei-Explorer und erstellen eine neue Route für die Warenkorbseite. Hier jetzt Routes-Ordner, cart.server.jsx. Im offiziellen Shopify-Tutorial verwenden sie dafür eine Schublade, aber es bringt externe Bibliotheken ein und fügt viel Code ein. Ich empfehle auf jeden Fall, eine Schublade als Designmerkmal zu haben , Benutzererfahrung betrifft, aber um es einfach zu halten und uns auf das zu konzentrieren , was wir brauchen, um das tatsächlich zum Laufen zu bringen , machen wir einfach eine separate Seite. Genau wie bei den Produktdetails werden wir hier eine Route eröffnen und dann durch kundenseitige Komponenten bedienen. Diese Datei wird ziemlich einfach sein. Wir exportieren einfach den Standardfunktionswagen und kehren dann hier zurück, und dann wickeln wir alles in eine Layout-Komponente ein. Ich werde ein Div mit einer Klasse von Containern öffnen, damit alles enthalten ist, und dann werde ich eine clientseitige Komponente einbringen , die ich gerade erstellen werde Codecart-Seite. Das ist im Grunde alles. Jetzt brauchen wir nur noch unsere Importe. Wir werden das Layout von Komponenten/Layout-Server importieren . Wir haben dort ein Layout, und dann müssen wir diese Komponenten erstellen, also werde ich eine Komponente namens CartPage.Client.jsx erstellen . Dann können wir hier eine Komponente erstellen, Standardfunktionswagen exportieren, zurückgeben, zunächst ein grundlegendes Div, und dann können wir das importieren. Importieren Sie die Warenkorbseite und der Rest ist für uns aus Visual Studio-Code vorausgefüllt. Wir haben dort eine Menge Code geschrieben, alles grundlegende Zeug, alles, was wir vorher gemacht haben, mal sehen, ob es tatsächlich funktioniert hat. Wenn ich hier zu meinem Warenkorbpfad gehe, wenn wir hier in unsere Elemente schauen, gehen wir in main, wir können sehen dass sich ein Container mit einem Div darin befindet. Wir können vermuten, dass das funktioniert und wir uns auf dieser speziellen Route befinden. Das ist alles, was wir für unsere Kartroute tun müssen. Die gesamte Arbeit, die wir für die Warenkorbseite leisten werden , wird in dieser kundenseitigen Komponente stattfinden. Genau wie bei der Produktdetailkomponente müssen wir viele verschiedene Komponenten und Haken aus Shopify-Wasserstoffen importieren . Ich werde tun, was wir vorher gemacht haben, es auf mehrere Zeilen aufteilen und das From startklar machen. Ich werde nur alle Haken und Komponenten durchgehen , die wir einbringen werden, also müssen wir den Use Cart Hook verwenden. Wir werden eine Anbieterkomponente namens Cart Line Provider verwenden , wir werden die Bildkomponente zum Anzeigen eines Bildes einbringen , wir werden den Use Cart Line Hook einbringen, wir sind Um die Geldkomponente für die Formatierung von Geld einzubringen, bringen wir die Linkkomponente für die Verlinkung zum Produkt ein, wir bringen die Komponente Warenkorbkosten ein. Wie ich schon sagte Leute, hier gibt es eine Menge. Wir werden die Mengenkomponente der Warenkorbposition einführen und schließlich die Komponente der Schaltfläche zur Mengenanpassung der Warenkorblinie einführen . Ich habe nicht gelogen, als ich sagte, dass Shopify-Wasserstoff eine große Auswahl an Komponenten enthält, aber sie haben auch einen Zweck und erleichtern unser Leben. Vertrauen Sie mir, Sie werden froh sein, wenn wir mit der Entwicklung dieser Seite beginnen , dass all dies existiert. Jetzt möchte ich diese Warenkorbseite in mehrere Komponenten aufteilen . Was ich tun werde, ist, dass ich hier Spannung erzeugen werde. Sie können sehen, dass es automatisch von React für uns importiert wird, und dann werde ich hier drinnen die Warenkorbtabelle ausgeben, die wir noch nicht erstellt haben. Lass uns das jetzt erstellen. Ich muss es nicht exportieren, weil ich es nur in derselben Datei verwende, und ich erstelle einfach diese Warenkorbtabellenkomponente. Der Grund, warum ich das in eine separate Komponente einfügen möchte , ist dass wir hier einige Zustandsvariablen verwenden werden . Ich werde Linien abziehen, auschecken , und Status von diesem Use Cart Hook. Dann machen sie das offensichtlich zu einer Komponente. Wir müssen eine Art rendern, also öffnen wir uns und werfen einfach ein Tabellen-HTML-Element ein. Derzeit können wir zuverlässig bestätigen, dass sich keine Artikel in unserem Warenkorb befinden, und das liegt daran, dass wir noch nicht einmal einen „In den Warenkorb“ -Button auf unserer Produktseite haben . Was sofort ein guter Fallback ist, ist wenn lines.length gleich Null ist wie in, was bedeutet, dass sich derzeit keine Zeilen in unserem Warenkorb befinden, es keine Artikel in unserem Warenkorb gibt, dann können wir etwas JSX zurückgeben hier und sag so etwas wie keine Artikel sind gerade im Warenkorb. Jetzt gibt es ein gewisses Problem, und ich möchte Ihnen zeigen, was das ist. Was ich tun werde, ist hier ein Konsolenprotokoll einzufügen, und sagen wir einfach keine Zeilen. Wenn wir das ausführen, heißt es, dass sich derzeit keine Artikel im Warenkorb befinden. Jetzt kommen wir in einer Sekunde darauf zurück. Was wir tun werden ist, welches sollten wir zuerst machen? Gehen wir hier in die Layout-Komponente und füllen diese aus. Ich werde es hier in ein Symbol aus einer Icon-Bibliothek einfügen , das bei der Verwendung von Rückenwind empfohlen wird. Im offiziellen Shopify-Tutorial verwenden sie etwas namens Rückenwind und es gibt eine zugehörige Rückenwind-Icon-Bibliothek. Wir können die Icon-Bibliothek tatsächlich immer noch verwenden , auch wenn wir keinen Rückenwind verwenden. Ich vergesse, wie es heißt, aber wenn wir nur die Rückenwind-Icon-Bibliothek eingeben , sollte sie auftauchen. Heldensymbole, so heißt es. Diese Heldensymbole sind eine Bibliothek von SVG-Icons, deren SVG jetzt wahrscheinlich die beste Möglichkeit ist Icons in jedem modernen Projekt zu implementieren. Wir können es als Solid, Outline oder Mini machen. Ich mag die Gliederung und ich werde hier einfach den Warenkorb eingeben. Sie können dies personalisieren, wenn Sie möchten. Sie können diesen Einkaufswagen benutzen. Ich mag die Einkaufstasche und wir können entweder die SVG oder die JSX kopieren. Wir verwenden es in einem React-Projekt, also können wir das JSX kopieren, das ist in Ordnung, und dann kann ich es hier einfügen. Eigentlich ist es besser, dass wir den JSX verwenden, denn genau hier können Sie etwas sehen, über das ich in den Theoriestunden gesprochen habe . Das hier ist eine Verbindung zu Rückenwind, also werde ich das entfernen. Aber hier können Sie sehen, ob das ein Standard-SVG in HTML war, das wäre Stroke, Line , Join, oder ich denke, das ist ein Wort, aber da ist ein Strich drin. Denken Sie daran, dass wir in den Theoriestunden darüber gesprochen haben , dass wir Striche haben können. Es ist eigentlich eine gute Idee , dass wir uns den JSX hier schnappten Ich zeige Ihnen nur, dass es jetzt, wenn wir die SVG kopieren, wenn wir die SVG kopieren, Bindestriche in Attributnamen geben wird , die wir nicht wollen. Definitiv eine Kopie des JSX, wenn Sie JSX verwenden was wir gerade tun. Ich werde das ein wenig einrücken, und wie Sie hier sehen können, können Sie einen JavaScript-Ausdruck in auch einen JavaScript-Ausdruck in einige dieser Attribute einfügen, und dann werde ich natürlich transformieren das in einen Link. Haben wir importiert? Ja, wir haben den Link hier importiert und verwenden ihn woanders. Ich kann einfach so gehen. Dann muss ich nur noch auf die Route verlinken, die einfach -cart sein wird. Genau hier werden wir in Kürze einen Indikator dafür setzen , wie viele Artikel sich im Warenkorb befinden, aber wir werden in nur einer Sekunde darauf eingehen. Wenn ich hier zu unserer Anwendung zurückkehre, können Sie sehen, dass wir dieses Warenkorbsymbol hier haben, und wenn ich auf einer anderen Seite bin auf dieses Warenkorbsymbol klicke, werden Sie sehen, dass es uns zurück zur Warenkorbseite bringt. Gehen wir auf eine Produktseite. Gehen wir zu dem ersten, den wir gesehen haben , als unsere App geladen wurde. Los geht's, das Wasserstoff-Snowboard, und lass uns die Schaltfläche „In den Warenkorb“ bringen und in den Warenkorb legen. Öffnen Sie hier unsere Produktdetails-Komponente. Wir importieren bereits unseren „In den Warenkorb“ -Button hier oben. Ich gehe runter zu, lass uns nach den Optionen, aber vor der Beschreibung, und lass uns hier eine Schaltfläche In den Warenkorb erstellen. Eigentlich wollen wir nicht, dass es sich selbst schließt , weil wir hier Kinder hinzufügen werden. Wir werden hier in den Warenkorb legen. Um es dann entsprechend dem vorhandenen CSS zu stylen, entsprechend dem vorhandenen CSS zu stylen, werde ich es als Klassennamen in den Warenkorb legen . Gehen wir hier zu unserer Anwendung und Sie werden sehen, dass die Schaltfläche In den Warenkorb vorhanden ist. Ich habe es gerade aktualisiert, aber da können Sie sehen, dass wir unseren „In den Warenkorb“ -Button haben. Eine Sache, die wir tun möchten, bevor wir auf diese Schaltfläche In den Warenkorb klicken oder den Benutzer auf diese Schaltfläche In den Warenkorb klicken lassen , ist, sie einzuschränken, wenn sie nicht vorrätig ist. Wir möchten die Schaltfläche „In den Warenkorb“ nicht anzeigen oder Benutzer zumindest mitteilen , dass sie nicht vorrätig ist , wenn sie nicht vorrätig ist. Scrollen wir hier nach oben zum Produktformular und erstellen hier einen booleschen Wert. Ich werde eine const erstellen , die nicht vorrätig ist und das wird wahr sein, wenn die ausgewählte Variante nicht zum Verkauf angeboten wird. Wenn das nicht auftaucht, werden wir hier einen Fallback von false haben . Ich glaube, dass wir das nicht wirklich aus unserer GraphQL-Abfrage abgerufen haben, also müssen wir das tun. Gehen wir zurück zu handle.server.js x in unserem Produktordner dort. Wir müssen nur sicherstellen , dass wir auf dem Variantenknoten prüfen, ob er zum Verkauf angeboten wird. Wir müssen das nur aktualisieren, und dann haben wir diese boolesche Flagge hier wird wahr sein, wenn die ausgewählte Variante nicht zum Verkauf angeboten wird. Was ich hier tun werde, ist ein ternärer Operator, dies in eine neue Zeile aufteilt und dann einen JavaScript-Ausdruck einfügt, und dann einen JavaScript-Ausdruck einfügt hier haben wir einen ternären Operator. Wenn es nicht vorrätig ist, sagen wir nicht vorrätig, und wenn es nicht ausverkauft ist, sagen wir einfach In den Warenkorb. Dann sollte auch das funktionieren, ich setze es ein. Wenn es nicht vorrätig ist, sollte es auch deaktiviert sein, also lege ich es in eine deaktivierte Requisite. Das sollte funktionieren. Ich glaube nicht, dass eines dieser Produkte nicht vorrätig ist, also können wir es nicht wirklich testen, aber es ist definitiv auf Lager. Wenn ich jetzt auf „In den Warenkorb“ klicke, wirst du sehen, dass dort ein bisschen geladen ist, aber wenn es fertig ist, sollte das jetzt im Warenkorb sein, und wenn ich hier auf diese Karte klicke, werden wir jetzt erhalte einen Fehler, weil wir es tatsächlich mit einigen Warenkorbinformationen zu tun haben. Was wird dadurch wiedergegeben? Ist in der Warenkorbtabelle nicht definiert. Schauen wir uns an, was hier vor sich geht. Ich setze Render hier statt Return. Ich bin so ein Vollidiot. Ihr schreit wahrscheinlich von der anderen Seite des Computers und sagt mir, dass ich das falsch verstanden habe. Das tut mir leid. Wenn wir hier aktualisieren, wird immer noch angezeigt, dass sich keine Artikel im Warenkorb befinden, aber dann verschwindet es. Interessant. Wenn ich erneut aktualisiere, befinden sich derzeit keine Artikel im Warenkorb und nach einer Weile verschwindet es. Das ist das Problem, auf das ich vorhin angespielt habe. Ich sagte, wir müssen hier reinkommen und das in Ordnung bringen. Im Grunde weiß ich nicht, ob das ein Bug oder so ist, aber im Wesentlichen wird der Wagen ohne Zeilen zurückkehren, und dann wird er die Zeilen später entdecken. Wenn wir es zum ersten Mal laden, wird angezeigt, dass sich keine Artikel im Warenkorb befinden, aber dann verschwindet es, wenn sich Artikel im Warenkorb befinden. Was ich hier getan habe, ist, dass ich den Status des zurückgegebenen Objekts aus dem Gebrauchskorb abgerufen habe. Schauen wir uns hier an, was der Status ist. Wenn ich den Protokollstatus konsolere und dann hier aktualisiere, können Sie sehen, dass drei Status beim Abrufen auftauchen, nicht initialisiertes Abrufen, eigentlich sind das nur zwei; nicht wahr? Aber es gibt drei, die auftauchen. Lassen Sie mich das einfach auf die andere Seite stellen, damit wir den Status erhalten, egal ob die Zeilen Null sind oder nicht, und dann hier aktualisieren. Hier können Sie sehen, dass wir Abrufen, nicht initialisiertes Abrufen und dann Leerlauf erhalten. Der Grund, warum dies hilfreich ist, ist , dass Idol denkt, dass die Einzelposten Null sind, bevor das Idol auftaucht . Aber wenn idle auftaucht, merkt es, dass das nicht stimmt und zeigt die Alternative an, die derzeit nur eine leere Tabelle ist. Wenn wir hier reinschauen und untersuchen, werden Sie feststellen, dass eine leere Tabelle gerendert wird. Aber natürlich ist dieser Tisch der Tisch , an dem alle unsere Artikel untergebracht sind. Was ich hier tun werde, ist, neben der Überprüfung der Länge der Zeilen auch den Status zu überprüfen und nur anzuzeigen, dass sich derzeit keine Artikel im Warenkorb befinden , wenn der Status inaktiv ist. Andernfalls könnte es sich in einem Ladezustand befinden. Wenn ich hier aktualisiere jetzt Artikel im Warenkorb befinden , werden keine Artikel im Warenkorb angezeigt. Das ist meine kleine Lösung für dieses Problem. Wir sind schon ziemlich tief in dem Video und wir haben noch nicht einmal eine Liste mit Warenkorbartikeln, die angezeigt werden. Lassen Sie uns jetzt darauf eingehen. Ich werde dieser Tabelle eine Klasse von Cart-Tabelle geben, wiederum nur für die CSS-Formatierung, und dann werde ich hier ein t-Body-Tag öffnen , und dann werden wir hier anfangen unsere Zeilen einzubringen. Wir werden diese vertraute Kartenfunktion wieder verwenden und wir greifen nach jeder Zeile, und mit jeder Zeile geben wir etwas JSX zurück. Hier werden wir den Anbieter der Warenkorblinie platzieren. Wir müssen ihm einen Schlüssel geben, also geben Sie die Zeilen-ID als Schlüssel ein, und dann übergeben wir die Zeile in der Linieneigenschaft. Auch hier kann ich nicht zu sehr ins Detail gehen , warum das funktioniert, weil es nur in der Natur der Komponente liegt. Diese Anbieterkomponenten bieten Funktionen und werden von den Bibliotheken eingerichtet , die wir verwenden. Sie werden bald sehen, welche Funktionen sie bieten. Wir werden hier einen anderen Hook verwenden, aber was ich tun werde, ist eine weitere Komponente namens Cart Line Item zu erstellen . Dann lass uns nochmal gehen, Funktion CartLineItem. Hier werde ich etwas JSX zurückgeben, natürlich werde ich eine Tabellenzeile zurückgeben. Was ich dafür verwenden werde, wird von einem anderen Hook hier zurückgegeben. Wir haben hier einen weiteren Hook von der Struktur, einige Dinge von diesem Haken, aber der Hook, den wir hier verwenden werden , ist UseCartline, und was wir tun werden, ist uns die Zeilen-ID zu schnappen, etwas, das als Ware bezeichnet wird, und die Kosten für dieses Objekt. Hier können wir die Zeilen-ID verwenden, und dann wird jede dieser Zeilen, glaube ich, vier Spalten haben . Ich hab's eingerichtet. Hier drin, im ersten , werden wir unser Bild platzieren. Sagen wir einfach Bild als Platzhalter, das nächste haben wir unseren Produkttitel. Ich gebe zunächst nur falsche Werte ein, damit wir wissen, was hier reingehen wird, Variantenauswahl und individueller Preis, und dann wird der nächste unsere Mengenauswahl haben. Dann wird der letzte Teil unsere Zeilensumme und einen Entfernen-Button haben. Wenn ich hier aktualisiere, können Sie sehen, dass wir eine Zeile haben , die all diese Platzhalterwerte anzeigt. Das ist nicht besonders praktisch, also versuchen wir, diese dynamisch zu gestalten. Ich werde diese Platzhalter entfernen und hier die Image-Komponente verwenden, die ich meiner Meinung nach bereits importiert habe. Ja, habe ich. Sehr gute Arbeit, Chris. Gehen wir hier rein und geben ihm einen Klassennamen LineItemImage zum Stylen, und dann muss ich nur noch das Bild übergeben, das sich tatsächlich in den Merchandise-Objekten befindet. Ich kann hier ein Konsolenprotokoll erstellen, damit ihr es beweist. Wenn Sie sehen möchten, was sich im Merchandise-Objekt befindet, können Sie es einfach selbst auf der Konsole protokollieren, aber glauben Sie mir einfach, wenn ich sage, dass sich das Bild vorerst in diesem Warenfeld befindet, um Zeit zu sparen. Wenn wir das durchgehen und ich auf „Speichern“ klicke, können Sie jetzt sehen, dass der Platzhalter durch das Produktbild unseres einzigen Produkts ersetzt wurde , das sich im Warenkorb befindet. Jetzt wollen wir Produkttitel, Variantenauswahl und individuellen Preis einfügen . Lass uns das jetzt machen. Ich werde einen Link einfügen, damit er, wenn wir darauf klicken, zum Produkt weitergeleitet wird. Hier drin mache ich Produkte/ und lege dann den Griff der Merchandise-Produkte ein. Bei den Warenobjekten haben wir Zugriff auf das Produkt, und auf diesem Objekt haben wir Zugriff auf das Handle dieses Produkts. Dann gebe ich dem einen Klassennamen für das Styling von Line-Item-Product-Titeln. Dann schnappe ich mir zwischen diesen Link-Tags Waren, Produkte und Titel. Wir verwenden hier häufig Waren, sodass wir hier einige Umstrukturierungen vornehmen können , um unser Leben zu erleichtern. Vielleicht machen wir das jetzt. Schnappen wir uns die Waren. Wir können uns das Bild und das Produkt hier schnappen, ich mag es, den besten Platz zu schaffen, damit wir einfach Waren entfernen können . Dies ist der Vorteil einer Umstrukturierung, die wir mehrfach gesehen haben während dieser Klasse. Ich habe diesen Link eingefügt , lass uns einfach überprüfen, ob das noch funktioniert. Wir haben das Wasserstoff-Snowboard da, und wenn ich darauf klicke, komme ich etwas langsam zu diesem Produkt, aber da kannst du sehen, dass es durchkommt. Dann wollen wir darunter die Variantenauswahl setzen. Wir müssen die ausgewählten Optionen durchgehen, die auf den Waren enthalten sein werden. Ich werde das mit der Strukturierung schaffen und dann gehe ich zu ausgewählten Optionen. Möglicherweise gibt es keine ausgewählten Optionen, also werde ich einen Fallback eines leeren Arrays machen und dann werde ich map ausführen. Dann rendert für jede Option etwas JSX. Entschuldigung, das ist ein Chaos, wenn es um all diese verschiedenen Klammern geht . Vielleicht liegt es nur daran, dass ich meinen JSX-Ausdruck hier nicht eingegeben habe , was wiederum sein wird, dass wir einen Schlüssel verwenden werden, weil wir die Dinge durchgehen, und ich werde der Optionsname als Schlüssel, und dann werde ich einfach den Optionsnamen und den Optionswert für diese spezielle Variantenauswahl eingeben den Optionsnamen und den Optionswert . Klicken wir auf „Speichern“ und sehen , wie das funktioniert. Da hast du es. Das ist die Variantenauswahl. Die Formatierung ist etwas falsch. Ich habe das nicht wirklich in ein div mit dem Klassennamen der Einzelpostenvariante geschrieben um die Formatierung zu erhalten , die ich bereits eingerichtet habe. Da haben wir's. Dann für den Rest mache ich das vielleicht in einem separaten Video für euch, weil dieses ziemlich lang wird und Skillshare möchte, dass ich meine Videos unter jeweils 30 Minuten bis 20 Minuten halte . Wir werden einen zweiten Teil in diesem machen, sehen uns im nächsten Video. 12. Wart Funktionalität pt. 2: Ordnung. Willkommen zurück. Ich hoffe, Sie sind bereit, mit dieser Warenkorb-Funktionalität weiterzumachen und damit offensichtlich die größte Funktion, die wir in unserer kleinen App integrieren werden. Es hat also zwei Videos verdient, um alles abzudecken. Wir haben diese Platzhalter also immer noch hier auf dieser Seite unseres Warenkorbtisches. Um noch einmal zusammenzufassen, was wir im letzten Video gemacht haben, haben wir die Warenkorbfunktion für die gesamte App aktiviert indem wir unseren Router in den Warenkorbanbieter eingewickelt haben, und dann eine Warenkorgroute erstellt, die mit einer Warenkorbseite verknüpft ist und dann haben wir hier auch einen Link zum Warenkorb hinzugefügt und natürlich haben wir eine Schaltfläche In den Warenkorb hinzugefügt , mit der wir Artikel tatsächlich in unseren Warenkorb legen können. Kehren wir zum Aufbau unserer Warenkorbseite zurück. Hier werden wir einige andere Komponenten verwenden, die wir eingeführt haben oder die wir hier oben importiert haben, die Warenkorblinienmenge und die Schaltfläche zur Anpassung der Warenkorblinienmenge. Das ist wahrscheinlich einer der größeren Namen der Komponenten, die wir einführen, aber diese Schaltflächen sind sehr hilfreich, wie Sie bald sehen werden. In diesem Fall ist es wichtig, dass du die Klassen benutzt , sonst sieht es wie absoluter Mist aus. Also werde ich das alles in die Warenkorbmengenauswahl einpacken und dann, um uns zu beginnen, lassen Sie uns einfach Menge der Warenkorbzeile eingeben und wenn ich das nur einfüge, solange es sich innerhalb einer Warenkorblinie befindet Anbieter, überprüfen Sie das, Sie werden sehen, dass die Menge die richtige Menge ist. Also, wenn ich zu diesem Snowboard gehen und noch eines davon in den Warenkorb legen würde. Ich denke, es muss genau dieselbe Variante und es dauert eine Weile. Jetzt gehen wir zurück zum Einkaufswagen und jetzt kannst du sehen, dass es bis zu zwei sind, also wie gut ist das? Wir bringen bereits den Status der Menge in dieser Werbebuchung ein , indem wir diese Komponente von Shopify Hydrogen verwenden . Aber natürlich wollen wir in der Lage sein, die Menge zu aktualisieren. Also setzen wir auf beiden Seiten eine Schaltfläche zur Anpassung der Menge der Warenkorblinie ein und dann auf der linken Seite für den Anpassungsparameter werden wir ihn verringern lassen. Ich öffne das oben und drinnen lege ich ein SVG ein, das ein Minussymbol ist. Also gehe ich zurück zu den Helden-Symbolen hier, finde minus kopiere den JSX, wirf ihn hier rein. Wir haben also unseren Rückgang und dann auf der anderen Seite der Warenkorblinienmenge. Ich werde eine weitere Schaltfläche zur Anpassung der Menge der Warenkorblinie einsetzen und da die Anpassungsrequisite erhöht wird und dann die SVG und dann, die ich hier einfügen werde, wird natürlich das Gegenteil sein, was plus ist. Also kopiere ich das JSX für dieses Symbol, füge es hier ein und klicke dann auf „Speichern“. Lassen Sie uns nun sehen, was passiert, wenn wir unsere Seite hier aktualisieren. Sie können sehen, dass ich es jetzt auf eins reduzieren kann, oder ich kann es auf drei erhöhen oder wie viele ich daraus machen möchte. Das sind also sehr praktische Komponenten von Shopify Hydrogen. Wir erhalten sofort einige Funktionen zur Mengenanpassung . Hier werde ich für die Zeilensumme diesen Platzhalter durch eine Geldkomponente ersetzen . Ich werde das ohne nachfolgende Nullen einfügen und dann den Gesamtbetrag des Kostenpunkts durchgehen, um den Gesamtbetrag in einer netten benutzerfreundlichen Formatierung zu formatieren. Hier oben bekommen wir also die Kosten für den Use Cart Line Hook. Sie sollten inzwischen verstehen , dass, wenn wir das einfach durchsetzen würden, es nicht gut formatiert wäre. Wir wollen das also in eine Geldkomponente setzen, die wir hier sehen können. Wenn wir drei davon erhalten, beträgt die Summe 1.800 und dann ist die Schaltfläche Entfernen eine weitere Schaltfläche zur Anpassung der Warenkorbzeilenmenge. Ich werde das als Requisite eingeben, ich werde es als div anzeigen lassen, den Klassennamen cart remove geben und dann die Anpassungs-Requisite von remove. Dadurch wird der Schaltflächenkomponente zur Mengenanpassung der Warenkorblinie mitgeteilt , dass die gesamte Menge dieses Artikels entfernt werden soll . Also entferne einfach den Posten komplett und dafür verwende ich ein Mülleimersymbol. Also gehe ich hier rein, tippe den Papierkorb ein, kopiere den JSX, gehe zurück wie wir es zuvor getan haben, und repariere die Verschachtelung. Wenn wir also alle unsere Klassennamen korrekt geschrieben haben und hierher zurückkehren, werden Sie sehen, dass sie hier oben rechts angezeigt werden , sodass wir einfach darauf klicken und die Zeile entfernen können vollständig. Jetzt werden Sie sehen, dass beim Aktualisieren der Seite nicht angezeigt wird, dass sich derzeit keine Einzelposten im Warenkorb befinden , bis wir in den Ruhezustand gelangen. soll verhindern, dass dies angezeigt wird, bevor wir sicher , ob sich Artikel in unserem Warenkorb befinden. Okay, also lass uns zurückgehen und den Artikel in unseren Warenkorb legen. Lass uns hier eine andere Auswahl treffen. Polycarbonat, klassisches Bolzenmuster 160, in den Warenkorb legen. Dann geh zurück zu unserem Warenkorb hier drüben und ich glaube, ich wollte den Preis für jeden darunter angeben, also lass uns das auch hinzufügen. Wir haben hier bereits Zugriff auf unsere Geldkomponente. Ich werde Geld ohne nachfolgende Nullen eingeben, weil das meine Präferenz ist, und dann in den Daten, Requisite, Warenpreis eingeben, v2, klicken Sie bei dieser Aktualisierung auf „Speichern“ und Sie können die Person sehen Der Preis beträgt 610 und wenn ich ihn hier oben erhöhe, bleibt der Preis pro Artikel gleich, aber die Gesamtkosten für diesen Einzelposten werden steigen. Lassen Sie mich Ihnen zeigen, was passiert, wenn ich ein anderes Produkt in den Warenkorb lege, fügen wir ein Full-Stack-Snowboard den Warenkorb und dann klicke ich darauf, um zur Warenkorbseite zu gelangen. Du wirst sehen, wir haben zwei hier. Jetzt haben wir ein kleines Problem. Eine davon wird fett gedruckt und eine davon wird nicht fett angezeigt, was ein Problem hat, aber wir haben hier auch keine Fußzeile für die Summe, und natürlich brauchen wir eine Schaltfläche zum Auschecken. Lassen Sie uns das näher erläutern. Ich möchte außerhalb dieser Warenkorbzeile gehen, sie hier ein wenig sichern und dann darunter, und dann darunter ein Div mit der Fußzeile des Warenkorbs eingeben und natürlich werden wir all diese roten Zeilen, weil wir bei unserer Rückkehr ein einzelnes Wurzelelement benötigen . Also werde ich einfach den Hack machen , den wir benutzen, bevor wir ein leeres Element öffnen und dann einfach hier und dann in unserer Warenkorbfußzeile einrücken, ich werde einen Link einfügen. Der Link führt zur Checkout-URL, die wir aus dem Warenkorb gezogen haben. Es generiert uns automatisch die Checkout-URL. Ich gebe ihm einen Klassennamen von Checkout Button , der in unserem CSS eingerichtet ist. Cool, also werde ich das schließen und dann hier rein werde ich einfach das Wort Checkout haben und dann das Link-Tag schließen. Wenn ich hier aktualisiere, haben Sie den Checkout-Button, aber ich habe immer noch keine Summen in den Warenkorb eingegeben. Ich glaube, ich werde das in den Körper stecken. Also gleich danach, wo wir all diese Zeilen zurückgeben, können wir eine letzte Zeile und die ersten beiden Spalten einfügen, ich mache eine Aufrufspanne von zwei. Wir werden einfach nichts haben und dann haben wir das Wort total und dann für die letzte Zelle bringen wir die Wagenkosten ein. Das gibt uns die Gesamtkosten des Warenkorbs ohne nachfolgende Nullen und wir müssen hier keine Informationen durchgehen , solange sie sich innerhalb des Anbieters befinden , der meiner Meinung nach der Warenkorbanbieter ist. Dies ist in Ordnung . Also aktualisiere hier und du wirst sehen, dass diese beiden addierten dem entsprechen , und ich glaube, die Fettschrift war darauf zurückzuführen , dass mein CSS die letzte Zeile fett gemacht hat. Die letzte Zeile hätte also die Summe sein sollen. Jetzt ist das Styling-Problem behoben. Ordnung. Wir haben also zwei dieser speziellen Varianten. in einer dieser Varianten Wenn ich in einer dieser Varianten auf den „Checkout-Button“ klicke, schauen wir uns an, was passiert. Es ist ein bisschen langsam. Entschuldigung wegen meinem schlechten Internet. Aber Sie werden bald sehen, dass wir zur Checkout-Seite im Wasserstoff-Shop gehen . Wenn wir die Bestellübersicht anzeigen, sollte diese mit der Auswahl in unserem Warenkorb übereinstimmen. Los geht's, Leute. einfach oder nicht einfach ist es. Es ist viel Code zum Schreiben, aber es gibt eine Menge Funktionen, die das Shopify Hydrogen-Framework für uns übernimmt. Wir müssen keinen speziellen Code in unseren Checkout-Button eingeben. Wir können einfach die Checkout-URL eingeben. Wir können solche Komponenten verwenden. Alles was wir tun müssen, ist CartCost einzugeben und der Rest wird für uns herausgefunden. Diese erstaunlichen CartLineQuantityAdjust-Tasten, die CartQuantity selbst, es ist wirklich beeindruckend, wie viel Funktionalität uns einige dieser Komponenten sofort bieten. Eines der letzten Dinge, die ich hier tun möchte, ist einen Indikator dafür zu setzen , wie viele Artikel sich hier oben im Warenkorb befinden. Was ich tun werde, ist in unseren Layout-Komponenten, wo ist es? Genau hier. Ich füge etwas ein, das sich CartBubble nennt. Dies wird eine Komponente sein, die ich selbst gebaut habe. Dann werde ich hier unten diese CartBubble-Komponente erstellen. Da wir Use Cart verwenden werden, werde ich das in eine eigene Client-Komponentendatei verschieben . Ich gehe in eine neue Datei, CartBubble.Client.jsx; füge das hier ein, mache einen Exportstandard. Wenn ich dann zur Datei layout.server.jsx zurückkehre, werde ich diese Komponente, CartBubble, importieren und der Rest wird automatisch für mich ausgefüllt. Wenn ich zurück zu CartBubble.Client.jsx gehe, müssen wir hier natürlich etwas zurückgeben ; gib etwas jsx zurück. Alles was wir hier suchen ist die Menge. Das ist alles was das macht. Ich werde den UseCart-Hook aus dem Hydrogen-Framework importieren . Ich werde die Gesamtmenge von dem Objekt abziehen , das dieser Hook zurückgibt. Dies ist ein einfacher Weg, um unsere Gesamtmenge zu erhalten. Wenn die Gesamtmenge kleiner als eins ist, was im Grunde Null ist, gebe ich Null zurück, also gebe ich im Grunde nichts zurück. Aber wenn es darüber hinausgeht, geben wir eine Spanne zurück, und innerhalb der Spanne machen wir Klammern, und innerhalb dieser Klammern geben wir einfach die Gesamtmenge zurück. Wenn ich das speichere, aktualisiere es hier oder aktualisiere es irgendwo in unserer App. Wir haben einen kleinen Fehler, ungültiges DOM ColSpan. Wir müssen CamelCase für den ColSpan hier verwenden . Wo war ich? Warenkorb-Seite. Wir müssen hier ein großes S setzen. Das ist eine seltsame JSX-Sache. Was haben wir noch hier? Wenn wir die Fehlermeldung lesen, scheint sie von unserer CartPage-Komponente zu stammen. Lassen Sie mich einfach auf eine andere Seite unserer Website gehen und bestätigen , dass sie für die CartPage isoliert ist. Ja, das ist es. Wenn wir hier neben diesem Warenkorbsymbol nachschauen , sollte es angeben, wie viele Artikel sich im Warenkorb befinden. Lass mich hier rüber zu CartBubble gehen. Wenn sich keine Artikel im Warenkorb befinden , sollte Null zurückgegeben werden, sodass nichts angezeigt wird. Das deutet also darauf hin, dass sich keine Artikel im Warenkorb befinden. Klicken wir erneut auf den Warenkorb und er kehrt einfach zurück, es befinden sich derzeit keine Artikel im Warenkorb. ich den gleichen Fehler, wenn ich aktualisiere? Ja. Wenn ich von einer anderen Seite aus durch die CartPage navigiere, ist das in Ordnung. Aber wenn ich direkt auf der CartPage ankomme , erhalte ich diesen Fehler. Ich denke, das Problem hier geht zurück , wenn wir zur CartPage gehen. Dieses Rendering, ohne dass die asynchrone Anfrage an die Storefront-API zurückgegeben wurde. Sie hier Spannung haben, sollte das überprüft werden. Aber in diesem Fall funktioniert es nicht. Ich werde diese Rücksendeerklärung abgeben. Dies mag eine Art Hack-Lösung sein, aber es sollte funktionieren. Ich füge es hier ein. Wenn lines.length größer als Null ist, rendern wir den Wagen. Wenn ich hier aktualisiere, löst das unser Problem. Irgendwie haben wir unsere Artikel im Warenkorb verloren , aber das ist alles gut. Kehren wir zu unserem Katalog oder einer anderen Sammlung zurück. Treffen Sie eine Produktauswahl, und dann klicke ich auf füge sie dem Warenkorb hinzu. Jetzt können Sie sehen, dass unsere CartBubble funktioniert. Wir haben einen Artikel in unserem Warenkorb, und wenn ich darauf klicke, wirst du sehen, dass dies unser Wasserstoff-Snowboard ist. Wenn ich eine zweite hinzufüge, wirst du sehen, dass diese Zahl ebenfalls steigt. Wenn ich ein anderes Snowboard hinzufüge, vielleicht dieses Full-Stack, klicke auf „In den Warenkorb“. Du wirst sehen, dass es ebenfalls hinzugefügt wird. Wenn wir hier reingehen, können Sie die drei Snowboards sehen , die wir in unserem Wagen haben. Da habt ihr es, Leute. Wenn wir unsere bisherigen Projekte durchgehen, haben wir unsere Homepage. Offensichtlich haben wir hier nichts gebaut. Hier könnt ihr herausfinden, was ihr auf eure Homepage stellen wollt. Sie können eine bestimmte Sammlung mitbringen und auf alle Arten präsentieren. Wir haben dann unsere Katalogseite hier, der die ersten neun Produkte in unserem Geschäft aufgeführt sind, unabhängig davon, in welcher Kollektion sie sich befinden. Wenn wir auf eines davon klicken, wird es zu diesem Produkt weitergeleitet. Wenn wir zu einer bestimmten Kollektion wie der Freestyle-Kollektion gehen einer bestimmten Kollektion wie der Freestyle-Kollektion und dann auf eine dieser Produktseiten klicken, können wir eine Variantenauswahl treffen diese in den Warenkorb legen. Geh hier rüber zum Einkaufswagen. Wie Sie sehen können, wurde diese Auswahl gespeichert. Ich kann die Auswahl erhöhen. Ich kann es aus dem Warenkorb entfernen indem ich es ganz auf Null herunterbringe, und dann sage ich, dass sich derzeit keine Artikel im Warenkorb befinden, oder wenn ich ein weiteres Produkt erneut in den Warenkorb legen möchte, fügen Sie dieses 154 Zentimeter hinzu und erhöhen Sie die Menge, Sie werden sehen, dass sie auch hier zunimmt . Eine Verbesserung für diese App wäre, an den Ladezuständen zu arbeiten und etwas Schöneres für eine Spannung einzubauen. Im Moment haben wir keine Fallbacks, aber Sie könnten hier ein paar ziemlich nette Ladezustände einbauen . Wir können natürlich auch auschecken, indem wir hier auf diese Schaltfläche klicken, und das bringt unsere Auswahl direkt zur Kasse. Zu diesem Zeitpunkt verlassen wir unsere App und gehen direkt zur Checkout-Seite , die im Shopify-Shop gehostet wird. Los geht's. Wir können diesen Gegenstand auch entfernen, indem wir diesen Knopf drücken. Wie Sie hier sehen können, dauert der Aufbau der CartPage etwas Zeit, aber die Warenkorbfunktionen werden von all diesen Komponenten und Hooks, die in Shopify verfügbar sind, ziemlich gut gehandhabt diesen Komponenten und Hooks, die in Shopify verfügbar sind, . Wasserstoff-Bibliothek. Um alles zusammenzufassen, was wir in diesem Projekt getan haben, möchte ich die Themen hervorheben, die ich zu Beginn dieses Kurses hervorgehoben habe , bevor wir überhaupt auf die praktische Seite eingehen. Wenn wir hier zu dem zurückkommen, was einfach ist , haben sich all diese am Ende als ziemlich ausgebaut herausgestellt. Aber zum Beispiel haben wir ein Produktrasterelement, das zum Beispiel eine clientseitige Komponente ist , die wir an ein Produkt weitergeben. Wenn wir uns unsere Sammelrouten ansehen, stellen wir eine Anfrage an die Storefront-API , erfassen alle benötigten Informationen über eine Abfrage leiten sie an jede dieser Produktkartenkomponenten und unterwegs Haken benutzen. Wenn Sie jemals verloren gehen oder verwirrt sind, können Sie jeden dieser Hooks oder Komponenten in der Dokumentation nachschlagen . Wenn du aus React importierst, solltest du in der React-Dokumentation nachsehen. Wenn Sie aus Wasserstoff importieren, sollten Sie sich die Wasserstoff-Dokumentation ansehen. Sie können buchstäblich einfach zur Wasserstoff-Dokumentation gehen . Dies ist die Storefront-API. Aber ich sollte in der Lage sein, von hier aus zu suchen, UserouteParams, in API Hydrogen zu gehen, hier zu klicken, und Sie können mehr über all die verschiedenen Hooks und Komponenten erfahren all die verschiedenen Hooks und , die wir in dieser Klasse verwendet haben. Im nächsten Video zeige ich Ihnen, wie Sie diese App in Ihrem Shopify-Shop bereitstellen. Dazu gehört die Verbindung zur Storefront-API. Deshalb aktualisiere ich hier unsere Anmeldeinformationen und veröffentlichen diese dann live in Ihrem Shopify-Shop. Natürlich können wir hier viele Verbesserungen vornehmen. Ich habe diesen dritten Link hier gelassen, und das wird für das Bonusvideo sein, das wir in einem Blog hinzufügen werden. Im Moment sind dies jedoch die Hauptkomponenten, die Sie benötigen, um eine funktionierende Shopify-Storefront zu haben. Im nächsten Video werden wir dies in unserem Shopify-Shop bereitstellen . Ich sehe dich darin. 13. Bereitstellung unserer Custom Storefront: Willkommen zurück, Leute, in dieser Lektion werden wir lernen, wie Sie unsere Shopify-Wasserstoff-Storefront für Sauerstoff bereitstellen, die von Shopify bereitgestellte Hosting-Plattform, die wir direkt auf unserer Shopify-Shop über den Wasserstoff-Vertriebskanal. Leider ist Sauerstoff zum Zeitpunkt der Aufzeichnung nur für Shopify Plus-Pläne verfügbar . Wenn Sie dies jedoch weit in der Zukunft beobachten, ist es möglicherweise bereits für andere Shopify-Pläne verfügbar. Dies ist eine ziemlich brandneue Funktion, daher denke ich, dass sie sie gerade in Shopify Plus-Shops einführen , da sie die bestbezahlte Stufe Wir werden Priorität bei dieser brandneuen Funktion haben. Wenn Sie auf diese Seite in der Dokumentation kommen und diese Warnung immer noch hier ist, wenn Sie etwas unter Shopify Plus verwenden, dann tun wir das leider, dies wird nicht auf Sie zutreffen. Sie müssen eine andere Hosting-Lösung verwenden, wenn Sie sich für die Bereitstellung einer Wasserstoff-Storefront entscheiden. Zum Glück hat Shopify mir ein Geschäft mit Wasserstoff-Vertriebskanälen ermöglicht , sodass ich diese Funktion demonstrieren kann. Aber ich möchte es dir nur in einigen Geschäften zeigen, du wirst nicht darauf zugreifen können. Zum Beispiel in meinem ursprünglichen Testshop, Chris Testing Shop. Wenn ich hier in die Vertriebskanäle gehe und dann auf alle empfohlenen Vertriebskanäle klicke. Hier würde sich die Schaltfläche zum Installieren von Wasserstoff befinden , wenn ich auf Shopify Plus oder im Fall dieses Shops ihn von Shopify aktivieren lassen würde. Leider kann ich es in diesem Laden nicht hinzufügen, aber wie ich hier in Chris Testing Shop 2 erwähnt habe, einem Geschäft, das ich speziell für Wasserstoff eingerichtet habe. Wenn ich in Vertriebskanäle klicke und in empfohlene Vertriebskanäle gehe, wird es hier nicht mehr angezeigt , weil es bereits installiert ist. Aber bevor ich es installiert habe, konnte es hier hinzugefügt werden. Jetzt können Sie sehen, dass ich hier einen Vertriebskanal für Wasserstoff habe. Wenn Sie auf Shopify Plus sind, sollten Sie in der Lage sein, in Vertriebskanäle und empfohlene Vertriebskanäle zu gehen und diese hier hinzuzufügen Dann haben Sie diesen Menüpunkt hier. Wenn Sie zum Zeitpunkt der Aufnahme alle anderen sind, können Sie dies leider nicht tun. Ich werde das hier schließen, wir können dort keinen Wasserstoff produzieren. Lassen Sie mich in den Vertriebskanal für Wasserstoff gehen. Was wir jetzt tun können, ist zur Dokumentation zurückzukehren und weiterzumachen. Ich habe das gemacht und hatte ein paar Schluckauf. Was ich getan habe ist, dass ich herausgefunden habe , was funktioniert, und das werde ich dir in diesem Video zeigen. Wenn ich hier zurück zu meinem Wasserstoff-Vertriebskanal gehe , können Sie sehen, dass ich hier einen Wasserstofftest gemacht habe, aber was wir tun werden, ist eine neue Ladenfront zu erstellen. Zunächst möchte ich hier wieder zu meinem Code-Editor wechseln hier wieder zu meinem Code-Editor und ein paar Änderungen vornehmen. Zunächst möchte ich eine Produktionsfiliale einrichten, und das ist die Filiale, die wir unserem Shopify-Shop bereitstellen werden. Ich gehe hier rein, erstelle eine neue Filiale, nenne diese Filiale Produktion. Als Nächstes möchten wir diese Anmeldeinformationen in unsere eigentliche Shopify-Wasserstoff-Storefront ändern diese Anmeldeinformationen . Der übliche Weg, dies zu tun besteht darin, sich unsere privaten Apps anzusehen, die sich derzeit in Einstellungen, Apps und Vertriebskanälen befinden. Dann hier drüben, um Apps zu entwickeln. Wie Sie hier sehen können, habe ich Storefront-API-Zugriff als benutzerdefinierte App. Ich werde das nur schnell demonstrieren, ich erstelle eine App und sage Storefront-API-Zugriff. Dann setze ich einfach Skillshare hier ein, um es zu unterscheiden. Klicken Sie auf „App erstellen“. Dann muss ich nur noch hier klicken, um Storefront-API-Bereiche zu konfigurieren. Ich überprüfe einfach jedes Kästchen hier. Dann kann ich auf den grünen Speichern-Button klicken. Danach kann ich auf „ App installieren“ klicken und auf „Installieren“ klicken. Dann habe ich hier unter API-Anmeldeinformationen mein Storefront-API-Zugriffstoken, damit ich das nehmen und es hier einfügen kann. Was jedoch passieren wird , wenn wir unseren Wasserstoff-Vertriebskanal bereitstellen ist, dass wir automatisch ein Storefront-API-Zugriffstoken erhalten. Ich zeige Ihnen, dass Sie jetzt, wenn wir in den Wasserstoff-Vertriebskanal gehen , auf „Storefront erstellen“ klicken. Hier können wir ein brandneues Wasserstoffdepot schaffen . werde ich nicht tun. Ich werde ein bestehendes Repository verbinden , weil wir unser Projekt natürlich schon auf GitHub haben. Ich klicke auf „Verbinden“ eines vorhandenen Repositorys, wähle „Mein Konto“ aus und suche dann das Repository unter der Wasserstoffklasse Storefront. Beachten Sie hier, dass Sie die Integration in GitHub einrichten müssen . Ich habe das bereits getan, daher wird dies ohne Warnungen angezeigt. Aber wenn Sie es nicht getan haben, werde ich jetzt einen Screenshot auf Ihren Bildschirm legen , damit Sie sehen können , dass ein Warnfeld angezeigt wird , in dem Sie nach Berechtigungen gefragt werden. Sie müssen die Shopify GitHub-App auf Ihrem GitHub-Konto installieren und dann bestimmte Berechtigungen für diejenigen aktivieren , die die GitHub-Integration mit der Themenentwicklung verwendet haben GitHub-Integration mit der Themenentwicklung verwendet es ist genau dieselbe Shopify GitHub-App. Es sind nur ein paar zusätzliche Berechtigungen erforderlich. Sobald Sie die App aktiviert und diese Berechtigungen erteilt haben, können Sie Ihr Repository suchen und auf diese grüne Schaltfläche für Verbinden klicken. Bevor wir das tun, möchte ich nur notieren, dass der Produktionszweig Master oder Main sein muss. Es ist wirklich nervig für mich, weil ich es mag, der Produktionszweig wenn der Produktionszweig ein separater Zweig namens Produktion ist. Aber standardmäßig hier auf Wasserstoff und Sie lassen es derzeit nicht ändern, es wird automatisch der Master-Zweig oder ich denke, der Hauptzweig ausgewählt , wenn Sie keinen Master-Zweig als Ihren haben Produktionszweig. Wenn Sie die Produktionsversion Ihrer App in Ihrem Master- oder Hauptzweig haben , wird dies für Sie ganz einfach sein. Aber für mich, wenn ich meine Produktionsabteilung einer separaten Filiale namens Produktion mag, wird es hier ein paar zusätzliche Schritte geben. Beachten Sie das. Ich drücke jetzt den grünen Connect-Knopf und es wird diese neue Wasserstoff-Ladenfront laden. Wie Sie hier sehen können, haben wir gerade eine neue Storefront bekommen. Es heißt einfach Hydrogen Class Storefront. Wie Sie hier unten sehen können, wird ein Vorschau-Branch bereitgestellt. Ich warte einfach , bis das fertig und dann schauen wir uns das an. Das ist jetzt fertig, und wenn ich auf diese Vorschau-URL klicke, werden Sie sehen, dass der Master-Branch bereitgestellt wird und meine tatsächlichen Storefront-Anmeldeinformationen abgerufen werden. Der tatsächliche Name dieses Shops, nicht der Name der Shopify-Vorschau. Nun passieren hinter den Kulissen ein paar Dinge, die ich hier erwähnen möchte. Wenn wir hier darauf eingehen, können Sie sehen, dass eine spezielle Datei namens Shopify Oxygen Deployment Workflow-Datei hinzugefügt wurde. Das hat es über den Ordner.github Slash Workflows gemacht. Dies ist wichtig , da es für die Bereitstellung dieser Zweige erforderlich ist. Wenn wir hierher zurückkehren und uns die Produktion ansehen, gibt es keine Bereitstellungen. Wenn ich hier auf alle Bereitstellungen eingehe, werden Sie sehen, dass nichts in Produktion ist, es befindet sich etwas in der Vorschau. Wenn ich dann in die Storefront-Einstellungen gehe, können Sie sehen, dass es hier einen Produktionszweig gibt, aber wenn ich darauf klicke, erhalten wir eine 404-Seite. Wie gesagt, ich mag es nicht, meine Produktionsabteilung auf Master ist, also werde ich eine andere Produktionsumgebung schaffen. Aber zuerst werde ich diesen Produktionszweig aktualisieren und in unserem GitHub-Konto veröffentlichen diesen Produktionszweig , damit wir ihn tatsächlich verbinden können. Wie ich bereits erwähnt habe, wird uns diese Wasserstoff-Storefront nun wird uns diese Wasserstoff-Storefront ein Storefront-API-Token generieren. Wir können das verwenden, anstatt eine private App zu erstellen. Was ich tun werde, ist das Storefront-Token hier durch das in unseren Storefront-Einstellungen zu ersetzen . Dann wird die Shop-Domain natürlich Chris-Testing-Shop-2.myShopify.com sein. Leider kann ich es nicht direkt kopieren, also tippe ich es einfach ein. Ich kopiere das einfach und stelle sicher, dass das funktioniert. Ja, das ist die richtige Adresse. Süß, also haben wir unsere Berechtigungen hier aktualisiert und ich klicke darauf auf „Speichern“ und dann werde ich diese Änderungen natürlich übernehmen. Stage, Update Hydrogen Config File wird die Commit-Nachricht sein und dann klicke ich auf „Commit“. Dann klicke ich hier um zu veröffentlichen. Jetzt, da ich diesen Zweig gepusht habe und er sich auf unserem GitHub-Konto befindet, kann ich zu „Umgebung hinzufügen“ gehen. Ich wähle die Produktionsbranche aus. Los geht's und ich nenne das Produktion Produktion, nur um sie von der anderen Produktionsbranche zu unterscheiden . Leider kann ich die anderen nicht umbenennen. Dieser wird nur Produktion und Produktion in Klammern sein , weil das der Name der eigentlichen Filiale ist. Ich werde das öffentlich machen und auf „Speichern“ klicken. Wenn ich jetzt zurückgehe, können Sie sehen, dass wir hier eine zweite Umgebung haben. Aber wenn ich auf die URL klicke, bekommen wir das gleiche Problem, diesen 404-Fehler. Der Grund dafür ist, dass es nicht wirklich bereitgestellt wird. Wenn ich hierher zurückkehre und zu allen Bereitstellungen gehe, sehen Sie hier unter Vorschau, dass wir eine Bereitstellung haben. Produktion, ohne Bereitstellung und unter unserer kundenspezifischen Produktionsbereitstellung oder -umgebung gibt es keine Bereitstellung. Der Unterschied zwischen diesen und dieser besteht darin, dass Shopify diese Workflow-Datei für die Oxygen-Bereitstellung hinzugefügt hat. machen wir auch für uns selbst. Was ich tun werde, ist zu meinem GitHub-Repository zu gehen. Hier ist es, Christopherdodd/Hydrogen-Klasse Storefront. Nur um das klarzustellen, Leute, das ist mein Repository, also habe ich Zugriff darauf und ich kann hier einen Produktionszweig für dich erstellen, du wirst einen Fork oder ein anderes Repository erstellen wollen und erstellen Sie darauf einen Produktionszweig. Dies ist nicht das buchstäbliche GitHub-Projekt , das Sie in Ihrem Shop bereitstellen werden. Das wollte ich nur klarstellen. Aber wenn wir hier reinschauen und meinen als Beispiel verwenden, wenn ich hierher gehe, um mir die verschiedenen Zweige anzusehen, kann ich hier unten einen sehen, sie haben einen neuen Zweig hinzugefügt, und das ist unser Vorschau-Branch. Wenn ich nach innen schaue, siehst du, dass es auf Master basiert. Aber was sie getan haben, ist, dass sie hier eine Workflow-Datei hinzugefügt haben und das sind unsere Bereitstellungseinstellungen genau hier. Das ist es, was in dieser Vorschau-URL hier bereitgestellt wird. Shopify macht das nicht sehr deutlich, aber genau das passiert. Was wir tun werden, ist diese Akte zu nehmen. Wir müssen uns nur den Weg hier notieren. Es ist.gitthub/Workflows und dann legen wir diese Datei ein. Ich werde hier klicken, um die Rohdatei zu erhalten. Was ich tun werde, ist etwas außerhalb des Bildschirms. Ich gehe ins Dateimenü. Klicken Sie auf „Seite speichern unter“. Dann kopiere ich in unserem Storefront-Projekt hier den Pfad, der einen.gitthub-Ordner erstellen sollte . Es wird uns warnen, dass Punkte für das System reserviert sind, was bedeutet, dass wir diesen Ordner nicht in unserem Finder sehen können , oder ich denke, es ist Windows Explorer unter Windows. Aber wir werden es in unserem Code-Editor sehen können. Dann erstelle ich den Workflow-Ordner und hier kann ich diese Bereitstellungsdatei speichern. Ich gehe da raus. Lassen Sie uns darauf zurückkommen und wenn ich hier in meinen Code-Editor gehe, können Sie sehen, wie diese Änderung durchkommt. Wenn ich hier zum Explorer gehe, können Sie sehen, dass wir diese Datei zu diesem Pfad hinzugefügt haben. Alles was wir tun müssen, ist das zu begehen. Ich werde die Add Oxygen Deployment Datei inszenieren. Ich drücke auf „Commit“. Ich werde diese Änderung auf die Produktionsbranche übertragen. Sobald das vorangetrieben ist, wenn wir hier zurück zu unseren Bereitstellungen gehen und in die Produktionsproduktion gehen, können Sie sehen, dass gerade etwas bereitgestellt wird. Wenn ich auf alles eingehe, können Sie sehen, dass wir unsere Sauerstoffbereitstellungsdatei genau hier zu unserer Produktionsabteilung hinzufügen . Ich werde nur warten , bis die Bereitstellung abgeschlossen ist, und jetzt können Sie sehen , dass es erfolgreich bereitgestellt wurde . Wenn ich hier auf diese URL klicke , siehe da, hier ist unsere App. Wenn ich auf die Katalogseite gehe, können Sie sehen, dass dies genauso funktioniert, wie wir es vor Ort hatten. Ich kann eher in eines dieser Surfbretter oder Snowboards gehen , in den Warenkorb legen, auf meine Warenkorbseite gehen und auschecken. Das bringt uns zur eigentlichen Kasse im Geschäft. Unabhängig davon, ob Sie es auf dem Master-Branch bereitstellen möchten oder nicht, müssen Sie dennoch diese Sauerstoffbereitstellungsdatei hinzufügen, damit dieser Zweig bereitgestellt werden diese Sauerstoffbereitstellungsdatei kann. Hier können Sie sehen, dass ich jetzt eine benutzerdefinierte Umgebung mit dem Produktionszweig erstellt habe jetzt eine benutzerdefinierte Umgebung mit und wir auf diese öffentliche URL zugreifen können , was wirklich cool ist. Wenn wir das für den Master-Branch wollen, können wir das auch tun. Andernfalls haben wir hier diese Vorschau-URL , die uns zeigt, was genau von Shopify benötigt wird , damit diese ordnungsgemäß bereitgestellt werden kann. Wie Sie sehen, fällt dies nicht unter die Produktionsüberschrift, da davon ausgegangen wird, dass der Master-Branch in die Produktionsumgebung gehen wird. Aber für mich bevorzuge ich eine separate Filiale, da die Hauptniederlassung möglicherweise verschiedenen Filialen bereitgestellt wird, sodass ich oft unterschiedliche Produktionszweige für verschiedene Geschäfte habe. Aber es gibt natürlich einen gemeinsamen Code, zwischen den Geschäften wechselt, wenn ich mit Kunden arbeite. Deshalb möchte ich Master Branch als gemeinsamen Code haben , der sich über alle Produktionszweige erstreckt und dann für jedes Geschäft einen separaten Produktionszweig habe . Das ist eine kleine Erklärung dafür, warum ich Produktion als Produktionszweig verwende. Aber aus irgendeinem Grund nimmt Shopify Master als Produktionszweig an. Da hast du es. Jetzt haben wir unsere Produktionsumgebung und unsere öffentliche URL für unsere Wasserstoff-Storefront. Jetzt, da wir wissen, wie wir unsere Storefront für Sauerstoff bereitstellen können, wenn wir Shopify Plus oder einen der anderen Pläne nutzen, wird es hoffentlich in Zukunft verfügbar sein. Gehen wir nun zur Bonusstunde über. Wir treten einen Schritt zurück, bauen auf dem auf, was wir bereits erstellt haben, und fügen es in einem Blog hinzu. Wir sehen uns im nächsten Video. 14. Bonus: Hinzufügen eines Blog: Ordnung, wie ich es oft in meinen Skillshare-Kursen tue, habe ich ein letztes Bonusvideo eingefügt, das nicht unbedingt erforderlich ist, wie wir gesehen haben, bevor wir bereits Sammlungen, Produkte und aktivierten Warenkorb erstellt haben -Funktionalität, die wirklich alles ist, was wir brauchen, um einen funktionierenden Laden zu erstellen. Aber um mehr Übung mit dem Workflow in Hydrogen zu gewinnen , werde ich Ihnen auch hier zeigen, wie Sie ein Blog-Setup erstellen , damit wir auch Blog-Beiträge aus dem Store abrufen können . Was ich getan habe, ist dass ich beim letzten Mal einen Produktionszweig erstellt habe, aber ich bin zur alten Wasserstoff-Konfiguration zurückgekehrt, also verwenden wir wieder die Blog-Beiträge aus der Wasserstoff-Vorschau, das wird in Anlehnung an zwei Videos vor zwei Videos, nicht das letzte Video auf das ich nur Bezug nehmen musste. Wir führen die Wasserstoff-Vorschau aus und stellen keine Verbindung zu meinem speziellen Geschäft her. Was wir tun wollen, ist Nummer 1, ein Blog-Layout erstellen und dann Nummer 2 ist, eine Route für all die verschiedenen Artikel in diesem Blogbeitrag zu erstellen eine Route für all die verschiedenen Artikel . Lassen Sie mich GraphiQL einfach noch einmal öffnen , weil ich nur überprüfen möchte, ob wir Blogs in diesem speziellen Shopify-Shop haben, also mache ich Blogs, das listet unsere Blogs auf also mache ich Blogs, und ich mache Knoten und Handles. Wenn ich das durchführe, musst du mindestens den ersten oder letzten bereitstellen, also sagen wir einfach die ersten fünf Blogs, es sollte sicherlich nicht mehr als fünf Blogs geben. Es gibt zwei Blogs im Shopify-Wasserstoff-Beispielshop, und das sind Nachrichten und Zeitschriften. Das wird funktionieren. Wenn wir also hierher zurückkehren, gehe ich zurück in unser Projekt hier und lass uns eine Blog-Route erstellen. In unserem Routenordner hier, neuer Datei-Blog-Punktserver, eigentlich tut mir leid, ich muss das zu einem Capital Blog Dot Server Punkt JSX machen . Dann werden wir den Blog der Standardfunktionen exportieren und dann etwas JSX zurückgeben. noch nicht auf „Speichern“, da ein Fehler vorliegt, weil wir dort kein JSX haben. Dann lassen Sie uns einige der Dinge importieren , die wir verwenden müssen Wir müssen natürlich die Use-Shop-Abfrage verwenden, da wir die Storefront-API abfragen werden Holen Sie sich die Informationen zum Blogbeitrag. Ich werde CacheLong und GQL importieren, wieder nicht auf „Speichern“ klicken weil es kaputt geht und dann importiere ich Spannung von React, ich importiere das Layout von unserem Komponenten-Layout-Punktserver und das werde ich jetzt tun. Was ich tun werde, ist, einfach eine Abfrage hier in unserem GraphiQL zu testen , also werde ich auf den Journal-Blog zugreifen, also lass uns eine benannte Abfrage erstellen ich nenne diese Abfrageartikel, und dann können wir über sein Handle auf den Blog zugreifen, aus dem wir, wie wir hier sehen können, zwei Optionen zur Auswahl haben, Journal oder News, lass uns Journal machen und dann hier drin, lass uns leider auf Artikel zugreifen, Ich überspringe dort ein bisschen weiter. Wir müssen den Parameter hier eingeben, also gehen wir zu den ersten neun, und geben wir hier Knoten ein und dann können wir auf Knoten den Titel jedes Artikels auswählen, das Handle jedes Artikels, das wir benötigen für die Navigation und dann das Bild, also die URL und der Alternativtext. Das ist alles, was wir brauchen sollten, wenn ich darauf „Ausführen“ drücke. Sie werden sehen, dass wir die ersten 1,2,3,4 zurückbekommen , also gibt es nur vier Artikel, obwohl wir neun angegeben haben, wenn es weniger als neun sind, das bekommen wir zurück. Aber die gute Nachricht ist, dass alles funktioniert hat also gehen wir zurück zu unserem Projekt hier drüben, und ich werde diese Abfrage erstellen, const query ist gleich GQL und dann fügen wir die Abfrage hier ein, ich werde einfach Lass die Einrückung so und ich war ein Vollidiot und drückte „Speichern“, ohne etwas in unsere Rückgabeanweisung zu schreiben, also müssen wir unseren Server neu starten , was kein großes Problem ist. Bevor wir das tun, werde ich jedoch den Use Shop Query Hook verwenden also werde ich die Daten aus der Use-Shop-Abfrage abrufen, die Abfrage wie solche analysieren, cachelong verwenden, wie wir es zuvor getan haben preload true und dann hier drunter werde ich const machen. Bevor ich das mache, bevor ich strukturiere, machen wir das, was wir normalerweise tun, und schauen uns dieses Datenobjekt an. Ich muss nur irgendeine Form von JSX hier reinlegen, sonst wird der Server nicht laufen, also mache ich das einfach und dann lass uns npm dev hier unten laufen, also das läuft jetzt, lass uns refresh und lass uns zu unserer Blog-Route gehen, wir haben hier ein Problem, kein Shopify-Kontext gefunden , das klingt nach einem dieser seltsamen Fehler , die wir mit yarn dev dash force, refresh und as you beheben können mit yarn dev dash force, kann sehen , dass alle Fehler entfernt wurden. Was wir jedoch suchen, ist das, was sich im Datenobjekt befindet, und wie Sie hier in den Datenobjekten sehen können , haben wir wieder Daten, wir haben wieder einen Blog und dann haben wir Artikel, die ein Objekt enthalten also lasst uns hier destrukturieren, also gehen wir const von den Daten, in die wir gehen werden, auf die Daten zugreifen, dann in die Daten als Blog auf den Blog zu. Dann können wir einfach einen Konsolenlog-Blog erstellen und sicherstellen, dass wir den richtigen haben. Wenn wir hier reinschauen, können Sie sehen, dass wir noch Artikel haben und in Artikeln haben wir eine Liste von Knoten cool. Was wir tun werden, ist, dass wir hier reingehen und den Titel des Blogs eingeben könnten , aber das werden wir nicht in dieses spezielle Video aufnehmen, eigentlich verwenden wir es nur, um uns die Artikel zu schnappen , also gehe ich einen Schritt tiefer in die Strukturierung und das Greifen der Artikel, eigentlich denke ich nicht, dass wir den Doppelpunkt dort einfügen müssen und wenn ich dann nur noch einmal auf der Konsole logge, musst du diese Konsolenprotokolle nicht machen , ich bin nur um zu überprüfen , ob ich hier die richtigen Daten habe. Hier siehst du ja, du hast die Liste der Knoten genau hier. Lass uns reingehen und Node-Artikel gehen, hier aktualisieren und jetzt, wo Knoten von vorne entfernt werden, also haben wir nur Artikel, wir haben ein Array von nur Artikelobjekten. Das ist alles, was wir suchen. Lassen Sie uns hier als unsere übergeordnete Komponente einfügen, das Layout, von dem wir es bereits importiert haben, wo es existiert, und dann, weil wir auf asynchrone Daten zugreifen, lassen Sie uns eine Spannung aufstellen, ich werde das alles in einen Container legen und dann habe ich schon eine Klasse für das Artikelraster eingerichtet eine Klasse für das Artikelraster , die dem Produktraster sehr ähnlich sein wird und dann ganz ähnlich wie im Produktraster werde ich alle Artikel durchgehen, Karte darauf ausführen und dann für jeden Artikel diese Rücksendung öffnen und wir müssen die Rücksendung nicht hier eingeben, Ich denke, wir können hier einfach ein div einfügen, hier etwas JSX einfügen und lassen Sie uns den Artikeltitel zurückgeben. Los geht's und wir haben hier Zugriff auf den Artikeltitel Wenn ich also auf „Speichern“ klicke, aktualisiere hier drüben, momentan kommt nichts durch, lass uns einen Blick darauf werfen. Das Artikelraster kommt durch, aber nicht der Artikeltitel hier, und vielleicht hätte ich das nicht dort platzieren sollen. Lass uns sehen, was passiert, ja, also los geht's, wir haben hier vier Divs mit allen Titeln. Wir könnten diese Liste so machen, wie ich es dir zuvor gezeigt habe, aber wir werden sie sehr bald in Grids verwandeln , also lass uns sie einfach als Divs belassen. Ich kann hier eine separate Komponente in meinem Komponentenordner erstellen , aber ich werde sie nur auf dieser speziellen Blog-Route verwenden , also lege ich sie einfach unten und ich gehe um es Article Grid Item zu nennen und ich werde den Artikel als Requisite durchgehen, und dann lassen Sie uns genau den gleichen JSX zurückgeben , den wir hier haben, und dann werde ich ihn hier ersetzen mit Artikelrasterelement. Dann müssen wir nur noch den Artikel als Requisite durchgehen und das wird direkt hier weitermachen, was wir dann in unserem JSX hier unten verwenden können. Klicken Sie darauf auf Speichern und wir sollten das gleiche Ergebnis erzielen, wie wir es tun. Was ich tun werde, ist diese Klasse hier hinzuzufügen, damit dies unser CSS-Artikelrasterelement verwenden kann, das der Klassenname ist. Dann fügen wir hier zwei Links ein. Einer ein Bild-Link und einer ein Link des Titels. Haben wir Link und Bild importiert? Nein, haben wir nicht. Importieren wir Link und Bild aus Wasserstoff. Dann werde ich hier eine Link-Komponente platzieren. Ich füge hier eine Zeichenfolge hinzu. Wir werden den Artikel innerhalb einer Blog-Route verschachteln. Sie wie bei Produkten Verwenden Sie wie bei Produkten das Artikelhandle als URL. Wir richten diese Route in nur einer Sekunde ein. Ich gebe dem einen Klassennamen des Bildcontainers. Dann richten wir hier unsere Image-Komponente ein. Alles, was wir tun müssen, ist das Artikelbild durchzugehen und Bildkomponente von Shopify erledigt den Rest, abgesehen von alt, das wir hier durchsetzen müssen, Artikel, Bild, Alt, Text. Cool. Wir wollen nicht, dass es sich so schließt, wir wollen, dass es sich selbst schließt. Fegen. Mal sehen, ob das funktioniert. Ja, wir haben diese Bilder durchgebracht. Wunderschön. Hier erstelle ich eine weitere Link-Komponente, die auf dieselbe Stelle verlinkt. Ich gebe dem einen Klassennamen für das CSS von article-grid-item-title. Lass uns das schließen, damit wir sehen können. Schließen Sie das und setzen Sie dann den Artikeltitel zwischen diese Link-Tags. Speichern Sie das und Halleluja, wir haben hier unser Artikelraster. Wenn ich auf eines davon klicke, wird es im Grunde nur auf eine leere Seite gehen , da wir diese Route noch nicht eingerichtet haben. Lass uns das jetzt einrichten. Genau wie bei Kollektionen und Produkten müssen wir nur einen neuen Ordner namens blog erstellen. Richten Sie dann, genau wie bei Kollektionen und Produkten, eine dynamische Route [handle] .server.jsx ein. Hier werden wir den Großteil unserer Arbeit für diese Lektion erledigen. Exportieren wir eine Standardfunktion. Wir nennen diesen Komponentenartikel und gehen den Artikel als Requisite durch. In unserer Rücksendeerklärung hier werde ich nur unsere Layout-Datei ausgeben und dann werden wir herausfinden, was wir in diese einfügen sollen. Wir müssen hier ein paar Dinge importieren. Ich werde dies auf mehrere Zeilen ausweiten , wie wir es in diesem Kurs getan haben , und ein paar Dinge aus der Shopify-Wasserstoffbibliothek importieren. Ich muss ShopQuery verwenden. Ich brauche UseLocalization. Ich werde mir die SEO-Komponente schnappen, denn was bringt es, einen guten Artikel zu haben , wenn er nicht suchmaschinenoptimiert ist. Ich schnappe mir die GQL und schnappe mir die Image-Komponente. Ich werde auch Suspense aus React importieren und natürlich die Layout-Komponenten importieren. Ich denke, wir müssen zweimal zurückgehen, zu Komponenten und dann zu layout.server gehen. Da haben wir's. Als Nächstes erstellen wir die Abfrage. Lassen Sie uns das in der grafischen Oberfläche tun, damit wir alle Fehler beheben können, bevor wir sie tatsächlich ausführen. Wir nutzen auch die automatische Vervollständigung auf diese Weise. Ich werde den alten loswerden und nennen wir diesen Abfrageartikel einfach Singular. Bevor wir das öffnen, müssen wir tatsächlich weitergeben, welche Variable wir weitergeben werden? Wir müssen sagen, dass wir eine Variable namens handle übergeben werden , das ist der Typ der Zeichenkette. Dann zielen wir auf den spezifischen Blog der Zeitschrift ab. Dann müssen wir einen Artikel per Handle spezifizieren. Es heißt aus irgendeinem Grund nicht Artikel, es heißt ArticleByHandle. Das ist ziemlich spezifisch, aber natürlich werden wir als Parameter unser Handle eingeben . Öffne das und dann hier rein, was sind einige der Dinge , die wir aus jedem Artikel abrufen müssen . Offensichtlich der Titel, das Datum, an dem er veröffentlicht wurde, der Autor, der jetzt AuthorV2 ist. Was eigentlich eine Auswahl ist, wir müssen nur angeben, was wir für diese Auswahl wollen. Ich will nur den Namen und dann das Bild, was offensichtlich eine Auswahl ist. Wir holen uns die URL und den Alternativtext und dann den Inhalt-HTML , der der Inhalt des Artikels ist. Offensichtlich wird das nicht funktionieren , weil wir den Wert des Handles nicht angegeben haben , aber zumindest haben wir Graphical verwendet, um einige dieser Felder automatisch auszufüllen. Gehen wir zurück. Ich werde hier einfach die Abfrage als konstante GQL aufschreiben, das öffnen und dann los geht's. Wir haben die Tatsache fest codiert , dass wir in das Journal schauen, aber das Handle , das wir als Variable weitergeben werden. Hier können wir den Griff , nach dem wir suchen, anhand der Parameter, durch die Requisiten dieser Komponente greifen. Ich werde das Handle des Artikels nehmen und dann lass uns ShopQuery verwenden, also const data gleich useShopQuery. Dieses Mal werde ich nur die Abfrage und die Variablen eingeben . Die Variablen, die wir durchlaufen werden, sind einfach das Handle. Wie immer werde ich die Daten, die von unserer Abfrage zurückgegeben wurden, auf der Konsole protokollieren. Wenn wir zu einem dieser Elemente gehen, haben wir einen Fehler, wir können das Eigenschaftshandle des Artikels nicht zerstören, da es undefiniert ist. Wir haben hier eigentlich keinen Zugriff auf ein Artikelobjekt. Lass uns einen Blick darauf werfen. Wir benutzen hier das Falsche. Wir müssen RouteParams verwenden. tut mir leid. Verwenden Sie RouteParams. Wir werden es nicht weitergeben, wir werden nur die RouteParams verwenden. Ich gehe hier zu UseRouteParams und ziehe den Griff ab. Lass uns auffrischen. Ups. Kehren wir zu unserem Blog zurück. Klicken Sie auf eines davon. Jetzt haben wir einen Fehler von der Storefront-API erhalten, das Variablen-Handle wurde als ungültig angegeben. Es liegt wahrscheinlich daran, dass ich die Klammern hier nicht benutzt habe, um es aufzurufen. Erfrischen wir uns hier. Ja. Jetzt bekommen wir keine Fehler mehr. Lass mich mal einen Blick darauf werfen. Wir scrollen nach unten. Da haben wir's. Wir bekommen hier das Konsolenprotokoll der Daten und es gibt uns Datenblogartikel nach Handle und dann Objekt darin zurück . Wir können das eigentlich einfach kopieren und es für unsere Destrukturierung verwenden. Natürlich müssen wir hier kein Objekt verwenden, aber wir können den Artikel per Handle abrufen und dann unsere Konsole den Artikel nach Handle protokollieren. Erfrischen Sie sich hier. Wenn ich das öffne, werden Sie sehen, dass wir dieses Objekt über Titel, PublishedAt, AuthorV2, Bild und den Inhalt davon erhalten haben. Sehr cool. Das funktioniert jetzt, unsere Storefront-API-Abfrage. Jetzt haben wir dieses Ding namens ArticleByHandle. Ich mag ArticleByHandles nicht wirklich, also tausche ich das einfach aus. Ich nenne es einfach einen Artikel. Ich weiß nicht, warum es ArticleByHandle sein muss . Dann verwenden wir den Artikel hier. Was ich tun werde, ist, dass ich eine Spannung für die SEO-Komponente eröffnen werde, sagen wir Artikel eingeben, und dann werden die Daten einfach der Artikel sein. Ich möchte daraus ein selbstschließendes Etikett machen. Danach werden wir diese Artikelseite erstellen, also werde ich einen Entwickler mit der Klasse Artikel, Seite und Container erstellen . Dann werde ich zwei Teile davon haben. Ich werde die Kopfzeile der Artikelseite und dann den Artikel selbst haben , Artikelseiten-Header ist der Klassenname. Ich werde H1, den Artikeltitel, durchgehen. Ich werde hier eine Spanne für das Datum erstellen , das wir noch formatieren müssen. Aber sagen wir einfach, es ist ein Artikel. Lassen Sie uns vorerst einfach das unformatierte durchgehen. PublishedAt, wir trennen das mit einem Punkt und setzen den Artikel AuthorV2.name hier für den Autorennamen ein, und dann nach dem Header werden wir ein Artikel-HTML-Tag erstellen, ein Artikel-HTML-Tag hier wird es eingefügt unser Hauptartikelbild. Ich werde das article.image durchgehen und dann in den Alternativtexten das Artikelbild, den Alternativtext. Selbstschließendes Tag für das Bild, und was wir dann tun werden, ist das div zum Einbringen des HTML-Codes. Wir werden dieses DangerouslySetInnerHTML-Attribut erneut sehen , und wir müssen nur diesen Unterstrich machen, HTML gleich und dann nicht gleich Doppelpunkt unterstreichen. Geben Sie dann Content-HTML ein, das vom Artikelobjekt kommt, und dann gebe ich diesem einen Klassennamen für Formatierung des Artikelkörpers. Cool. Lassen Sie uns das div abschließen und schauen wir uns an, was jetzt passiert, wenn wir diese Seite ausführen. Schau dir das an. Wir haben den Titel, wir haben das Datum, das wir noch formatieren müssen. Wir haben den vollständigen Namen des Autors und dann haben wir dieses Bild hier, das das Hauptbild ist. Wenn ich das schließe, können Sie sehen, dass dies können Sie sehen, dass der erste Teil und dann der Inhalt des Artikels ist. Das ist so ziemlich fertig. Das einzige, was wir wirklich tun müssen, ist diesen Zeitstempel hier zu korrigieren . Es ist ziemlich hässlich. Natürlich können wir es dem Benutzer nicht so belassen, und auch für den Fall, dass es keinen Artikel gibt, möchte ich auch einen Fallback hinzufügen. Lass mich das zuerst machen. Ich werde es einfach in einen Fallback setzen. Wenn es keinen Artikel gibt, kehren wir mit unseren Layout-Komponenten zurück. Ich benutze immer noch den Container. Wir fügen einfach ein div mit einem Artikel ein, der nicht gefunden wurde, und das erinnert mich auch daran, etwas in unsere App-Komponente einzubauen , das ich in den Theoriestunden erwähnt habe, aber ich habe es in diesem speziellen Projekt , das die Routenkomponente einbringt und eine NotFound-Route ausführt. Wir können diesen hier ausgewählten Platzhalter verwenden. Alles, was durch Dateirouten rutscht und es hierher schafft, bringen wir einfach eine NotFound-Komponente ein. Entschuldigung, das ist eine ziemliche Tangente, aber ich habe gerade daran gedacht , als ich diesen Fallback für die Artikelseite erstellt habe, und dann unten hier, lass es uns hier machen. Funktion NotFound. Dies ist nur eine kleine 404-Seitenrückgabe ohne Layout , von der ich glaube, dass wir das Layout aus den Komponenten layout.server importieren müssen. Dann, genau wie wir es für die Artikelseite getan haben, ein Container mit einem Div darin, das nur sagt, dass die Seite nicht gefunden wurde. Wenn ich jetzt zu einem Artikel gehe , der nicht gefunden wurde, also unser Hallo, lass uns einfach so etwas Zufälliges einfügen. Es wird zurückkommen Artikel nicht gefunden. Wenn wir auf die Root-Route gehen und dort etwas Zufälliges wie Hallo eingeben , wird angezeigt, dass die Seite nicht gefunden wurde. Das ist ein kleiner Bonus für dich dort. Lass uns Link 3 tatsächlich aktualisieren. Ich hüpfe hier ein bisschen herum, aber es ist das Bonus-Video. Gebt mir ein paar lockere Typen. In layout.server setzen wir einen Link zum Blog ein. diesen hässlichen Link 3 los, und wenn ich dann auf „Blog“ klicke, Werde diesen hässlichen Link 3 los, und wenn ich dann auf „Blog“ klicke, werden wir zum Blog weitergeleitet, und wenn ich dann hier klicke, kommen wir zu einem unserer Artikel, und so ja. Wie ich schon sagte, bevor ich zu dieser Tangente ging, müssen wir dieses Datum formatieren, was etwas komplizierter ist , als wir es gerne hätten, aber wir bringen, verwenden die Lokalisierung hier, welches ein Wasserstoffhaken ist. Wir können die Strukturierung verwenden , um hier einige Dinge aus dem Use-Lokalisierungs-Hook herauszuholen . Was wir schaffen werden, ist Sprache, IsoCode. LanguageCode wird es nennen, und dann wird country den ISOCode des Landes herausbringen und ihn in seine eigene Variable namens CountryCode einfügen. Dies wird für die nächste Funktion sein, die wir verwenden. Wir werden ein formatiertes Datum erstellen, und wir werden ein neues internationales Datums- und Uhrzeitformat-Objekt erstellen . Dies ist eine Spezifikation innerhalb von JavaScript. Dies ist kein React oder Wasserstoff. Dann öffnen wir hier eine Zeichenfolge und fügen die beiden Variablen ein, die wir gerade erstellt haben und die wir gerade aus der Benutzungslokalisierung gezogen haben. Der erste LanguageCode, dann der Bindestrich CountryCode, und dann wird das nächste Argument gehen und ein Objekt eingeben Jahr numerisch, monat lang und Tag numerisch. Dies hängt alles von Ihren persönlichen Vorlieben ab. Aber wir werden ein numerisches Jahr haben, eine lange Anzeige für den Monat, was meiner Meinung nach einfach so ist, wenn es Januar ist, es wird Januar komplett ausgegeben, und dann wird der Tag eine lange Anzeige für den Monat, was meiner Meinung nach einfach so ist, wenn es Januar ist, es wird Januar komplett ausgegeben, und dann wird der Tag auch numerisch, was Sinn macht. Danach führen wir Formate für dieses neu erstellte Objekt aus und führen es dann durch ein neues Objekt aus, Article.PublishedAt. Das sieht ziemlich hektisch aus, aber im Grunde konvertieren wir nur das PublishedAt-Datum in dieses internationale Datumsformat. Jetzt, wo wir dieses formatierte Datum haben, können wir einfach hier runter gehen und den Artikel PublishedAt durch das formatierte Datum ersetzen , und es sei denn, wir haben hier einige Fehler gemacht, die wir anscheinend haben. Was haben wir getan? Vor der Initialisierung kann nicht auf Artikel zugegriffen werden Ich habe den Artikel variabel gemacht , nachdem ich den ganzen Code geschrieben habe, also musste ich ihn vorher nur verschieben, und wenn ich dann bei dieser also musste ich ihn vorher nur verschieben, Aktualisierung hier auf Speichern klicke , kannst du den Langformnamen des Monats sehen das ist der 3. Juni 2022 von Ben Cell oder wie auch immer Sie seinen Namen aussprechen, und da ist Ihr Artikel. Wenn wir zu anderen Artikeln in diesem Blog gehen, werden Sie feststellen, dass es genauso gut funktioniert. Das ist ein kleiner Bonus für euch. Die Blogseite, ich denke, diese Lektion sollte eine ziemlich gute Übung für euch denn wie ich bereits erwähnt habe, durchlaufen wir immer wieder wie eine Sequenz des Aufbaus. Diese Komponenten, die Daten aus der Storefront-API mithilfe von Sharp Query abrufen, um die gewünschten Daten in diesen zurückgegebenen Daten abzurufen und sie dann in unserer Komponente zu verwenden. Gleichzeitig bringen wir einige dieser anderen Komponenten und Hooks von Shopify ein, die unser Leben so viel einfacher machen. Das schließt im Grunde diese Klasse ab, Leute. Ich hoffe es hat euch gefallen. Bei Fragen wie immer lassen Sie sie unten, aber lassen Sie uns jetzt zum Schluss kommen, wo wir über Ihr Klassenprojekt sprechen werden . Wir sehen uns dort. 15. Schlussbemerkung und Kursprojekt: Damit ist dieser Kurs über Shopify-Wasserstoff abgeschlossen. Für Ihr Klassenprojekt ermutige ich Sie, Ihre eigene Storefront mit Wasserstoff zu erstellen . Inspiration können Sie das, was wir bisher in diesem Kurs getan haben Als Inspiration können Sie das, was wir bisher in diesem Kurs getan haben, nutzen und es erweitern. Sie können eine Produktgalerie erstellen, um mehr Produktfotos aus dem Backend einzubinden, eine Schublade für den Warenkorb des Benutzers erstellen ohne dass er die Produktseite verlassen muss, oder benutzerdefinierte Abschnitte erstellen um die besten Eigenschaften Ihres Produkts zu präsentieren. Sie haben die Wahl. Wenn Sie Fragen oder Bedenken haben, hinterlassen Sie wie immer einen Kommentar im Diskussionsfeld unten, und ich werde mein Bestes tun, um Sie in die richtige Richtung zu weisen. Danke wie immer fürs Zuschauen und ich hoffe, wir sehen uns in einigen meiner anderen Klassen wieder.