Erweiterte Shopify-Designentwicklung

1. Einführung: Hi, mein Name ist Gavin. Ich bin der Gründer von Disco, einem Unternehmen, das Shopify Storebesitzern hilft, ihre Geschäfte durch die Entwicklung von Kundenthemen und die Entwicklung von Kundenanwendungen optimal zu nutzen . Ich habe auch einige Produkte rund um die Shopify-Entwicklung veröffentlicht, einschließlich Mastering Shopify Themes und Mastering Shopify Apps. Es gibt auch ein paar Open-Source-Projekte, an denen ich gearbeitet habe. All diese Dinge haben das Ziel, Entwicklern wie Sie zu helfen Shopify-Themes in einer wirklich effizienten und einfachen Karte zu entwickeln. In all den verschiedenen Teilen von Shopify involviert zu sein, bedeutet, dass ich ständig viele Dinge rund um die Shopify-Themenentwicklung lernen und neu lernen muss, und das ist wirklich, was ich versuche, mit Ihnen durch diesen Kurs zu teilen die Best Practices, die Tipps, Tricks und Techniken, die ich im Laufe der Jahre entwickelt habe. Der Titel dieses Kurses ist Advanced Shopify Theme Development und folgt auf der Einführung von Kurt Elster in Shopify Theme Development. Dieser Kurs ist auch hier auf Skillshare verfügbar. Dieser Kurs basiert darauf, dass Sie nicht nur vorhandene Webentwicklungsfähigkeiten haben, sondern auch ein wenig mit Shopify vertraut sind. Also, wenn das noch nicht der Fall ist, schlage ich vor, dass du zurück gehst und Kurts Kurs nimmst, bevor du zu diesem zurückkommst. Annahme, dass Sie sich mit den Grundlagen der Shopify-Entwicklung vertraut machen, wird sich dieser Kurs darauf konzentrieren, Ihre Fähigkeiten in zwei Schlüsselbereichen zu verbessern. Der erste wird sein, um den Prozess zu verbessern, den wir zur Entwicklung von Themen verwenden. Also, Blick auf die Werkzeuge und Techniken rund um diese Art von Sache. Der zweite Teil, um sicherzustellen, dass wir nicht nur über dieses Zeug im Vakuum sprechen, besteht darin, in einige reale Szenarien einzutauchen und Code und die Entwicklungspraktiken zu betrachten, die wir tatsächlich in einem realen Szenario verwenden werden. Teilnahme an diesem Kurs sollte Ihnen die Fähigkeiten und das Vertrauen geben, das Sie benötigen, um größere Shopify-Entwicklungsprojekte und eingehende Kundenanfragen zu bewältigen . Das bedeutet, dass Sie Ihren Kunden und Ihrem Unternehmen einen höheren Mehrwert bieten können. Dies bedeutet wiederum, dass Sie in der Lage sind, mehr für den Wert zu berechnen, den Sie erstellen 2. Überblick über das Kursprojekt: Wie bei vielen Dingen ist der beste Weg, Shopify-Themenentwicklung meiner Meinung nach zumindest darin zu lernen , es tatsächlich zu tun, und deshalb enthält dieser Kurs ein Klassenprojekt. Ich ermutige Sie wirklich, einen Riss zu machen , wenn Sie durch das Video das erste Mal gesehen haben. Das Projekt beginnt mit dem Herunterladen des Basisthemas. Es ist funktional, aber es ist wirklich ziemlich einfach. Dann bitten wir Sie nur, einige der Techniken anzuwenden , die Sie während dieses Kurses durch dieses Thema lernen werden. Also, Dinge wie das Hinzufügen von dynamischem Filtern und Sortieren, einige Ajax-Funktionen, fügen Sie zum Einkaufswagen Dinge wie diese hinzu. Dann haben Sie auch die Chance, wenn Sie wirklich Ihre eigenen kleinen Styling-Bits mit CSS und SASS hinzufügen wollten . Arbeit durch dieses Projekt sollte nur ein paar Stunden dauern und wir werden Ihnen etwas Enthüllung geben, was ich denke ist ein echtes Szenario für die Shopify-Themenentwicklung. Die einzigen Dinge, die Sie wirklich für das Projekt benötigen, sind ein Entwicklungsspeicher und ein Texteditor Ihrer Wahl. Sie müssen mit dem Einrichten eines Entwicklungsspeichers vertraut sein. Wenn Sie damit nicht vertraut sind, dann gehen Sie zurück zum Kurtz-Kurs über Einführung in Shopify-Themen, um sich selbst eine Auffrischung zu geben. Wenn Sie zu irgendeinem Zeitpunkt mit dem Projekt stecken bleiben, könnten Sie das GitHub-Repository überprüfen, das Beispiele für jeden Schritt der Projekte hat , oder Sie könnten immer mit mir als Klasse später in Kontakt treten und ich werde versuchen, Ihnen zu helfen. Sobald Sie das Projekt abgeschlossen haben, wäre es wirklich toll, wenn Sie es mit mir und anderen Studenten teilen könnten , und Sie können das über die Skillshare Plattform tun. In Ordnung. Lasst uns loslegen. 3. Ein besserer Entwicklungsworkflow: Das erste Thema, das wir behandeln werden, ist der Entwicklungs-Workflow. Also, der Prozess, den wir verwenden, um unsere Themen zu entwickeln, zu testen und zu implementieren. Der Grund, warum ich denke, dass dies eine wichtige Sache ist, ist weil je mehr Aufwand wir für unseren Workflow aufwenden, desto einfacher ist es für uns, diese Themen zu entwickeln und desto mehr Zeit können wir uns dem Aufbau von Dingen widmen, die Kunden tatsächlich kümmert sich um. Das Ziel ist es, Dinge schneller und professioneller zu liefern, wir können vermeiden, uns in manuellen Schritten zu wiederholen und es macht es auch ein wenig einfacher, mit anderen Entwicklern zusammenzuarbeiten, wenn wir in einem Team zusammenarbeiten . Beginnen wir also am Anfang und schauen wir uns an, was wir mit dem Standard-Online-Editor von Shopify bekommen. Also, wir bekommen das vom Shopify Admin und sobald wir es geöffnet haben, sehen wir, dass wir tatsächlich einen ziemlich guten Überblick über unsere Theme-Struktur auf der linken Seite bekommen und wenn wir Dateien öffnen, bekommen wir schöne Funktionen wie flüssige Syntax Hervorhebung und es gibt eine eingeschränkte Version der Revisionssteuerung. In diesem können wir Änderungen vornehmen und speichern und dann warten, um zu älteren Versionen zurückzukehren. Aber es gibt immer noch einige ziemlich strenge Einschränkungen mit diesem Ansatz. Also entwickeln wir die Cloud. Also, wenn wir einen bevorzugten lokalen Editor haben, wir nicht wirklich den Vorteil, dass wir das verwenden können. Wir bekommen nicht wirklich einen Änderungsverlauf über all die verschiedenen Dateien. In unserem Thema ist es nicht sehr einfach, Änderungen in großen Gruppen rückgängig zu machen . Natürlich ist es sehr schwierig mit anderen über diesen Workflow zusammenzuarbeiten, da wir nicht wirklich wissen , wer welche Dateien bearbeitet und ob wir Änderungen überschreiben. Angesichts dieser Probleme werden wir anfangen, nach Möglichkeiten zu suchen zu beheben oder um sie zu umgehen und diesen Entwicklungsprozess einfach zu machen. Das erste, was wir tun werden, um Ihnen dabei zu helfen , ist der Blick auf das Theme Gem. Jetzt ist das Theme Gem ein kleines Befehlszeilenprogramm, das den Prozess des Hoch- und Herunterladens von Dateien zwischen Ihrem lokalen Entwicklungscomputer und einem Shopify-Theme automatisiert Herunterladens von Dateien zwischen Ihrem lokalen Entwicklungscomputer , mit dem Sie arbeiten. Mal sehen, wie man mit dem Theme Gem eingerichtet wird. Also, das erste, was Sie tun möchten, ist sicherzustellen, dass Sie Ruby installiert haben, da es ein RubyGem ist. Wenn Sie sich nicht sicher sind, wie Sie Ruby auf Ihrer Plattform zum Laufen bringen können, können Sie Google für Anweisungen, wie Sie diese Einrichtung erhalten. Sobald Sie das getan haben, führen Sie einfach einen Edelsteininstallationsbefehl mit dem Shopify-Thema aus. Gem ist das Argument, das den Gem installiert und wir haben dann Zugriff auf eine Theme-Befehlszeilenoption, die, wenn wir nur in unserer Befehlszeile eingeben, sagen wir, dass wir eine Reihe von Gebrauchsanweisungen bekommen. Da das Shopify Theme Gem die Shopify-API verwendet, um Assets für uns hochzuladen und herunterzuladen müssen wir es mit einigen API-Anmeldeinformationen einrichten , um mit einem aktuellen Thema zu arbeiten. Also, das werde ich hier tun. Ich erstelle eine neue private Anwendung aus dem Shopify Admin. Ich werde ihm nur einen Namen so etwas wie Theme Gem geben und dann können wir die hier generierten Anmeldeinformationen verwenden und das an das Theme Gem weitergeben. Sie werden also sehen, dass Sie, sobald Sie eine App erstellt haben, diesen API-Schlüssel und ein API-Kennwort haben. Also, um mit einem neuen Thema eingerichtet zu werden, was wir tun werden, ist zu springen zurück zur Befehlszeile, erstellen Sie ein Verzeichnis für unser Thema und dann, wenn wir sudo in es, können wir den theme configure Befehl verwenden, um die Konfiguration für uns einzurichten. Also werden wir nur die Informationen verwenden, die wir in unserem Admin Off bekommen , um zu konfigurieren. Also übergeben wir den API-Schlüssel, das Passwort und dann werden wir auch in der Domäne des Stores übergeben , mit dem wir arbeiten. Also, das ist nur der.myshopify.com Konto und dann, wenn wir Enter drücken, wird das eine config.yaml Datei erstellen. einen Blick auf den Inhalt dieser Datei, können wir sehen, dass es den Schlüssel und das Passwort hinzugefügt, die wir in diese Konfigurationsdatei übergeben , und wir brauchen nicht wirklich um die anderen Konfigurationsoptionen für den Moment kümmern. Wie Sie sehen können, habe ich jetzt einen Theme Download Befehl ausgeführt und das wird im Grunde die Shopify API verwenden , um eine Liste aller Assets in unserem aktuellen Thema in unserem Shopify Store zu erhalten und sie lokal herunterzuladen. Wenn wir also einen Texteditor wie Sublime Text öffnen und dies lokal betrachten, können wir sehen, dass wir alle Dateien aus unserem Thema auf unseren lokalen Rechner kopiert haben. So können wir jetzt eine der besten Features des Theme Gem verwenden , die Thema Watch Befehl ist. Wenn wir das also in einem Verzeichnis ausführen, in dem wir ein Thema haben, können wir dann einen lokalen Editor verwenden, um Änderungen an diesen Dateien und sie automatisch in den Shopify-Store zu laden, mit dem wir arbeiten. Also, um ein Beispiel hier zu sehen, werde ich nur den Titel meiner Seite ändern und dann, wenn ich diese Änderungen speichern, wird sehen, dass das automatisch in den Shopify Store hochgeladen wird. So bringen wir die Entwicklung lokal und vermeiden das Problem, über das wir zuvor mit dem Standard-Online-Editor gesprochen haben, wo wir nicht in der Lage sind, unseren bevorzugten Editor zu verwenden oder lokale Entwicklungsmethoden zu verwenden. Das zweite Tool, das wir uns ansehen werden, um uns mit unserer Theme-Entwicklungsfläche zu helfen , ist Git und wenn Sie es nicht verwendet haben Git, bevor es ein Revisionskontrollsystem ist , das sehr häufig in vielen Softwareentwicklungen verwendet wird einschließlich Web-Entwicklung und es gibt Ihnen viele Vorteile, da es die Zusammenarbeit mit anderen Menschen viel einfacher macht , es gibt Ihnen eine Möglichkeit, einen Revisionsverlauf zu behalten , so dass Sie sehen können, wer welche Änderungen vorgenommen hat, wenn mit Ihre Themen und es spielt auch sehr stark in einige der erweiterten Bereitstellungsstrategien, die wir in späteren Lektionen betrachten werden. Werfen wir einen Blick darauf, wie wir ein Thema setzen würden, das wir lokal unter Git-Revisionskontrolle haben. Also, das erste, was zu tun ist, ist zu überprüfen, ob wir tatsächlich den Git-Kommandozeilenclient haben und wir tun das einfach, indem wir git—version eingeben. Wenn Sie ein Mac- oder Linux-System verwenden, haben Sie dies standardmäßig, Sie müssen dies möglicherweise manuell unter Windows installieren. Sobald Sie das getan haben, können Sie den Befehl git init im lokalen Verzeichnis ausführen und das wird Ihr Git-Repository einrichten. Das erste, was ich mache, wenn ich ein neues Git-Repository für ein Shopify-Theme erstelle, besteht darin , eine so genannte gitignore-Datei zu erstellen und die config.yaml-Datei hinzuzufügen. Das sagt Git nur, dass wir Änderungen an der Datei config.yaml nicht verfolgen möchten und das liegt daran, dass sie API-Anmeldeinformationen für unseren Store enthält, also möchten wir sie nicht wirklich in ein Repository und potenziell sie an die Öffentlichkeit. Also, sobald ich diese Ignorier-Datei eingerichtet habe, kann ich alle Dateien in meinem Theme mit dem Befehl git add hinzufügen und sie dann mit dem Befehl git commit festschreiben und wir werden sehen, dass alle Dateien in dem Verzeichnis, das ich an das Git-Repository übergeben wurde. Also, dieser Git wird alles sehr vertraut sein, wenn Sie Git vorher benutzt haben. Wenn Sie Git vorher noch nicht benutzt haben, dann ermutige ich Sie wirklich, einen der hervorragenden Tutorials zu finden, die online zur Verfügung stehen, wie man es benutzt. Es ist ein wirklich nützliches Tool, das wir in diesem Kurs viel verwenden , um Ihnen eine Vorstellung davon zu geben, wie der Workflow mit Git funktioniert. Also, sobald wir unser Repository eingerichtet haben, wie wir gerade getan haben, und dann würde ich Änderungen an unserem Thema vornehmen. Also, zum Beispiel, hier ändere ich nur den Titel der Seite. Wir speichern diese Änderungen und dann zurück von der Befehlszeile, können wir einen Überblick über die Änderungen mit dem Git-Status-Befehl erhalten und dann können wir git add ausführen, um diese Änderung zu unserem nächsten Commit hinzuzufügen. Schließlich können wir den Befehl git commit ausführen, um dieses Commit tatsächlich abzuschließen, und es gibt GUI-Tools, die Ihnen bei diesem Workflow helfen, wenn Sie das lieber anstelle der Befehlszeile verwenden möchten. Aber sobald Sie alle diese Änderungen hinzugefügt haben, werden Sie sehen, dass Sie git log ausführen können und eine Geschichte darüber erhalten , wer welche Änderungen vorgenommen hat und wann an Ihrem Theme. Wir haben nun zwei Möglichkeiten gesehen, unseren Entwicklungs-Workflow zu verbessern, wir haben unsere Theme-Entwicklung lokal über das Theme Gem gebracht und wir haben auch unsere Themes unter Revisionssteuerung mit Git gestellt. Wir werden uns später im Kurs einige weitere Entwicklungsprozesstechniken ansehen , wenn wir uns die erweiterte Themenbereitstellung und auch die Workflow-Automatisierung ansehen . Aber im Moment möchte ich wirklich in ein paar praktischere Sachen stecken. Also, ein echter Code, was wir in einem realen Shopify-Theme-Entwicklungsszenario sehen könnten . Aber wenn wir anfangen, das anzugehen, können Sie die Dinge, die wir gerade in diesem Kurs gelernt haben, verwenden , um weiterzuverfolgen. 4. Produktanpassungen: Zeit, in eine echte Theme-Bearbeitung einzutauchen, und wir werden beginnen, indem wir uns die Produktanpassung ansehen. So, wie wir können Besucher ihre Produkte von der Produktseite anpassen lassen. Dies ist ziemlich gängige Funktionalität. Sie haben es wahrscheinlich auf vielen Themen im Shopify Theme Store, auf Mosaic auf ihren Websites im Internet gesehen . Aber der Ansatz, den wir annehmen werden, besteht darin, zunächst einmal die Grundlagen zu betrachten und zu sehen wie die Funktionalität in einem Shopify-Store aus diesen grundlegenden Komponenten aufgebaut wird. Dabei werden wir uns auf die drei wichtigsten Dinge konzentrieren , wenn Sie eine Produktseite erstellen. Die erste davon besteht darin, sicherzustellen, dass Sie mit dem Kunden kommunizieren, sodass er ihnen mitteilt, welche Optionen verfügbar sind und wie er sein Produkt so konfigurieren kann, dass er verschiedene Auswahlen trifft. Die zweite Sache ist, sicherzustellen, dass es für sie leicht ist, ihre Auswahl zu treffen. Je nachdem, welche Art von Entscheidungen sie treffen müssen, können Sie die entsprechenden Eingaben und Steuerelemente bereitstellen, damit sie dies tun können. Dann ist die letzte Sache, Feedback zu geben, so dass, wenn sie eine Auswahl treffen, so dass sie die Farbe eines Produkts oder so etwas ändern, diese Änderung wird auf der Seite reflektiert, so dass ich sehen kann, dass das erhalten und sehen, welche Auswirkungen es auf ihren Kauf hat. Beginnen wir mit der Einführung des Candle Store, das ist der Demo-Shop, den wir während dieses Kurses verwenden werden, um zu arbeiten. Dies ist also die Produktseite, an der wir interessiert sind. Wir haben eine Reihe von Varianten. Die Variantenoptionen, zwischen denen wir für diese speziellen Produkte der Kerze wählen können , ist die Farbe der Kerze, und ob die Kerze mit einem Deckel kommt oder nicht. Wir sind auch in der Lage, eine benutzerdefinierte Eigenschaft zu der Kerze hinzuzufügen , die eine gravierte Nachricht ist, und dann haben wir diese zusätzlichen kleinen Bits von Metadaten , die der angezeigte Preis und das angezeigte Bild sind. Der Preis und das Bild hängen davon ab, welche Variante wir wählen. Bevor wir uns ansehen, wie wir diese Produktseite verbessern können, werfen wir einen Blick auf das, was wir im Moment haben. Wir haben also eine Standard-Produktseite mit einer Auswahlliste mit allen möglichen Variantenoptionen. Unter den Preisen sind wir in der Lage, eine benutzerdefinierte Eigenschaft zu einer Nachricht eingeben, und dann, wenn wir in den Warenkorb legen, werden wir auf die Warenkorbseite wie gewohnt gebracht, und dies funktioniert alles ohne JavaScript. Also, um einen Blick auf den tatsächlichen HTML hinter dieser Produktseite im Moment zu werfen, werden wir sagen, es ist ziemlich unkompliziert geschrieben. Wir haben einen Titel des Produkts. Wir haben einen Abschnitt, der alle Produktbilder enthält , die wir auf der linken Seite dort gesehen haben, wo ein wenig flüssige Logik verwendet wird, um herauszufinden, was das vorgestellte Bild sollte auf der ersten oder ausgewählten Variante basieren. Wir haben dann einen Abschnitt, der das Produktformular ist, das das tatsächliche HTML-Formular enthält, das wir gesehen haben, den Preis des Produkts. Es beinhaltet auch, dass wählen Sie mit den verschiedenen Varianten und Preisen in es. Wir haben einen Abschnitt, der die benutzerdefinierten Eigenschaften für die Produkte enthält oder wo wir diese gravierte Nachricht hinzugefügt haben und dann ganz unten im Formular haben wir die Schaltfläche zum Warenkorb hinzufügen. Also, alles in allem ein ziemlich Standardansatz für eine Produktseite. Also, darüber nachzudenken, wie wir diese Produktseite verbessern können, ist eines der ersten Dinge, die über seine Seite für mich herausspringt, die Auswahlbox, alle Optionen in der einen Dropdown-Liste zu haben, zeigt dem Benutzer nicht wirklich , was die verschiedenen Optionen sind und was sie auswählen können. Also schauen wir uns an, wie wir das ändern können. also in die theme.liquid springen, wir ein bisschen JavaScript hinzufügen und wir werden zurückkommen und genau das durchgehen, was das in einer Sekunde tut. Aber wenn ich diese Änderung vornehme, speichern Sie die Datei, und wir werden nur das Thema überprüfen, sehen läuft und laden unsere Änderungen automatisch in den Theme-Store. Wenn wir aktualisieren, dann werden wir sehen, dass wir diese Optionen tatsächlich aufgeteilt haben, so dass es für den Benutzer klarer aussieht, was die Auswahl ist. auf das JavaScript zurückkommen, das Sie geschrieben , indem Sie nur das durchgehen haben, indem Sie nur das durchgehen, können wir sagen, Zeile 20 wir überprüfen, um sicherzustellen , dass wir dies nur auf Produktseiten, Zeile 21 enthalten wir die Option Auswahl JavaScript, das eine von Shopify bereitgestellte Bibliothek ist, die tatsächlich die meisten dieser Magie für uns tut, und dann setzt der Rest dieses JavaScript das im Grunde. Also, es ruft diese neue Shopify.OptionSelectors auf und es übergibt die ID dieses ursprünglichen Auswahlfeldes. Also, es sagt, Ziel dieses Auswahlfeld und das ist, was ich in diese separaten Auswahlfelder aufteilen möchte, und dann übergeben wir ein paar Optionen an diesen Initialisierer. Das macht im Grunde alles, was wir gerade gesehen haben. Also, das ist gut, aber wenn wir zurück zu unserer Seite springen, werden Sie sehen, dass wir nicht wirklich viel Feedback bekommen, wenn wir diese Optionen ändern. Also, in der URL-Leiste oben, können wir sehen, dass sich die URL ändert, aber wir sehen nicht wirklich, dass diese Änderung auf der Seite reflektiert wird . Also, das Bild ändert sich nicht, der Preis ändert sich nicht, wenn wir diese Optionen ändern. Also, mal sehen, wie wir das lösen können. Der Schlüssel dazu wird also die onVariantSelected Callback-Funktion sein , die wir früher als nur eine leere Funktion ausgeblitzt haben . Also, dies ist eine Funktion, die immer aufgerufen wird, wenn die Optionen auf Ihrer Seite ändern und eine neue Variante ausgewählt wird, und es wird die Variante als benachbartes Objekt und auch das ausgewählte übergeben , das diese Änderung tatsächlich ausgelöst hat, also dieses Auswahlfeld. Also, was wir hier tun werden, ist nur aktualisieren diese Funktion, um die Kuppel unserer Seite zu ändern, um sie basierend auf der ausgewählten Variante zu aktualisieren. Also, Sie können hier den Code sehen, den ich hinzugefügt habe, wir aktualisieren den Preis, der angezeigt wird, und wir verwenden den Variantenpreis und Shopifys Format Geld Funktion, um dies zu tun, dann finden wir einfach das Preiselement und aktualisieren es nach Bedarf. Außerdem aktivieren oder deaktivieren wir die Schaltfläche „In den Einkaufswagen hinzufügen“. Manchmal können wir also eine Variante auswählen, die nicht wirklich verfügbar ist, und wir müssen die Schaltfläche deaktivieren. Schließlich aktualisieren wir das vorgestellte Bild auf der Seite. Daher überprüfen wir, ob die Variante ein vorgestelltes Bild mit ihm verknüpft ist, und verwenden dann die Shopify GetSizedImageUrl-Methode um die richtige URL für diese bestimmte vorgestellten Bild, dann nur das vorgestellte Bild-Kuppelelement auf der Seite zu finden und seine Quelle zu ändern. Also, speichern Sie das und überprüfen Sie, dass der Upload auf Shopify ist. Wenn ich die Seite jetzt aktualisiere, sollten wir sehen, dass die Seite aktualisiert wird, wenn wir diese Optionen ändern. Also, wir sagen, das vorgestellte Bild ändert sich, der Preis ändert sich, um die Variante wiederzugeben, die wir gerade ausgewählt haben. Das ist also eine nette Funktion, die unseren Kunden mehr Feedback zu den Entscheidungen gibt, die sie treffen und es ihnen ermöglicht die Unterschiede in den Produktoptionen zu verstehen, die sie auswählen. Das nächste, was wir angehen werden, ist das Verhalten der Thumbnail-Bilder. Also, im Moment, wenn ich auf ein Miniaturbild klicke, bekomme ich eine größere Version dieser Öffnung in einer neuen Registerkarte, wie diese, was nicht unbedingt ein schlechtes Ergebnis ist, aber als Kunde erwarte ich, wenn ich auf ein rotes Miniaturbild klicke, würde ich möchten, dass die Optionen hier geändert werden, damit sie mit der Miniaturansicht übereinstimmen, auf die ich geklickt habe. In Bezug darauf, wie wir dies implementieren werden, wir es in zwei Schritten tun, und der erste Schritt wird sein, einige Markup zu den Thumbnail-Links selbst hinzuzufügen. Also, wenn wir die Thumbnail-Links hier finden, werden wir ein spezielles Datenattribut zum Miniaturbild selbst hinzufügen. Also, wir werden diese Datenänderungsvariante nennen. Wir geben dann die ID der Variante an, mit der diese Miniaturansicht verknüpft ist, und so hat jedes Bild in Shopify eine Liste von Varianten, mit denen es in Zusammenhang stehen kann. Wir werden nur die erste davon nehmen und die Varianten-ID dafür zurückgeben. Also, um zu sehen, wie das tatsächlich aussieht auf unserer Seite, lassen Sie uns zurück zum Browser springen, aktualisieren, und dann überprüfen Sie diese einzelnen Thumbnail-Links mit dem Chrome-Inspektor-Tool, und wir können sagen, dass jeder dieser Links hat eine Datenänderungsvariante, Datenattribut und es ist mit einer bestimmten Varianten-ID verknüpft. einfache Hinzufügen dieser Datenattribute hat das Verhalten unserer Miniaturansichten nicht geändert. Das ist also, was wir jetzt tun und einen Ereignishandler einrichten , um Klickereignisse auf diesen Miniaturansichten zu behandeln. Also, wir werden das in theme.liquid tun. Eintauchen in das, das erste, was wir tun werden, ist tatsächlich wenn wir diese OptionsSelectors initialisieren, wir einen Verweis auf diese Option wählen beibehalten und wir werden sehen, warum in einer Sekunde. Aber sobald wir das getan haben, werden wir jetzt einen Ereignishandler für Click-Ereignisse für alle Elemente mit diesem Datenänderungsvariantenattribut hinzufügen , das wir zuvor eingerichtet haben. In der Methode für diesen Handler werden wir das Standardverhalten verhindern Öffnen Sie also in einer neuen Registerkarte, und dann, was wir stattdessen tun werden, ist die Verwendung dieses Verweises auf die Option select, ist, dass wir , und übergeben Sie ihr die ID der Variante, mit der diese spezielle Miniaturansicht verknüpft ist. Also, lasst uns sparen und einen Blick darauf werfen, wie das funktioniert. Aktualisieren der Seite, und jetzt, wenn wir auf eine Miniaturansicht klicken, sollten wir sehen, dass die Option Auswahl ändert sich, um die Werte der Variante widerzuspiegeln, mit der diese Miniaturansicht verknüpft ist. Also, das ist genau die Art von Verhalten, die wir wollen. Es ist wichtig zu beachten, dass wir nicht wirklich manuell angeben mussten, in diesem Klick-Handler auf der Miniaturansicht mussten wir nicht sagen, und jetzt müssen Sie das ausgewählte Bild aktualisieren, oder jetzt müssen Sie den Preis aktualisieren, es tatsächlich nur als Folge davon, wie wir unseren Varianten-Select-Handler eingerichtet haben. Dies zeigt mir die Macht des Ansatzes, Dinge um diese einfache Basisoption zu bauen , ist in erster Linie, die Einrichtung einer guten Varianten. Wählen Sie Anruf gesichert, sie sehen eine Seite nach Bedarf, denn dann können wir zusätzliche Komponenten später wie diese Miniaturansicht Auswahl hinzufügen, und alles, was sie im Wesentlichen tun müssen, ist eine Nachricht an die Option wählen, und sagte: „Ich möchte diese Variante jetzt auswählen.“ Die Logik, die wir bereits implementiert haben behandelt alle anderen Aktualisierungen der Seite. Drücken Sie auf, lassen Sie uns darüber nachdenken, was wir sonst tun können, um diese Seite für die Benutzer besser zu machen. Eines der Dinge, die ich identifizieren würde, ist die Auswahl-Dropdown-Liste für die Farboption. Also, wählen Sie Dropdown-Liste ist gut, wenn Sie viele Optionen haben, und ein Benutzer weiß, was er wählen möchten, also zum Beispiel, ein Land. Aber für Farben sind Sie wahrscheinlich besser dran, diese Farben den Benutzern in Form eines Musters oder etwas anzuzeigen. Also, was wir jetzt tun werden, mal sehen, wie wir das angehen könnten. Also, wenn wir in die Produktvorlage eintauchen, werden wir ein wenig Flüssigkeit hinzufügen, um dies zu tun, und wenn ich ein wenig sage, meine ich ziemlich viel. Leider ist dies ein bisschen typisch für eine Flüssigkeit. Wir werden also nicht zu viel in die Details eintauchen, sondern um Ihnen die allgemeine Idee zu geben, was wir tun, ist jede Option, die dieses Produkt hat, durchlaufen. Also, ob seine Farbe oder Größe, finden Sie diejenigen, die mit Farbe verwandt sind, und dann basierend auf dieser Iteration durch alle Varianten , die dieses Produkt alle verschiedenen Farben definiert hat, die verfügbar sind. Dann geben wir für jede verfügbare Farbe einen Link aus, der ein Farbfeld enthält. Also, das ist, was dieser Link hier ist, und wir können sagen, dass es ein Style-Attribut ausgibt, das diese Farbe enthält, und dann ähnlich wie wir das Datenänderungsvariantenattribut auf unseren Miniaturbildern hatten, haben wir jetzt eine Datenänderungsoption, und Datenänderungswert, Datenattribut. Also, unser Ansatz hier wird tatsächlich ziemlich ähnlich zu den Thumbnails sein, und dass wir einen Ereignis-Listener einrichten werden, um Klicks auf diese bestimmte Art von Link zu hören , aber anstatt die gesamte Variante zu ändern, Was wir tun werden, ist die Datenänderungsoption und Datenänderungswert, Datenattribute auf unseren Musterlinks zu verwenden , um nur die spezifische Farbe zu ändern , die wir auswählen, anstatt die gesamte Variante. Also, kurz bevor wir eine Vorschau, wie die flüssigen Änderungen, die wir gerade implementiert haben, aussehen, werden wir nur ein wenig Styling zu unserem Stylesheet hinzufügen, um sicherzustellen, dass unsere Farbfelder richtig gerendert werden, und dann werden wir das speichern, und dann überprüfen Sie, was passiert, wenn wir unsere Seite aktualisieren, und wir werden sehen, dass die Farbfelder so gerendert werden, wie wir es gehofft hatten. Nun, da wir diese als Links einrichten, die auf eine bestimmte Varianz als Rückfall hinweisen , wird dies tatsächlich halbarbeiten. Wenn wir jetzt auf diese Links klicken, werden Sie sehen, dass die Variante in der URL aktualisiert wird. Aber damit dies in der Art und Weise funktioniert, die wir wollen, müssen wir diesen JavaScript-Ereignis-Listener in ähnlicher Weise wie die Varianz einrichten . Also, wenn wir zurück in die theme.liquid fallen, wo wir all unser JavaScript für den Moment haben, werden wir einen zweiten Ereignis-Listener hinzufügen sehr ähnlich ist , um Datenänderungsvarianten Listener hinzuzufügen. Aber dieses Mal hören wir auf einen Klick auf unsere Datenänderungsoption. Eigentlich tut es mir leid. In der eigentlichen Behandlung zu diesem, wieder verhindern wir die Standardaktion, und dann extrahieren wir den Typ und den Wert der Option. Also, ob es sich um eine Farboption handelt, und dann ob es rot, grün oder blau ist, und dann schauen wir in die vorhandenen Auswahl-Dropdowns , die wir generiert haben, um zu sehen, ob dieser Wert existiert , und wenn ja, werden wir ändern Sie das Auswahlfeld auf diesen angegebenen Wert. Um zu sehen, wie das tatsächlich funktioniert, gehen wir zurück zur Seite und aktualisieren. Nun, wenn wir eine andere Farboptionen auswählen, sollten wir sehen, dass nur die Farboption aktualisiert wird und das wird dynamisch durch JavaScript aktualisiert. Also, jetzt, da wir das funktionieren, weil es vielleicht sein mag, machte es keinen Sinn, die Lead-Option auch als Muster-Stil zu haben. Denn es gibt nur zwei Optionen und nützlich sein , Benutzer einfach zwischen diesen beiden auswählen zu lassen. Also, wir werden das tun, indem wir im Grunde das flüssige Snippet, das wir auf unserer Produktseite für die Farbfelder hinzugefügt haben,generalisieren das flüssige Snippet, das wir auf unserer Produktseite für die Farbfelder hinzugefügt haben, und es einfach mit Nicht-Farboptionen funktionieren lassen. Also werden wir das tun, indem wir einen Snippets-Ordner erstellen und ein neues Snippet erstellen. Dies ist also im Grunde genau das gleiche wie die Flüssigkeit, die wir der Produktvorlage mit diesen wenigen leichten Modifikationen hinzugefügt haben , wobei die Änderungen für alle Arten von Optionen, nicht nur für Farboptionen, aber es gibt einen Check-in dort, um zu sagen, ob es sich bei der Option um eine Farboption handelt oder nicht. Wenn es sich um eine Farboption handelt, wird diese Kachelverknüpfung mit dem Farbfeld rendern, andernfalls wird nur ein normaler Textlink gerendert. Jetzt ist wahrscheinlich ein guter Zeitpunkt, um es zu wiederholen, nicht zu gestresst zu sein, wenn Sie nicht mit jedem kleinen Detail des Codes folgen . Im Moment konzentrieren wir uns nur auf den Gesamtansatz und die Ideen, und Sie sind immer in der Lage, den eigentlichen Code im GitHub-Repository ausführlicher zu lesen . Lassen Sie uns hier fertig, und jetzt, da wir unser Snippet eingerichtet haben, können wir den Code in unserer Produktflüssigkeitsvorlage durch einen Include dieses Snippets ersetzen . funktioniert also sowohl für die Farbe als auch für die Nicht-Farbe-Option. Also, jetzt können wir speichern, dass automatisch in unseren Shop hochgeladen wird und dann, wenn wir aktualisieren, können wir sehen, dass die Deckeloption jetzt genauso wie Musterfeld ist. So können Benutzer jetzt einen guten Überblick über alle verschiedenen Optionen, die für dieses Produkt verfügbar sind, und arbeiten zusammen zwischen der Farb- und Deckelauswahl, um genau das, was sie wollen. Also, wir sind sehr nah dran, fertig zu werden, aber es sind wahrscheinlich nur zwei kleine Dinge, die wir vor dem Ende aufräumen möchten . Der erste ist, dass wir nur die Farbfelder oder die Auswahlfelder anzeigen wollen, nicht beide gleichzeitig, und wir müssen berücksichtigen, dass die Farbfelder nicht funktionieren, wenn wir haben JavaScript aktiviert , also müssen wir darüber nachdenken, was passieren wird, wenn JavaScript auf unserer Website nicht aktiviert ist. Also, was wir tun werden, um dies zu behandeln, ist ein ziemlich häufiges Muster, wir werden eine CSS-Klasse zum Körper unserer Seite hinzufügen und diese Klasse entfernen, wenn wir JavaScript aktiviert haben, und basierend darauf, ob diese Klasse vorhanden ist oder nicht, wir in der Lage sein, die verschiedenen Auswahlmethoden ein- oder auszublenden. Also, wir haben die Klasse zu unserem Körper hinzugefügt, und jetzt müssen wir nur ein wenig JavaScript hinzufügen, um diese Klasse zu entfernen. Sobald wir das getan haben, können wir in unser Stylesheet springen und einfach ein wenig Styling hinzufügen , um bestimmte Elemente zu verstecken, wenn wir JavaScript nicht aktiviert haben. Also, die Seite jetzt aktualisieren, können wir sehen, dass mit aktiviertem JavaScript, diese Auswahlfelder ausgeblendet sind, und wir sind in der Lage, die Farbfelder wie normal zu verwenden, wenn JavaScript nicht aktiviert ist, dann haben wir Dieses schöne Rückgriff auf die einfache Auswahlbox, die ein hübsches ist, aber es funktioniert. Ok. Also, es war viel los in diesem Beispiel. Aber mach dir keine Sorgen, wenn du beim ersten oder zweiten Mal nicht alles bekommen hast. Die wirklich wichtige Sache, um aus der Lektion heraus zu kommen, ist zu sehen, wie die Produktseite in Shopify aufgebaut ist, und auch den Vorteil dieses fortschrittlichen Verbesserungsansatzes zu verstehen. Also, bauen Sie jede Komponente übereinander, in einer Weise, die unabhängig ist, so dass es einfacher ist zu pflegen und zu begründen, was los ist, auf der Seite. Dieser progressive Verbesserungsansatz, diese kleinen Bausteine zu nehmen und sie übereinander zu stapeln, so dass sie unabhängig sind, und dass wir eine Seite erhalten, die ohne JavaScript funktioniert, und dann langsam -Funktionalität. Dies ist ein Ansatz, den wir in der nächsten Lektion wenn wir anfangen, Sammlungsseiten zu betrachten. 5. Filtern, Sortieren und Anzeigen von Sammlungen: In dieser Lektion werden wir unsere Arbeit mit dem Demo-Kerzenladen fortsetzen . Aber dieses Mal werden wir uns auf die Sammlungsseiten konzentrieren und nicht auf die Produktseiten. Aber wir werden immer noch dasselbe tun, wir werden immer noch versuchen, unseren Kunden dabei zu helfen ihre Entscheidungen effektiver und effizienter zu treffen. Bietet eine bessere Benutzererfahrung. Wieder einmal werden wir das auf eine Weise tun, die unser Wissen und Verständnis dafür aufbaut , wie die Shopify-Seiten von Grund auf zusammengesetzt werden. Dies ist ein Beispiel für eine Sammlungsseite aus unserem Demo-Kerzenladen und was wir in dieser Lektion tun werden, ist das Hinzufügen von Möglichkeiten für Kunden die Produkte zu finden, die sie wirklich interessiert sind. Also, Dinge, die Sie in vielen Eagle Nest Stores gesehen haben, Dinge wie, in der Lage, die Art und Weise, wie wir Produkte sehen, in der Lage, Produkte zu verkaufen, in der Lage, sie zu filtern. Während wir all dies tun, denke ich, dass es wichtig ist, im Auge zu behalten, dass das Ziel dieser Sammlungsseiten ist immer, die Dinge einfacher für den Benutzer zu machen, um Drilldown und finden, wonach sie suchen. werden wir damit beginnen, Kunden zu erlauben , die Art und Weise zu ändern, wie sie diese Produkte ansehen. Ob als Raster oder in einer Liste, in der sie mehr Details sehen können. Werfen wir einen Blick auf den HTML, mit dem wir beginnen. Wenn wir die Sammlung Vorlage öffnen, werden wir sehen, es ist ziemlich einfach, wir haben einen Titel, wir haben einen Abschnitt namens Sammlung Produkte die ist, wo die tatsächlichen Produkte angezeigt werden, und dann haben wir einen leeren Abschnitt namens Sammlungssteuerelemente, in dem wir die Elemente setzen, mit denen unser Benutzer steuern kann, was er sagt. Wir werden also beginnen, dem Benutzer die Möglichkeit zu geben, die Ansicht zu steuern, indem die gesamte Seite in ein Formular umschließen, und wir werden sehen, warum wir das in einer Sekunde tun, und dann werden wir einige HTML zu den Sammlungssteuerelementen hinzufügen, und das ist gehen, um aus einem Auswahl-Dropdown bestehen, die uns die Möglichkeit gibt, zu wählen, welche Ansicht, und dann haben wir eine Senden-Schaltfläche, die ein Update aufruft. Um zu sehen, welche Wirkung das tatsächlich auf unserer Seite hat, werden wir sagen, dass wir jetzt dieses sehr einfache Auswahl-Steuerelement haben, und wir können zwischen einem ListView und einem GridView wechseln. Also, dass wir tatsächlich nichts auf unserer Seite ändern, aber Sie werden sehen, dass es die URL ändert und diesen Ansicht-Abfrageparameter hinzufügt. Um tatsächlich etwas mit diesem Abfrageparameter zu tun, müssen wir eine Funktion in Shopify verwenden, die alternative Ansichtsvorlagen genannt wird. Um das in unserem Template-Verzeichnis zu tun, werden wir eine neue Vorlage erstellen und wir werden es collection.list.liquid nennen, und dann fügen wir einfach einige zufällige HTML-Inhalte hier hinzu, um zu sehen, wie das funktioniert. Speichern Sie das, und wenn wir dann zu unserem Browser zurückkehren, können wir sagen, dass, wenn unser View-Parameter als Raster gelassen wird, dann bekommen wir, was wir ursprünglich hatten, aber wenn wir es in die Liste ändern, wird die ultimative Vorlage mit dem Inhalte, die wir gerade erstellt haben. Machen wir etwas Nützlicheres als das. Zu Beginn werden wir einige gemeinsame Funktionen zwischen unseren Raster- und Listenansichten haben . Also werden wir die aktuelle Sammlungsseite in ein Snippet extrahieren. Wir werden diese Sammlungsansicht aufrufen, und wir werden einfach über das kopieren, was wir in unserer vorhandenen Sammlungsvorlage haben. Jetzt in unserer collection.liquid werden wir dieses Snippet einschließen und wir werden sagen, dass unsere Standardansicht eine Rasteransicht sein sollte. Also, wir werden es mit Grid als Parameter für dieses Snippet einschließen. Dann werden wir in unserer alternativen Listenansicht genau dasselbe einschließen, aber ändern Sie einfach den Parameter in Liste. Nun, da unser Snippet in beiden Vorlagen enthalten ist, können wir es anpassen, um sowohl Raster- als auch Listenansichten zu behandeln, und wir werden dies tun, indem wir eine CSS-Klasse hinzufügen und nun den Namen des Sammlungsansichts-Snippets setzen, das entweder mit einer Liste oder einem Raster gefüllt, je nachdem, woher wir es einfügen, und wir haben einige CSS-Stile eingerichtet, um es basierend auf dem Wert davon anders zu rendern. Also jetzt aktualisieren unsere Seite, werden Sie sehen, dass, wenn wir das Listenansichts-Handle haben, wir werden die Produkte als Liste zu sehen, und wenn wir es als Raster lassen, dann werden wir sie als Raster gerendert sehen. Also, das ist eine einfache View-Implementierung. Nun, lassen Sie uns der Sortierung zuwenden und hier werden wir den Vorteil sehen , diesen formularbasierten Ansatz zur Aktualisierung unserer Abfrageparameter zu haben , weil alles, was wir wirklich tun müssen, um Sortierung in unser Formular hinzuzufügen, ist, dieses select-Element mit diese Optionswerte hier. Also, wir benennen einfach den Auswahlwert, wählen das Element sortieren nach und die Optionen, die wir in ihn setzen, sind die vordefinierten Sortierparameter, nach denen Shopify uns unsere Produkte sortieren lässt. Also, einfach speichern, dass und springen wieder in den Browser, können wir sagen, dass wir jetzt eine Sortierung nach Auswahl Dropdown-Liste, sowie die Ansicht und wir können mischen und passen unsere Werte hier um die Art und Weise, wie wir unsere Produkte betrachten zu ändern. Dieser formularbasierte Ansatz ist also nett, weil er bedeutet, dass wir kein JavaScript benötigen , um die Art und Weise zu aktualisieren, wie wir Produkte betrachten, und es bedeutet auch, dass alle Informationen, die wir benötigen, um die Ansicht, die wir betrachten, neu zu erstellen , dort oben in die URL. Unser nächster Schritt besteht darin, dass unsere Kunden die Produkte, die sie interessieren, durch den Einsatz von Filtern eingrenzen können. Jetzt ist es wichtig zu beachten, dass wir bei Shopify wirklich zwei Ebenen der Filterung haben. Wir haben Filterung auf Sammlungsebene und Filter auf Tag-Ebene. Also, wir nehmen zuerst die Filterung auf Sammlungsebene und das ist im Grunde, nur die Produkte, an denen wir interessiert sind, basierend auf der Sammlung, in der sie sich befinden, einzugrenzen. Wir werden den einfachsten Ansatz, um dies zu implementieren , indem wir einfach eine Liste von Links zu jeder Sammlung bereitstellen , nach der wir filtern möchten. Also, wir haben gerade dieses Listenelement zu unseren Sammlungssteuerelementen hinzugefügt und oben haben wir ein Listenelement, das einen Link zur alten Sammlung enthält, was ein Sonderfall ist, und dann für jede andere Sammlung in unserem Shop Wir werden ein neues Listenelement rendern und innerhalb dieses Listenelements werden wir entweder einen Link zur Sammlung rendern oder wenn es die aktuelle Sammlung ist, werden wir nur eine Spanne rendern. dies in der Praxis sehen, wirdies in der Praxis sehen,aktualisieren wir unsere Seite und wir werden sehen, dass wir wie erwartet eine Liste von Links zu all unseren verschiedenen Sammlungen haben. also auf diese klicken, gelangen Sie zu der URL für diese Sammlung, wie Sie hier oben sehen können, und darüber hinaus sind wir in der Lage, unsere Ansicht und Sortierungsparameter zu ändern , um die Ansicht entsprechend anzupassen. Damit Benutzer noch genauer in unsere Kollektionen eindringen können, können wir sie anhand der Tags filtern, die Produkte haben. Wieder Implementierung weise, wir werden das ziemlich einfach halten. So, wie wir es bei unserer Sammlung Filterung hatten, werden wir eine Liste von Links haben, die wir verwenden können, um nach Tags zu filtern. So können Sie hier sehen, wir haben unsere ungeordnete Liste, und dann werden wir über jedes Tag innerhalb der Sammlung iterieren, und für jedes dieser Tags werden wir einen Link entweder über den Shopify-Link Tag oder Link entfernen, um Tag-Filter hinzuzufügen. Dies sind nützliche flüssige Helfer, die Shopify für genau diesen Zweck bereitstellt. sehen, wie dies auf unserer Store-Front aussieht, werden wir sehen, dass nach dem Aktualisieren, haben wir jetzt unsere Tags als Links aufgelistet und wir können sie ein- und ausschalten, wenn nötig, um die Sammlung weiter zu filtern. Sie werden auch feststellen, dass sich die Liste der verfügbaren Tags basierend auf den Tags in der Kategorie ändert . So hilft Kunden, sich auf nur relevante Tags einzugrenzen. Wie zuvor können wir Ansicht-und Sortieranpassungen anwenden und alles bekommt für uns in der URL. Also, wir haben nur noch ein paar weitere Funktionen hinzuzufügen, bevor wir eine ziemlich funktionale Sammlungsseite haben und eines dieser Features, die wir noch vermissen, ist die Paginierung. Glücklicherweise wird unser einfacher formularbasierter Ansatz das Hinzufügen relativ einfach machen. Schauen Sie sich das HTML für unsere Sammlungsseite im Moment an. Um etwas zu paginieren, müssen wir es in dieses paginate Tag einpacken, das wir dann die Liste der Elemente übergeben, die wir paginieren möchten , was in diesem Fall die Produkte in der Sammlung sind, und dann eine Anzahl von, wie viele Artikel wir pro Seite möchten. Also fangen wir mit drei an. Normalerweise hätten Sie etwas höher auf einer echten Seite, aber dies wird uns die Paginierung in Aktion sehen lassen. Ich werde auch dieses Paginierungs-Snippet hier einfügen und das die Steuerelemente rendert, die wir zum Paginieren verwenden. Ich werde nicht zu viel auf den tatsächlichen Inhalt dieses Codes eingehen, da Sie dies sowohl auf den GitHub-Beispielen für diese Lektion als auch in der Shopify-Dokumentation finden können . einen Blick auf das Ergebnis unserer Handarbeit können Sie sehen, dass wir sofort auf drei Ergebnisse auf der Seite geschnitten wurden und wir haben diese Paginierung, die unten unten hier, und wir können durch die Seiten in unseren Ergebnissen bewegen und die URL wird entsprechend dem auf dem neuesten Stand gehalten. Ich möchte hier darauf hinweisen, dass alle Statusinformationen über unsere Seite, also welche Sammlung, welche Filter wir anwenden, in welchem Ansichtszustand wir uns befinden, wie wir die Produkte sortieren, alles in der URL ist. Das bedeutet, nicht nur, dass wir diese URL kopieren und einfügen können , um genau die gleiche Position zurück zu bekommen, Wir können die Seite aktualisieren und zurück zu genau der gleichen Position. Aber auch, wenn wir JavaScript deaktiviert haben, funktioniert unsere Seite genau auf die gleiche Weise. Ich denke, dass diese Eigenschaft in Shopify-Themes wirklich wichtig ist denn obwohl viele Leute heutzutage nicht ohne JavaScript im Internet surfen, gibt es Situationen, in denen das JavaScript aufgrund eines Fehlers nicht geladen wird. Oder es läuft nicht wegen eines Fehlers, sondern auch für Benutzer mit langsamen, sagen wir mobile Verbindungen, oft interagieren sie mit Ihrer Seite, bevor JavaScript eine Chance hat, einzusteigen. Also, mit dieser Basiserfahrung, um sicherzustellen, dass unsere Seiten schrittweise verbessert werden, wirklich verbessert die Benutzererfahrung und vermeidet Umsatzverluste. Nun, das heißt nicht, dass es keine Möglichkeiten gibt, wie wir JavaScript verwenden können, um die Kundenerfahrung für diejenigen, die es verwenden, besser zu machen. Zum Beispiel müssen wir im Moment auf die Schaltfläche „Aktualisieren“ klicken, nachdem wir unsere Ansicht und unsere Sortieroptionen ausgewählt haben. Lassen Sie uns diese Erfahrung verbessern, indem Sie das Formular automatisch senden, wenn ein Auswahlfeld geändert wird. Um dies zu tun, werden wir einige JavaScript auf der Unterseite unserer theme.liquid hinzufügen. Normalerweise würden Sie dies in eine separate JavaScript-Datei einfügen. Aber um des Streits willen setzen wir das hier rein. Und so hat dieses bisschen JavaScript eine Überprüfung, um sicherzustellen, dass es nur auf Sammlungsseiten ausgeführt wird. Und dann richten wir einen Ereignis-Listener für ein Änderungsereignis jedes Element mit einer Datenaktualisierungssammlung, Datenattribut. Und dann senden wir im Handler für dieses Ereignis einfach das Formular ein, in dem das Element lebt. Lassen Sie uns also sicherstellen, dass unsere ausgewählten Elemente tatsächlich die Datenaktualisierungssammlung, das Datenattribut haben, und sobald wir das speichern und unsere Seite aktualisieren, sollten wir jetzt sehen, dass, wenn wir die Auswahlfelder ändern, und sobald wir das speichern und unsere Seite aktualisieren,sollten wir jetzt sehen, dass, wenn wir die Auswahlfelder ändern, das Formular automatisch absenden und unsere Ansicht ändert sich. Das ist großartig, aber es bedeutet auch, dass wir jetzt diese nutzlose Update-Schaltfläche haben, oder zumindest ist es nutzlos, wenn wir JavaScript aktiviert haben. Was wir also tun werden, ist ein gemeinsames Muster zu verwenden, um diese Schaltfläche zu verbergen, wenn wir JavaScript aktiviert haben, und es nur sichtbar zu machen, wenn wir kein JavaScript zur Verfügung haben und wir tatsächlich das Formular senden mussten. So können Sie hier im Thema Stylesheet sehen, dass wir diese js-hide Klasse haben , die Dinge verbergen wird, wenn wir JavaScript aktiviert haben. Aber dann zeig es, wenn wir es nicht tun. Um sicherzustellen, dass die richtigen Klassen angewendet werden, hatten wir standardmäßig die keine js-Klasse für den Körper, und dann entfernen wir das einfach mit JavaScript. Also, am unteren Rand der Seite, fügen wir einfach ein wenig Code hinzu, um diese Klasse zu deaktivieren, wenn wir tatsächlich JavaScript aktiviert haben. Also, wenn wir das in Aktion betrachten, werden wir speichern, aktualisieren Sie diesen Browser, und wir haben JavaScript aktiviert im Moment und wir werden sehen, dass diese Schaltfläche tatsächlich versteckt ist , aber ich kann immer noch meine Ansicht und meine Sortieroptionen ändern. Das funktioniert gut. Aber dann, wenn ich JavaScript ausschalten, haben wir jetzt diese Schaltfläche, und sind in der Lage, es wie üblich zu verwenden. Also, während wir gerade dabei sind, JavaScript-Funktionalität zu unseren Sammlungsseiten hinzuzufügen , werfen wir einen Blick auf das Hinzufügen von Ajax, so dass Kunden in der Lage sind, sich durch unsere Sammlungsseiten zu bewegen , ohne eine vollständige Seitenaktualisierung durchführen zu müssen. Persönlich finde ich, dass die wahrgenommenen Vorteile von Ajax powered Seiten ein wenig übertrieben. Vor allem, wenn Sie die zusätzliche Komplexität bei der Implementierung berücksichtigen. Aber es kann einige Vorteile geben und zum Glück, in unserem Fall bedeutet die Art und Weise, wie wir unsere Formulare bis heute aufgebaut haben , dass das Hinzufügen von Ajax-Funktionalität tatsächlich ziemlich einfach ist. Unser Ansatz dafür wird also damit beginnen, dem Formular, das wir verwenden, eine ID hinzuzufügen, und das ist, so dass wir in JavaScript darauf verweisen können. Unsere Strategie besteht im Grunde darin, die Einreichungsereignisse auf diesem Formular abzufangen und dieses reguläre Formulareinreichungsereignis in eine Ajax-Anfrage zu verwandeln. Also, das ist, was wir mit diesem JavaScript hier machen und durch es gehen, wir können sehen, wie ich bereits erwähnt habe, wir erfassen das Submit-Ereignis auf diesem Sammlungsformular. Wir verhindern die Standardaktion in diesem Formular, das als normales Formular gesendet werden soll, und dann verwenden wir die Lademethode von jQuery, die eine Bequemlichkeit ist, eine Ajax-Anforderung zu senden, die einige HTML-Inhalte abruft und sie in unserer aktuellen Seite ersetzt. In diesem Fall wird es den Inhalt unserer Seite durch unsere aktualisierte Sammlungsansicht ersetzen , und wir haben auch ein wenig Code hier, der beim erfolgreichen Rendern dieses Inhalts mit gedrückter , um die URL-Leiste unseres Browsers auf dem neuesten Stand zu halten. Also, dieser einfache Ansatz ist alles, was wir brauchen, um Ajax tatsächlich mit unseren Sammlungsseiten zu verwenden. Also, wenn ich die Seite hier aktualisiere und jetzt jederzeit eine Aktion durchführe, die diese Formulare wie das Ändern meiner Ansicht erneut einreicht. Meine Seite wird tatsächlich über Ajax neu geladen. So, wir können überprüfen, dass das tatsächlich geschieht, indem Sie die Chrome-Entwickler-Tools öffnen, Netzwerk-Panel überprüfen und dann werden wir sehen, ob das, wie ich diese Auswahlfelder ändern. Es führt tatsächlich eine einzelne Ajax-Anfrage und kein vollständiges Neuladen der Seite durch. Nun, der kluge unter Ihnen vielleicht bemerkt haben, dass dies zwar für jede Aktion funktioniert, die ein Formular wie das Mutieren der Auswahlfelder aktualisiert auslöst, wie Sammlungslinks, während sie noch arbeiten Desktop ausführen eine vollständige Seitenaktualisierung jedes Mal, wenn wir auf sie klicken. Es gibt also auch eine Lösung dafür, und es ist ziemlich ähnlich wie wir die Formularübermittlung behandelt haben. Sie werden also sehen, dass unser hier verknüpfter Filter bereits ein Datenlink-Sammlungsattribut hat, und so wird unsere Lösung hier darin bestehen, einfach einen Listener zum Click-Ereignis für alles mit einem Datenlink-Sammlungsattribut hinzuzufügen . Verhindern Sie wieder schwierige Aktion, die dem Link folgen und verwenden Sie dann die Lademethode erneut, um das Ziel dieses Links als unsere Seiteninhalt zu laden und wieder Push-Status zu verwenden, um unsere URL aktualisiert zu halten. Also, um einen Blick darauf zu werfen, wie das funktioniert, wieder, wir können das Chrome-Entwickler-Panel öffnen um zu überprüfen, dass wir tatsächlich Ajax-Anfragen machen, und jetzt können wir sagen, dass, wenn wir auf diese Links klicken, sind wir in der Tat Ausführen einer einzigen Ajax-Anforderung anstelle eines vollständigen Seitenneuladens. Natürlich können wir dank der Art und Weise, wie wir dies mit progressiver Verbesserung aufgebaut haben, JavaScript ausschalten und trotzdem eine voll funktionsfähige und sehr, sehr nutzbare Sammlungsseite für unsere Kunden haben. Auch hier war viel los in dieser Lektion. Aber ich möchte wirklich betonen. Machen Sie sich keine Sorgen, wenn Sie einige der technischen Aspekte dort nicht bekommen haben. Sie können immer zum GitHub-Repository wechseln. können Sie sich die Codebeispiele ansehen. Sie sind gut kommentiert, und das sollte es ein wenig leichter zu verstehen machen. Wichtig zu verstehen ist, wie die Shopify-Seiten von einer grundlegenden Ebene zusammengestellt werden und wie wir diese einzelnen Komponenten zusammen verwenden können, und wie wir diese einzelnen Komponenten zusammen verwenden können um eine wirklich funktionale und nutzbare Seite zu erstellen. 6. Hinzufügen von Ajax zu deinem Design: Wenn es richtig gemacht wird, kann das Hinzufügen von Ajax-betriebenen Funktionen zu Ihrem Thema eine wirklich gute Möglichkeit sein , es ein wenig reaktionsschneller und einfacher für Kunden zu verwenden. Und es ist wahrscheinlich etwas, das Sie heutzutage in vielen Themen gesehen haben werden. In dieser Lektion werden wir uns den besten Weg ansehen, um unsere Sammlungsseiten mit Ajax Powered Add to Cart Funktionalität hinzuzufügen. Also, wir sind wieder auf der Produktseite und dieses Mal suchen wir, um unsere Kundenerfahrung ein wenig besser zu machen, indem Ajax-Warenkorb-Funktionalität zu unserer Schaltfläche in den Warenkorb hinzufügen. Ajax-Funktionalität kann unsere Produktseiten ein wenig reaktionsfähiger machen und sie können auch vermeiden, dass unsere Kunden sich wiederholende Aufgaben wie die Neukonfiguration eines Produkts ausführen müssen, wenn sie mehrere Versionen davon bestellen möchten. Wie wir es in unserer vorherigen Lektion mit Sammlungsseiten getan haben, wollen wir diese progressive Verbesserung vornehmen. Lassen Sie uns also einen Blick darauf werfen, was gerade mit unseren Produktseiten passiert. Daher können wir unsere Produktoptionen auswählen, eine benutzerdefinierte Nachricht hinzufügen und dann, wenn wir auf „In den Einkaufswagen“ klicken, stellen wir eine Standard-Post-Anfrage um das Produkt unserem Warenkorb hinzuzufügen, und wir werden auf die Warenkorbseite weitergeleitet. Also, was wir in dieser Lektion betrachten werden, ist, wie Sie diese Interaktion ändern, so dass, wenn wir auf die Schaltfläche „In den Warenkorb“ klicken, wir tatsächlich eine Ajax-Anforderung stellen, um das Produkt mit der Auswahl und den Optionen in den Warenkorb zu legen , ohne den Benutzer von der Produktseite wegzuleiten. Lassen Sie uns also beginnen, indem wir uns Shopifys Dokumentation für die Ajax oder API ansehen , die sie zur Verfügung stellen, um eine Vorstellung davon zu sehen, was damit möglich ist. Also, Sie werden in der Dokumentation sehen, dass sie einige nützliche Informationen darüber haben, aber wir sind vor allem daran interessiert, hier sind diese möglichen Anfragen. So können Sie hier sehen, dass wir in der Lage sind, Informationen über Produkte zu holen, wir sind in der Lage, neue Artikel in den Warenkorb zu legen, Informationen über die Defektions-Informationen über den aktuellen Warenkorb zu erhalten, und wir sind in der Lage, Post-Anfragen zu stellen, um bestehende Artikel in den Wagen. Also, unsere Strategie, diese Interaktion schrittweise zu verbessern, wird darin bestehen, die Formulareinreichung abzufangen , wenn wir auf die „In den Einkaufswagen“ -Seite mit Drae Abfrage klicken und dann statt einer regulären Post Anfrage, werden wir die gleiche nehmen Daten in diesem Formular und stellen Sie eine Ajax-Anfrage, um die Artikel in den Warenkorb zu legen. Lassen Sie uns in unseren Theme-Code eingraben. Wenn wir also unsere Produktvorlage öffnen, werden wir sehen, dass wir unser Formular haben, von dem wir die Einreichung einreichen werden. Es hat eine Vorstellung von Produktform und wir werden das in unserem JavaScript verwenden. Im eigentlichen JavaScript werden wir verwenden, um dies in eine Ajax-Anfrage zu verwandeln, wir werden am Ende des Themas LIQUID hinzufügen, das ist, wo wir den größten Teil des JavaScripts auf dem neuesten Stand gebracht haben. In einem echten Thema, wie ich denke, ich habe bereits erwähnt, möchten wir dies in eine separate JavaScript-Datei hier im Asset-Verzeichnis einfügen. Aber im Moment werden wir nur alles hier behalten , damit es einfacher ist, einen mentalen Griff zu behalten. Also, wenn es um die tatsächlichen JavaScripts geht, werden wir, wie wir erwähnt, werden wir einen Ereignis-Listener zum Submit-Ereignis für dieses Formular hinzufügen und wir werden die Standardaktion verhindern, die darin besteht, dass -Formular wie gewohnt. Die Emulierung des Formulars erfolgt mit der $.post-Methode, unser Endpunkt ist /cart/add.json und wir werden den Datenparameter übergeben, der aus der Serialisierung des Formulars erhalten wird. $ (this) bezieht sich also auf das Formular selbst in diesem Fall. Das sollte also eigentlich alles sein, was wir für die Anfangsteile und die Funktionalität brauchen. Also, wenn ich zurück zu meiner Warenkorbseite gehe und ein paar Auswahlen und Nachrichten zu meinen Produkten mache und auf „In den Einkaufswagen“ klicke, wird es so aussehen, als ob nichts passiert, aber das liegt daran, dass die Formulareinreichung abgefangen wurde. Und wenn ich in meinen Warenkorb gehe, werden Sie sehen, dass dieses Produkt tatsächlich erfolgreich hinzugefügt wurde. Also, wenn wir überprüfen möchten, dass das durch Ajax und nicht durch eine andere Form oder Magie passiert ist, können wir die Chrome-Entwicklertools verwenden, um die Netzwerkanforderungen zu überprüfen, die tatsächlich gestellt werden. Wenn wir also eine weitere Auswahl treffen, die eine Nachricht ausdrückt und dann, wenn wir „In den Einkaufswagen“ drücken, sehen wir die tatsächliche Ajax-Anfrage erscheint und wir konnten die Details davon durch dieses Panel überprüfen, können wir die Formulardaten, die übergeben werden, und wir sehen auch, dass die Antwort, die zurückkommt, eine JSON-Darstellung des gerade hinzugefügten Zeilenelements ist. Natürlich besteht unsere ganze Motivation, Ajax hinzuzufügen , darin, dies für unsere Kunden nutzbarer zu machen. Und was wir tatsächlich getan haben, ist es weniger nutzbar zu machen, weil wir jetzt so ziemlich null Feedback über die Tatsache, dass etwas in den Warenkorb gelegt wird. Werfen wir einen Blick darauf, wie wir das beheben können. Wir werden hier ein ziemlich häufiges Muster verwenden und das ist, um den Text der Schaltfläche „In den Einkaufswagen“ zu ändern und es zu deaktivieren, wenn wir anfangen, unsere Ajax-Anfrage zu machen, und dann, wenn es fertig ist und dann, wenn es fertig ist, werden wir das wieder ändern. Um dies zu tun, werden wir diese Callbacks verwenden, auf die jQuery uns Zugriff gibt. Wir haben es getan, scheitern und immer. Dies sind Teil der jQueries verspricht Schnittstelle. Also, der Callback erledigt, wird ausgeführt, wenn eine Ajax-Anfrage erfolgreich ist. Fail wird ausgeführt und das ist, da, wenn wir eine Fehlerantwort erhalten und immer der Callback dort immer am Ende einer Ajax-Anfrage ausgeführt wird. Also, in unserem Anwendungsfall werden wir immer wollen, um die Schaltfläche „In den Einkaufswagen“ in den ursprünglichen Zustand wiederherzustellen. Also, wir werden das in den immer Callback setzen. Dies wird also unabhängig davon ausgeführt, ob die Anfrage ein Erfolg oder ein Fehler ist. Also, Speichern, dass lassen Sie uns sehen, die Auswirkungen, die das auf unsere Seiten hat. So aktualisieren Sie unsere Seite und richten Sie unsere Produktoptionen ein. Achten Sie nun genau darauf, wenn wir hier auf „In den Einkaufswagen“ klicken und Sie können sehen, dass das Verhalten wie erwartet ist. Dies ist ein guter Anfang, aber wir müssen noch ein bisschen mehr Feedback geben , wenn die Dinge in den Warenkorb legen. So wird zum Beispiel die Warenkorbsumme in der oberen rechten Ecke nicht aktualisiert. Also, wir sind nicht 100% sicher, dass etwas erfolgreich hinzugefügt wurde und es wäre auch schön einen Check-out Link erscheinen zu lassen, sobald wir es in den Warenkorb legen. Also, nur um Benutzer zu beruhigen, dass ihre Änderung registriert wurde und sie zu ermutigen, einen nächsten Schritt zu machen. Erste Bewältigung der Aktualisierung der Warenkorbinformationen in der Nordleiste. Wenn wir erfolgreich etwas in den Warenkorb legen. Also, im fertigen Callback,werden wir tatsächlich eine zweite Ajax-Anfrage an den /cart.json-Endpunkt stellen, der uns eine aktualisierte Version von allem gibt, was werden wir tatsächlich eine zweite Ajax-Anfrage an den /cart.json-Endpunkt stellen , der uns eine aktualisierte Version von allem gibt sich im Moment im Warenkorb befindet. Wenn diese Ajax-Anfrage abgeschlossen ist, werden wir diese Warenkorb-Informationen verwenden, um das nav-bar cart HTML-Element zu aktualisieren , das wir sehen können , ist hier oben in unserer Kopfzeile und wir werden das mit diesem Text, dem Wort Warenkorb und dann eine formatierte Version des Gesamtpreises des Warenkorbs. Das behandelt unser Aktualisierungsproblem. Während wir hier sind, werden wir auch schnell ein wenig Fehlerbehandlung im Fail-Fall hinzufügen . Dies wird also sehr einfach sein, nur eine Warnmeldung mit dem Fehler dieser Rückkehr von Shopify hinzuzufügen . In einem realen Szenario möchten Sie diese ein wenig mehr untersuchen und dem Benutzer eine nützliche Nachricht zukommen lassen. Lassen Sie sie wissen, was schief gelaufen ist. Bei unserer nächsten Aufgabe, die darin besteht, dass dieser Checkout-Link angezeigt wird, wenn wir erfolgreich einen Artikel hinzugefügt haben. Also, wir werden zu diesem Kasse Link als HTML-Element unter unserem „In den Warenkorb“ -Button hinzufügen. Sie können sehen, dass es sich um eine ID des Auscheck-Link handelt. Es zeigt auf die Kasse und wir werden es zunächst mit Stil Anzeige keine versteckt machen . Zurück zu unserem theme.liquid JavaScript und wir werden nur die Logik hier hinzufügen, um diesen Check-out Link sichtbar zu machen nach Abschluss einer erfolgreichen Add-to Cart Operation. Dann sind wir in der Lage zu testen und zu sehen, ob die Dinge ein bisschen besser sind. Also, unsere Seite zu aktualisieren. Dann, wenn wir durch den Prozess der Auswahl unserer Optionen gehen, Hinzufügen einer Nachricht. Wie Sie sehen können, wird sowohl der Warenkorb in der Navigationsleiste aktualisiert und wir haben auch, dass Check-out jetzt Link erscheint. Das ist eine wirklich einfache Möglichkeit, Ihren Produktseiten einen schrittweise verbesserten Ajax-Einkaufswagenhinzuzufügen einen schrittweise verbesserten Ajax-Einkaufswagen , wie wir zuvor in einem realen Szenario erwähnt Sie würden wahrscheinlich Benutzern ein wenig zusätzliches Feedback sowohl in Fehlerszenarien und lassen Sie sie genau wissen, was schief gelaufen ist, wenn etwas schief geht. Aber auch im Erfolgsfall machen Sie es vielleicht ein wenig deutlicher hier, dass etwas erfolgreich zu Ihrem Warenkorb hinzugefügt wurde und immer an die nächsten Schritte denken , die Sie verwenden möchten, ob das ein anderes Produkt hinzufügen, Konfigurieren Sie ein Produkt neu oder starten Sie den Checkout-Prozess. Nachdem wir den Prozess durchlaufen haben zu sehen, wie wir die Ajax-Warenkorb-Funktionalität manuell einrichten würden, werden wir uns jetzt eine Bibliothek ansehen, die die meiste Arbeit für uns erledigt, die Cart.js ist. Jetzt muss ich hier einen kleinen Haftungsausschluss anbieten, dass Cart.js ein Projekt ist, das ich selbst verfasst habe , aber es ist zu 100 Prozent Open Source und kostenlos für alle Theme-Entwickler zu verwenden. Zurück zu unserer Produktseite, die wir auf das Verhalten vor AJAX zurückgesetzt haben. Wir gehen immer noch durch den regulären Beitrag zum Warenkorb Umleitung Flow hier und wir werden einen Blick darauf werfen, wie wir Ajax-Funktionalität mit Cart.js implementieren würden. Der erste Schritt ist es, auf cartjs.org zu gehen und die neueste Version der Bibliothek herunterzuladen. Wir können das als ZIP-Datei machen. Dann, sobald wir das getan haben, wollen wir nur die ZIP-Datei extrahieren und dann die Bibliothek als Javascript-Datei, verkleinerte Javascript-Datei und wir werden es in das Asset-Verzeichnis unseres Themes ablegen. Also, wenn wir nur in unserem Texteditor überprüfen, können wir sehen, dass das quer kopiert wurde. Um tatsächlich mit cartjs in unserem Thema zu beginnen, müssen wir einige Initialisierungs-JavaScript am Ende unserer theme.liquid hinzufügen und wir müssen auch die Bibliothek einschließen. Also werden wir das mit einer Asset-URL und einem Skript-Tag tun und dann rufen wir diese Initialisierungsfunktion auf und übergeben sie den Anfangszustand unseres Einkaufswagens. Von hier aus müssen wir nur ein wenig Markup zu unserem Thema hinzufügen , um anzuzeigen, was wir mit cartjs machen möchten. So können wir ein Attribut zum Senden eines Datenkorbs zu einem Formular hinzufügen und das wird die Formularübermittlungsfunktionalität emulieren, die wir zuvor manuell implementiert haben. Dann können wir auch ein Anzeigeelement mit einem Data-Cart-Render-Attribut umschließen. Wir werden nur die Update-Funktion emulieren, die wir in der Navigationsleiste hatten. Mit der Hinzufügung von nur diesen beiden Attributen haben wir tatsächlich einen Großteil der Funktionalität repliziert, die wir gerade manuell erstellen. So können wir hier sehen, das Formular Einreichung erfasst wird und wir aktualisieren automatisch den Warenkorb in der Navigationsleiste. Das war eine ziemlich Wirbelwind Tour von Cartjs. Es gibt ein bisschen mehr in der Bibliothek als das , aber dafür haben wir wirklich Zeit in dieser Lektion. Also, wir werden es dort lassen und wenn Sie daran interessiert sind, können Sie es auf der cartjs-Homepage überprüfen . Das war's für diese Lektion. Hoffe, Sie haben ein gutes Verständnis davon, wie Sie beginnen, diese Ajax-Techniken auf Ihr Thema anzuwenden und auch, dass Sie verstehen wichtig es ist, diesen progressiven Verbesserungsansatz zu nehmen, wo wir die grundlegende Funktionalität aufbauen zuerst und dann später die Ajax oben drauf. 7. Best Practices: Jetzt ist es an der Zeit, über das Lieblingsthema aller zu sprechen, Best Practices. Ich weiß, dass es nicht die sexiesten Themen ist, aber es kann wirklich wichtig sein, Ihre Themen so zu erstellen , dass es für sich selbst und andere leicht zu pflegen ist. Wenn ein anderer Entwickler später auf Ihre Projekte kommt, möchte er eine Integration mit Ihrem Thema erstellen oder sogar, wenn es sich sechs Monate später um Ihr Thema handelt, und Sie haben keine Erinnerung an was Ihr Theme getan hat oder was Ihr Code tat, macht das Befolgen dieser Best Practices die Dinge viel einfacher zu holen und los zu gehen. Lassen Sie uns beginnen, indem wir uns die Flüssigkeit ansehen, die eines der einzigartigsten und definierendsten Funktionen von Shopify ist. In diesem Beispiel hat das Thema, mit dem wir arbeiten eine Produktseite, die flüssig geschrieben ist, wie alle unsere Vorlagen sind. Unten im unteren Teil dieser Produktseite haben wir einen Bereich mit verwandten Produkten, eine Reihe von Flüssigkeit verwendet, um eine Liste verwandter Produkte zu generieren. Eine nützliche Sache zu tun, wenn wir viele große komplizierte Flüssigkeit haben, ist es, sie in ein separates Snippet zu extrahieren. Dies hält es ein wenig überschaubarer für uns und es ermöglicht uns auch, diesen Code in anderen Abschnitten wiederzuverwenden. Vielleicht möchten wir dieses flüssige Snippet anderswo wiederverwenden. Hier haben wir es aus unserer Produktvorlage ausgeschnitten, und wir fügen dieses Snippet ein, und wir werden es wieder in das zugehörige Produkt-Snippet ablegen. Nun, wenn es um den tatsächlichen flüssigen Code selbst geht, eine Sache, die ich sehe, dass die Leute einfach nicht mit Flüssigkeit zu tun viel Zeit ist, Kommentare hinzuzufügen. Ich kann wirklich nicht genug betonen, wie nützlich das Hinzufügen von Kommentaren in Flüssigkeit ist, besonders wenn Sie komplizierte Dinge vor sich haben. Es ist nicht nur nützlich für zukünftige Entwickler, die ein Projekt nach Ihnen abholen könnten sondern auch für Ihr zukünftiges Selbst, denn in zwei Monaten, wenn Sie zurückkommen und sich den flüssigen Code ansehen, den Sie geschrieben haben, werden Sie sich nicht an die intime Details davon. Zwei, letzte Schnellpunkte. Es ist wirklich nützlich, um sicherzustellen, dass Ihr Code gut formatiert ist, so eingerückt, leicht wieder zu lesen, aus dem gleichen Grund wie das Hinzufügen von Kommentaren ist wirklich nützlich. Nur eine letzte Notiz und das ist auf Verschachtelung von Snippets. Also, wie Sie am Ende dieses Snippets sehen können, fügen wir tatsächlich ein anderes Snippet ein, das Produkt-Snippet. Ich würde sagen, dass zwei Ebenen ungefähr das Maximum sind, das Sie mit einem Shopify-Thema und verschachtelten Snippets gehen möchten. Mehr als das und es wird ein wenig schwierig, geistig darüber nachzudenken, was in Ihrem Code vor sich geht, und es wird ein bisschen zu einem kniffligen Wartungsproblem. Lassen Sie uns über Stylesheets sprechen. Viele der Best Practices für Shopify Stylesheets werden genau die gleichen sein, wie sie in der regulären Web-Entwicklung wären. Also, Hinzufügen von Kommentaren immer nützlich sowohl für sich selbst als auch für andere zukünftige Entwickler. Etwas, das für Shopify jedoch einzigartig ist, ist seine Unterstützung für den Sass-Präprozessor. Es lohnt sich also, mit einigen der Tricks und Methoden vertraut zu sein , die Sie in dieser Sprache verwenden können. So zum Beispiel die @extend -Direktive, wie wir hier sehen. Eine andere Sache, die für die Shopify-Kontexte einzigartig ist, ist, dass wir flüssig verwenden können, um Werte aus unseren Themeneinstellungen innerhalb unserer Stylesheet-Dateien auszugeben, wie wir es hier tun. Allerdings können wir hier auf ein kleines Problem mit der Flüssigkeit stoßen weil die flüssigen Tags selbst nicht wirklich gültig sind Sass. Dies kann also Probleme verursachen, wenn wir externe Vorverarbeitung verwenden oder wenn wir nur die Syntaxvalidierung verwenden. Was wir also tun können, ist, was ich hier mache und das ist, eine String-Escaping-Funktion hinzuzufügen, die gültig ist Sass, aber auch immer noch Ihre flüssigen Template-Variablen in Ihrer Stylesheet-Datei rendern;. Das sollte also die Probleme vermeiden, die ich gerade identifiziert habe. Wenden wir uns jetzt zu JavaScript, das eigentlich einer der Bereiche ist, mit denen ich die meisten Probleme in Bezug auf Wartbarkeit und Leistung in Shopify-Themes sehe . Wenn Sie sich also daran erinnern, wie wir das meiste JavaScript in früheren Lektionen geschrieben haben, legen wir das meiste davon direkt in den Boden unseres theme.liquid. Das ist nicht wirklich die beste Vorgehensweise. Also, was Sie wirklich tun möchten, ist so viel von diesem JavaScript wie möglich zu extrahieren und es in separate JavaScript-Dateien in Ihrem Asset-Verzeichnis zu platzieren. Dies ist besser für die Wartbarkeit und es bedeutet auch, dass Browser in der Lage sind, Ihr JavaScript zwischenzuspeichern , anstatt es bei jedem Laden der Seite laden zu müssen. Es bedeutet auch, dass Ihre JavaScript-Dateien für die Vorverarbeitung verfügbar sind Sie sollten sie möglicherweise minimieren oder verketten, bevor Sie sie in die Produktion liefern. Nun ist der Nachteil, Ihr JavaScript in Asset-Dateien zu extrahieren, dass Sie nicht mehr in der Lage sind , auf flüssigen Code zugreifen, der Ihnen aus Ihren Theme-Vorlagen zur Verfügung steht. Der beste Weg, den ich um dieses Problem gefunden habe, besteht darin, Initialisierungsfunktionen in Ihrem JavaScript zu erstellen und Ihre flüssigen Objekte in Konfigurationen aus Ihren Vorlagendateien zu übergeben . Um zu sehen, wie wir das hier tun könnten, erstellen wir ein Setup einer Produktseiten-Initialisierungsfunktion, die ein JSON-Objekt eines Produkts erwartet , das wir nicht mehr aus Flüssigkeit in dieser JavaScript-Datei rendern können , und dann werden wir erledigen Sie einfach ein wenig Code-Cleanup, um dies mit unserer neuen Initialisierungsfunktion funktionieren zu lassen. Wir können hier den flüssigen Code sehen, den wir verwendet haben, den wir nicht mehr verwenden können, also übergeben wir einfach die Produktvariable dort hinein. Wir werden nur die auf diesem Code ein wenig bereinigen, damit es ein bisschen lesbarer ist. Von hier aus besteht die Aufgabe einfach darin , diese Produktvariable von der Themen-Flüssigkeit an diese Setup-Funktion übergeben zu können. So können wir das tun, indem wir zuerst sicherstellen, wir unsere neue JavaScript-Datei, die wir gerade erstellt haben, aufgenommen haben. Sobald wir das getan haben, können wir einfach diese eine Zeile JavaScript hier in jetzt flüssigen Vorlagen verwenden , um dieses flüssige Objekt an unsere Initialisierungsfunktion zu übergeben. Leider haben wir in diesem Kurs nicht die Zeit, die wir brauchen, um wirklich tief in das einzugehen, was Best-Practice-JavaScript für ein Shopify-Theme macht. Aber ich denke, es gibt drei wichtige Dinge, die Sie darüber nachdenken können, die Ihnen helfen, JavaScript zu schreiben , das einfach zu pflegen und sehr professionell bekannt ist. Die erste davon ist, Ihr JavaScript defensiv zu schreiben. Was ich damit meine, ist, es in einer Weise zu schreiben, die keine Annahmen über die Seite macht, auf die sie geladen wird. Nehmen Sie also nicht an, dass ein DOM-Element auf der Seite vorhanden ist , da Ihr Skript möglicherweise auf der Produktseite oder aufder Sammlungsseite oderauf einer Indexseite geladen der Sammlungsseite oder wird, und Sie haben möglicherweise nicht unbedingt die Kontrolle darüber . Der andere Aspekt des Schreibens defensiver JavaScript besteht darin, sicherzustellen, dass Ihr Skript gut mit anderen Dingen von Drittanbietern spielt , die möglicherweise auf der Seite installiert werden. Wenn etwas mit einem anderen Skript schief geht, dann können Sie hoffentlich das umgehen und Ihr JavaScript auf eine Weise schreiben, die nicht davon abhängt, dass andere Leute 100 Prozent der Zeit richtig arbeiten , weil es einfach nicht passieren. Das zweite, was ich denke, ist wirklich wichtig Ihr JavaScript modular zu schreiben. Sie Ihr JavaScript also in modulare Komponenten auf , die ihre eigenen individuellen Verantwortungsbereiche haben. Auf diese Weise hängen sie nicht voneinander ab, es ist viel einfacher zu pflegen, es ist viel einfacher für andere Entwickler zu kommen, zu verstehen, was vor sich geht, darüber nachzudenken und diese Module dann weiter zu entwickeln. Die dritte Sache, über die ich in Ihrem JavaScript sprechen wollte , ist sicherzustellen, dass es ereignisgesteuert geschrieben ist. Was ich damit meine, ist, dass, wenn Sie zum Beispiel Variantenänderungen auf einer Produktseite sind , anstatt eine lange Funktion zu haben, die ein Rezept für all die verschiedenen Dinge hat , die auf der Seite aktualisiert werden sollen, stattdessen ein variantengeändertes Ereignis auslösen und dann können Sie alle Ihre anderen Komponenten in diese Ereignisse einbinden und ihren eigenen Verantwortungsbereich unabhängig aktualisieren. So können Sie beispielsweise ein aktualisiertes Variantenereignis auslösen, und Sie haben möglicherweise eine Komponente, die den Preis des Produkts aktualisiert, eine andere, die das angezeigte Bild des Produkts aktualisiert. Auf diese Weise halten Sie die Dinge sehr getrennt als ähnliche Vorteile, wenn Sie Ihr JavaScript in Module aufteilen. Dieser letztere Punkt, dieses Ereignis in JavaScript, wird wirklich wichtig, wenn Sie anfangen, wirklich komplexe Themen zu bekommen , die sich mit Dingen wie verschiedenen Währungen, verschiedenen Sprachen, verschiedenen Gebietsschemas, da Sie eine ganze Reihe verschiedener Eingaben haben können und es viel einfacher macht, wenn Sie sich nur darum kümmern müssen, einzelne Komponenten auf einer Seite zu aktualisieren, können Sie viel einfacher darüber nachdenken. Ein weiteres Thema, das wir keine Zeit haben, ausführlich zu behandeln, ist die Themen-Performance. Das ist eine Schande, weil ich denke, dass Leistung ein Thema ist , das wirklich nicht genug Prominenz bekommt , wenn wir über Shopify-Themen sprechen. Ja, ich erkannte die Ironie, die ich sage, dass wir nicht genug Zeit haben, darüber zu reden , wenn ich denke, es ist eine Schande, dass wir nicht genug darüber reden. Tatsache ist, dass sich die Leistung wirklich auf Ihre Konversionsraten auswirkt. Also, Google hat eine Studie durchgeführt und eine Erhöhung von einer Sekunde in Ihrer Seite Ladezeiten kann zu bis zu sieben Prozent Rückgang der Konvertierung führen. Es ist also etwas wirklich Wichtiges. Dann stellt sich die Frage, was können wir als Theme-Entwickler dagegen tun? Das erste, was ich denke, das ist wirklich wichtig zu haben, ist eine Möglichkeit, Ihre Theme-Leistung zu messen , so dass Sie eine Vorstellung davon haben , ob etwas, was Sie tun, tatsächlich einen Unterschied machen. Es gibt zwei Werkzeuge, von denen ich denke, dass sie wirklich großartig sind. Die erste ist Google PageSpeed Insights. Das ist ein wirklich einfaches Tool, das Google Ihnen gibt. Sie können eine URL anschließen, Sie erhalten eine Aufschlüsselung darüber, wo die großen Ticket-Performance-Elemente oder große Ticketprobleme für Sie sind. Das zweite Tool, das wirklich großartig ist, ist WebPageTest.org. Es geht in viel mehr Tiefe. Sie erhalten Wasserfalldiagramme, es gibt Ihnen eine Aufschlüsselung aller verschiedenen einzelnen Komponenten auf Ihrer Seite, und es hat auch dieses Ding genannt Geschwindigkeitsindex. Der Geschwindigkeitsindex ist ein Maß dafür, wie schnell eine Seite für einen Kunden nutzbar wird , anstatt die Zeit, die für das Laden der gesamten Seite benötigt wird, und das ist in der Regel eine wichtigere Sache, denn das, was Kunden wirklich wichtig ist, ist, wie schnell sind sie in der Lage, mit Ihrer Seite zu interagieren, anstatt wenn das allerletzte JavaScript-Widget geladen wird. Nun, in Bezug auf das, was Sie tatsächlich tun können, um Ihre Theme-Leistung zu verbessern, gibt es ein paar große Punkte, die ich zuerst angehen würde. Der erste von ihnen ist Top geladen JavaScript. Also, viel Zeit, wenn Sie sich Themen ansehen, laden sie viele Bibliotheken, einschließlich jQuery in den Kopf des Themas. Verschieben dieser Bibliotheken von hier bis DasVerschieben dieser Bibliotheken von hier bisganz unten im Hauptteil der Seite kann einen großen Einfluss auf die Ladezeiten haben , da der Browser nicht Parse herunterladen und all dieses JavaScript ausführen muss , bevor es überhaupt anfängt, den Inhalt oben auf der Seite. Ein weiterer großer Performance-Killer sind nicht optimierte Bilder. Wenn Sie also JPEGS oder GIFS oder PNGs in Ihrem Theme haben, die nicht richtig optimiert wurden, können Sie viele unnützliche Bisse über den Draht senden. Sie können Tools wie ImageOptim oder ImageAlpha verwenden , um diese Bilder zu optimieren, bevor sie zu Ihrem Thema gehen, und Sie können diese auch in einem automatisierten Designentwicklungsprozess bündeln , wie wir später sehen werden. Eine andere Sache, auf die Sie achten sollten, ist sicherzustellen, dass Sie das richtige Bild auf die richtige Art von Geräten bereitstellen. Es hat also keinen Sinn, ein 3X Netzhautbild auf ein Mobiltelefon zu laden , das diese Pixel nicht anzeigen kann, und ebenso hat es keinen Sinn, ein hochauflösendes Bild an ein Desktop-Gerät zu senden, das keine hohe Auflösungs-Anzeige. Es gibt also ein paar Dinge, die Sie tun können, um sicherzustellen , dass Sie dort das Richtige tun. Sie können JavaScript-Bibliotheken verwenden, um sicherzustellen, dass die richtige Art von Bild ausgewählt ist, und für neuere Browser, für die dies am besten geeignet ist, können Sie das neue Quellsatzattribut für Bilder verwenden. Schließlich, und das ist wirklich das härteste, was mit Ihrem Thema zu tun, sondern auch die nützlichsten, und das ist nur, um Dinge zu entfernen. Also, wenn es Komponenten auf der Seite gibt, die wirklich langsam zu laden sind oder viel Download oder Bandbreite in Anspruch nehmen, dann überlegen Sie, ob Sie sie durch etwas ersetzen können, das ein bisschen geringeres Gewicht ist. Ein großartiges Beispiel dafür, dass ich die ganze Zeit sage, sind Karussells. So sind Karussells aus Usability-Perspektive schrecklich. Benutzer neigen einfach nicht dazu, zur zweiten oder dritten Folie zu wechseln, oder sie werden von ihnen frustriert, wenn sie zum ersten Element auf der Folie gehen möchten, und es gleitet darüber hinaus und dann wollen sie versuchen, wieder darauf zu kommen. Also, Karussells sind nur schlechte Benutzerfreundlichkeit, aber sie laden auch mehr Bilder, als Sie tatsächlich benötigen. So das Ersetzen eines JavaScript-Karussell durch ein einzelnes Bild kann eine gute Möglichkeit sein, sowohl die Benutzerfreundlichkeit des Themas zu verbessern , sondern auch drastisch den Betrag zu reduzieren, der für Ihr Thema in erster Linie heruntergeladen werden muss. Die sind meine Top-Tipps für die Leistung und stellen sicher, dass Ihre Designs ein bisschen schneller geladen werden. Wenn Sie wirklich an diesem Thema interessiert sind, habe ich einiges darüber auf meinem Blog, gavinballard.com, geschrieben , wo ich speziell in die Anwendungsfälle rund um Shopify-Themen und Leistungsoptimierung eintauche . 8. Automatisierung deines Arbeitsablaufs: In dieser Lektion werden wir über die Workflow-Automatisierung sprechen. Also, der Prozess, sich wiederholende Aufgaben zu übernehmen und sie zu automatisieren. Wir erhalten eine Menge Vorteile daraus. Das offensichtlichste ist, dass wir uns viel Zeit sparen. Wir müssen also nicht immer wieder denselben manuellen Schritt ausführen. Aber es gibt auch noch ein paar andere. Wir erhalten mehr Flexibilität, wie wir unsere Projekte strukturieren können. Anstatt Dinge zu packen, wie Shopify das endgültige Thema erwartet, können wir Dinge so strukturieren, dass es einfacher ist zu pflegen, unsere JavaScript-Dateien zum Beispiel aufzuteilen und sie zusammen zu kompilieren. Außerdem machen wir unseren Bereitstellungsprozess viel zuverlässiger, da er automatisiert ist, müssen wir uns keine Gedanken darüber machen, einen Schritt zu vergessen, wenn wir die Dinge manuell erledigen. Dann ist der letzte Vorteil, den wir daraus erhalten, dass wir eine Form der Dokumentation unseres Bereitstellungsprozesses haben. Also, bevor wir zum Beispiel keine Möglichkeit hatten, unseren Bereitstellungsprozess an einen anderen Entwickler zu kommunizieren. Es könnte gerade in einem Google-Doc niedergeschrieben worden sein oder wir versuchen nur, es zu merken. Durch die Automatisierung des Prozesses haben wir eine Form der Dokumentation dieses Prozesses im Code selbst. In dieser Lektion werden wir uns ein spezifisches Werkzeug für die Workflow-Automatisierung mit dem Namen Grunt ansehen . Grunt basiert auf Node.js, es ist ein ziemlich beliebtes und gemeinsames Framework und ich mag es, weil es ein wirklich großes Ökosystem von Plugins hat. Also, wenn es irgendeine Art von Aufgaben gibt, die Sie mit Ihrem Shopify-Theme tun möchten, ob es Dateien verketten, Stylesheets minimieren oder Bilder optimieren, gibt es wahrscheinlich bereits ein Plugin für Grunt, das das tut. Wir werden Grunt in dieser Lektion nehmen und sehen, wie wir es auf den Prozess der Erstellung von Shopify-Themes anwenden können . Das erste, was zu überprüfen, ist, dass wir sowohl Knoten und Knoten Paketmanager auf unseren Maschinen installiert haben. Wenn Sie dieses Setup nicht haben, können Sie auf dem Knoten und der npm-Website nachschlagen, wie Sie das sortieren können. Sobald wir das getan haben, können wir diesen npm install Befehl ausführen , um die Grunt Client-Bibliothek zu installieren. Das wird uns Zugriff auf die Kommandozeilentools mit Grunt geben. Einmal, dies eingerichtet ist, sind wir in unserem Themenverzeichnis. Das erste, was wir tun möchten, ist npm auszuführen, in dem eine package.json-Datei erstellt wird. Wenn Sie mit Knotenprojekten vertraut sind, haben Sie dies schon einmal gesehen. Wenn nicht, ist es im Grunde nur eine Möglichkeit, alle Abhängigkeiten für unser bestimmtes Projekt aufzulisten . Also, es ist, wo wir in all unsere Grunt Plug-Ins und Dinge wie diese ziehen werden. Also bewege ich mich ziemlich schnell durch die Einrichtungsschritte. Wenn Sie nicht zu 100 Prozent mitverfolgen, sollten Sie nicht zu viel betonen. Mehr dazu können Sie immer auf der Grunt Website und auch in den Kursunterlagen nachlesen . Also, in diesem Stadium mit unserem Demo-Thema, haben wir unsere Abhängigkeiten für Grunt installiert. Wir haben Grunt und ein package.json eingerichtet. Wir müssen nur nach etwas suchen, das damit zu tun hat. Unser Demonstrationsthema für diese Lektion ist das LaunchPad-Thema, das standardmäßig in allen Shopify-Stores enthalten ist. Wenn wir in das Asset-Verzeichnis für dieses Thema eintauchen, können wir sehen, dass es eine ganze Menge von jquery-Plugins gibt, die dieses Thema standardmäßig zieht und das ist eine ziemlich häufige Sache, in vielen Shopify-Themen zu sehen. Aber das Problem dabei ist, dass wir alle diese JavaScript-Dateien einzeln laden müssen, so dass wir zusätzliche HTTP-Anfragen machen. Also, was wir in dieser Lektion betrachten werden, ist, wie wir die Workflow-Automatisierung verwenden können, um diese Dateien in der Entwicklung getrennt zu halten, um die Verwaltung zu erleichtern. Aber bringen Sie sie alle zusammen, verketten Sie sie alle zusammen, so dass wir nur eine tatsächliche Datei an den Browser liefern müssen. Glücklicherweise hat Grunt für uns ein Plugin, das macht, was wir wollen, ziemlich richtig aus der Fledermaus. Es nennt sich Grunt-contrib-concat. Also, wir installieren Grunt Plugins mit dem npm install Befehl. Wenn ich dort save-dev am Ende als Argument hätte, wird das sicherstellen, dass es zu unserer package.json hinzugefügt wird, so dass unsere Abhängigkeiten klar aufgelistet sind. Also, wir müssen nur eine Weile warten, bis diese Installation stattfindet. Wenn wir dann tatsächlich den Inhalt unserer package.json überprüfen, werden wir sehen, dass dieses neue Plugin in unsere Abhängigkeiten Liste aufgenommen wurde. Nun, wenn wir den Inhalt unseres Theme-Ordners überprüfen, können wir sehen, dass die Installation von npm und node in Grunt dieses node_modules Verzeichnis zu unserem Thema hinzugefügt hat . Wenn wir einen Git-Status ausführen, werden wir sehen, dass git es als ein Verzeichnis aufnimmt , das wir vielleicht zu unserem Projekt hinzufügen möchten. Wir brauchen den Knotenmodulordner in unserem Projekt nicht wirklich, da es nur die Abhängigkeiten enthält, die in package.json aufgelistet sind. Es ist also kein wirklich relevanter Code für unsere Projekte, also sollten wir das zu unserem gitignore hinzufügen. Also, dass wir nicht versehentlich Sachen begehen, die wir nicht wirklich sein müssen. Wir wollen jedoch sicherstellen, dass die Änderungen am gitignore und an package.json selbst in unserem gitrepository dokumentiert sind. Also, wir werden das jetzt tun. Jetzt haben wir alle Komponenten für die Ausführung von Grunt-Aufgaben zusammen. Aber wir brauchen immer noch eine Möglichkeit zu definieren, was diese eigentlichen Aufgaben sind und wie sie mit den Dateien in unserem Thema funktionieren sollen. Wir machen das mit einer Grunt-Datei. Eine Grunt-Datei ist eine JavaScript-Datei, die sich in der obersten Ebene unseres Theme-Verzeichnisses befindet und dort definieren wir alle automatisierten Aufgaben, die wir gerne auf unserem Thema ausführen können. Also, wenn wir einen Blick auf dieses Beispiel Grunt-Datei nehmen, können wir sehen, dass es eine JavaScript-Datei ist. Also, es verwendet nur reguläre JavaScript-Syntax. Also, es hat eine Exportlinie an der Spitze und dann definieren wir unsere Aufgaben innerhalb dieses Grunt.initConfig-Aufrufs. Also, Sie können hier sehen, ich übergebe einen Hash, der ein paar Aufgaben einschließlich dieser Concat-Aufgabe definiert. Ich gebe dieser Aufgabe einen Namen und dann definiere ich die Quelldateien, die ich miteinander verketten möchte, und die Zieldatei, wo ich möchte, dass alles enden soll. Hier unten unten habe ich zwei Zeilen. Einer, um das Concat-Plugin zu laden, und dann registriert die zweite einfach die Concat-Aufgabe, die wir als Standardaufgabe definiert haben. Also, wie funktioniert das eigentlich, wenn wir diese Aufgaben ausführen wollen? Wenn wir zurück zur Kommandozeile springen, können wir grunt concat ausführen. Wie Sie sehen können, wird es uns sagen, dass es diese Aufgabe ausgeführt und dass es diese jquery Plugins-Datei erstellt hat. Wenn wir also einen Blick darauf werfen wollen, wie das aussieht, können wir sehen, dass die Plugins-Datei erstellt wurde und wie erwartet, es ist eine Verkettung dieser anderen jquery-Plugin-Dateien, die wir definiert haben. Alles, was wir noch tun müssen, ist, diese einzelnen Importe dieser einzelnen jquery-Plugins durch den einzelnen Import des einzelnen Aufrufs eines Skript-Tags für die verkettete Datei zusammen zu ersetzen . Sobald wir das getan haben, können wir diese bestehenden Anrufe einfach entfernen. Was wir gerade getan haben, war ein wirklich einfacher Anwendungsfall für Grunt, der nur mit Dateien verkettet wurde. Aber wir hätten viel mehr tun können, wir könnten diese Dateien vermindern, bevor sie in die Produktion geschoben wurden. Wir könnten einige Syntaxüberprüfungen für das JavaScript durchführen, um sicherzustellen, dass alles in Ordnung und fehlerfrei war, bevor wir in die Produktion gehen. Wir könnten Bilder optimieren und darüber hinaus könnten wir das auf eine andere Weise tun, je nachdem, in welcher Umgebung wir uns befanden. Also, ob wir in der Entwicklung oder in der Produktion waren. Aber natürlich ist Grunt nicht das einzige Werkzeug, das wir durch diese Art von Sache verwenden können. Es gibt andere Tools, Dinge wie Gulp oder CodeKit, die effektiv den gleichen Prozess ausführen. Aber die eigentliche Wahl des Tools, das Sie verwenden, ist hier nicht wirklich das Wichtigste. Es ist nur, dass Sie eine Form der Workflow-Automatisierung haben, um alle Vorteile zu erhalten, die wir zu Beginn der Lektion aufgeführt haben. 9. Bereitstellung von Shopify-Designs: Wie in der vorherigen Lektion es in dieser letzten Lektion gehtes in dieser letzten Lektionum unseren Bereitstellungsprozess. Insbesondere werden wir über die Bereitstellung sprechen, wie wir unseren Code von unseren Entwicklungsmaschinen in die Produktion bringen, in Shopify in einem professionelle und effiziente Art und Weise. Beginnen wir damit, einen Überblick über die Bereitstellungsmethoden zu erhalten und wie wir die Dinge bisher gemacht haben. Als wir das Theme-Juwel in den früheren Lektionen dieses Kurses eingerichtet haben, haben wir es verwendet, um im Wesentlichen direkt in unserem Shopify-Shop auf unserem Live-Thema bereitzustellen. Dies funktioniert gut für die Entwicklung, aber es gibt ein paar Probleme, wenn dies zu einem Live-Produktionsgeschäft wird. Die erste ist, dass Ihre Entwickler Änderungen direkt in die Produktion schieben , ohne echte vorbeugende Maßnahmen, um Unfälle zu vermeiden. Sie haben keine Möglichkeit, neue Funktionen zu testen. Sie haben auch Schwierigkeiten zu wissen, in welcher Art von Zustand sich Ihr Live-Design auf Ihrer Produktionsseite befindet , und Sie wissen nicht wirklich, welche Version des Codes ausgeführt wird, und die Verwendung dieser Art von Methode macht es auch wirklich schwierig, arbeiten mit anderen Personen an Ihrem Shopify-Theme zusammen, weil es für mehrere Entwickler sehr einfach ist, sich gegenseitig Änderungen zu überschreiben, und es ist sehr schwierig, in einen früheren Zustand zurückzusetzen, wenn etwas schief geht. Eine Möglichkeit, einige dieser Probleme zu lösen , besteht darin, zwei Themen im selben Store laufen zu lassen, eine Live-Version und eine Entwicklungsversion. Daher verwenden wir immer noch das Theme-Gem, um Änderungen direkt am Entwicklungsthema zu aktualisieren , während wir uns entwickeln Sobald wir dann mit den vorgenommenen Änderungen zufrieden sind, konnten wir diese Änderungen für das Live-Design bereitstellen. Eine Möglichkeit, dies zu tun, besteht darin, die neueste Version unseres Entwicklungsthemas zu duplizieren und als Live-Theme im Shopify Store zu veröffentlichen und dies über den Shopify-Admin zu tun. Aber es gibt ein paar Probleme damit. Erstens ist es immer noch ein sehr manueller Prozess, also gibt es Raum für menschliches Versagen. Es ist auch sehr schwierig, immer noch zu wissen, in welchem Zustand sich unser Live-Store befindet Daher sind wir nicht wirklich sicher, welche der neuesten Entwicklungsversionen veröffentlicht wurden , und es behebt unsere Probleme mit der Zusammenarbeit nicht wirklich. Stellen Sie sich also vor, der bessere Ansatz besteht darin, weiterhin das Theme-Juwel zu verwenden, um direkt in den Entwicklungsspeicher hochzuladen, aber dann auch das Theme-Juwel zu verwenden, um das Live-Thema bereitzustellen, sobald wir mit dem Zustand des Themas auf unserer lokalen Entwicklungsmaschine. Diese Art vermeidet ein wenig das Drehen mit dem Shopify-Admin-Bereitstellungsprozess. Aber wieder, wir haben immer noch diese Probleme, wo wir immer noch einen manuellen Prozess verwenden und wir haben immer noch Probleme mit der Zusammenarbeit, wie wo das Hochladen unseres Themas direkt von einem Entwickler Maschine in den Live-Store. Ein viel besserer Ansatz, den wir verwenden können, ist, weiterhin das Theme-Juwel zu verwenden, um in den Entwicklungsspeicher hochzuladen, da dies wirklich der sofortigste Weg für uns ist , Feedback zur Entwicklung zu erhalten, während wir es tun. Aber dann, um das Konzept eines Drittanbieter-Repositorys einzuführen. Dies wäre also ein Code-Repository-Dienst, also etwas wie GitHub oder Bitbucket oder GitLab oder Ihr eigener intern gehosteter Git-Server. Sobald wir mit den Änderungen zufrieden sind, die wir lokal mit unserem Thema vorgenommen haben, können wir einfach einen Git-Push zu diesem Repository machen. Dann können wir einen Bereitstellungsdienst verwenden, um die neueste Version unseres Theme-Codes zu verwenden und ihn zum Live-Thema in unserem Shopify Store zu schieben. Das Einbringen dieses Konzepts eines Drittanbieter-Repositorys zwischen den Entwicklern und der Produktionsumgebung bringt uns viele Vorteile. So erhalten wir sofort alle Vorteile der Zusammenarbeit, die die Verwendung eines zentralen Git-Repositorys bietet, so dass Dinge wie die Konfliktlösung für uns behandelt werden. Wir können alle Mechanismen verwenden, die bestimmte Git Hosting-Dienst so zum Beispiel hat. Pull-Anfragen, aufkommende Pool-Anfragen und wirft Probleme und solche Dinge auf. Wir trennen Entwickler von der direkten Bereitstellung direkt in der Produktionsumgebung, wodurch das Risiko von Fehlern minimiert Dadurch wird der Service-Schritt automatisch von unserem -Code-Repository auf die Live-Site. Wir öffnen das Tor für Dinge wie automatisierte Tests während dieser Phase und nur für die Bereitstellung, wenn alle diese Tests bestanden haben. Also, realistisch, würden wir wahrscheinlich drei oder mehr Themen in unserem Shopify Store haben. Also, auch ein Staging-Theme und dann ein Dev-Theme für jeden Entwickler sind nicht gleich, und dann würde unser Bereitstellungsdienst automatisch die neueste Version unseres Codes für das Staging-Theme bereitstellen , wo es getestet werden kann und dann einmal Es wurde ein QA-Prozess bestanden, wir können eine manuelle Bereitstellung durch diesen Bereitstellungsservice auslösen, um das Live-Thema, das Kunden sagen. Um einen letzten Schritt in einem realistischen Szenario weiter zu gehen. Weil es schlecht ist, dass Ihre Produktionswebsite im selben Shopify-Store läuft wie Ihre Staging- und Entwicklungsthemen, da Sie Daten wie Bestellungen und Kunden nicht trennen können. Was Sie tatsächlich tun möchten, sind zwei separate Shopify-Stores auszuführen , sodass Ihr Bereitstellungsdienst immer noch automatisch fürdas Stagingdesign in IhremEntwicklungsspeicher bereitgestellt werden kann das Stagingdesign in Ihrem . Wenn Sie diese manuelle Bereitstellung auslösen, das geht auf das Live-Thema im Produktionsgeschäft. Es gibt eine ganze Reihe von Diensten, mit denen Sie Code aus einem Git-Repository in ein Shopify-Theme bereitstellen können, und natürlich, wenn Sie einige Back-End-Systementwicklungsshops haben , können Sie immer Ihre eigenen rollen. Heute werden wir uns ein bestimmtes Tool anschauen und es ist das, das ich gerne benutze, es heißt DeployBot. Das finden Sie unter deploybot.com. Der Grund, warum ich es für Shopify-Theme-Bereitstellung mag , ist , dass es native integrierte Unterstützung für Shopify-Themes hat. Daher ist es wirklich einfach, einsatzbereit zu sein und es hat auch Unterstützung für einige erweiterte Funktionen wie Ausführen eines Build-Skripts als Teil des Bereitstellungsprozesses. Mal sehen, wie wir über die Bereitstellung eines Themas mit DeployBot gehen können. Also, wir sind wieder auf unserem Demo-Thema und wenn wir in unser Foto springen können wir sehen, dass ich ein Config Gambles haben. Also, ich habe das Thema GM-Setup zum Hochladen den Laden und ich habe dieses Thema auch unter Git-Revisionskontrolle platziert. Als ersten Schritt für dieses Beispiel habe ich dieses Thema auch auf GitHub übertragen, also habe ich es in einem zentralen Repository gehostet. Sehen wir uns nun an, wie der DeployBot in den Mix passt. Sie können ein Konto kostenlos mit dem DeployBot erstellen und bis zu ein Repository mit diesem Plan verwenden . Sobald Sie sich in Ihrem Konto angemeldet haben, erhalten Sie dies, was Sie im Wesentlichen durch den Prozess der Verbindung ein Repository zu Ihrem Shopify Store. Wie Sie hier sehen können, können Sie GitHub, Bitbucket oder Ihr eigenes selbst gehostetes Git-Repository anschließen . Ich werde das Repository für dieses Demo-Thema auswählen und Connect drücken. Dann auf der anderen Seite der Dinge muss ich eine Umgebung erstellen, also ist das an den Ort, an dem wir bereitstellen, in dem in diesem Fall ein Shopify-Store sein wird. Also muss ich diesem nur ein Label geben, angeben, wie ich in dieser Umgebung bereitstellen möchte. In diesem Fall werde ich dieses Handbuch verlassen. Ich werde den Master-Zweig bereitstellen, und dann können wir sehen, dass wir auf einem Server gefragt werden. Dann haben wir diese Möglichkeit, indirekt mit Shopify zu verknüpfen. Also, wenn ich das wähle, gebe ich diesem nur einen Namen und die URL zu meinem Shopify-Shop. Dann können wir uns direkt einhaken. Der Webhook setzt sich also im Grunde als benutzerdefinierte App in unserem Shopify Store ein. Nur müssen, dass einen Namen geben und dann können wir wählen, welches Thema wir bereitstellen möchten. Also, wir haben eine da drin namens Product Customization, die wir verwenden werden. Wir haben eine Reihe von erweiterten Optionen, in die wir gerade noch nicht eingegraben wurden. Also, das ist eigentlich die gesamte Konfiguration, die wir einrichten müssen , um einen grundlegenden Bereitstellungsdienst betriebsbereit zu machen. Wir können nun auf die Schaltfläche Bereitstellen drücken und DeployBot holt die neueste Version unseres Codes von GitHub. Es gibt Ihnen die Möglichkeit zu überprüfen, welche Änderungen tatsächlich bereitgestellt werden, und dann können wir auf den Start-Button „Bereitstellen“ drücken, um diese Informationen übertragen und dieses Thema und diese Dateien in unseren Shopify Store zu übertragen. Wenn wir jetzt unseren Shopify-Shop aktualisieren, werden wir keine Änderungen sehen, da wir natürlich sowieso die aktuellste Version gedrängt haben. Aber mal sehen, wie wir den Prozess durchlaufen, wenn wir eine Änderung vornehmen. Also, lassen Sie uns entscheiden, dass wir die Farbe unserer navbar ändern wollen und so machen wir diese Anpassung unser Stylesheet. Speichern Sie diese Änderungen und gehen Sie durch den Prozess des Hinzufügens zu Git. Sobald das erledigt ist, können wir diese Änderungen in unser GitHub-Repository schieben und wir werden einfach überprüfen und sehen, dass tatsächlich diese Änderung verschoben wurde, was wir sehen können, sie hat. Wenn wir dann den DeployBot ablegen, werden wir sehen, dass, wenn wir erneut auf die Schaltfläche Bereitstellen klicken, er erneut auf aktuelle Änderungen überprüft und uns einen Überblick darüber gibt, was er ändern und bereitstellen wird. Also wieder, in einer Frage der nur starten Bereitstellung und DeployBot wird diese Änderungen in unser Shopify-Thema schieben. Wenn wir jetzt aktualisieren, werden wir sehen, dass diese Veränderung tatsächlich stattgefunden hat. Nun, einer der Vorteile der Verwendung eines Bereitstellungsdienstes besteht darin, dass, wenn wir etwas schieben, das falsch ist oder uns nicht gefällt, ziemlich einfach zurücksetzen konnten und Deploybot, wie Sie sehen können, dies zu einem ziemlich einfachen Prozess macht. Wir können nochmals überprüfen, was wir zurücksetzen und Änderungen sofort zurückziehen, wenn etwas schief geht. Das war die wirklich schnelle fünfminütige Einführung in die Bereitstellung, die das letzte Thema dieses Kurses ist. Aber kurz bevor wir fertig sind, werden wir einen Blick auf ein endgültiges Bereitstellungsszenario werfen , das einige fortschrittlichere Techniken einbringt, insbesondere einige der Workflow-Automatisierungs-Dinge, über die wir letzte Lektion gesprochen haben. Also, wir sind wieder Blick auf das Kerzengeschäft Entwicklung Thema. Aber diesmal habe ich zwei Themen in meinem Laden. Ich habe ein Live-Thema und ein Entwicklungsthema. Daher laden wir indirekt in das Entwicklungsthema hoch. In der Entwicklung oder mit dem Thema [unhörbar] und dann werden wir auf die Live-Version des Themas mit Deploybot bereitstellen und ich habe bereits diesen DeployBot Fluss in ähnlicher Weise eingerichtet , wie wir mit dem vorherigen Screencast gemacht haben. Nun habe ich auch einige ziemlich bedeutende Änderungen an der Struktur unseres Theme-Verzeichnissesvorgenommen an der Struktur unseres Theme-Verzeichnisses , und das passt zu einigen der Workflow-Automatisierungs-Dinge, die wir zuvor besprochen haben. So können Sie jetzt sehen, dass ich ein Theme-Verzeichnis habe , das alle Quelldateien für mein Thema enthält, und ich habe auch eine Gruntfile hinzugefügt, die eine ganze Reihe von Kompilierungsaufgaben durchführt, also Verkleinerung und Verkettung und bauen alle diese Quelldateien in meinem Theme in eine.build-Verzeichnis, hier auf der obersten Ebene. Um das in Aktion zu sehen, lassen Sie uns zur Konsole springen und einen Grunt-Build ausführen, und wir werden sehen, dass unser Thema in das.build-Verzeichnis kompiliert. Also, wenn ich jetzt öffne, können wir sagen, eine endgültige Version bereit für die Bereitstellung in einem Shopify Store. Beachten Sie nun, dass sich die Datei config.yml in diesem Build-Verzeichnis befindet, so dass ich hier eine Theme-Uhr ausführen und meine Änderungen in der Entwicklung direkt in die Entwicklungsversion des Themes im Shopify Store hochladen kann. Also, wenn ich das Verzeichnis in das Build-Verzeichnis ändere und Theme Watch ausführe. Gehen Sie dann zurück zu meinem Thema, nehmen Sie eine Änderung in den ursprünglichen Quelldateien dieser Themen vor. Wenn Sie beispielsweise den Titel meiner Seite ändern und diesen Build-Schritt erneut mit Grunt ausführen, können wir sagen, dass Grunt klug genug ist, nur Dinge neu zu erstellen, die geändert werden müssen, und dann nimmt mein Theme-Upload diese Änderung auf und lädt es in den Laden. Wenn ich jetzt in unserem Browser aktualisiere, werde ich sofort diese Änderung nicht sehen, da wir derzeit die Live-Version des Shops ansehen und wir in die Entwicklungsversion hochgeladen haben. Aber wir können natürlich eine Vorschau darauf sehen, wie wir es hier getan haben, und Sie können sehen, dass diese Änderung tatsächlich vorgenommen wurde. Nun wollen wir nicht jedes Mal, wenn wir eine Änderung an unserem Thema vornehmen, einen Grunt-Build manuell ausführen müssen, aber zum Glück haben wir auch eine Watch Task Setup in unserer Gruntfile. Also, das bedeutet, dass wir jetzt in unsere Quell-Theme-Dateien gehen, Änderungen vornehmen können , wie wir es für richtig halten und dann, sobald wir speichern, Grunts gehen zu ernten, kompilieren, was wir brauchen und wiederum die Theme-Uhr wird diese Änderung in den Laden hochladen. Sobald wir mit den Änderungen zufrieden sind, die wir in der Entwicklung vorgenommen haben, möchten wir diese Änderungen an Git weiterleiten, damit wir sie auf unserer Live-Website bereitstellen können. Also, um das zu tun, gehen wir durch den Standardprozess des Git-Hinzufügens, und ich werde dies in ein Commit ändern und dann in unser GitHub-Repository schieben. Wir können dann den Prozess der Ausführung eines Deploy mit Deploybot in ähnlicher Weise wie in unserem vorherigen Screencast durchlaufen. also auf die Schaltfläche Bereitstellen, überprüfen Sie die Änderungen, die vorgenommen werden müssen, und führen Sie dann diese Bereitstellung aus. Wenn wir zurück zu unserem Browser und jetzt, können wir sehen, dass diese Änderung auf der Live-Website bereitgestellt wurde. Gehen wir für eine Sekunde zurück zu unseren Theme-Dateien, um zu überprüfen, was Gruntfile tatsächlich für uns macht und wie das mit DeployBot funktioniert. In unseren Theme-Quelldateien können Sie also sehen, dass wir nicht die standardmäßige Shopify-Verzeichnisstruktur verwenden. Wir haben unser JavaScript und unsere Stylesheets in separate Dateien aufgeteilt, was uns bei der Entwicklung hilft und alles ein wenig modularer und leichter zu begründen hält . Im Build Verzeichnis gibt es diese Dateien werden zusammen kompiliert. Was mehr ist in der Tat, ist, dass, wenn wir in unsere Live-Website in unserem Browser springen und ein wenig in das CSS graben, dort werden wir sehen, dass die Assets, die von der Live-Website bedient werden , tatsächlich nicht nur zusammen kompiliert, aber sie sind auch verkleinert. Dies ist möglich, da DeployBot Build-Befehle unterstützt. Wenn wir also in die Einstellungen springen, die für unser Shopify-Theme konfiguriert sind, werden wir sehen, dass DeployBot tatsächlich in der Lage ist, einen Grunt-Build für uns auszuführen , bevor wir unser Design im Shopify-Store bereitstellen. Sie werden auch feststellen, dass wir ein Produktions-Flag an die Build-Aufgabe übergeben, und das ist, um Grunt zu sagen, einige Aufgaben auszuführen, die wir nicht nützlich oder zu teuer für die Ausführung in Development finden würden . Zum Beispiel, wenn wir diese Stylesheets minimieren, würden wir es auch hier verwenden, um unsere JavaScripts zu minimieren und zu optimieren, was eine ziemlich teure Aufgabe ist. Es dauert ein bisschen Zeit, auf die wir in der Entwicklung nicht wirklich gewartet werden können, aber wir würden es gerne ausführen, bevor wir unser Thema tatsächlich in die Produktion schieben. Hoffentlich haben Sie jetzt eine Vorstellung von einigen guten Techniken, die Sie verwenden können, um Ihren Code von Ihrer Entwicklungsmaschine in einen Shopify-Store in der Produktion zu bekommen und all diese Probleme zu vermeiden, die wir zu Beginn einer Lektion identifiziert haben. 10. Schlussbemerkung: Nun, das war's. Wir sind fertig. Vielen Dank, dass Sie sich mir auf diesem Kurs angeschlossen haben. Ich hoffe wirklich, dass es nützlich für Sie war, ich hoffe, Sie haben etwas gelernt, das Sie vorher nicht wussten, und wenn Sie das Gefühl haben, dass Sie etwas fortgeschritteneres Shopify entwickeln können jetzt. Ich bin immer sehr glücklich, mit Studenten oder irgendjemandem im Allgemeinen über Shopify zu sprechen. Ich verbringe viel zu viel Zeit damit, über Shopify zu denken und zu reden. Wenn Sie also Kontakt aufnehmen oder Fragen stellen möchten, geben Sie mir ein Feedback. Wenn Sie an den Projekten hängen bleiben, dann nehmen Sie Kontakt auf. Meine Kontaktdaten hier auf der SkillShare Kursseite. Abgesehen davon, ich denke, alles, was bleibt, ist für mich viel Glück in Ihrer Shopify-Entwicklung zu sagen und glücklich Kirti.