Shopify Themeentwicklung mit Vue.js: Optimierung von Produkt- und Warenkorbseiten

1. Einführung: Hallo und willkommen bei Shopify Theme Development mit Vue.js. Ich bin Christopher Dodd. Ich bin freiberuflicher Webentwickler und Top-Lehrer hier auf Skillshare.com, alle Dinge Web-Entwicklung und Online-Freelancing abdecken. In der heutigen Klasse lernen wir, wie Sie das JavaScript Framework Vue.js in die Produkt- und Warenkorbseiten eines Shopify-Themes integrieren können. Diese Klasse ist ideal für diejenigen unter euch, die einige meiner anderen Klassen zur Shopify-Themenentwicklung hier auf Skillshare.com genommen haben und bereit sind , ihre Theme-Entwicklungsfähigkeiten auf die nächste Stufe zu bringen. Mit Vue.js sind wir in der Lage, Shopify-Datenstrukturen auf das Front-End zu bringen und es dem Benutzer zu ermöglichen, Update-Elemente zu live , ohne den Browser neu zu laden. Mit Vue.js über andere JavaScript-Bibliotheken wie jQuery können wir ein optimales Erlebnis sowohl für uns als Entwickler als auch für die Endbenutzer unseres E-Commerce-Stores schaffen . Wenn du bereit bist, loszulegen, klicke auf das nächste Video und ich sehe dich auf der Innenseite. 2. Erforderliche Kenntnisse: Die heutige Klasse bei der Verwendung von Vue.js in Shopify-Themes ist ein fortgeschrittenes Thema und daher benötigen Sie einige notwendige Kenntnisse um das Beste aus dieser Klasse zu verstehen und zu holen. Bevor Sie diese Klasse nehmen, sollten Sie den Unterschied zwischen Front-End und Back-End verstehen , wenn es um Web-Entwicklung geht, dies wird auch als clientseitig und serverseitig bekannt. Wenn Sie nicht wissen, warum wir Daten von Shopify Liquid in JavaScript übertragen müssen , dann empfehle ich Ihnen, sich Lektion 4 meiner vorherigen Skillshare Klasse, Understanding Web Development, anzusehen . Zweitens müssen Sie JavaScript wissen. Wenn Sie eine Auffrischung benötigen, können Sie sich meine Skillshare Klasse, Web Development Fundamentals: JavaScript, ansehen. Drittens sollten Sie zumindest einige Vertrautheit mit der Ajax-API und Shopify haben. In dieser Klasse werden wir es in Sichtweite stecken und es verwenden, um unseren Einkaufswagen im laufenden Betrieb zu aktualisieren. Wenn Sie eine Auffrischung der Ajax-API wünschen, schauen Sie sich Lektion 8 meiner Klasse, Shopify Theme Programming an. Natürlich sollten Sie nicht zuletzt einige allgemeine Erfahrungen mit der Shopify-Themenentwicklung und dem Schreiben von Shopify Liquid Code haben . Wenn nicht, empfehle ich definitiv meine beiden vorherigen Skillshare Klassen zum Thema Shopify Theme Development und Shopify Theme Programmierung. Abgesehen davon, selbst wenn Sie neu bei Vue.js sind, sollten Sie über genügend Kenntnisse verfügen, um mit den folgenden Videos fortzufahren. 3. Warum Vue verwenden?: Bevor wir anfangen, lassen Sie uns darüber sprechen, warum wir Vue innerhalb von Shopify-Themes verwenden möchten. Einfach gesagt, Vue.js ist praktisch für alle Bereiche auf unserer Shopify-Website, die Benutzerinteraktion außerhalb der einfachen Navigation zu neuen Seiten erfordern oder fördern. Lassen Sie uns für eine Sekunde darüber nachdenken, wie ein Benutzer normalerweise mit einer E-Commerce-Website interagieren könnte . Wir können es in drei Hauptverhaltensweisen aufteilen. Zum einen, indem Sie bestimmte Produkte suchen oder zwei kaufen, Produkte hinzufügen und aus ihrem Warenkorb entfernen, und drei, diese Produkte zur Kasse bringen und ihre Bestellung abschließen. Auf dem Punkt 1, durchsuchen oder finden Sie bestimmte Produkte zu kaufen, die meiste Zeit geschieht dies über die Navigation. Sie klicken einfach auf die Sammlung oder Kategorie, die Sie durchsuchen möchten , und Sie erhalten eine Liste von Optionen. Dies erfordert keine Interaktivität über das Navigieren von Seiten hinaus. Aber was ist, wenn Sie die Produktseite erreichen und Ihnen einige Optionen vorgestellt werden um das Produkt nach Ihren Wünschen zu ändern, bevor Sie es in den Warenkorb legen. Wenn Sie hier Ihre Auswahl aktualisieren, können sich das Produktbild, der Produktpreis und andere Details ändern. Vorzugsweise sollte der Benutzer nicht zu einer neuen Seite navigieren oder die Seite aktualisieren müssen , um diese geringfügigen Änderungen zu sehen. Zweitens möchte ein Benutzer, nachdem er das Durchsuchen und Hinzufügen von Artikeln zu seinem Warenkorb beendet hat, vielleicht Produkte aus seinem Warenkorb entfernen oder zusätzliche Einheiten desselben Produkts hinzufügen. Auch hier wäre es vorzuziehen, dass das Update sofort aufgezeichnet wird , anstatt auf eine Seitenaktualisierung warten zu müssen. Glücklicherweise können wir beide Interaktionen am Front-End mit JavaScript behandeln. Aber mit JavaScript oder jQuery im Framework überhaupt, müssen wir angeben, welche Abschnitte der Seite geändert werden sollen und in welchen Situationen. Dies führt dazu, dass wir unordentliche Codes schreiben müssen, beide die Daten aktualisieren und sie dann so machen, dass die aktualisierten Daten dann auf der Seite reflektiert werden. Vue.js löst dieses Problem für uns durch etwas, das Reaktivität genannt wird. Ich ermutige Sie, ausführlich über die Reaktivität auf der Website von Vue zu lesen, aber im Moment werde ich dies erklären. Einfach gesagt, Vue ermöglicht es uns, eine Datenstruktur zu erstellen und dynamische Werte in unsere Front-End-HTML-Struktur einzufügen. Wenn sich die Daten ändern, auch die Werte auf der Seite angezeigt. Daher gelten sie als reaktiv. Beim Schreiben von Vue.js müssen wir der Benutzeroberfläche nicht explizit mitteilen, dass sie aktualisiert wird. Stattdessen reagiert die Benutzeroberfläche auf alle Daten, die an dieses Element gebunden sind, auf die aktualisiert wurden. Lassen Sie uns es in Bezug auf die beiden Bereiche, in denen wir Vue in der heutigen Klasse verwenden werden, die Produktseite und die Warenkorbseite. das Produkt auf der Produktseite Wenndas Produkt auf der Produktseitemehr als eine Variante hat, ist eine Auswahl des Benutzers erforderlich. Die Auswahl bestimmt dann die aktuelle Variante, die einen anderen Preis, ein Bild und/oder einen anderen Lagerbestand mit sich bringen kann . Auf der Warenkorbseite werden die meisten, wenn nicht alle Seiteninhalte von dem stammen, was derzeit im Warenkorb gespeichert ist, wie die verschiedenen Artikel im Warenkorb, ihre Bilder, Titel , Preise und die Kombination dieser Preise, die bilden den Gesamtpreis. Wenn ein Artikel oder eine Einheit aus dem Warenkorb entfernt wird, führt dies zu einem Trickle-Down-Effekt auf die Artikelgruppe, den Positionspreis des Artikels und/oder die Gesamtsumme des Warenkorbs. In Vue.js können wir unsere Entwicklertools öffnen, um unsere Datenstruktur klar zu sehen und wie die Werte auf der Seite synchron mit der Struktur gehalten werden , ohne manuell Codezeilen schreiben zu müssen , um die Werte zu aktualisieren, wie sie auf der Seite zu sehen sind. Zusammenfassend ist Vue.js in diesen Umgebungen am nützlichsten, diesen Situationen, in denen Sie die Seite nicht jedes Mal aktualisieren möchten , wenn eine Aktualisierung stattfindet. Speziell in E-Commerce-Stores ist Vue.js besonders praktisch, wenn es um Variantenauswahlen und Einkaufswageninteraktionen geht . 4. So verwendest Du Vue in Shopify-Themes: Vue.js ist ein Framework, das verwendet werden kann, um eine einseitige Webanwendung zu erstellen, oder es kann in jeder einzelnen Webseite abgelegt werden. Die Vue Instanz, wie sie genannt wird, wird in Ihre vorhandene HTML-Struktur eingefügt und ermöglicht durch die Verwendung von benutzerdefinierten Tags, Attributen und Template-Syntax die Bindung von Daten und Ereignissen aus dem HTML an die Vue Instanz. In der heutigen Klasse werden wir zwei Vue Apps oder Instanzen erstellen, eine eine die Produktseite und eine für die Warenkorbseite. Für die Produktseite werden wir Vue verwenden, um die aktuell ausgewählte Variante zu verfolgen. Dies wird durch die Kombination von Optionen bestimmt, die der Benutzer über dieses Formular ausgewählt hat. Wir importieren die Liste der Varianten aus dem Shopify-Back-End und verwenden die Werte aus diesen Drop-Downs, um die aktuelle Variante zu bestimmen. Für die Warenkorbseite importieren wir die Warenkorbdaten aus unserem Shopify-Back-End mit der AJAX-API in unsere Instanz. Wir werden auch eine bestimmte Sammlung importieren, um Upsells unterhalb des Einkaufswagens anzubieten, sowie Übergangs-Ladezustände für die Schaltfläche zum Warenkorb hinzufügen und die Warenkorb-Tabelle hinzufügen, da wir asynchrone Aufrufe an die AJAX-API machen werden. Das ist die Übersicht darüber, wofür wir Vue in unserem Shopify-Thema verwenden werden. Beachten Sie, dass Vue Instanzen und Shopify-Vorlagen hier eine 1:1 -Beziehung haben. Wenn wir anfangen, Vue zu bauen und dann fertig zu betrachten, sollte es klarer werden, warum wir es so machen. Am Ende dieser Klasse möchten Sie vielleicht herausfinden, welche anderen Vorlagen in Ihrem Shopify-Theme von einer Vue Instance profitieren könnten. Ein Beispiel, das mir von oben in meinem Kopf vorstellen kann, ist die Sammlungsvorlage. Der Shopify Store ist mit vielen einzelnen Produkten ausgestattet Möglicherweise möchten Sie ein ausgefeilteres Filtersystem erstellen bei dem der Benutzer die Seite nicht aktualisieren muss , nachdem er verschiedene Parameter hinzugefügt oder entfernt Filtern Sie eine Liste von Produkten. Dies würde eine Menge von Daten beinhalten, die basierend auf Benutzereingaben aktualisiert werden und wäre eine gute Gelegenheit für die Verwendung von Vue. Moment konzentrieren wir uns auf die beiden häufigsten Bereiche, denen Vue.js auf den meisten Shopify-Websites Sinn macht, in denen Vue.js auf den meisten Shopify-Websites Sinn macht, was meiner Meinung nach Variantenauswahl auf Produktseiten und Einkaufswageninteraktionen wäre. 5. Unser Projekt einrichten: Wir werden den Screenshare Teil dieser Klasse in meinem üblichen Testgelände für Shopify Themen starten , Chris Testing Shop. Offensichtlich brauchen Sie einen Shopify-Store, an dem Sie arbeiten können. Dies ist in jedem meiner anderen Shopify-Theme-Entwicklungsklassen der Fall. Denken Sie daran, Jungs, dass wir uns auf einen ganz bestimmten Bereich der Shopify-Themenentwicklung mit Vue.js konzentrieren. Wir werden Dinge wie CSS, wie Shopify funktioniert oder andere Dinge, die mit der Shopify-Themenentwicklung einhergehen, nicht behandeln. Es wird erwartet, dass Sie wissen, wie Theme Kit zu verwenden. Es wird erwartet, dass Sie CSS, HTML, ein wenig JavaScript verstehen . Wir werden uns speziell auf Vue in dieser Klasse konzentrieren. Deshalb habe ich ein Starterprojekt erstellt, das wir in dieser Klasse durcharbeiten können, da wir kein Thema von Grund auf neu erstellen möchten, aber wir wollen auch ein Thema verwenden, das so vereinfacht wie möglich ist. Die Art und Weise, wie wir auf dieses Thema zugreifen, ist, indem Sie zu meinem GitHub-Konto gehen. Also github.com, und ich glaube, es ist nur „Christopher Dodd“. Los geht's. In Popular Repositories können Sie Skillshare sehen, aber es gibt eine neue, die ich hier erstellt habe, namens „vue-class-theme“. Wir gehen in nur einer Sekunde zurück zum Skillshare Repository. Aber was ich hier tun möchte, ist, diesen „Ausgangspunkt“ in meinem Vue-Class-Theme Repository hier zu greifen und das in unseren Code-Editor zu bringen , der für diese Klasse , der für diese KlasseVS Code sein wird. Natürlich können Sie den Code-Editor verwenden, den Sie wollen, ich ziehe es vor, VS Code zu verwenden. Es ist kostenlos und es ist mächtig. Warum nicht? Ich öffne VS-Code, klicke hier auf „Neues Fenster“ und führe ein neues Terminal aus. Der Weg, dieses Repository zu erhalten, besteht darin, die URL hier und dann „git clone“ zu erfassen . Da gehen wir. Das wird irgendwo in unserer Dateistruktur sein, wo immer wir unser Terminal eingerichtet haben. Für mich wird es hier in meinen Benutzerkonten sein. Da können Sie sehen, ich werde das einfach auf den Desktop verschieben, nur um es ein bisschen einfacher zu machen. Dann kann ich das jetzt öffnen. Ich öffne mich einfach, gehe zu diesem Ordner, und hier ist er. Nun, wie es bei der gesamten Shopify-Theme-Entwicklung der Fall ist, müssen wir eine config.yml-Datei einrichten. Ich habe das ein paar verschiedene Male in den verschiedenen YouTube-Videos behandelt, die ich gemacht habe. Es wurde in der ersten Klasse auf Shopify Thema Entwicklung hier auf Skillshare abgedeckt, also werden wir nicht durch Theme Kit gehen. Was ich bereits im freigegebenen Ordner habe, habe ich meine config.yml. Ich bringe das einfach rein. Natürlich verfügt die Datei config.yml über alle Authentifizierungsdetails und die Theme-ID, um sich tatsächlich im Store anzumelden. Ich werde das schließen, sobald wir das haben. Der nächste Schritt für uns ist das Hochladen dieses Thema in unseren Shopify-Händlershop. Was ich dafür tun werde, ist Zip dies up, tun Compress auf einem Mac. Jetzt ist es gezippt, gehen Sie zurück zu meinem Testshop, klicken Sie auf „Thema hochladen“. Wählen Sie die ZIP-Datei aus. Klicken Sie auf „Hochladen“. Das dauert ein wenig Zeit zum Hochladen und dann werden wir sehen, wie es kommt. Ich werde nur das Kapital V entfernen. Jetzt sollten wir in der Lage sein, auf „Vorschau“ zu klicken und eine Vorschau unseres Themas zu sehen. Auf der Homepage gibt es nichts, aber was ich hier habe, sind zwei Links, einen um das T-Shirt zu kaufen oder Schuhe zu kaufen. Jetzt werden wir in nur einer Sekunde über die Store-Daten sprechen, aber schauen wir uns an, was wir bisher haben. Wir haben unser T-Shirt hier und dann haben wir unsere Kollektionsseite, wo wir eine Auswahl an Schuhen haben. Nun, natürlich, das alles basiert auf Shop-Daten. Ich erwähne das in so ziemlich jeder Klasse, dies zieht aus den Informationen, die Sie in Ihrem Geschäft haben. Sie werden nicht genau die gleichen Informationen wie ich haben, aber ich habe versucht, es so einfach und so einfach für Sie zu machen, um loszulegen und dies in Ihrem Geschäft wie möglich zu starten. Was ich getan habe, ist, dass ich all diese Produkte exportiert habe. Gehen Sie einfach zurück zu GitHub, gehen Sie in das Skillshare Repository. Hier Schuhe und Shirt CSV, wenn wir das in Shopify importieren, dann werden wir alle diese Produkte in unserem Shop haben. Hier ist ein kleines Video, wie es aussieht , wenn Sie diese Informationen in einen neuen Store importieren. Jetzt sollten Sie Ihr Theme hochgeladen haben und Sie sollten diese Produkte auch hochgeladen haben. Wenn Sie mitverfolgen möchten, können Sie einfach die Produkte verwenden, die Sie gerade in Ihrem Geschäft haben, wenn Sie möchten, das liegt an Ihnen. Aber jetzt haben wir das Thema hier. Lassen Sie uns unser Theme Kit verbinden. Wie ich normalerweise tun, gehen zu öffnen, anpassen, greifen Sie die Theme-ID dieses Themas. Gehen Sie in unsere config.yml Datei, aktualisieren Sie die Theme-ID hier. Um zu bestätigen, dass das funktioniert, werde ich ein neues Terminal öffnen und Theme Watch ausführen. Jetzt können Sie sehen, dass wir mit diesem Thema verbunden sind und wir beobachten jetzt nach Änderungen. Der nächste Schritt ist die Einrichtung unserer Umgebung für Vue. Aber bevor wir das tun, möchte ich Sie nur mit dem Projekt vertraut machen, wie wir es bisher noch nicht getan haben. Es ist sehr einfach. Dies basiert auf einem Starter-Thema, das ziemlich nackt ist. Sie werden sehen, dass es nicht viele Vermögenswerte gibt, es hier keine Schnipsel gibt. In der Tat gibt es auch keine Abschnitte. Dies ist ein sehr einfaches Thema. Wenn Sie ein Produktionsthema haben, hätten Sie hier natürlich mehr Ordner und Dateien. Wir halten es einfach für diese Klasse. Als erstes möchte ich Ihre Aufmerksamkeit auf sich lenken, ist die Datei theme.css. Ich habe diese Stilregeln bereits erstellt. Ich wollte keine Zeit in dieser Klasse damit verbringen, CSS zu erstellen, also habe ich das alles bereits in eine CSS-Datei für uns gelegt. Hier gibt es eine JS-Datei. Wir können unser allgemeines JavaScript für das Thema hier einfügen, aber wir verwenden Vue und Plugging in, um Daten zu speichern. Es ist nicht wirklich für diese Klasse erforderlich und wir werden diese Datei nicht tatsächlich in dieser Klasse verwenden. Aber das ist auch eine Option für Ihr allgemeines JavaScript. Ich habe hier auch ein Website-Logo. Das ist nur Chris Testing Shop. Egal, was Ihr Shop ist, wenn Sie dieses Thema verwenden, haben Sie das gleiche Logo, es sei denn, Sie ändern diese Datei. Ich habe ein Papierkorb-Symbol für die Warenkorbseite, und ich habe dieses Skript hier, das Sie hier auf GitHub finden können, wenn Sie möchten. Andernfalls ist es bereits im Projekt enthalten. Es ist eine Möglichkeit, die Geldformatierung in Shopify über JavaScript durchzuführen. Andernfalls bleiben Sie mit Shopify Liquidgeld-Formatierung und das wird nicht funktionieren, wenn wir JavaScript und Vue.js verwenden. Das ist dein Asset-Ordner. Ich möchte Ihre Aufmerksamkeit neben der Layoutdatei lenken. Wir haben hier eine ziemlich einfache Layoutdatei. Ich kann sehen, ich habe Slick Slider enthalten, die entfernt wurde. Das wird für Ihre Version des Designs entfernt. Grundsätzlich, was wir haben, ist Thema CSS enthalten, das ist das einzige zusätzliche CSS, das wir enthalten haben. Wir fügen dieses Shopify-Geldskript ein, damit es Shopify-Geldwerte formatieren kann. Ich habe auch jQuery enthalten. jQuery ist praktisch, um unsere AJAX-Anfragen zu erledigen. Andernfalls, wenn wir Vanilla JavaScript verwenden, sieht der Code unordentlich aus, und es ist einfach so viel einfacher, jQuery zu verwenden. Ich habe jQuery auch dort aufgenommen. Das sind ein paar Abhängigkeiten. Wir werden shopify-money benötigen, um die Geldwerte und jQuery für die AJAX-Anfragen zu formatieren . Auch hier können wir Vanilla JS verwenden, aber jQuery ist ein bisschen schöner. Das ist es für Abhängigkeiten. Jetzt ist es Zeit, Vue.js tatsächlich einzubringen. Die Art und Weise, wie wir das tun können, wie in den Dokumenten angegeben, ist, nach unserem jQuery-Tag hier, fügen Sie dieses Skript-Tag hinzu, das Vue einbringt. Nun, wenn Sie sich fragen, woher ich das habe, ist es in der Vue Dokumentation. Dies ist eine gute Gelegenheit, Ihnen jetzt zu zeigen, wo Sie die Dokumentation für Vue finden können. Das, was Sie wirklich wissen müssen , ist, dass ich in dieser Klasse Vue 3 verwenden werde. Es gibt drei verschiedene Versionen: Vue 1, Vue 2, Vue 3. Vielleicht, wenn Sie das zu einem viel späteren Zeitpunkt sehen, gibt es danach noch mehr Versionen, aber zum Zeitpunkt der Aufnahme ist es derzeit bei Vue 3. Hier sehen Sie standardmäßig die Dokumentation für Vue 2. Sie müssen hier klicken, um Vue 3 Dokumentation zu erhalten. Wie Sie sehen können, sieht die Website ziemlich genau gleich aus, aber Ihre URL hier ist anders. Klicken Sie auf „Erste Schritte“. Dies ist Ihre Referenz für alles Vue in der gesamten Klasse, wenn Sie stecken bleiben. Wie Sie hier unten sehen können, nur die vor der Installation, hier ist das Skript-Tag, das ich bekommen habe. Das ist genau das, was wir hier haben. Das nächste, was wir installieren möchten, ist Vue DevTools. Vertrauen Sie mir, das ist so hilfreich bei der Entwicklung für Vue. Vue DevTools fügt eine zusätzliche Registerkarte hier in unseren DevTools in Chrome. Ich bin mir sicher, dass es auch Versionen für andere Browser gibt, aber ich empfehle Ihnen, Chrome zu verwenden, wenn Sie diese Webentwicklung durchführen. Wir werden hier eine zusätzliche Registerkarte hinzufügen, die es uns ermöglicht, unsere Vue Datenschicht und auch unsere berechneten Eigenschaften und alle möglichen Dinge zu überprüfen . Es hilft sehr, herauszufinden, welche Daten und Dinge in Vue passieren, während wir uns entwickeln. Dafür werde ich den Chrome-Erweiterungen Store nachschlagen, Chrome Web Store. Die Sache, die Sie hier beachten müssen, ist, wenn wir Vue 3 verwenden, dann müssen wir die Beta-Version hier verwenden. Dies ist derjenige, der perfekt auf Vue 1 und Vue 2 funktioniert, aber wir müssen die Beta verwenden, wenn wir Vue 3 verwenden. Offensichtlich ändert sich dies je nachdem, wann Sie diese Klasse beobachten. Aber zur Zeit, um Vue 3 zu inspizieren, müssen wir diese Version direkt hier verwenden, die Beta. Ich werde auf „Zu Chrome hinzufügen“ klicken, „Erweiterung hinzufügen“ drücken, und Sie können sehen, dass es zu Chrome hinzugefügt wurde. Lassen Sie uns nun unser Thema öffnen und eine Vorschau auf das Thema. Ich bin mir ziemlich sicher, um das Vue DevTools zum Laufen zu bringen, müssen wir eine echte Vue App erstellen. Sagt, dass Vue.js nicht erkannt wurde. Ich habe das Paket enthalten, aber wir haben noch keine App erstellt. Nur um zu beweisen, dass das alles funktioniert, was ich tun werde, ist in die erste Vorlage zu gehen. Wir werden an der Produktvorlage arbeiten und einige Skript-Tags öffnen. Dann hier drinnen werde ich eine Vue App erstellen. Denken Sie daran, im Theoriebereich dieser Klasse haben wir darüber gesprochen, wie wir eine 1:1 -Beziehung zwischen den Apps und den Vorlagen in unserem Shopify Store machen. Wir werden eine App namens ProductPage erstellen, um mit dieser Vorlage zu gehen. Wir werden ein Objekt öffnen und dann werden wir eine App aus diesem Objekt erstellen. Unter diesem Objekt werden wir vue.createapp schreiben und dann unser Objekt dort laden. Dann werden wir es zu unserem DOM mounten, indem wir die ID der Elemente angeben. Ich habe es hier bereits auf Produktseite eingestellt. Verwenden von CSS-Syntax mit dem Hash, indem Sie die Produktseite dort einfügen. Nun, Leute, nur um hier zu beachten, dass dies Vue 3-Syntax ist. Wenn Sie sich Beispiele online ansehen, die Syntax anders sein, da diese Person möglicherweise Vue 1 oder Vue 2 verwendet. Behalten Sie das im Hinterkopf. Dies ist die neueste Syntax für Vue 3. Wenn Sie sich alte Beispiele ansehen, wird es etwas anders aussehen. Aber Ihre Wahrheit hier ist, dass Sie immer zur Dokumentation zurückkehren können, stellen Sie sicher, dass Sie auf Version 3 sind. Wenn wir dann zur Einführung gehen, können Sie hier sehen, dass dies das gleiche Format ist. Wir könnten tatsächlich einen Fehler erhalten, wenn wir kein Datenobjekt einschließen. Ich überprüfe das zuerst. Gehen wir zu unserer Produktvorlage. Gehen wir rüber zur Konsole. Es scheint bisher keine Probleme zu sein. Gehen Sie in die Vue Registerkarte, und los geht's. Wir haben dieses Wurzelelement hier. Da habt ihr es, Leute. Wir haben gerade unsere erste Vue App erstellt. Wir können es jetzt in der Vue DevTools inspizieren, es wird die letzte Registerkarte wahrscheinlich in Ihrem DevTools hier auf Chrome sein. Jetzt sind wir in der Box Sitz, um mit der Erstellung unserer ersten Vue App zu beginnen. Ohne weiteres werde ich Sie im nächsten Video sehen, in dem wir diese Produktseiten-App aufbauen und einige Interaktivität auf dieser Seite hinzufügen. Wie Sie sehen können, können wir die Variante hier ändern, aber sie ändert sie nirgendwo auf der Seite. Wenn ich auf „In den Einkaufswagen“ klicke, wird nur die erste Varianz hinzugefügt. Wir müssen das beheben, und wir werden das im nächsten Video tun. Wir sehen uns dort. 6. Verwendung von Vue auf der Produktseite: In dieser Lektion werden wir die Produktseite hier umgestalten, um Vue.js zu verwenden. Wenn wir uns den Code jetzt ansehen, kommen der Inhalt und alle dynamischen Werte von Shopify Flüssigkeit. Das bedeutet, dass es auf der Serverseite einmal gerendert wird, wenn die Seite geladen wird. Egal, was wir tun, die aktuelle Variante wird klein weiß sein denn das ist die Variante, die beim Laden der Seite ausgewählt wird, und egal, was wir hier tun, um unsere Farbe zu aktualisieren, die Farbe im Produktbild wird nicht zu ändern, und das ist natürlich eine schlechte Benutzererfahrung. Derzeit haben wir nicht einmal dieses Setup, um die Varianten-ID zu ändern. Wenn wir auf „In den Warenkorb“ klicken, wird es das kleine weiße T hinzufügen . Ich werde meinen Warenkorb schnell löschen, indem ich fetch läuft. Sie können das auch tun. Dies ist nur der Endpunkt des Einkaufswagens Ajax API, um den Warenkorb zu löschen. Holen Sie einfach Warenkorb clear.js, und das aktualisieren Sie die Seite, die den Warenkorb löschen wird. Zurück zu dieser Seite hier. Wenn wir in den Code gehen, rendern wir all diese Shopify Flüssigkeit auf der Seite, aber natürlich möchten wir bestimmte Dinge aktualisieren abhängig von der Auswahl hier in der Varianzauswahl. Deshalb wollen wir Vue verwenden. Das erste, was ich tun werde, ist die Daten einzurichten. Das haben wir schon mal gesehen. Wir werden eine Datenfunktion innerhalb dieses Objekts erstellen müssen, und dann innerhalb dieser Funktion geben wir ein Objekt zurück, das unsere Daten enthält. Lassen Sie uns über einige der Dinge nachdenken, die wir in dieser App verfolgen möchten. Natürlich möchten wir die aktuelle Varianten-ID verfolgen, denn das wird dem Warenkorb hinzugefügt, wenn wir auf „In den Warenkorb“ klicken. Ich werde mit dieser aktuellen Varianten-ID beginnen, und der Startwert unserer aktuellen Varianten-ID wird gleich sein , was wir derzeit hier in unserem Wert haben. Wie bereits erwähnt, ist der Wert, der in dieses versteckte Feld eingefügt wurde , und daher, was dem Warenkorb hinzugefügt wird, wenn Sie auf „In den Warenkorb“ klicken die ausgewählte oder erste verfügbare Variante. Lassen Sie uns diesen Wert in unsere Vue Instanz verschieben, und das wird sicherstellen, dass die aktuelle Varianten-ID beim Laden der Seite mit diesem Wert festgelegt wird. Aber dann können wir es aktualisieren, während wir mit unserer Vue App interagieren. Nun, was ich hier tun werde, ist etwas sehr subtiles, aber sehr wichtiges. Ich werde einen Doppelpunkt vor Wert stellen, und das wird dieses Feld in ein dynamisches Vue Feld verwandeln. Anstatt einen expliziten Wert wie hier zu setzen, wird der Wert eins sein, wir können einen Variablennamen dort von unserem Datenobjekt einfügen und es wird aktualisiert, je nachdem, was mit diesen Daten passiert. Hier kommt die Reaktivität ins Spiel. Hier werden wir den Variablennamen hier einfügen. Die Idee ist, dass sich dies im Laufe der Zeit auch automatisch ändern wird. Aber für jetzt sollten wir genau die gleichen Ergebnisse sehen. Ich werde die Seite aktualisieren. Lassen Sie uns zu unserem Vue Tab gehen, und Sie können hier sehen, wir bekommen, um die Daten zu inspizieren und wir können unsere aktuelle Varianten-ID sehen. Wenn wir das Formular überprüfen und nach diesem versteckten Feld suchen, können Sie sehen, dass der Wert ist. Eigentlich können wir hier reingehen und das im laufenden Betrieb bearbeiten. Wenn ich dies zum Beispiel als 1, 2, 3, 4, 5 setze , habe ich den Wert geändert, und dann können Sie hier sehen, dass es sich auch im DOM geändert hat. Sie haben diese Datenbindung hier passiert. Es ist ziemlich cool. Wenn ich die Seite aktualisiere , wird dieser Wert erneut geladen. Das ist ziemlich cool. Das nächste, was ich erfassen möchte, die verschiedenen Varianten für dieses bestimmte Produkt zur Verfügung. Die Art und Weise, wie ich das tun werde, ist, eine flüssige Schleife zu machen. Dies ist nicht der sauberste Code, aber es ist nur die Art, wie wir es in Shopify Flüssigkeit tun müssen. Ich werde hier ein Varianten-Array erstellen, und innerhalb dieses Arrays werde ich Shopify Flüssigkeit verwenden, um uns unsere Varianten zu geben. Wir werden hier eine for-Schleife setzen, Variante in Produktvarianten. Im Grunde, was ich hier mache, ist die Übertragung der Daten von Shopify Flüssigkeit in unsere Vue Instanz, so dass wir mit ihr innerhalb von Vue interagieren können, alles am Frontend, ohne sich auf Shopify Flüssigkeit verlassen zu müssen. Für jede Variante in Produktvarianten werde ich ein Objekt mit einem Komma haben. Vergessen Sie nicht das Komma, sonst wird es keine Trennung zwischen Varianten geben, und ich werde einige der Daten von Shopify Flüssigkeit quer kopieren. Zuerst, Variant-ID, müssen wir wissen, ob die Variante verfügbar ist. Wir können das ohne Anführungszeichen setzen, so dass es nur als boolescher Wert dort einfügen kann, und dann werden wir seine Optionswerte zu greifen. ist die Auswahl innerhalb der drei Optionen, die wir in Shopify zur Verfügung haben Wasist die Auswahl innerhalb der drei Optionen, die wir in Shopify zur Verfügung haben? Wenn Sie mit einem dieser Objekte nicht vertraut sind, können Sie diese immer in der Shopify Liquid Dokumentation nachschlagen. Ich könnte Ihnen zeigen, dass gerade jetzt nur als kurzer Bezugspunkt, Shopify Flüssigkeitsreferenz. Wenn Sie jemals verwirrt sind, welche Attribute Sie für ein bestimmtes Objekt haben, können Sie einfach in die Referenz gehen und nach unten gehen. Schauen Sie sich die Variante an, nach der wir suchen, und dann können Sie Erklärungen zu all diesen Attributen sehen , die ich in unsere Vue Daten setze. Ich könnte das einfach offen halten, nur für den Fall, und lasst uns zurückgehen und die restliche Option 2 und Option 3 einbauen. Dann werde ich den Variantenpreis eintragen und sicherstellen, dass durch den Geldfilter in Shopify Flüssigkeit filtern, sonst wird es als Sinn ohne Formatierung herauskommen. Als nächstes werde ich das Bild für diese Variante greifen, und ich werde in einem zusätzlichen Schritt hier hinzufügen, um zu überprüfen, ob das Variantenbild leer ist. Denn wenn das Variantenbild in Shopify leer ist, lädt es immer noch ein Bild, es ist nur das falsche Bild. Ich werde hier zuerst eine Variable erstellen, und Sie werden sehen, was ich in nur einer Sekunde mache, greifen Sie diese Bild-URL mit allen Filtern in Shopify Flüssigkeit zur Verfügung. Überprüfen Sie nochmals die Referenz, wenn hier irgendetwas für Sie verwirrend ist. Dann hier drin, was ich für Bild tun werde, ist in, es sei denn, Aussage. Es sei denn, die Bild-URL enthält kein Bild . Dies ist das Bild, das angezeigt wird, wenn für diese bestimmte Variante kein Bild festgelegt ist. Ich werde diese Bild-URL ausgeben, die ich in dieser Variablen direkt oben festgelegt habe, und es gibt keine andere Anweisung dort. Wenn dies der Fall ist, wird ein kein Bild nur als leer angezeigt. Sweep. Jetzt, nur zum Thema Bilder, was ich auch tun werde, ist ein Fallback-Bild zu erstellen. Falls die Variante kein Bild hat, was viele Instanzen sein wird, werde ich nur das vorgestellte Bild des Produkts verwenden. Ich werde Fallback-Produktbild zu tun, wird das Bild vorgestellt werden, das ist eine Variable, die wir hier eingerichtet haben. Ich kann das vorgestellte Bild nehmen und dann die URL des vorgestellten Bildes holen, um sicherzustellen, dass wir das in Zitate setzen. Lassen Sie uns nun einen Blick in unsere Vue DevTools werfen, stellen Sie sicher, dass wir keine Syntaxfehler gemacht haben. Aktualisieren Sie hier drüben. Sieht aus, als hätten wir unerwartete Token. Los geht's, verfügbar. Ich habe Varian anstatt Variante eingegeben. Lassen Sie uns die Seite aktualisieren. Keine JavaScript-Fehler, gehen Sie zu Vue. Hier können Sie sehen, wir haben ein Array mit allen Varianten und den Daten, die eingerichtet wurden. Wir haben unser Fallback-Produktbild. Wir haben unsere aktuelle Varianten-ID. All diese Informationen können wir jetzt in unserer Vue App nutzen. Wir können es an Elemente auf der Seite binden oder wir können es in Berechnungen verwenden. Jetzt gibt es eigentlich nur ein bisschen mehr Daten, die ich hier hinzufügen möchte, und das ist, um unsere Auswahl hier zu erfassen. Wir werden gerade über Varianten, setzen in unsere Variantenauswahl, und wir werden dies an unser Formular binden. Stellen Sie sicher, dass das Komma da drin ist. Dies ist nur Option 1 wird den ausgewählten Wert unserer Optionen mit Werten, ausgewählten Wert entsprechen. Hier, was wir tun, wenn wir in die Dokumentation gehen, schauen wir uns das Produkt an. Es gibt hier ein Attribut namens Optionen mit Werten, und es wird ein Array zurückgeben. Innerhalb des Arrays gibt Ihnen die Werte und den Optionsnamen aller Optionen. Sie haben hier Namen und Wert. Sie können sich dieses bestimmte Objekt hier ansehen. Name, Position, ausgewählter Wert, Werte. Wir verwenden den ausgewählten Wert der ersten Produktoption in unseren Produkten. Das wird Option 1 sein. Stellen Sie sicher, dass Sie das in Anführungszeichen setzen. Ich werde nur für die nächsten zwei kopieren. Für diese 1, 2 und 3 müssen wir nur die Position im Array aktualisieren und das sollte alles gut sein. Jetzt gehen wir zurück zu unserer Seite hier. Sie können sehen, wir haben jetzt unsere Variantenauswahl, die klein und weiß ist. Wir haben diese Variantenauswahl hier in Vue beim Laden der Seite geladen. Aber was wir derzeit nicht haben, ist die Datenbindung, so dass, wenn dies aktualisiert wird, auch unsere Daten in der Vue Instanz aktualisiert werden. Lasst uns das jetzt machen. Gehen wir rüber zu unserem Code. Ich werde das runterziehen, weil wir das nicht so groß brauchen. Was ich tun werde, ist, diese Werte an diese Selektionen hier zu binden. Wie wir hier sehen können, durchlaufen wir die Optionen mit Werte-Attribut für das Produkt, das für jedes Element im Array gibt uns den Namen der Produktoption, die Werte, die verfügbar sind, und die ausgewählten -Wert. Wir können diese Logik verwenden, um herauszufinden, was die aktuelle Auswahl ist und eine Auswahl erstellen, damit der Benutzer dies ändern kann. Was wir tun müssen, ist, diesen Wert der Auswahl an unser Datenmodell hier zu binden. Die Art und Weise, wie wir das tun können, ist, indem wir hier ein Attribut von v-model hinzufügen. Wir fügen dies zur Auswahl hinzu, weil das derjenige ist, der den Wert trägt. Hier können wir an der Wurzel des Datenobjekts beginnen. Wir werden eine Variante machen. Eigentlich könnte es sich lohnen, diese Seite an Seite zu haben. Sie können beide Seiten sehen. Hier ist unser Datenobjekt genau hier. Hier ist der HTML-Code. Wir wollen in die Variantenauswahl gehen und die entsprechende Option abziehen. Ich werde Variante Unterstrich Auswahloption gehen. Was ich dann tun werde, um die bestimmte Nummer auszuwählen, die ich möchte, ist das Attribut innerhalb dieser Schleife für die Produktoptionsobjekte der Position zu verwenden . PRODUCT_OPTION.POSITION Das wird eine Zahl von eins hier einfügen, und das wird es damit verknüpfen. Jetzt haben wir Vue Modell auf unserem Element. Wir können zurück auf die Seite hier drüben, aktualisieren. Wenn ich eine dieser Optionen ändere, können Sie sehen, dass sie in den Daten aktualisiert wird. Das ist alles gut und gut. Wir aktualisieren unsere Variantenauswahl. Aber was wir tun müssen, ist, diese Variantenauswahl in eine tatsächliche Variante umzuwandeln. Wir haben unsere Liste der Varianten hier. Was wir tun müssen, ist zu berechnen, welche Variante derzeit durch die Auswahl ausgewählt wird , die wir hier gespeichert haben. Dies ist etwas, was wir in jedem Shopify-Store tun müssen, egal ob wir Vue verwenden oder nicht. Ich werde nicht zu lange damit verbringen, es durchzugehen. Was wir tun werden, ist jedoch unsere erste Methode zu schaffen. Dies ist etwas Neues, das wir noch nicht behandelt haben, ist es, eine Methode hinzuzufügen. Auf unserer Instanz haben wir hier unser Datenobjekt. Aber lassen Sie uns eine Methode erstellen, die im Grunde eine Funktion auf unserer Vue Instanz ist. Wie wir das tun, ist sicherzustellen, dass wir ein Komma dort setzen und wir ein Methodenobjekt definieren. Innerhalb des Methodenobjekts erstellen wir unsere erste Methode. Ich werde es Variante von Optionen nennen. Im Inneren werde ich die Variante basierend auf den Variantenoptionen nachschlagen. Wo ich das mache, werde ich Code kopieren und einfügen, und dann werde ich sie einfach erklären. Was ich hier mache, ist die find-Methode für dieses Varianten-Array zu verwenden, um eine Übereinstimmung zu finden. Wenn die Variantenoption 1 der Variantenauswahloption 1 entspricht, ist dies eine Übereinstimmung mit dieser bestimmten Option. Wir werden prüfen, ob es leer ist. Denn wenn es leer ist, dann sollten wir nicht einmal nach einer Übereinstimmung suchen, die standardmäßig wahr ist, es sei denn, wir kommen gegen eine falsche. Am Ende werden wir dann mit einem Match zurückgegeben. Das wird die Suchmethode hier zurückgeben. Was wir mit diesem Wert tun werden, wenn ich eine neue Zeile erstelle, ist, die aktuelle Varianten-ID so zu aktualisieren, dass sie gleich der Variante ist, die in dieser Find-Anweisung ausgewählt ist, und nehmen Sie die ID davon. Nachdem wir diese Methode erstellt haben, müssen wir sie immer noch mit unserem Element auf der Seite verbinden. Wir werden ein anderes Attribut hier in Vue.js verwenden, beginnend mit dem @-Symbol und dann das Ereignis schreiben, nach dem wir suchen. Dies ist im Grunde gesagt onchange. Dann onchange werden wir Variante von Optionen ausführen. Wir haben die Bindung, und wenn wir sie ändern, ändern wir sie nicht nur hier in unserer Variantenauswahl, wir werden die aktuelle Varianten-ID aus unserer Variantenauswahl hier oder hier neu berechnen . Aktualisieren der Seite Ich möchte, dass du es hier drüben bemerkst. In unserer Vue Instanz, wenn ich die Auswahl ändere, werden Sie sehen, dass unsere aktuelle Variante neu berechnet wird. Wenn ich Medium schwarz auswähle und auf „In den Einkaufswagen“ klicke. Wir sollten nun sehen, dass ein mittleres schwarzes T-Shirt in den Warenkorb gelegt wird. Ich werde nur diesen Fetch-Befehl erneut ausführen, um den Warenkorb loszuwerden. Gehen wir zurück zur Shop-Tee Produktseite. Das ist alles gut und gut, jetzt haben wir unsere Variantenauswahl funktioniert. Aber was passiert, wenn jede unserer Varianten einen anderen Preis, einen anderen Ausverkaufsstatus, ein anderes Variantenbild hat. Wir wollen, dass das auf der Seite aktualisiert wird. Außerdem gibt es eine Sache in Shopify, bei der die Varianten-ID in der URL gespeichert wird. Wenn Sie diese URL teilen oder die Seite aktualisieren, wird dieselbe Variante ausgewählt, daher müssen wir diese ebenfalls hinzufügen. Die drei Bereiche, die wir tun werden, sind das Variantenbild, der Variantenpreis und der Verlaufsstatus in unserer URL. Gehen wir zurück zu unserer Vue App. Wenn wir tatsächlich finden, was das aktuelle Variantenbild ist, ist der aktuelle Variantenpreis und die aktuelle Varianten-ID, nun, wir haben hier bereits die ID aktualisiert. Wir müssen verstehen, welche Variante derzeit ausgewählt ist und das als Objekt aus diesem Varianten-Array greifen. Wenn ich zu den Daten in Vue zurückgehe, ist die einzige Sache, die wir auf der aktuellen Variante haben, ihre ID. Dadurch können wir die Variante nachschlagen, aber es erlaubt uns nicht, auf Datenattribute auf der Variante zuzugreifen. Was wir tun werden, ist dies zu verwenden, um das relevante Variantenobjekt in diesem Array zu suchen . Die Art und Weise, wie wir das tun werden, ist über etwas, das eine berechnete Eigenschaft genannt wird. Berechnete Eigenschaften existieren in Vue.js, weil wir keine Funktionen und Logik in unsere HTML-Struktur einfügen möchten . Wir fügen hier nur ein zusätzliches Objekt mit unseren berechneten Eigenschaften hinzu. Dann können wir die berechnete Eigenschaft wie ein Datenattribut hier behandeln und in unserem HTML platzieren. Was wir innerhalb unserer berechneten Eigenschaft tun werden, werden wir unsere eigene Eigenschaft namens aktuelle Variante erstellen. Sie werden dies in unserem Vue DevTools in einem Augenblick sehen. Berechnete Eigenschaften sind im Grunde nur Funktionen, die einen Wert zurückgeben. Wir werden zurückkehren und dann werden wir die Variante mit der Find-Methode nachschlagen . Variant, und alles, was wir suchen müssen, ist die Varianten-ID, die dieser aktuellen Varianten-ID entspricht , die uns das entsprechende Variantenobjekt aus diesem Array geben sollte. Gehen wir zurück, aktualisieren Sie die Seite. Sie werden unter Daten sehen, die wir jetzt berechnet haben. Wenn wir in der aktuellen Variante schauen, können Sie sehen, dass wir ein Objekt mit der Varianten-ID, den Optionen, dem Bild, dem Preis haben. Wenn ich hier reingehe und das ändere, wird dies aktualisiert. Wenn der Preis anders ist, wird das aktualisiert. Siehe hier, das Bild wird aktualisiert, wenn es aktualisiert werden soll. Dies geschieht alles, ohne dass wir eine Methode auslösen müssen , da eine berechnete Eigenschaft reaktiv ist. Wenn sich dies ändert, werden alle berechneten Eigenschaften neu berechnet. Wenn wir es in eine Methode einfügen, müssten wir explizit neu berechnen. Das ist die Schönheit der berechneten Methoden. Wir können Daten zusammenbinden und diese auch reaktiv sein. Nun, da wir unsere aktuelle Variante berechnete Eigenschaft haben, haben wir nun Zugriff auf unsere aktuellen Varianten Bild und Preis. Lassen Sie uns sicherstellen, dass unsere UI als Reaktion darauf aktualisiert. Ich gehe zurück, und ich gehe nach oben, lass uns zuerst den Preis machen. Ich werde das loswerden, und ich werde ein Attribut auf das Element selbst hinzufügen, Code V-HTML. Jedes Mal, wenn Sie v Strich sehen, das ist höchstwahrscheinlich ein Vue Attribut. Ich werde V-HTML hinzufügen. Innerhalb von V-HTML kann ich das Attribut einfügen, nach dem wir suchen. Es wird current_variants.price sein. Dann hier oben für das Bild, werde ich das ersetzen. Ich werde dies dynamisch machen, indem ich den Doppelpunkt vor und dann werde ich das aktuelle Variantenbild einfügen. Wenn die aktuelle Variante kein Bild hat, müssen wir das Fallback verwenden. Ich werde hier die Doppelpipe-Syntax verwenden. Wenn dies als falsch, null oder undefiniert kommt , glaube ich, dass die Liste ist, dann werden wir standardmäßig auf den Wert, der als nächstes kommt, was Fallback-Produktbild sein wird. Das wird bei Produkten sehr wichtig sein, die keine Variantenbilder haben. Gehen wir zurück zu unserem Frontend, und ändern wir das in Schwarz. Wie Sie sehen können, das Variantenbild aktualisiert es ist nicht besonders glatt, jetzt werden wir ein wenig von einem Übergang auf, dass aber wie Sie sehen können, wenn wir die Farbe aktualisieren, auch das Variantenbild und ändert diese Farbe. Wenn wir die Größe aktualisieren, können Sie sehen, dass sich der Preis ändert. Wie immer können Sie die VUE-DevTools Tools verwenden, um zu überprüfen, ob dies mit den Daten übereinstimmt, was natürlich auch der Fall ist. Das dritte, was ich binden wollte, ist der Geschichtszustand , den wir derzeit nicht aktualisieren. Das ist wichtig, wenn Sie diesen Link mit jemandem teilen oder die Seite aktualisieren. Wenn ich jetzt aktualisiere, wird es nur standardmäßig auf die erste Auswahl gesetzt. Lassen Sie uns eine Methode zum Aktualisieren des Verlaufsstatus erstellen. Innerhalb des Methodenobjekts nach dieser Variante von der Optionsmethode werde ich eine Update-Historienzustandsmethode erstellen. Ich werde das Argument einer Variante einfügen, und dann hier einen Code, „Wenn Geschichte Zustand ersetzen“. Dies ist Code, den ich von einem vorherigen Design kopiert habe , weil es gleich sein wird unabhängig davon, ob Sie View verwenden oder nicht. Ich lade es nur in eine View-Instanz bei dieser Gelegenheit. Ich tippe einfach den Rest des Codes aus und wir können in nur einer Sekunde darüber reden, was er tut. Es ist nicht wichtig, dass Sie 100 Prozent genau verstehen, was hier vor sich geht, offensichtlich hilft es, wenn Sie es tun, aber im Grunde, was wir hier tun, wenn es keinen „Geschichte ersetzen Zustand“ gibt und es keine „Variante“ gibt dann werden wir einfach zurückkehren. Aber wenn es so ist, werden wir eine neue URL erstellen. Wir werden das Protokoll nehmen, das wahrscheinlich HTTPS sein wird, dann fügen Sie diese beiden Schrägstriche hinzu, dann den Host , dann den Pfadnamen, dann werden wir in diesem Abfrageparameter der Variante gleich hinzufügen und dann die Varianten-ID. Dann werden wir unseren Fensterverlauf auf die neue URL aktualisieren. Fühlen Sie sich frei, diesen Code zu kopieren und einzufügen. Alles, was es tut, ist die Aktualisierung der URL in einem Browser mit JavaScript. Jetzt natürlich wird es nicht auslösen, ohne wir es irgendwo abkühlen, also was ich tun möchte , nachdem die Variante aus diesen Optionen berechnet wurde, möchte ich den Verlaufsstatus aktualisieren. Um eine Methode von der gleichen Instanz auszulösen, machen wir nur diese.updatehistorystate, und dann haben wir dieses Variantenobjekt, so dass wir das einfach dort platzieren können. Das wird die Varianten-ID von diesem Objekt finden und nach diesem Abfrageparameter in unserem Browser platzieren. Wenn ich die Seite hier aktualisiere, wählen wir eine andere Variante aus und sehen, was passiert. Hier sehen Sie, dass unsere Varianten-ID in unserem Browser hinzugefügt oder aktualisiert wird. Wenn ich die Seite aktualisiere, erhalte ich die gleiche Auswahl. Das sind die drei Bereiche, die wir reaktiv sein wollen. Wir wollen, dass der Preis reagiert, wir wollen, dass das Produktbild reagiert und wir wollen, dass der Geschichtszustand reagiert. Das ist es im Grunde für unsere Vue Instanz. Das Einzige, was ich tun werde, bevor wir weitermachen, ist, dass das ein bisschen glitchy aussieht. Ich meine, es könnte eine bessere Benutzererfahrung sein, also werde ich etwas verwenden, das in Vue Standard kommt, was Übergänge sind. Wenn ich dorthin zurückgehe, wo sich das Bild befindet, und dann werde ich das Bild in ein Vue Element namens Übergang wickeln, werde ich es fade nennen, was ihm den Fade-Übergang gibt, und dann kopieren Sie es wieder dort hinein. Es gibt zwei Dinge, die wir brauchen, damit das funktioniert. Einer ist, dass wir das CSS brauchen. Was dies tun wird, ist, einige Klassen zu diesem Element hinzuzufügen, während es sich ändert. Wir müssen tatsächlich in unser CSS einfügen, was wir wollen, wenn diese Klassen hinzugefügt werden. Ich zeige Ihnen nur, wo das in unserem Thema steht. CSS, genau hier. Es wird diese Klassen hinzufügen und entfernen. Wir müssen sie nur in unserem CSS definieren. Sie können es an den Beispielen finden, was zu tun ist, obwohl in der Vue Dokumentation. Wenn wir in „Übergänge“ „Enter & Leave“ gehen, können Sie sehen, dass dies im Grunde genau der gleiche Code aus der Dokumentation ist , also hier ist die Referenz. Die andere Sache, die wir brauchen, ist, wir diesem Element einen Schlüssel hinzufügen müssen, weil Vue nicht wissen wird, dass es sich geändert hat, obwohl sich dieser SRC geändert hat. Es muss wissen, dass sich das Element geändert hat. Eine Möglichkeit, das zu verstehen, besteht darin, dem Element einen Schlüssel zu geben. Wir werden tun: key, und dann werden wir den Schlüssel gleich dem exakt gleichen wie hier im SRC machen. Nun, wenn ich die Seite aktualisieren, und lassen Sie uns dieses Attribut ändern, können Sie sehen, dass wir dieses schöne kleine Fade zwischen den verschiedenen Farben haben. Wie gut ist das? Da hast du es. Wir haben unsere Produktseite hier. Wenn ich eine Variante auswähle , wird der Preis, das Variantenbild und die Varianten-ID in der URL parallel aktualisiert, oder innerhalb weniger Millisekunden, und es wird die aktuelle Varianten-ID basierend auf dem -Auswahl. Wenn ich auf In den Warenkorb klicke, wenn ich ein großes rotes T-Shirt ausgewählt habe, wird es ein großes rotes T-Shirt zu meinem Warenkorb hinzufügen. Wie Sie hier sehen können, hat dies keine Interaktivität, wenn ich die Menge hoch, es wird nicht funktionieren, wenn ich auf den Papierkorb klicke, wird es nicht funktionieren. Diese Upsells hier unten sind nicht miteinander verbunden. Wenn Sie bereit sind, in die nächste Lektion zu springen, werden wir diese Seite tatsächlich mit Vue verbinden, und Vue wird all diese Interaktionen behandeln und all diese Daten synchronisieren. Die Warenkorbseite ist natürlich ein großartiger Kandidat für Vue.js. In der nächsten Lektion, lassen Sie uns tatsächlich verbinden diese Warenkorbseite. 7. Verwendung von Vue auf der Warenkorbseite: In der letzten Lektion haben wir die Funktionalität für die Variantenauswahl auf der Produktseite angeschlossen . Wenn Sie dies nun ändern, werden alle Elemente auf der Seite geändert , die mit dieser Auswahl verknüpft sind. Lassen Sie uns jetzt die ante und arbeiten an der Warenkorb-Seite. Wie Sie hier sehen können, gibt es einige mögliche Interaktionen. einen sollten wir in der Lage sein, die Menge zu aktualisieren, so dass wir mehr T-Shirts zu unserer Bestellung hinzufügen können, fügen Sie weniger T-Shirts zu unserer Bestellung, wir sollten in der Lage sein, einen Artikel aus dem Warenkorb zu entfernen, klicken Sie auf diesen Papierkorb Schaltfläche. Wir sollten auch in der Lage sein, einen dieser Up-Sells in den Warenkorb zu legen und den Warenkorb live zu aktualisieren. In dieser Lektion werden wir das mit Vue erstellen. Wir aktualisieren nur die Seite, stellen sicher, dass alles synchron ist. Gehen wir von unserer Produktvorlage hier weiter und öffnen Sie unsere Warenkorbvorlage. In dieser Lektion müssen wir einige dieser Schleifen umgestalten , die in JavaScript erstellt wurden, da wir diese Listen mit Vue aktualisieren. Es wird viel dynamischer sein, noch mehr als das, was wir in der vorherigen Produktvorlage getan haben. Wie wir zuvor getan haben, öffnen wir ein Skript-Tag am Ende der Template-Datei hier, und mit der gleichen Konvention werde ich diese Vue App CartPage nennen. Dann werde ich dieses Objekt in eine Create Vue App-Methode setzen, also Vue.CreateApp Cartpage.mount, und ich werde es auf das Element einhängen, das die ID von CartPage hat. Einer der größten Unterschiede zwischen dieser Vue Instanz in dieser Vorlage im Vergleich zur Produktvorlage besteht darin, dass wir Shopify Liquid nicht zum Laden der Daten verwenden. Der Grund, warum wir eine API namens den Warenkorb Ajax API haben, die uns erlaubt, Ajax Anfrage zu verwenden, um Einkaufswageninformationen zu sammeln und den Warenkorb zu aktualisieren. Wir brauchen Shopify Liquid überhaupt nicht zu verwenden. Ich denke, es könnte erwähnenswert sein, dass wir die Ajax-API auch in unserer Produktvorlage verwenden könnten . Anstatt dessen, wo wir die Datenobjekte mit verschiedenen Shopify Liquid Tags erstellen , was wir stattdessen hätten tun können, und ich werde gerade einen Code einfügen, ist anstelle dieses genau hier kommentieren Sie das einfach aus, also ist es nicht ablenkend, stattdessen wird das, was wir hätten tun können, mit einem leeren Produktobjekt begonnen und dann die Produktinformationen über die Ajax-API eingebracht. Ich habe mich dagegen entschieden, und der Grund dafür ist, dass wir die Objekte wollen, die beim Laden der Seite gefüllt Dies kann zusätzliche Probleme verursachen, wenn dies beim Laden der Seite leer ist und das geladen wird, macht es einfach ein wenig härter. Aber dies ist auch eine Option auf Ihrer Produktseiten-App, wenn Sie Shopify Liquid vermeiden wollten. Ich werde diesen Code einfach wieder dorthin setzen, wo er vorher war. Viel das gleiche Konzept wie auf der Produktseite zur Warenkorbseite, könnten wir in den Warenkorb Informationen mit Shopify Liquid laden. Aber um den Warenkorb im laufenden Betrieb zu aktualisieren, müssen wir auch die Ajax-API verwenden. Was wir tun werden, ist nur mit dem Warenkorb-Objekt über die Ajax-API zu arbeiten. In dieser speziellen App müssen wir Shopify Liquid nicht verwenden. Das ist ein großer Unterschied. Wie bereits in der Klasse erwähnt, erwarte ich, dass Sie ein wenig über die Ajax-API verstehen. Wenn Sie dies nicht tun, gibt es eine Lektion, die ich in der Beschreibung einer früheren Skillshare Klasse von mir verknüpfen werde . Die Ajax-API ist eine Möglichkeit für uns, insbesondere Warenkorbinformationen über JavaScript zu sammeln. Wir müssen Shopify-Flüssigkeit nicht wirklich verwenden. Dies ist perfekt für die Erstellung von Front-End-Cart-Interaktionen, die wir direkt hier mit Vue tun werden. Lassen Sie uns jetzt tatsächlich einige Warenkorbdaten aus der Ajax-API laden. Wie ich Ihnen bereits beim Produktobjekt gezeigt habe, müssen wir hier mit einem leeren Datenobjekt oder einem leeren Warenkorb-Objekt beginnen. Wir wissen, dass sie innerhalb des Warenkorbobjekts Artikel sein werden. Wir können hier eine grundlegende Struktur definieren, aber bis die Ajax-Anfrage zurückkommt, können wir diese Daten noch nicht füllen. Wir werden nur mit Warenkorb-Artikeln als leeres Array beginnen. Aber was wir auf dem erstellten Lifecycle-Hook tun werden, ist, dieses Objekt direkt hier zu aktualisieren. Ich habe hier gerade ein neues Konzept erwähnt, Lifecycle-Hooks. Es sind im Grunde verschiedene Teile des Erstellungs- und Montageprozesses einer Vue Instanz, wir können bestimmte Dinge auslösen. Genau wie beim Schreiben jQuery oder einem anderen JavaScript würden Sie warten, bis die Seite geladen wird, bis das DOM geladen wird, um JavaScript auszuführen. Mit Vue können wir verschiedene sogenannte Lifecycle-Methoden integrieren. Nur eine kurze Suche nach dem, was das ist. Wenn es hier eine Suche gibt, Lifecycle Hooks, wir haben beforeCreate, erstellt, beforeRemount, mountet, BeforeUpdate, aktualisiert. Aber im Grunde sind die wichtigsten gemeinsamen montiert und erstellt. Was ich tun werde, ist, sobald die Vue Instanz erstellt wurde, möchte ich diese Ajax-Anfrage auslösen und unser Warenkorb-Objekt aktualisieren. Lassen Sie uns tatsächlich zu unserer Warenkorbseite gehen und fügen Sie diesen Lifecycle-Hook direkt nach der Datenmethode dort hinzu. Es ist nur eine Methode in der Wurzel der Vue Instanz, also sagen wir, wenn die Instanz erstellt wird, wir werden eine get-Anfrage erstellen, und dies verwendet jQuery. Sie sollten mit dieser Syntax vertraut sein. Wir verwenden jQuery, um den Endpunkt cart.js zu treffen, dann werden wir ein.then pipe, behandeln die Antwort. Wir werden JSON die Antwort analysieren, so dass das dann ein JavaScript-Objekt wird. Dann werden wir dieses JavaScript-Objekt nehmen, das unser Warenkorb sein wird , und dann werden wir hier das Warenkorb-Objekt in den Daten dieser Instanz auf das Warenkorb-Objekt setzen das Warenkorb-Objekt in den Daten , das von der API zurückgegeben wird. Wenn ich hier rüber gehe, aktualisiere und öffne Vue DevTools. Sie können sehen, dass das Warenkorb-Objekt aus der Ajax-API jetzt von.data füllt. Sie können so viele Informationen aus dem Warenkorb Ajax API sehen, wir haben alle diese Informationen jetzt in unserer Vue Instanz. Wenn Sie jemals die Ajax-API-Anfrage wie immer überprüfen möchten , können Sie in die Registerkarte Netzwerk gehen und die Seite aktualisieren, hier sollten Sie sie sehen. Es sollte einer der ersten sein, cart.js. Sie können sehen, wir machen diese GET Anfrage Statuscode 200. Es ist alles gut. Das ist es, was wieder kommt. Ehrfürchtig. Wir haben jetzt unseren Wagen. Was wir tun möchten, ist unser Kartenobjekt in Vue zu verwenden , um diesen Teil jetzt zu rendern, anstatt Shopify Liquid, da wir den Warenkorb aktualisieren werden, basierend darauf, ob wir ein Produkt löschen oder wir ein neues Produkt in den Warenkorb legen. Es werden Produkte hinzugefügt und aus dieser Liste entfernt werden, und wir möchten nicht warten müssen, bis Shopify Liquid ein Seitenladen durchführt, um diese Tabelle zu aktualisieren. Was ich tun werde, ist ein paar neue Dinge einzuführen, die wir noch nicht in dieser Klasse gesehen haben, die eine Schleife ist, und einige Bedingungen sowie innerhalb von Vue. Wie Sie hier sehen können, haben wir, wenn die Anzahl der Artikel im Warenkorb größer als Null ist, dann wollen wir sie durchlaufen und zeigen sie. Wir wollen das nicht mehr mit Shopify Liquid machen. Lassen Sie uns dies umgestalten, um Vue zu verwenden. Was ich tun werde, ist, das loszuwerden und ein Template-Tag zu verwenden. Ein Template-Tag ist im Grunde ein Tag, das nicht in Vue gerendert wird, aber es wird nur für Logik und Schleifen verwendet. Ich könnte hier ein div machen und das alles in ein div wickeln und dann mein v-if machen, aber ich möchte kein div rendern. Ich werde nur div-template, und Sie werden in nur einer Sekunde sehen, dass es kein Element rendert, aber es wird rendern, was hier drin ist, wenn die if-Anweisung wahr ist. Um hier eine Bedingung in unserem Vue HTML zu setzen, können wir v-if verwenden, und was ich tun möchte, ist ähnlich wie wir es gerade in Shopify Liquid gemacht haben. Ich werde cart.items.length betrachten und überprüfen, ob es größer als Null ist. Wenn ja, werden wir durchlaufen, sonst, was ich tun werde, beenden Sie diese Vorlage, erstellen Sie eine neue für andere, und alles, was Sie tun, ist v-else, und legen Sie in Ihren Warenkorb ist derzeit leer. Das werde ich loswerden. Beende if-Anweisung dort und aktualisiere die Seite hier drüben, es sollte gleich aussehen. Aber eine Sache, die Sie tatsächlich bemerken sollten, ist, dass, wenn wir die Seite aktualisieren, es eine leichte Panne gibt, bevor sie erscheint, weil wir berechnen, ob sie angezeigt werden soll oder nicht basierend auf JavaScript. Es gibt eine Bruchsekunde, in der das Warenkorb-Objekt tatsächlich leer ist. Dies ist tatsächlich falsch für einen Bruchteil Sekunde, bevor die Warenkorbinformationen geladen werden, und dann wird dies wahr. Es ist ein bisschen glitchy, aber wir werden es später in dieser Lektion reparieren. Jetzt wollen wir diese Shopify Liquid for loop durch eine Vue for loop ersetzen. Dafür können wir einfach die for-Schleife direkt auf dieses Element selbst setzen. Ich werde den Anfang und das Ende für loswerden. Lassen Sie uns die Einrückung hier ändern. Wir können v-für tun und was wir hier tun können, ist für Artikel in cart.items. Mal sehen, ob wir auf die Probleme gehen, die das tun. Wie Sie sehen können, haben wir eine Position, aber das hat natürlich alle diese gebrochen, weil wir mit unserem vorherigen Code dieses Objekt innerhalb unserer Schleife erstellt haben, so dass wir diese Attribute greifen konnten. müssen wir auch umgestalten. Ich möchte nicht die Shopify Liquid Version des Artikeltitels. Was ich stattdessen v-html tun werde, wie wir es vorher getan haben, und item.title. Verwenden Sie die Informationen in Vue für das Bild src, schauen wir uns einfach unser Datenobjekt hier an, sehen Sie den Titel jetzt. Es geht in unsere Artikel. Werfen Sie einen Blick. Wir haben dieses Bild hier, damit wir das einfach loswerden können. Setzen Sie einen Doppelpunkt ein, weil es ein dynamischer Wert ist und wir fügen hier eine Variable, item.image. Mal sehen, ob das richtig funktioniert hat. Ja. Dann hier unten für den endgültigen Zeilenpreis des Artikels werden wir diesen Wert in nur einer Sekunde formatieren, aber für den Moment, lassen Sie uns einfach den expliziten Wert eingeben. Wir machen Artikel, Linie, Preis. Überprüfen Sie, ob das funktioniert. Ja. Wieder ist es in Sinn und es ist nicht formatiert, aber wir werden das in nur einer Sekunde beheben. Dann hier innerhalb Wert, wir wollen, dass auf die tatsächliche Artikelmenge zu fixieren. Wie immer, wenn wir hier eine Variable setzen, dynamischen Wert, müssen wir dieses Feld dynamisch machen, indem wir diesen Doppelpunkt einfügen. Ich glaube, das war's. Hier drin ist kein Shopify Liquid mehr. Lassen Sie uns etwas von diesem weißen Raum loswerden und bringen Sie diese Einrückung ein. Da gehen wir. Eigentlich hier in der Sidebar, haben wir eine. Wir werden nur dieses v-html entfernen und anstatt in einen bestimmten Artikel zu gehen, werden wir nur den Gesamtpreis des Warenkorbs zu tun. Upsell haben wir noch eine Shopify Liquid Loop hier, aber wir werden das in nur einer Sekunde beheben. Ich werde hier drüben auffrischen, und wie Sie sehen können, kommen all diese Informationen jetzt von unserer Vue Instanz statt Shopify Liquid. Hier wird es immer noch von Shopify Liquid generiert, aber wir werden darauf zugreifen, nachdem wir daran gearbeitet haben, diese Menge zu korrigieren, die Preise zu formatieren und es einem Benutzer zu ermöglichen, ein Produkt mit diesem Symbol aus dem Warenkorb zu entfernen. Als erstes werden wir diesen Mengenwähler anschließen, so dass es tatsächlich die Menge des Einzelpostens im Warenkorb aktualisiert. Dafür werden wir eine Methode erstellen, es ist ähnlich wie wir auf der Produktseite gemacht haben, wenn die Auswahl geändert wird, wir müssen tatsächlich eine Methode für dieses Ereignis auslösen, und in diesem Fall werden wir Senden einer Ajax-Anforderung an den Warenkorb Ajax-API, um die Karte auf dem Back-End zu aktualisieren. Lassen Sie uns tatsächlich nach unserem erstellten Lebenszyklus-Hook gehen und ein Objekt einer Methode erstellen, und im Inneren lassen Sie uns diese Update-Cart-Methode erstellen. Jetzt die Methoden, die ich in dieser Vue Instanz erstellt habe, oder ich werde in dieser Vue Instanz basierend auf den verschiedenen Funktionen innerhalb der Warenkorb Ajax API erstellen . Wir haben die wichtigsten ist, den Warenkorb zu bekommen, fügen Sie einen Artikel in den Warenkorb, aktualisieren Mengen, und dann ist hier ändern. Sie können auch Mengen und Eigenschaften aktualisieren. Sie haben auch Clear, wenn Sie den Warenkorb löschen möchten, werden wir keine Schaltfläche zum Löschen des gesamten Einkaufswagens haben, aber wir werden diesen API-Endpunkt auslösen, um das Entfernen eines Zeilenelements aus dem Warenkorb oder die Verringerung der Menge. Beide werden den gleichen Endpunkt und damit die gleiche Methode verwenden. Zurück zum Code, den beiden Attributen, die ich hier einfügen werde, Varianten-ID und Quantität. Das basiert natürlich auf dem, was wir hier durchgemacht haben. Wir haben eine Varianten-ID und die Menge, und dann senden wir diese durch in einem Update Objekt. Was ich tun werde ID und Menge, und dann innerhalb dieser Methode werde ich die Post-Anfrage mit jQuery starten und es geht zum Warenkorb update.js Endpunkt. Als nächstes werden wir den Körper der Anfrage eingeben, und dafür können wir es so machen, oder wir können es als Zeichenfolge tun. Ich denke, das ist ein wenig einfacher, also werde ich es so machen. Im Wesentlichen müssen wir nur Aktualisierungen in den eckigen Klammern haben, die Varianten-ID setzen und dann gleich gefolgt von der Menge. Ich werde das nur tun, Updates, und übrigens, diese Backticks, wenn Sie nicht vertraut sind, erlauben es uns, diese Variablen innerhalb der Zeichenfolge zu setzen , ohne die Zeichenfolge immer und immer wieder eingeben zu müssen. Mit den hinteren Ticks gesetzt, werde ich id mit dieser Syntax dort einfügen, und dann nach dem Gleichen die Menge setzen. Dann werden wir eine Kette einen.then, genau wie wir es mit get cart getan haben, nehmen Sie die Antwort, JSON parsen die Antwort, und dann werden wir zu dem Warenkorb-Objekt zurückkehren, auf das wir unseren eigenen Warenkorb setzen Objekt gleich. Beachten Sie nun, dass nicht jede AJAX-Anfrage das Warenkorbobjekt zurückgibt. Einige von ihnen geben ein einzeiliges Element zurück, aber in diesem Fall gibt der Endpunkt update.js den Warenkorb zurück. Dasselbe, offensichtlich, für den Warenkorb zu bekommen, mit in den Warenkorb. Ich glaube, es gibt nur den Artikel zurück. Wir werden das in einer Sekunde sehen, wenn wir das in unsere Upsells einbauen. Aber im Moment können wir uns darauf verlassen, dass der update.js Warenkorb Endpunkt uns den Warenkorb zurückgeben wird. Offensichtlich wird dies nicht laufen, es sei denn, wir fügen es an unsere Auswahl. Gehen wir also zu dieser Änderungsmethode. Genau wie wir es mit der Produktvorlage getan haben, werde ich diesen @change, Update-Schnitt einfügen. Für die Varianten-ID haben wir sie auf den Artikel gesetzt. Da gehen wir, Varianten-ID. Dann das zweite Argument, die Menge wird auch auf den Artikel gesetzt, es ist nur Menge. Wenn wir das so lassen, wie es ist, und dann gehen wir hierher zurück und stellen das auf, wirst du sehen, dass es auf eins zurückgeht, und das liegt daran, dass wir hier kein V-Modell gesetzt haben. So wie wir es auf der Seite Produkte getan haben, müssen wir dies in V-Modell ändern, um diese bidirektionale Datenbindung zu erhalten. Lassen Sie uns nun die Seite aktualisieren und sehen, ob das funktioniert. Wie Sie sehen können, sehen wir, wenn wir die Menge aufstellen, den Positionspreis und die Gesamtpreisaktualisierung. Lassen Sie uns überprüfen, ob alle einzelnen Teile funktionieren. Es sollte sein, wenn es dieses Ergebnis bekommt, aber lassen Sie mich unsere Registerkarte Netzwerk hier aktualisieren, löschen Sie die Registerkarte Netzwerk, klicken Sie darauf, und Sie werden sehen, dass wir diesen update.js Endpunkt treffen. Es kommt grün zurück. Dort können Sie sehen, was wir ihm schicken, und hier können Sie sehen, was wir zurückbekommen. Es ist ein ganz neues Warenkorb-Objekt. Das wird, wie wir es aus unserer Sicht festgestellt haben, dies aktualisieren. Wenn ich in meine Artikel gehe und ich scrolle nach unten, wo es Menge hat. Wo ist die Menge? Da ist es. Wenn ich darauf klicke, dauert es eine Sekunde, aber sobald es von der API zurückkommt, wird es auch in unserer View-Instanz aktualisiert. Shopify standardmäßig Ausgabepreise wie diese, in Cent, ohne Formatierung, also müssen wir es selbst in JavaScript formatieren. Aber wenn Sie sich erinnern, haben wir diese shopify-money.js Datei aufgenommen, und in dieser shopify.money.js-Datei haben wir diese Format-Geldmethode auf dem Shopify-Objekt. Das werden wir jetzt benutzen. Was ich tun werde, ist eine neue Methode zu erstellen, damit wir dies an verschiedenen Punkten in unserer Anwendung verwenden können . Hier ist das Methodenobjekt. Ich werde sorgfältig überprüfen, wo das endet, und bevor es endet, werde ich hier eine andere Methode hinzufügen, die Formatpreise genannt wird. Innerhalb dieser Methode gibt es zwei Preise, die ich aktualisieren möchte. Ich möchte den Positionspreis aktualisieren und den Gesamtpreis aktualisieren. Das sind die beiden, die wir hier in unserer Benutzeroberfläche sehen können. Aber ich werde die Werte nicht selbst aktualisieren, ich werde einen neuen Wert namens formatierten Zeilenpreis und formatierten Gesamtpreis erstellen. Auf diese Weise behalten wir diese alten. Sie können es tun, wie Sie wollen, Sie können sie überschreiben, aber ich werde das Original an Ort und Stelle lassen und einfach ein neues erstellen. Ich werde hier eine Schleife erstellen, die die verschiedenen Artikel in unserem Warenkorb durchläuft. Für jeden Artikel werde ich ein neues Attribut erstellen, formatierten Positionspreis, gleich dem Artikelpositionspreis sein wird, aber mit einem Unterschied, dass wir es über die Geldmethode im Shopify-Format ausführen. Ich werde das im Format Geld einpacken. Das ist für den Einzelposten-Positionspreis. Dann für den Warenkorb insgesamt, werde ich ein neues Attribut erstellen, formatierten Gesamtpreis, und das wird gleich sein, wieder, um das Ergebnis des Shopify-Formats Geld (this.cart.total price). Nun, natürlich, wir führen das nirgendwo hin, also lassen Sie uns das laufen, nachdem wir den Wagen gesetzt haben. Es gibt zwei Orte, an denen wir das tun. Ich werde es hier ausführen, nachdem wir den Wagen aktualisiert haben, und es hier ausführen, wenn wir den Wagen zum ersten Mal laden. nun die Seite aktualisieren, werden Sie sehen, dass wir hier immer noch die gleichen Werte haben. Aber wenn wir hier in unser Objekt gehen, können Sie sehen, dass wir einen formatierten Zeilenpreis haben, und auf dem Warenkorb sollten wir einen formatierten Gesamtpreis haben. Was wir tun müssen, ist in unser HTML zu gehen und diese zu aktualisieren. Also anstelle des Zeilenpreises, formatierten Zeilenpreis, und anstelle des Gesamtpreises, formatierten Gesamtpreis. Dann wird die formatierte Version anstelle der anderen Version, die direkt von Shopify kommt, verwendet . Da gehst du. Jetzt haben wir unsere Mengenauswahl funktioniert, und es aktualisiert unsere Positionspreise und den Gesamtpreis. Jetzt haben Sie vielleicht bemerkt, dass wir nicht wirklich DRY-Code schreiben, wenn wir this.cart gleich Warenkorb und this.format Preise zweimal dupliziert haben. Was ich tun werde, ist, beide in eine neue Methode zu verschieben , die ich Set Cart nennen werde. Es wird ein Warenkorb-Objekt zu nehmen und dann wird es das Warenkorb-Objekt in den Warenkorb legen und dann die Preise formatieren. Stattdessen, was ich tun werde, ist setzen Sie diesen Set-Warenkorb, und dann können wir das gleiche für Update-Warenkorb tun. Das macht unseren Code nur ein wenig trockener, damit wir Code recyceln können. Da gehst du, es funktioniert immer noch. Jetzt, da wir diese Update-Cart-Funktion haben und wir die API erfolgreich schlagen, sollte es ziemlich einfach sein, diese Schaltfläche zu aktivieren, um zu funktionieren. Alles, was ich tun werde, ist eine andere Methode nach dem Format zu erstellen Preise genannt entfernen aus dem Warenkorb. All dies wird dauern, ist eine Varianten-ID. Es muss die Menge nicht kennen, da die Menge impliziert ist. Die Menge wird natürlich Null sein, wenn wir sie aus dem Warenkorb entfernen. Was ich tun kann, ist das einfach tun, den Warenkorb aktualisieren, die ID eingeben und dann für das zweite Argument, die Menge, einfach Null setzen. Jetzt werden wir dies auf dem onclick-Ereignis für diese Schaltfläche verknüpfen. Ich werde diese @-Symbol-Syntax verwenden und hier schreiben: „Entfernen Sie aus dem Warenkorb item.variant ID. Jetzt überprüfen wir, ob das funktioniert. Perfekt. Wir haben soeben einen Artikel aus unserem Warenkorb entfernt. Wenn ich zurück zum T-Shirt gehe, fügen wir ein kleines rotes T-Shirt hinzu. Du wirst sehen, dass es da ist. Wir können die Menge aktualisieren, wir können sie aus dem Warenkorb entfernen, und es funktioniert alles. Das sind unsere Hauptfunktionen innerhalb der Warenkorbtabelle. Machen wir eine kurze Pause und lassen Sie uns diese Upsells hier codieren. Wir werden in eine andere Funktion hier hinzufügen, um in den Warenkorb zu legen, sowie Artikel zu aktualisieren und zu entfernen, die bereits im Warenkorb sind. 8. Warenkorb Upsells und Animationen: Natürlich wird nicht jedes Geschäft Upsells auf der Warenkorbseite haben. Aber es ist eine gute Gelegenheit, den durchschnittlichen Bestellwert zu erhöhen, indem Kunden eine einfache Möglichkeit bietet, zusätzliche Produkte in ihren Warenkorb zu legen. Mit Vue.js können wir diese Interaktion ziemlich glatt und nahtlos machen. Wenn wir wieder in unseren Code-Editor gehen, können Sie sehen, dass wir diese Werte durch Shopify Liquid einbringen und wir unsere Loops und Konditionen über Shopify Liquid machen. Genau wie wir es hier oben getan haben, müssen wir das umgestalten. Das erste, was wir tun müssen, ist diese Upsells in einem Array auf einer tatsächlichen View-Instanz zu bekommen . Nach dem Warenkorb, was ich tun werde, ist ein Array namens Upsells zu erstellen. Hier werden wir in dieser Sammlung laden, die wir hier oben einschließen, aber in unserer Ansicht Daten, damit wir diesen Abschnitt ein bisschen interaktiver machen können und Sie werden sehen, warum wir das in nur einer Sekunde tun müssen. Genau wie wir es auf der Produktseite für Varianz getan haben, werde ich hier eine Liquid Loop erstellen, um Produkte aus einer bestimmten Kollektion einzubringen. Ich werde die Schuhkollektion benutzen. Denken Sie daran, dass dieser Wert hier mit dem Griff einer Sammlung in Ihrem Geschäft übereinstimmen muss , wenn Sie die Schuhe importiert und dann eine Kollektion mit diesen Schuhen erstellt haben, und dann überprüfen, ob der Griff Schuhe ist, dann sollte es funktionieren. Andernfalls müssen Sie das tun. Offensichtlich werden wir hier Produkte am Ende setzen müssen. Ich werde das schließen, endfor, und dann drinnen, öffnen Sie ein Objekt und lassen Sie uns einige Werte von Shopify Liquid kopieren. So Gezeiten. Nach dem gleichen Format, ich denke, ich werde gerade durch diese gerade jetzt , weil wir das schon gesehen haben und ich kopiere im Grunde die Daten aus dem Shopify-Back-End mit Shopify Liquid in unser Front-End hier. Ich werde das ein bisschen vorwärtsgehen. Stellen Sie sicher, dass Sie die Objekte hier mit einem Komma beenden , damit Sie eine Trennung zwischen diesen Objekten haben. Wie Sie hier sehen können, bringen wir den Titel, den Griff, das Bild, die Produkt-ID ein; was wird klar, warum wir das in nur einer Sekunde tun, und natürlich die Varianten-ID. Denn die Varianten-ID, wie wir wissen, ist das, was tatsächlich in den Warenkorb gelegt wird. Lassen Sie uns unsere Seite aktualisieren und überprüfen Sie einfach, dass die Daten über kommen. Wie Sie hier sehen können, haben wir eigentlich nichts in unserem Upsells-Array, lassen Sie uns überprüfen, warum das der Fall sein könnte. Ich sehe hier, dass wir ein s über Sammlungen vergessen haben. Hit sparen auf, dass. Jetzt können Sie sehen, dass das Upsell-Array die gleichen Informationen hat, wie wir hier unten haben , und jetzt können wir dies durchlaufen, anstatt Shopify Liquid zu verwenden. Lassen Sie uns reingehen und diesen Code jetzt umgestalten. Ich werde hier drinnen ein V-für oder V-wenn lieber machen. Wenn upsells.length größer als Null ist. Wir können diese umgebende if-Anweisung jetzt loswerden. Das ist ein Code, der nicht da sein sollte. Ich werde das einfach entfernen. Dann innerhalb der Schleife, anstatt diese Schleife zu machen, ist was wir tun werden, es hier zu setzen. Ich werde eine Vorlage machen, v-für Upsell in Upsells. Wir setzen das um, um die for-Schleife zu ersetzen. Um diese Grenze zu imitieren, werde ich Ihnen in nur einer Sekunde zeigen, wie wir das tun , wir müssen das zusätzliche Attribut hier des Index hinzufügen. Dies wird den Index des Elements und des Arrays verfolgen, und dann können wir v-if Index weniger als fünf tun. die Seite aktualisieren, können Sie sehen, dass wir unsere Upsells verloren haben, die von Shopify Liquid generiert wurden. Das liegt daran, dass wir hier reingehen und diese Attribute aktualisieren müssen. Genau wie wir es mit der obigen Warenkorb-Tabelle getan haben, werde ich diese durch View-Attribute ersetzen. Upsell-Titel, und dann für diesen, der src, werden wir den Doppelpunkt davor setzen, entfernen Sie diesen und verwenden Sie Upsell-Bild. Ich glaube, das war's. Aktualisieren Sie die Seite hier drüben, sehen Sie, dass immer noch nicht funktioniert. Ich denke, unser Problem hier ist, dass wir den Index auf das darunter liegende Element verschieben müssen. Dies ist der Unterschied zwischen Vue 2 und Vue 3, Sie können dies in Vue 2 tun, aber nicht in Vue 3. Aktualisieren Sie hier drüben. Da gehst du. Jetzt können wir sehen, dass die Produkte da drin sind. Wir müssen diesen Index nur weniger als vier machen , und doch haben wir jetzt nur noch die vier Produkte drin. Jetzt, da wir Vue für die Anzeige dieser Upsells jetzt anstelle von Shopify Liquid verwenden, sind wir auf dem nächsten Schritt, der darin besteht, diese „In den Warenkorb“ -Buttons zu aktivieren, um zu funktionieren. Was ich tun werde, gehen Sie zum Code und lassen Sie uns eine neue Methode erstellen, um in den Warenkorb zu legen. Wir haben unsere entfernen aus dem Warenkorb hier. Ich könnte es einfach vor dem Entfernen in den Warenkorb legen. In den Warenkorb. Um ein Produkt in den Warenkorb legen zu können, müssen wir die Varianten-ID kennen. Wie immer können wir auf die Referenz hier in der offiziellen Dokumentation von Shopify verweisen. Ich habe das übrigens gefunden, indem ich die Shopify Ajax API durchsuchte. Es sollte auf der Cart-API genau dort sein. Also nicht zu schwer mit ein bisschen Googeln zu finden. Los geht's. Wir müssen über ein Artikelarray mit der Varianten-ID des Produkts und der Menge, wie viel wir hinzufügen möchten senden . Derzeit haben wir auf unserer Website nicht die Möglichkeit, mehr als eine Menge zum Zeitpunkt des Hinzufügens des Produkts in den Warenkorb von der Produktseite hinzuzufügen. Aber wenn wir das hätten, könnten wir diesen Wert verwenden, um hier als Option zu setzen, aber in unserem Fall werden wir nur einen für diesen Wert setzen. Alles, was wir brauchen, ist die Varianten-ID des Produkts, von der wir eine in den Warenkorb legen werden. Wir werden hier eine Postanfrage eröffnen. Es wird Warenkorb add.js sein. Als nächstes werden wir die Elemente Array haben und im Inneren werden wir ein anderes Objekt haben und wir fügen nur ein Element hinzu. ID wird gleich ID sein. Diese Syntax bedeutet, dass wir dies nicht tun müssen, wir können das einfach tun, und die Menge wird eins sein, wie wir kurz zuvor erwähnt haben. Sobald wir dann eine Antwort von der API erhalten, werden wir tun, was wir immer tun JSON pausieren, damit wir es als JavaScript-Objekt haben und dann das Element nehmen können , das es zurückgibt. Was werden wir tun? Lassen Sie uns einfach die Konsole protokollieren, weil wir unseren Warenkorb nicht wirklich aktualisieren können, wie wir es normalerweise tun würden, weil die Ajax-Anfrage in den Warenkorb legen tatsächlich einen Artikel anstatt einen Warenkorb zurückgibt. Gehen wir zurück zu hier. Öffnen Sie die Registerkarte Netzwerk, schließen oder löschen Sie die vorherige Netzwerkaktivität. Lassen Sie uns einen Artikel in den Warenkorb legen. Eigentlich, bevor wir das tun, müssen wir das tatsächlich verknüpfen. Also werde ich zu greifen, in den Warenkorb hinzufügen, legen Sie es auf das Click-Ereignis hier. Ich muss upsell.variant ID setzen. Lassen Sie uns hier aktualisieren, löschen Sie die Registerkarte Netzwerk und klicken Sie auf „In den Einkaufswagen“ und lassen Sie uns sehen, was passiert. Wenn wir hineingehen, werden wir sehen, dass wir ein Items Array zurückgegeben. Es ist nicht wirklich Gegenstand, seine Gegenstände. Hier können Sie die Daten sehen, die übergeben werden. Ich werde das in Artikel ändern. Aber egal, wenn wir in die Konsole gehen, sollten Sie sehen, dass wir diese Antwort wieder in unserer Konsole erhalten , weil unsere Konsole es hier protokolliert. Wenn wir die Seite aktualisieren, sehen Sie, dass wir das Produkt einem Einkaufswagen hinzugefügt haben. Wie ich bereits erwähnt habe, bekommen wir die Warenkorb-Objekte nicht zurück. Wie werden wir sicherstellen, dass dieser Warenkorb aktualisiert wird, nachdem wir ein Produkt in den Warenkorb gelegt haben? In dieser Situation können wir einfach den Warenkorb erneut anfordern. Wir können das Gleiche tun, was wir in der Schöpfung getan haben. Greifen Sie dies und setzen Sie den Warenkorb. Aber das wäre sehr trockener Code, weil wir uns wiederholen werden , indem wir genau den gleichen Code an zwei verschiedenen Orten haben. Was ich tun werde, ist eine neue Methode mit diesem namens get cart zu erstellen. Dies wird am Anfang unserer Liste sein, weil es für unsere View-Instanz hier von zentraler Bedeutung ist . Tut mir leid, dass ich es angerufen habe. Dann, anstatt es hier zu laufen, werde ich nur diesen Wagen nennen. Genau den gleichen Code, aber jetzt können wir dies nehmen und den gleichen Code für diese Methode ausführen. Die Artikel kommen zurück, aber wir laufen einfach Warenkorb. Wenn wir Ajax in den Warenkorb legen, läuft es tatsächlich zwei Ajax-Anfragen. Sie werden das jetzt sehen, leider haben wir einen Fehler. Ich habe vergessen, hier nach der Methode ein Komma zu setzen. Aktualisieren Sie die Seite, die Sie hier sehen können. Was wir tun werden, ist, dass ich dieses T-Shirt entfernen werde, und lass uns verrückte Schuhe in den Warenkorb legen. Wie Sie sehen können, gibt es ein bisschen eine Panne mit dem Bild, aber Sie können sehen, verrückte Schuhe wurde nun auch in den Warenkorb gelegt. Was wir getan haben, hat das Produkt mit der Ajax-API in den Warenkorb gelegt und dann eine weitere Anfrage an die API ausgeführt, um den gesamten Warenkorb zu holen. Auf diese Weise ist es einfacher, als zu versuchen, das Element dem vorhandenen Kartenobjekt hinzuzufügen und dann die Summe zu aktualisieren. Ich finde, es ist einfach einfacher, den Warenkorb wieder zu bekommen, nachdem ich den Warenkorb aktualisiert oder hinzugefügt habe. Jetzt haben wir alle Hauptinteraktionen angeschlossen. Wir können die Menge der Artikel im Warenkorb aktualisieren. Wir können ein Produkt aus dem Warenkorb entfernen. Wir können ein neues Produkt aus diesen Upsells in den Warenkorb legen, aber es gibt ein paar kleine Dinge, die wir tun könnten, um die Benutzererfahrung schöner und glatter zu machen. Nummer 1, wenn ich ein Produkt aus dem Warenkorb hinzufügen Upsells in den Warenkorb, dann sollte ich das Produkt aus dem Warenkorb entfernen upsells, oder zumindest, zeigen, dass das Produkt bereits in den Warenkorb gelegt wurde. Wenn ich einfach auf „In den Warenkorb“ auf dem gleichen Produkt wieder klicke, alles, was es tun wird, ist, diese Menge zu aktualisieren, was in Ordnung sein kann, aber ich denke, könnte definitiv verbessert werden. Die andere Sache ist, wenn Sie darauf warten, dass in den Warenkorb gelegt wird, gibt es kein Feedback an den Benutzer. Plötzlich klickst du auf die Schaltfläche, nichts passiert und dann ein paar Sekunden später, sobald die asynchrone Anfrage beendet ist, erscheint sie plötzlich in deinem Warenkorb. Die andere Sache ist, diese haben keine schönen Übergänge. Es ist alles schnell und ein bisschen zu knackig, und wir wollen das etwas glätten. Das ist, was wir im letzten Teil dieses Videos hier tun werden. Was ich zuerst tun werde, ist ein gefiltertes Array von Upsells zu erstellen. Wie ich bereits erwähnt habe, möchte ich, wenn ein bestimmter Upsell dem Warenkorb hinzugefügt wird, das aus dem Upsells-Array entfernen und es nicht in dieser Liste der Upsells anzeigen. Um das zu tun, werde ich eine berechnete Eigenschaft verwenden. Ich werde eine berechnete Eigenschaft erstellen. Ich mache dies gerne vor Methoden. Wir haben berechnete Eigenschaften in der letzten Lektion der Produktvorlage gesehen. Wir werden es hier wieder verwenden, um eine berechnete Eigenschaft namens gefilterte Upsells zu erstellen, die nur eine gefilterte Version der Upsells sein wird. Was ich tun werde, wird das ein bisschen komplizierter Code sein. Aber was wir versuchen zu tun, ist die Kreuzung der Artikel im Warenkorb und im Upsells-Array zu finden . Wenn es sich im Warenkorb befindet, entfernen Sie es aus diesem gefilterten Upsell-Array. Ich werde es in zwei Schritte zerlegen. Zuerst werde ich die Liste der Produkte in den Warenkorb zu bekommen. Ich werde diese Produkte in einem Warenkorb nennen. Aber weil wir über die Varianten-ID nachschlagen werden, so werden wir uns identifizieren, wir werden eine Kartenfunktion in JavaScript verwenden. Anstatt diese.cart.items zu sagen, die Ihnen die Liste der Objekte geben wird, werde ich dies in ein Array umwandeln, das auf den spezifischen Wert der Artikelprodukt-ID abzielt . Ich werde Ihnen zeigen, was das in nur einer Sekunde tut. Ich werde das in eine Zeichenfolge mit der zwei-String-Methode konvertieren. Wir können kein Konsolenprotokoll durchführen, leider innerhalb einer berechneten Eigenschaft. Was ich gerne mache, ist nur für Debugging-Zwecke, es aus der berechneten Eigenschaft in etwas wie erstellt zu verschieben. Dann wird es beim Laden der Seite ausgeführt. Wenn wir jetzt gehen, aktualisiere ich die Seite, leider kommt sie mit einem leeren Array zurück. Ich denke, das liegt vor allem daran, dass wir immer noch auf dem Warenkorb warten , um von der Ajax-API zu kommen. bisschen ein Hack, aber ich werde hier eine Zeitüberschreitung setzen , um es nur ein wenig später auszuführen, wie vielleicht zwei Sekunden später als das, was es vorher war. Lassen Sie uns diesen Code einfach zwei Sekunden nach der Erstellung ausführen. Wie Sie sehen können, haben wir ein Array mit allen Varianten-IDs. Wenn wir ein weiteres Produkt in den Warenkorb legen, haben wir knorrige Schuhe drin. Lassen Sie uns auffrischen. Zwei Sekunden später sehen wir ein Array mit all unseren Varianten-IDs. Wenn ich das zurück in die berechnete Eigenschaft ziehe, nehme ich dieses Array von Varianten-IDs, die die Produkte bereits im Warenkorb darstellen, und dann werde ich die Upsells basierend darauf filtern. Gehen, um die Upsells zu filtern, nehmen Sie jeden einzelnen Upsell und wenn nicht, Produkte im Warenkorb enthält Upsell-Produkt-ID. Dies ist ein bisschen ein langwieriges Stück Code. Aber im Grunde, was wir hier sagen, ist, dass dies wahr wenn Produkte in Wagen oder Array von Varianten-IDs, die sich auf die Produkte im Warenkorb beziehen, enthält die Produkt-ID des Upsell. Grundsätzlich, wenn der Upsell im Warenkorb ist. Wenn nicht, wollen wir diese Upsells zurückgeben. Es filtert im Grunde alle Upsells heraus, die bereits im Warenkorb sind. Was wir jetzt tun können, ist, anstatt Upsells zu durchlaufen, hier können wir filtered_upsells einfügen, so dass es genug Zeit gibt, unsere Seite hier zu laden und zu aktualisieren. Wir sollten jetzt anfangen zu sehen, dass keines dieser Produkte bereits im Warenkorb ist. Wenn ich Old School Kicks hinzufüge, werden Sie sehen, dass die Liste der Upsells unten hier aktualisiert. Wir haben die Upsells herausgefiltert, die bereits dem Warenkorb hinzugefügt wurden. Wenn ich das entferne, wirst du sehen, dass Insane Schuhe zurück in das Upsell-Array geht. Wir haben jetzt dieses Problem mit den Upsells gelöst. Wir möchten ein Produkt, das bereits verkauft wurde, nicht weiterverkaufen. Wir möchten es entfernen, wenn es bereits im Warenkorb ist. Was ich jedoch tun möchte, wenn ich ein Produkt zum Warenkorb hinzufüge, ist es, dem Benutzer ein Feedback zu geben. Was wir tun können, ist eine if-Anweisung dafür zu verwenden. Was ich hier in die Schaltfläche In den Warenkorb legen werde, werde ich in eine andere Schaltfläche vor ihm setzen. Du wirst in einer Sekunde sehen, warum ich das mache. Ich werde diesem die Klasse von Upsell-atc geben. Sparen Sie mir etwas Zeit. Ich kann das einfach kopieren. Was ich auch tun werde, ist hier eine Modifikatorklasse hinzuzufügen, Upsell-Button - Hinzufügen. Was ich hier tun werde, ist, den Schaltflächenstatus zu ändern. Anstatt in den Warenkorb zu legen, wird es sagen, Hinzufügen, und dieser Stil sollte bereits in der Theme-CSS-Datei eingerichtet werden. die Seite hier aktualisieren, werden Sie sehen, dass jeder von ihnen diesen Hinzufügestatus hat, aber wir möchten zwischen ihnen wechseln, je nachdem, ob ein Produkt hinzugefügt wird oder nicht. Wie wir das machen, lassen Sie uns ein weiteres Attribut zu unseren Daten hinzufügen. Wir können hier hineingehen und einen Ladezustand schaffen. Wenn die Seite zum ersten Mal geladen wird, ist diese leer und nach einer Weile werden die asynchronen Anfragen an die Ajax-API den Warenkorb zurückgeben und aktualisieren. Lassen Sie uns beim Laden der Seite das Laden wahr machen. Aber nach jeder Ajax-Anfrage, wo wir etwas beendet haben, werden wir das Laden auf false setzen. Was sind das für Situationen? Wenn wir hier nach unten scrollen, könnten wir es möglicherweise hier nach get_cart setzen. Aber wie Sie sehen können, trifft es den set_cart. Was ich tun werde, ist zu set_cart zu gehen und dann nach format_prices werde ich diese Ladung gleich falsch setzen. Natürlich wird das Laden wahr sein, wenn wir die Seite zum ersten Mal laden, aber wenn sie auf false gesetzt ist, brauchen wir die Möglichkeit, sie wieder auf true zu setzen. Dafür, was wir tun werden, ist, wenn wir ein Produkt zum Warenkorb hinzufügen, wir werden diese Ladung gleich true setzen. Wenn wir ein Produkt aus dem Warenkorb entfernen, werden wir this.loading gleich true setzen. Wir werden es nicht für Update-Warenkorb tun, weil dies in Ordnung für mich ist, wir werden nicht in Animation für diese speziell setzen. Aber um aus dem Warenkorb zu entfernen, möchte ich, dass es einen Ladezustand gibt. Es ist vielleicht nicht genau im Moment klar, während wir dies tun, aber Sie werden bald sehen, wie dieses Ladeattribut es uns ermöglicht, ein paar schönere Übergänge zu erstellen. Schauen wir uns an, ob ich das jetzt entferne, lasst uns hier drüben auffrischen. Fangen Sie das wieder an. Wenn ich darauf klicke, wird es für einen Bruchteil einer Sekunde geladen, und wenn es fertig ist, wird es falsch gehen. Gleiches mit In den Einkaufswagen. Sobald ich es in den Warenkorb gelegt habe, wird es für einen Bruchteil der Sekunde True laden und dann zu false gehen. Wir werden das in nur einer Sekunde verwenden, aber bevor wir es tun, möchte ich einen weiteren Ladezustand hinzufügen, und das ist auf diesen speziellen Elementen. Wir werden es hier auf individueller Artikelbasis tun müssen. Sie können es nicht auf dem gesamten Warenkorb-Objekt tun. Was ich tun werde, ist hier zu unserem Upsells-Array zu wechseln und auf jedem der Upsell-Artikel einen Ladezustand zu setzen. So wie ich das tun werde, werde ich es hinzufügen nennen, hier wirklich spezifisch werden und es adding_upsell nennen. Standardmäßig wird das auf false gesetzt, da beim Laden der Seite kein Upsell hinzugefügt wird. Aber wenn wir dies tun In den Einkaufswagen hier, wollen wir das Hinzufügen Upsell-Attribut für den bestimmten Upsell auf true setzen. Was wir tun müssen, um auf das eigentliche Objekt zuzugreifen ist, den Upsell zuerst zu finden, weil wir im Moment nur die Upsells-Varianten-ID haben. Wir müssen das eigentliche Upselling-Objekt nachschlagen. Ich werde hier einen const Upsell erstellen und dann innerhalb des Upsells-Arrays den Upsell mit der Variant-ID finden , die in upsell.variant_id übergeben wird, entspricht id. , die in upsell.variant_id übergeben wird, und dann innerhalb des Upsells-Arrays den Upsell mit der Variant-ID finden, die in upsell.variant_id übergeben wird, entspricht id. hier und tun upsell.adding_upsell gleich true. Wenn das Laden fertig ist, können wir das adding_upsell Attribut für den bestimmten Upsell auf false setzen. Wechseln wir jetzt zurück zu unserer Front-End-App. Lassen Sie uns das Upsells Array beobachten, wie wir ein Produkt in den Warenkorb legen. Manchmal passiert dies so schnell, dass es nicht einmal Zeit zum Aktualisieren hat. Ich klicke hier auf „In den Einkaufswagen“ und Sie werden sehen, es sagt immer noch falsch. Wenn ich ein bisschen schneller werde, dann wirst du sehen, dass es auf wahr wechselt, bevor es auf falsch geht. Da gehen wir, wahr oder falsch. Sie können sehen, dass sowohl die Warenkorb-Tabelle geladen wurde als auch der Upsell-Status wurde auf „true“ gesetzt. Was wir jetzt tun können, ist einen Übergang zur Warenkorb-Tabelle hinzuzufügen und dann auch diese Schaltflächen austauschen, je nachdem in welchem Zustand der Upsell ist ob es zum Warenkorb hinzugefügt oder nicht hinzugefügt wird. Gehen wir wieder rein. Alles, was ich mit diesen beiden Elementen zu tun habe, habe ich sie nebeneinander, aber jetzt kann ich einfach v-ifs auf sie setzen. Ich werde v-if=product.adding_upsell tun, dann werden wir dies anzeigen. Andernfalls zeigen wir die übliche Schaltfläche In den Einkaufswagen an. Das sollte alles sein, was für die Interaktion mit den Produkt-Upsells erforderlich ist, sieht aus, als hätte ich hier einen Fehler gemacht, indem ich Upsell hinzufüge. Ich habe dieses Produkt anstelle von Upsell, upsell.adding_upsell genannt. Aktualisieren. Sie können sehen, dass die Schaltfläche nicht angezeigt wird, da wir derzeit kein Upsell hinzufügen. Aber wenn ich darauf klicke, werden Sie sehen, dass die Tasten kurz umschalten , um ihm einen Ladezustand zu geben, bevor es zum Warenkorb hinzugefügt wird, und dann verschwindet der Artikel, weil er jetzt aus unserem Upsell-Array herausgefiltert wurde. Das kann ich auch mit Gnarly Shoes machen. Wie Sie sehen können, hat es einen zusätzlichen Zustand, bevor ich es dem Warenkorb hinzufüge. Da gehen wir. Wir haben Upsells ein bisschen einen Ladezustand gegeben, und jetzt werden wir die Warenkorb-Tabelle in ein bisschen ein Übergangselement umschließen. Genau hier, in der Warenkorb-Tabelle, werde ich ein Übergangselement hinzufügen, wie wir es in der Produktvorlage getan haben. Setzen Sie all dies innerhalb der Übergangselemente namens Übergangselemente Name fade. Schließlich, ein weiterer Schritt, was wir tun müssen, ist, nach diesem Ladezustand zu suchen. Wir werden das alles schneiden, aber haben es noch in meiner Zwischenablage. Erstellen Sie ein div und setzen Sie ein Attribut auf ihren Code v-show. Wenn es nicht geladen wird, wird es angezeigt. Das klingt vielleicht etwas überflüssig, aber es wird diese Funktionalität geben, ein- und auszublenden , indem es nicht angezeigt wird, wenn es geladen wird. Wenn es nicht geladen wird, wird es nicht angezeigt und das löst den Übergang aus. Wenn es dann wieder eingeschaltet wird, wird der Übergang es eingeblendet. Werfen wir einen Blick darauf, wie das funktioniert. Wie Sie sehen können, wenn ich die Seite aktualisiere, verblasste der Warenkorb. Wenn ich ein Produkt in den Warenkorb lege, wird der Warenkorb ausgeblendet. Wenn ich einen Artikel aus dem Warenkorb entferne, wird er ausgeblendet. Der Grund, warum es dies tut, die Art und Weise, wie wir es so verhalten, ist, weil wir diesen Ladezustand einstellen, wenn wir hier unten ein Produkt zum Warenkorb hinzufügen und wir aktualisieren auch diesen Ladezustand wenn wir Produkte auch aus dem Warenkorb entfernen. Wir sind auch beim Laden der Seite, haben es auf das Laden gesetzt, bis der set_cart Verarbeitung abgeschlossen ist und dann das Laden auf false geht. Das macht den Ladezustand unseres Warenkorb-Tisches etwas schöner. Ich bin sicher, dass du das noch viel mehr verbessern könntest. Ich bin nicht unbedingt ein Designer, aber das ist die Kernfunktionalität und Prinzipien im Blick, um dies zu erreichen. Da hast du es. Wenn wir unsere Entwicklertools schließen, haben wir jetzt unsere Produktseite mit einigen schönen Übergängen funktioniert. Ich kann ein Medium red T-Shirt in meinen Warenkorb legen. Geh hier rüber, Upsell mit ein paar verrückten Schuhen. Gehen Sie zu Kasse, wenn ich möchte, oder erhöhen Sie die Menge. Vielleicht setzen Sie das auf drei. Dies ist alles mit unserem Warenkorb Ajax API synchronisiert. Wenn ich in einem tatsächlichen Produktionsgeschäft wäre, könnte ich hier „Kasse“ drücken und auschecken. Eigentlich denke ich, es könnte mich tatsächlich überprüfen lassen. Da gehst du. Hier geht's, das ist meine Auswahl. Ja, das ist so ziemlich für die Warenkorb-Seite. Ich weiß, dass dies ein ziemlich langes Video oder eine Reihe von Videos ist, um diese Warenkorbseite zum Laufen zu bringen. Aber dies ist der größte Bereich der Interaktion innerhalb einer Shopify-Website meist. Denken Sie darüber nach, wenn Sie einkaufen gehen, bleiben die Dinge in den Regalen, bis Sie sie abholen und in Ihren Warenkorb legen oder zurücklegen. Die Hauptinteraktion des Benutzers mit Ihrer Website, die sinnvoll ist, Vue mit zumindest zu verwenden, ist die Warenkorb-Interaktionen. Offensichtlich, auch, die Variante Umschaltung sehr praktisch, um Vue dafür zu haben. Wie ich bereits erwähnt habe, könnten Sie, wenn Sie Ihre Sammlungsseite filtern möchten, hier einige hektische Filter haben. Wenn Sie viele Produkte in Ihrem Geschäft hatten und viele verschiedene Attribute zu filtern, könnten Sie dies zu einer Vue App als auch machen. Aber das Hauptprinzip ist, wenn Sie einige Interaktionen haben , die live am Frontend passieren müssen, werden Sie zumindest JavaScript verwenden wollen und ich würde Sie ermutigen, Vue oder eine andere Art von Framework zu verwenden. Offensichtlich haben Sie Vue in dieser Klasse gelernt, also würde ich das empfehlen, aber das sollte ein guter Ausgangspunkt für Sie sein, Vue in Ihre Projekte zu integrieren. Je nachdem, wann du diese Klasse ansiehst, könnte das nächste Video ein Bonusvideo zur Verwendung von Vuex sein, falls du Daten über verschiedene Teile hinweg teilen kannst. Wir haben hier den Warenkorb und die Warenkorbseite verwendet, aber vielleicht möchten Sie den Warenkorb auf einer anderen Seite aktualisieren und diese Daten synchronisieren. Wir werden im nächsten Video etwas über den Vuex-Store erfahren, je nachdem, wann du das anhörst. Ansonsten werde ich Sie in der Schlussfolgerung sehen, und ich freue mich darauf, Sie mit Ihrem eigenen Klassenprojekt beginnen zu können. 9. Bonus: Warenkorbdaten mit VueX speichern: Willkommen zu diesem Bonus-Video auf Vuex. Ich wollte dies als Bonus in dieser Klasse abdecken , da es ein Konzept in Vue ist, das ich zuvormit Vue in der Shopify-Themenentwicklung verwendethabe mit Vue in der Shopify-Themenentwicklung verwendet und etwas, das für Sie wertvoll sein könnte, auch zu lernen. In dieser Klasse haben wir bisher zwei Apps in unserem Shopify-Thema erstellt, eine für die Produktseite und eine für die Warenkorbseite. Derzeit sind diese sehr getrennt. Sie tragen jeweils ihre eigenen Daten, Eigenschaften und Methoden, und diese sind exklusiv für jede Instanz. Um Daten zwischen mehreren Instanzen und Komponenten in unserem Shopify-Theme zu teilen, können wir eine Bibliothek namens Vuex verwenden. Wenn ich Vuex online schaue, ist der erste Link, was Vuex ist. Wie es hier heißt, ist Vuex ein Statusverwaltungsmuster und eine Bibliothek für Vue.js Anwendungen. Es dient als zentralisierter Speicher für alle Komponenten in einer Anwendung. Wir haben Regeln, die sicherstellen, dass der Staat nur vorhersehbar mutiert werden kann. Im Wesentlichen ermöglicht Vuex es uns, einen zentralen Datenspeicher zu erstellen , auf den alle Vue Instances und Komponenten zugreifen können. Warum sollten wir das speziell in der Shopify-Themenentwicklung brauchen? Nun, es gibt ein klares Beispiel, und das ist, wenn wir Front-End-Cart-Interaktionen außerhalb dieser Warenkorbseite zulassen würden. Zum Beispiel, eine Funktion, die Sie auf einer Shopify-Website bemerkt haben, ist ein Side-Cart. Wie in diesem Shop zum Beispiel, wenn wir hier ein Produkt in den Warenkorb legen, werden Sie sehen, dass wir hier ein wenig Interaktion haben. Wir haben hier einige Einkaufswageninformationen, aber wir können auch auf die eigentliche Warenkorbseite gehen und die gleichen Informationen sehen. Wenn ich einen dieser Upsells in den Warenkorb legen sollte, wird das auch in dieser Seite Warenkorb reflektiert. Das bedeutet, dass Daten zwischen dem Seitenkorb und der Warenkorbseite geteilt werden. Es kommt im Grunde vom selben Ort, es kommt aus dem Warenkorb-Objekt. All dies muss synchron sein. Wie wir das tun können, ist über einen Vuex Store. Wenn ich mich auf einen Vuex-Shop beziehe, beziehe ich mich auf einen zentralen Datenspeicher, nicht auf den Shopify-Store selbst. Manchmal kann es ein wenig verwirrend über Vuex-Läden in Shopify-Geschäften reden. Deshalb werde ich unbedingt den Vuex-Store als Vuex-Store oder kurz Vuex bezeichnen. In diesem Video werden wir die Einkaufswagendaten und -methoden in einen neuen Vuex-Store verschieben . Aktualisieren Sie unsere Warenkorbseite, und dann werde ich Ihnen zeigen, wie wir diese neue Quelle der Wahrheit verwenden können , um andere Bereiche unseres Themas zu aktualisieren. Klingt gut? Lasst uns anfangen. Alles klar, das erste, was wir tun werden, ist das Skript für Vuex aufzunehmen. Ordnung, also gehe ich zurück zu dieser Dokumentation auf vuex.vuejs.org, klicke auf die Installation, und was wir tun müssen, ist sicherzustellen, dass die Version, die wir verwenden, mit der Version kompatibel ist, die wir von Vue verwenden. Also in dieser Klasse haben wir Vue 3 verwendet. Wenn Sie also dasselbe wie diese Klasse verfolgen und Vue 3 verwenden, müssen Sie Version vier von Vuex verwenden. Klicken Sie also auf V4 hier, wechseln Sie zu dieser Dokumentation, gehen Sie zur Installation, und ich werde diesen CDN-Link von Vuex 4 greifen. Kopieren Sie das, gehen Sie in unseren Code. In unserer theme.liquid nach unserem Vue Skript Tag, werde ich in Vuex hinzufügen. Stellen Sie also sicher, dass wir Vuex Version 4 verwenden, wenn wir Vue Version 3 verwenden. Jetzt, da wir die Bibliothek für Vuex aufgenommen haben, können wir jetzt unseren Vuex Store erstellen. Was ich gerne mache, ist es in ein Snippet zu stecken. Wie Sie sehen können, hat dieses Thema jetzt keine Snippets. Also werde ich tatsächlich den Snippets-Ordner erstellen. Innerhalb des Snippets-Ordners werde ich eine Datei namens store.js.liquid erstellen. Wir werden hier nicht wirklich flüssige Variablen verwenden. Eine Alternative könnte also sein, es in theme.js zu legen oder eine js-Datei und Assets zu erstellen und einzuschließen. Aber das erlaubt uns, es auf bestimmten Seiten mit dem include-Schlüsselwort aufzunehmen, das ich Ihnen in nur einer Sekunde zeigen werde. Also, was wir tun werden, ist, dass wir das sofort machen. Wir werden es auf der Warenkorbseite verwenden. Also werde ich hier oben etwas Platz machen und das Snippet einschließen. Fügen Sie store.js ein. Wir brauchen die.liquid Teil nicht, weil das impliziert wird, wenn wir Include-Anweisungen verwenden. In Ordnung. Also zwei Teile, um das alles anzuschließen. Erstens, wir müssen hier einen Laden erstellen. Dann müssen wir diesen Speicher mit den Instanzen verknüpfen, die ihn verwenden werden. Also werde ich nur die Standardkonvention hier verwenden. Vergessen wir nicht, unsere Skript-Tags zu öffnen, da wir in einer.liquid Datei sind. Die Standardsyntax und Standard-Namenskonvention besteht darin, einfach unseren Shop, Store aufzurufen. Wir können dann die create store Methode des Vuex Objekt wie folgt verwenden. Hier werden wir unseren Vuex Store erstellen. Alle unsere Optionen für den Laden werden direkt hier hinein gehen. Bevor ich das mache, möchte ich es nur in unserer Vue Instanz hier verknüpfen. Was ich tun werde, ist dies in einen geeigneteren Namen zu ändern , weil es das Optionsobjekt ist. Ich werde dies in Einkaufswagenseiten-Optionen, Einkaufswagenseiten-Optionen umbenennen , und dann werde ich dies in einer Variablen speichern. Also rufen wir diese Warenkorb-Seite an. Dies wird also die eigentliche App jetzt anstatt die Optionen speichern. Dann, was ich tun werde, ist montieren die Warenkorbseite und fügen Sie hier einen weiteren Schritt hinzu, um unseren neuen Vuex Store zu verwenden. Also, was wir tun, ist zu verwenden und dann setzen wir den Variablennamen unseres Vuex Stores , den wir gerade Store genannt haben. Idealerweise sollten wir nur einen Store für die gesamte Website haben. Es macht also Sinn, es Store zu nennen und dann können wir es einfach so einschließen. Ich gehe hier zurück in den Laden und ändere einfach in meinem Code-Editor die Spracherkennung in HTML. Das wird diese verrückten Linien loswerden. Eigentlich gibt es einen weiteren Schritt und das ist, in unsere Optionen hier zu gehen und einfach sicherzustellen, dass wir den Optionen hinzufügen. Okay, das ist das Äquivalent von store: store. So können wir einfach etwas Platz sparen und es einfach als Geschäft einlegen. Dann ermöglicht es uns nun, den Speicher innerhalb dieser Instanz zu referenzieren. Okay, was wir tun werden, ist, dass wir unsere Warenkorbdaten in unseren neu erstellten Store verschieben . Also werde ich das schneiden. Ich lasse die Upsells da drin. In unserem Laden werde ich eine Statusfunktion erstellen. Dann, genau wie wir es tun, wenn wir Daten in einer Vue Instanz zurückgeben, werde ich dies kopieren und in unseren Zustand einfügen. Ich denke, wir können hier ein paar Einkerbungen zurückbringen. Ja. In Ordnung. Nun, ein bisschen Vuex-Theorie. Wir haben hier einige Kernkonzepte. State, der im Grunde Daten-Getter ist, die es uns ermöglichen, auf die Daten zuzugreifen, die wir gerade auf den Store-Status festgelegt haben. Mutationen, die die einzige Möglichkeit sind, Daten in einem Vuex-Store zu ändern. Mutationen bedeuten also jedes Mal, wenn wir Daten ändern. Aktionen, die wir versenden, um Mutationen zu begehen, und dann Module, die wir in dieser Lektion nicht verwenden. Aber im Wesentlichen, was wir tun werden, ist, dass wir Getter verwenden, um die Daten zu erhalten. Dann werden wir Aktionen und Mutationen verwenden, um die Daten zu setzen. Ok? Nun, wenn Sie sich eingehend darüber informieren möchten, warum wir Mutationen und Aktionen verwenden, um Daten zu ändern und nicht nur das eine oder andere, können Sie darüber hier in der Dokumentation lesen. Ich werde nicht auf die Theorie der Handlungen und Mutationen in diesem speziellen Video gehen, aber alle Informationen sind da, wenn Sie wollen, um es zu betrachten. In Ordnung, also gehen wir zurück zu unserem Laden hier, unserem Vuex-Laden. Lassen Sie uns darüber nachdenken, welche Mutationen wir tun müssen. Grundsätzlich ist die einzige Mutation, die wir hier tun müssen, den Warenkorb zu aktualisieren. Denken Sie daran, jedes Mal, wenn wir den Warenkorb ändern, erhalten wir nur ein neues Warenkorb-Objekt von der Ajax-API und setzen diese neuen Daten. Ok? Wir brauchen also nur eine Mutation. Sie können wählen, ob Sie dies tun möchten oder nicht. Aber ich nutze gerne die Konvention der Hauptstadt, wenn ich Mutationen benenne. Also werde ich ein Mutationsobjekt öffnen. Hier drin werde ich eine Set-Cart-Mutation erstellen. Das erste Argument wird Staat sein. Dies ist Standard, wenn Mutationen ausgeführt werden. Dann wird die nächste Sache die Nutzlast sein, die der Wagen sein wird. Das ist es, was wir passieren werden. Dann alles, was wir tun werden, ist Zustand Wagen gleich Wagen. Auch hier könnte das etwas überflüssig aussehen, aber es gibt eine Methode für den Wahnsinn mit Vuex. Es folgt einem bestimmten Muster. Auch wenn Sie mehr darüber lesen möchten, können Sie dies in der Dokumentation tun. Aber nachdem wir diese Mutation erstellt haben, werde ich einige Aktionen erstellen. Hier beginnen wir, einige dieser asynchronen Funktionen von unserer Warenkorbseite in unseren Vuex Store zu übertragen . Aber davor möchte ich einen funktionierenden Code erstellen und Ihnen zeigen, dass dies tatsächlich funktioniert. Also, was ich tun werde, ist, dass ich das schließen und das in einem geteilten Tab öffnen werde. Lassen Sie uns alle anderen Registerkarten hier loswerden. Was wir tun werden, ist dies zu refaktorieren, bewegen, etwas von diesem Code rüber nach hier. Das erste, was passiert, wenn wir die Seite laden, ist natürlich, dass wir den Wagen bekommen. Lassen Sie uns das mit diesem Vuex Store neu erstellen. Ok? Was ich also tun werde, ist vor Aktionen tatsächlich, ich werde hier ein Getter-Objekt öffnen. Hier können wir unsere Getter setzen. Auch hier wird das ein wenig überflüssig aussehen. Warum können wir nicht direkt auf den Staat zugreifen? Auch hier steckt eine Theorie dahinter, dass Sie in der Dokumentation nachschlagen können. Aber wie das funktioniert, ist, um zum Warenkorb-Objekt zu gelangen, wir müssen eine Funktion wie diese schreiben, und es wird nur state.cart zurückgeben. Um diese Daten aus unserem Vuex-Store zu erhalten, denken Sie daran, dass wir den Laden bereits hier oben aufgenommen Wir müssen nur eine neue berechnete Eigenschaft erstellen , die diese Daten nur aus dem Vuex-Store zieht. Alles, was ich tun werde, ist das Warenkorbobjekt, das wir gerade entfernt haben, durch die berechnete Eigenschaft zu ersetzen . Hier gehen wir, ich werde es nur nennen Warenkorb und das ist, wo wir in unsere Vuex Store-Daten bringen, ich werde zuerst referenzieren store.state.cart. Nun, wenn Sie die Seite zum ersten Mal laden, werden wir diese Daten haben. Deshalb laufen wir get_cart auf erstellt, aber jetzt werden wir es über Vuex machen. Was wir tun werden, ist, das in eine Aktion zu setzen. Also hier unten werde ich eine Aktion namens get_cart erstellen, und vom ersten Argument werde ich die Commit-Methode abziehen. Dies ist die Standardpraxis mit Aktionen, und wir haben hier keine Nutzlast, also ist das alles, was ich brauche und dann werde ich die get_cart Aktion hier nachahmen. Ich werde all das packen, es einbringen, und anstatt diese Set-Cart-Methode auszuführen, werde ich tatsächlich die Set-Cart-Mutation ausführen und der Begriff dafür heißt Committing. Was wir hier tun, ist, dass wir store.commit tun, dann setzen wir den Namen der Mutation set_cart, und dann als zweites Argument setzen wir die Nutzlast dort hinein, was wir von der API zurückgegeben werden. Dann wird das den Wert des Warenkorbs auf das setzen, was wir von der API erhalten. Wieder, das ist genau das, was wir hier drüben haben. Wir stecken es nur in Vuex. Also auf erstellt anstelle von this.get_cart, werden wir stattdessen die Aktion senden, die wir hier haben. Also, was ich tun werde, ist zu store.dispatch get_cart. Nun, wenn wir diesen Code jetzt ausführen, gehen wir zurück zu unserem Warenkorb, öffnen unsere DevTools, öffnen unsere DevTools, aktualisieren Sie die Seite; Sie werden sehen, dass, wenn wir hier hineinschauen, unsere Warenkorb-Tabelle da ist, aber es ist zurzeit so eingestellt, dass keine angezeigt wird. Sie können sehen, dass Ihr Warenkorb leer ist, aber er wird nicht angezeigt, wie Sie hier sehen können. Der Grund dafür liegt darin, dass wir jetzt den Teil des Codes hier verloren haben, wo wir den Warenkorb setzen und das Laden auf false geändert haben. Also, was wir tun müssen, ist, diese Aktion zu bekommen , um ein Versprechen zurückzugeben, und wenn das Versprechen aufgelöst wird, dann werden wir das Laden wieder auf false setzen. Also, was wir dafür tun müssen, ist hier, wo die Get-Anfragen beginnen, wir müssen einfach die Rückkehr vor sie stellen. Dann können wir jetzt einen Punkt hier drüben setzen. Wenn also die get_cart Aktion beendet ist, beendet ist, werden wir das Laden auf false setzen. Alles klar, jetzt aktualisieren wir die Seite, und Sie können sehen, jetzt haben wir diesen Wert. Nun, wenn wir gehen, um das T zu kaufen und wir fügen, sagen wir ein kleines schwarzes T-Shirt in den Warenkorb, Sie werden sehen, dass es nicht aus unseren Warenkorbdaten, die auf der View-Instanz gespeichert sind, sondern aus einer berechneten Eigenschaft des Warenkorbs, die aus unserem Shop zieht . Wir haben also die Anfänge unseres Refaktors hier, und wir können sehen, dass das jetzt aus unserem Vuex-Store gezogen wird. Gehen wir zurück zum Code und arbeiten weiter daran. Also, wenn ich in unseren gefilterten Upsells nach unten ziehe, sehe ich diese.cart. Wir verwenden jetzt cart als berechnete Eigenschaft und ziehen diesen Wert, also werde ich this.cart durch store.state.cart ersetzen. Das ist die erste Änderung, und wenn wir nach unten gehen, brauchen wir get_cart nicht mehr, weil das jetzt eine Vuex-Aktion ist. Wir werden nur überprüfen, wo wir uns darauf beziehen. Wie Sie sehen können, verwenden wir es in den Warenkorb als auch. Lassen Sie uns das einfach entfernen und dann werden wir in den Warenkorb legen, wenn wir es erreichen. In set_cart machen wir das jetzt durch die Mutation, also kann ich das entfernen, aber was ich tun muss, ist, dass es diesen zusätzlichen Schritt hier für Formatpreise gibt. Also lasst uns diese Logik hier rausschieben und sie in die eigentliche Mutation setzen. Ich werde Formatpreise entfernen und innerhalb dieser Mutation hier nehmen wir das Warenkorb-Objekt, das als Nutzlast eingereicht wird, und lassen Sie uns das aktualisieren, bevor wir es in unseren Zustand versetzen. Dafür müssen wir nur diesen Punkt entfernen, weil wir jetzt den Warenkorb verwenden, der in dieser Nutzlast übergeben wird. Dies wird also diesen neuen formatierten Zeilenpreis und formatierten Gesamtpreiserstellen und formatierten Gesamtpreis und dann in state.cart einfügen. Alles klar, also zurück zu den Aktionen hier. Gehen wir weiter runter. Wir können set_cart jetzt loswerden, und wir werden eine neue Methode oder eine neue Aktion für diese hier, den Update-Warenkorb, erstellen müssen . Für diesen einen gehe ich davon aus, dass das einzige Mal, wenn wir den Warenkorb aktualisieren, wir tun es nur für eine Zeile, also werden wir diese Syntax beibehalten. Also, was ich tun werde, ist diesen asynchronen Code hier zu greifen und lassen Sie uns hier eine Update-Cart-Methode erstellen und natürlich wird das erste Argument Commit sein, und dann wird das zweite Argument ein Objekt mit die gleichen zwei Argumente: ID und Menge. Dann können wir diese Post-Anfrage machen und damit wir es ein Versprechen zurückgeben können, stellen wir die Rückkehr vor die Ajax-Anfrage. Das erlaubt uns natürlich, einen Punkt an der Sendung zu ketten, wie wir es hier getan haben. Lassen Sie uns diesen Code loswerden und natürlich muss diese.set_cart durch store.commit set_cart ersetzt werden, und dann in unserer Update-Karten-Methode hier müssen wir nur diese Aktion auslösen oder die Vuex Terminologie, senden Sie die Aktion. Also machen wir das aus dem Store-Objekt, Versand, Update-Warenkorb, und dann ein Objekt mit den beiden Parametern, ID und Menge, und das ist alles, was wir tun müssen. Da wir in unserer Update-Cart-Methode nur verwenden, um die Menge zu aktualisieren, wie Sie hier sehen können müssen wir die Ladezustände nicht aktualisieren, daher müssen wir keinen Punkt dann am Ende verketten. Aber für add_to_cart müssen wir definitiv Versprechen verwenden. In der Tat werden wir einige Versprechungen miteinander verketten müssen. Ich zeige dir, wie wir das jetzt machen. Also nach update_cart, werden wir in add_to_cart setzen, und lassen Sie uns die gleiche Syntax wie zuvor verwenden. Das erste Argument, das wir die Commit-Methode abziehen und dann wird die Payload ID sein. Lassen Sie uns diese Ajax-Anfrage hier wie zuvor abziehen , damit wir mit dem Versprechen umgehen können , wie es von der Aktion zurückkommt, eine Rückkehr davor setzen, und leider ist die Einrückung hier alles verwickelt, Also lassen Sie mich das einfach schnell beheben. Alles klar, das reicht. Um diesen Code neu zu faktorieren, müssen wir diese Methode durch einen anderen Dispatch ersetzen. Dann werden wir uns damit beschäftigen, sobald das Versprechen von Vuex in unsere Instanz zurückkommt. Lassen Sie uns das einfach entfernen und wir werden das in der Instanz etwas später tun. Was ich tun muss, um eine Aktion innerhalb einer anderen Aktion zu versenden, ist nur die Dispatch-Methode hier für dieses Objekt abzuziehen, und so werde ich anstelle von this.get_cart dispatch get_cart ausführen, und dann ist das alles, was wir tun müssen. Weil wir das Versprechen in unserer Instanz bewältigen werden, brauchen wir danach nichts anderes im Vuex-Store zu tun. Also lasst uns das jetzt machen. Gehen wir hier hinein, in add_to_cart, und lassen Sie uns unseren Versand, Shop, Versand, add_to_cart mit unserer Nutzlast von ID machen, und dann können wir das Versprechen so behandeln und zuerst den Ladezustand auf false aktualisieren, und dann Upsell, Hinzufügen Upsell, falsch. Es ist sinnvoll, diese Ladezustände zu aktualisieren, da dies sich auf die Benutzeroberfläche bezieht, mit der wir auf der Seite selbst zu tun haben, also innerhalb dieser speziellen Instanz, aber alles, was mit den Warenkorbdaten zu tun hat, sollte innerhalb dieses Vuex Geschäft. Hoffentlich erklärt das, warum wir einige Versprechen innerhalb von Vuex und einige Versprechen innerhalb der Vuex-Instanz behandeln . Alle diese Ladeattribute hatten mit der Benutzeroberfläche auf der Warenkorbseite selbst zu tun, nicht mit den Warenkorbdaten. Schließlich haben wir diese Methode aus dem Warenkorb entfernen, die this.update cart auslöst. Was ich hier tun werde, ist diese Update-Cart-Methode durch die Update-Cart-Aktion in unserem Vuex Store zu ersetzen . Wie wir bereits gesehen haben, store_dispatch, gleiche Nutzlast wie zuvor. Wir müssen es nur in eine Objektform, ID und Null setzen, dann werden wir dieses Punkt-Laden auf false setzen, nachdem es zurückkommt. Mal sehen, ob das klappt. Ich bin mir nicht sicher, ob der explizite Wert hier Fehler auftreten wird. Ja. Wie Sie sehen können, mag es die Null dort nicht. Was ich tun werde, ist nur const Menge gleich Null, und dann ersetzen Sie das durch Menge. Drücken Sie „Speichern“ darauf. Aktualisieren Sie die Seite hier. Wie Sie sehen können, haben wir einen Fehler, „Eigenschaft total_price von undefined kann nicht gelesen werden“. Wenn ich hier nach oben scrolle, können Sie sehen, dass ich hier einen Verweis darauf habe. Ich muss das nur entfernen, weil wir keinen Zugriff darauf haben. Dies bezog sich natürlich auf die Vue Instanz, die Vue App, aber jetzt sind wir in unserem Warenkorb, also müssen wir nur schauen, was wir übergeben haben, und das Store-Objekt. Ich werde das reparieren, mich hier erfrischen, und jetzt sehen wir, wie unser schwarzes Hemd durchkommt. Wenn ich die Menge hier aktualisieren soll, können Sie trotz der Fehler in unserer JavaScript-Konsole sehen, das funktioniert jetzt. Wenn ich hier den Mülleimer trage, wird es das Produkt aus dem Warenkorb entfernen, erfrischend, um zu zeigen, dass dies legitim ist. Wenn ich auf einem dieser „In den Warenkorb“ klicke, funktioniert es jetzt. All diese Daten stammen aus unserem Vuex-Store. Wenn ich hier hineingehe, leider, mit dieser neuesten Version von Vue DevTools, glaube ich nicht, dass wir tatsächlich auf den Laden selbst schauen können, gibt es keinen Vuex Tab wie es in den vorherigen Versionen von Ihnen Vue DevTools, aber was wir sehen können, ist, dass wir die Warenkorb-Objekte von berechneten anstelle von Daten erhalten, und das macht uns klar, dass wir dieses Warenkorb-Objekt von einem anderen Ort als der Instanz ziehen . Wenn ich das entferne, werden Sie sehen, dass das Warenkorbobjekt entsprechend dem aktualisiert wird , was im Vuex-Shop ist. Nun, natürlich, was Sie hier sehen, ist genau das gleiche wie das, was wir zuvor hatten. Es könnte Ihnen nicht klar sein, warum dies anders oder besser ist, also dachte ich, ich könnte Ihnen zeigen, wie wir diesen neuen zentralisierten Punkt der Wahrheit nutzen können, um mit dem Warenkorb auf jeder anderen Seite unserer Shopify-Website zu interagieren. Was ich tun werde, ist tatsächlich legen Sie die Artikelanzahl in unserem Warenkorb hier oben, und haben dieses Live-Update, wenn wir ein neues Produkt in den Warenkorb, derzeit können wir es nur von der Produktseite hier tun. Natürlich können wir es auf der Warenkorbseite tun, aber wir sind bereits auf der Warenkorbseite, so dass es nicht wirklich sinnvoll ist, dies zu tun, aber vielleicht möchten wir den Warenkorb legen und es gibt sofort Feedback geben, ohne die Seite. Nun können wir diese Warenkorbdaten verwenden, um etwas in unserer Kopfzeile zu aktualisieren, um anzuzeigen, dass wir ein Produkt in den Warenkorb gelegt haben, ohne auf die Warenkorbseite gehen zu müssen. Ich zeige Ihnen jetzt ein kleines Beispiel dafür. Was ich tun werde, ist eine Vue Instanz für den Header zu erstellen, und leider haben wir keine Abschnittsdatei für den Header. Wir könnten gehen und das jetzt erstellen, es wäre nicht zu schwer, aber lassen Sie uns einfach den Code in unserer theme.liquid behalten. Ich werde diese Warenkorb-Seite hier schließen. Was ich tun werde, ist das gleiche Snippet hier drüben aufzunehmen, direkt über unserem Header. Wir werden store.js einschließen, und jetzt schließen wir diesen Vuex-Store auch in unsere Theme-Layout-Datei ein. Ich werde hier auch eine ID des Headers zu diesem Element hinzufügen , damit wir es in unserer Vue Instanz eindeutig identifizieren können. Dann, wie wir es in dieser Klasse getan haben, werde ich hier eine Vue Instanz unter diesem HTML-Code erstellen. Zuerst werden wir eine Optionen Objekte erstellen, Header-Optionen. Lassen Sie uns einfach ein leeres Objekt für jetzt öffnen, und dann werde ich eine andere Variable erstellen, die unseren App-Header, Vue.CreateApp, halten wird, fügen Sie diese Header-Optionen, und dann werde ich das mit der ID, die wir gerade dem Header hinzugefügt haben, und dann werde ich diese Vue Instanz dazu bringen, den Vuex Store zu verwenden. Nun, wenn ich die Seite hier drüben aktualisiere, sollten wir hier unten sehen, dass wir zwei Apps haben. Sie werden sehen, dass die Informationen, die wir hier hatten, jetzt verschwunden sind, weil sie unter App 1 hier drüben sitzt. Lassen Sie mich sehen, ob ich herauszoomen und es Ihnen zeigen kann. Los geht's. Wie Sie sehen können, App 1 und App 2, wir haben sie nicht wirklich benannt, also ist es ein bisschen verwirrend. Gehen wir rein und machen das gerade jetzt. Ich werde dieser Instanz den Namen „Header“ geben, und lassen Sie uns unsere anderen Instanzen auf der Warenkorbseite nennen. Ich werde einen Namen in die „Optionen“, „ Einkaufswagen“ und dann „Produktseite“, „Name“, „Produkte“ eingeben. Das wird ihm nur einen Namen in den Vue DevTools geben, damit wir ihn leicht identifizieren können. Gehen wir zurück, aktualisieren, schauen Sie sich die DevTools an, und Sie können sehen, dass wir zwischen der Header-App und der Produkt-App hier wechseln können. Wir führen zwei Apps auf der einen Seite aus. Natürlich, wenn wir auf die Warenkorb-Seite gehen, werden Sie sehen, dass wir Header und Einkaufswagen haben. Gehen wir zurück zur Produktseite. Wir können jetzt zwischen den verschiedenen Apps wechseln. Fügen wir diese Warenkorbdaten der Kopfzeile hinzu. Also, was ich tun werde, ist in diesen Laden zu bringen, und dann, wie wir es für die Warenkorb-Seite getan haben, werde ich eine berechnete Eigenschaft erstellen, die den Wagen aus dem Vuex-Shop zieht. Dies wird Warenkorb sein, genau wie wir es auf der Warenkorb-Seite, store.state.cart getan haben. Um diesen Einkaufswagen beim Laden der Seite aufzufüllen, tippen Sie dann auf den Lifecycle-Hook, den wir erstellt haben, und senden Sie dann in diesem Lifecycle-Hook die get_cart -Aktion. Lassen Sie uns die Seite jetzt aktualisieren, wenn unsere DevTools geöffnet sind. Es sieht so aus, als hätten wir einen Fehler „Unerwarteter Bezeichner, Store“. Weil ich das Komma hier vergessen habe. Lassen Sie uns „Speichern“, „Aktualisieren“. Gehen Sie zurück zu unseren Vue DevTools. Ja, wir haben Kopfzeile und Produkt. Wenn wir in den Header klicken, können wir sehen, dass wir unser Warenkorbobjekt jetzt aus dem Vuex Store bekommen haben. Wie wir dies verwenden können, können wir jetzt hier hineingehen, lassen Sie uns eine Spanne erstellen, und im Inneren hier im v-html können wir die Artikelanzahl aus unserem Warenkorb hinzufügen. Ich werde cart.item_count tun. Dies ist natürlich ein Attribut auf dem Warenkorb-Objekt, das Sie hier sehen können. Wenn ich „Speichern“, „Aktualisieren“ die Seite hier drüben, können Sie sehen, dass wir einen Artikel im Warenkorb haben. Natürlich hätten wir das gleiche Ergebnis mit shopify.liquid erzielen können, aber was wir jetzt tun werden, ist, die Produktseite zu aktualisieren, um die Varianten-ID über Vue zu übermitteln, anstatt über die standardmäßigen Shopify-Mittel , die am Ende Verarbeitung der „In den Warenkorb“ und verschieben Sie auf die Warenkorbseite. Wie Sie hier sehen können, haben wir bereits diese Interaktion zwischen der Kopfzeile und der Warenkorbseite. Um dies abzuschließen, gehen wir zurück zur Produktseite. Gehen wir zum Produktseitencode, genau hier. Was wir tun werden, ist genau hier, fügen Sie einen Event-Handler hinzu, wir könnten dieses Formular tatsächlich vollständig entfernen und nur eine Schaltfläche haben, die dies auch tut, aber lassen Sie uns einfach bei dem Formular bleiben und es einfacher. Wir werden dies an das Submit-Ereignis anhängen, und als zusätzlicher Modifikator können wir hier vorbeugen genannt einfügen, und das wird die standardmäßige Übermittlungsfunktionalität verhindern, die natürlich das ist, was wir wollen. Hier können wir eine Methode setzen, die den In den Warenkorb legen wird. Ich werde das jetzt nur erschaffen. Lassen Sie uns nach der endgültigen Methode gehen und eine handle_atc-Funktion erstellen. Alles, was es tun wird, ist die ID der Variante zu nehmen, die dem Warenkorb hinzugefügt werden muss, und wir werden nur die Aktion „In den Warenkorb“ mit der Nutzlast dieser ID versenden. Dann gehen wir hier rauf. Wo war es? Genau hier. Um handle_atc, und als Argument in dieser Methode, werden wir die aktuelle Varianten-ID setzen. Dies macht die versteckten Felder ein wenig überflüssig, aber es sollte immer noch funktionieren. Lassen Sie uns hier rüber gehen, aktualisieren Sie die Seite, und lassen Sie uns sehen, was passiert, wenn wir auf „In den Warenkorb“ klicken. Sie können jetzt sehen, dass die Seite nicht aktualisiert wird, aber etwas hat sich geändert. Die Nummer im Warenkorb wurde aktualisiert. Wir könnten in anderen Interaktionen hinzufügen, wie wir es hier auftauchen lassen könnten und sagen: „Kürzlich hinzugefügt“, wir könnten immer noch in den Warenkorb umleiten, wir könnten einen Seitenwagen herausspringen, wie wir früher gesehen haben. Wir könnten alle möglichen Dinge tun, aber der Punkt ist, wir haben jetzt Synchronisation der Daten zwischen unserem Header und unserer Warenkorbseite. Wie Sie sehen können, wird die Nummer in unserer Kopfzeile aktualisiert, wenn wir die Artikel auf unserer Warenkorbseite aktualisieren, obwohl sie sich in separaten Apps befinden, und der Grund dafür ist, dass wir Daten zwischen ihnen mit Vuex teilen. Das ist ein kleiner Bonus auf Vuex für euch. Wenn Sie einen voll funktionsfähigen Seitenwagen erstellen, während Sie eine voll funktionsfähige Warenkorbseite haben, dann werden Sie wollen, um Daten zwischen ihnen zu teilen, und Vuex ist die erste Lösung für diese Arbeit in Vue. Ich hoffe, Sie haben etwas aus dieser Lektion gelernt. Wenn Sie einen Seitenwagen einbauen und Vuex in Ihrem Klassenprojekt verwenden möchten, empfehle ich Ihnen, dies zu tun. werde ich Ihnen mehr Details über Ihr Klassenprojekt geben Im abschließenden Video, das als nächstes erscheint,werde ich Ihnen mehr Details über Ihr Klassenprojekt geben. Danke fürs Zuschauen. Ich sehe dich in diesem. 10. Bonus: An JSON-Templates anpassen: In dieser kurzen Bonusstunde werde ich Ihnen zeigen, wie Sie unsere Vue Apps in Abschnittsdateien verschieben , anstatt sie in flüssigen Vorlagendateien zu hinterlassen. Der Grund, warum ich Ihnen dies zeige, liegt an Online Store 2.0. Wenn Sie nicht mit Online Store 2.0 vertraut sind, empfehle ich Ihnen, meine erste Klasse hier auf Skillshare, Shopify Theme Entwicklung: Wie Sie Ihren eigenen Online-Shop erstellen und anpassen. Ich habe drei zusätzliche Videos hinzugefügt, um die Änderungen im Online Store 2.0 zu berücksichtigen. Im Wesentlichen hat sich geändert, dass Vorlagendateien jetzt entweder JSON oder Liquid sein können. Um sich für diese neue Art der Gestaltung von Themen anzupassen, möchte ich Ihnen zeigen, wie wir unsere Apps Schnittpunktdateien verschieben und diese Vorlagen stattdessen in JSON-Dateien umwandeln können . Ich werde mich hier mit dem Thema befassen, ich zeige dir einfach, was ich meine. Hier unter Templates haben Sie alle Template-Dateien, die als Liquid codiert sind, die es uns natürlich ermöglicht, flüssigen Code HTML, CSS JavaScript einzufügen , alles in dieser Template-Datei, und das ist, was als unsere Vorlage verwendet wird. Aber wenn Sie heutzutage darauf klicken, werden Sie sehen, dass es eine Option für eine JSON-Vorlage gibt. Was ich tun werde, ist, dass ich das Thema dupliziert habe, um dieses unberührt zu halten, und hier werde ich auf „Code bearbeiten“ auf dem Duplikat klicken, und fangen wir an, unser Projekt hier neu zu gestalten. Zunächst einmal wollen wir einen neuen Abschnitt zu Hause erstellen. Lassen Sie uns zuerst Produktvorlage machen, also werde ich einen neuen Abschnitt erstellen, und ich werde es nur Product Template nennen. müssen die.liquid nicht dort einlegen, weil das automatisch sein wird, und jetzt müssen wir nur den Abschnittsnamen füllen, nur um es Product Template oder Main Product nennen, so etwas, weil wir vielleicht ein paar andere Sachen drauf. Hauptproduktvorlage. Jetzt werde ich einfach auf „Speichern“ drücken, und ich werde zu unserer product.liquid Vorlage gehen. Hier haben wir unsere Vue App für die Produktseite. Ich werde den gesamten Code mit Befehl A auf einem Mac kopieren. Ich bin mir nicht sicher, was es auf einem Windows ist, dann Befehl C. Dann werde ich hier rüber gehen, etwas Platz oben schaffen und unseren Code dort einfügen. Jetzt, da wir unseren Code eingefügt und gespeichert haben, können wir diese Vorlagendatei löschen, und dies gibt uns den Raum, um eine JSON-Vorlage zu erstellen. Ich werde auf „Neue Vorlage hinzufügen“ klicken und zum Produkt gehen, und hier können Sie sehen, dass wir jetzt eine Product.json-Vorlage erstellen können. Gehen Sie auf „Vorlage erstellen“ und jetzt haben wir die Grundlage unserer Produktvorlage. In Ordnung. In Lektion 11 der Shopify-Themenentwicklung werde ich ausführlicher eingehen : Wie Sie Ihren eigenen Online-Shop erstellen und anpassen können. Ich werde dies ein wenig durchbrechen, aber im Wesentlichen müssen wir hier die erforderlichen Felder hinzufügen, um dies zu verwenden. Es erlaubt mir nicht zu speichern, es sei denn, ich mache eine Änderung, aber Sie werden sehen, dass, wenn Sie dies nicht einschließen, es Fehler wird. Wir müssen diese Pflichtfelder einbeziehen. Zuallererst müssen wir dieser Produktvorlage einen Namen geben, und ich werde ihr nur den einfachen Namen der Produktvorlage geben. Jetzt innerhalb des Objekts unseres Abschnitts müssen wir die Produktvorlage verknüpfen, die wir gerade erstellt haben. Ich werde anfangen, indem ich es Main-Product nenne, und lasst uns ein Objekt als Wert davon öffnen. Dann brauchen wir nur einen Typ einzugeben, und der Typ muss gleich dem Abschnittsnamen sein; der Abschnittsdateiname minus der.liquid. Das wird nur Produkt-Template sein. In Ordnung. In unserem Order-Array müssen wir den Namen eingeben, der diesem entspricht, also Hauptprodukt. Dies scheint an dieser Stelle überflüssig, weil wir nur einen Abschnitt haben, aber wenn wir mehrere hatten, können wir eine andere Reihenfolge für sie hier in dieser Reihenfolge Array definieren. Ich werde auf „Speichern“ drauf drücken. Wie Sie sehen können, keine Fehler. Dann werde ich „Customize Theme“ drücken. Jetzt, da wir uns in unserem Store-Editor befinden, müssen wir hier klicken, um zur Produktvorlage zu wechseln, die wir gerade erstellt haben. Es wird nur Standardprodukte sein, weil es keinen Punkt nach dem Produkt hat, es ist nur Product.json. Wenn es Produkt Punkt etwas anderes wäre, dann würde es als Alternative wie dieser kommen. Ich werde nur darauf klicken, und hier können Sie sehen, dass wir unsere Produktvorlage noch haben. Wenn ich zu Shop the Tee gehe, können Sie sehen, dass wir unsere App haben, und es funktioniert immer noch. Das liegt daran, dass wir unsere Abschnittsdatei hier eingefügt haben, sie hat keine editierbaren Abschnitte, aber sie wurde verknüpft. Nun ist dies nicht die spannendste Lektion, da wir keine neuen Funktionen hinzugefügt haben, außer dass wir jetzt andere Abschnitte hinzufügen und sie neu anordnen können. Da es sich hierbei um ein bare-bone-Projekt ohne andere Abschnitte handelt, haben wir eigentlich nicht die Möglichkeit, hier einen weiteren Abschnitt hinzuzufügen da es buchstäblich keine anderen Abschnitte gibt. Aber mit dem Online Store 2.0-System, wenn wir ein modernes Thema verwenden, könnten wir tatsächlich jetzt verschieben, neue Abschnitte hinzufügen, wenn wir wollten. Das war im Wesentlichen, worum es in diesem Video ging, die Anpassung an den Online Store 2.0. Möglicherweise verwenden Sie ein neueres Design, das alle seine Vorlagen als JSON enthält. In diesem Fall müssen wir unsere Praktiken nur ein wenig anpassen , um sich an diesen neuen Wandel anzupassen. Alles, was wir hier getan haben, ist nur den Liquid Code in eine Abschnittsdatei verschoben und diese Abschnittsdatei in unsere JSON-Produktvorlage aufgenommen. Wir können es immer noch auf die alte Art machen, wir können diesen Code immer noch in eine product.liquid Vorlage werfen oder behalten, aber jetzt bewegen wir uns in diese Richtung mit Online Store 2.0. Ich wollte nur in diesem Video werfen hier für diejenigen von Ihnen, die mit modernen Themen arbeiten, oder haben ein modernes Thema geöffnet, und fragte sich, was zur Hölle. Hoffentlich hat dieses Video einen gewissen Kontext für Sie bereitgestellt. Alle Fragen, wie immer, zögern Sie nicht, sie in der Diskussionsbox unten zu lassen, und ich werde Sie im letzten Video für den Abschluss sehen. 11. Abschluss und Kursprojekt: Dies schließt diese Klasse bei der Verwendung von Vue.js in Shopify-Themes ab. Für Ihr Klassenprojekt ermutige ich Sie, Vue.js in das Shopify-Thema zu integrieren , an dem Sie gerade arbeiten. Denken Sie daran, dass die meisten Designs auf Produktionsebene bereits eine angemessene Menge an JavaScript verwenden, daher müssen Sie wahrscheinlich etwas von diesem JavaScript umgestalten , um Platz für Vue.js zu schaffen. Wie ich in dieser Klasse erwähnt habe, ist dieses Thema in der Shopify-Themenentwicklung ein ganz spezifisches Thema Wenn Sie sich also in Bezug auf die grundlegenden Themen HTML, CSS, JavaScript, Shopify liquid, findet ihr hier auf meinem Skillshare Kanal viele Lektionen zu all dem. Alles, was Sie tun müssen, ist auf meinen Namen zu klicken und dann meine anderen Webentwicklungsklassen zu überprüfen. Wie immer, wenn Sie mehr über Shopify Theme-Programmierung und Theme-Entwicklung erfahren möchten , folgen Sie mir online und schauen Sie sich meinen YouTube-Kanal für weitere Tutorials an. Schließlich, wenn Sie irgendwelche Tipps oder Anleitungen zu dem, was wir in der heutigen Klasse behandelt haben, müssen Sie unbedingt einen Kommentar in das Diskussionsfeld unten hinterlassen, und ich werde mein Bestes tun, um Sie in die richtige Richtung zu zeigen. Vielen Dank wie immer für das Anschauen und ich hoffe, Sie wieder in einigen meiner anderen Klassen zu sehen.