fb
Schedule a Meeting

8 Tipps für die Entwicklung einer besseren Shopify Website

This post is also available in: English (Englisch) Français (Französisch) Italiano (Italienisch)

Die solide Grundlage eines jeden entwickelten Codes bestimmt den Erfolg des Projekts. Jeder Code erstellt die Einhaltung strenger Software-Engineering-Techniken, bestimmen, wie robust und tragbar ein Projekt in der Zukunft ausfallen wird.

WebBee Global ist autorisierter Shopify-Partner für Shopify-Website, Apps und Themenentwicklung. Unsere Vision ist es, die geschäftsspezifischen benutzerdefinierten Shopify-Apps und -Themen zu erstellen.

Auf der Grundlage unserer reinen Erforschung des Wissens und der Bereicherung projektbasierter Erfahrungen in der Praxis möchten wir fundierte Tipps zur Entwicklung einer potenten eCommerce Shopify Anwendungsentwicklung und Themengenerierung weitergeben.

Tipps #1 : Verwalten Sie Ihre Arbeit mit versionscontrol management

WebBee speichert Code auf organisierte Weise und stellt bei Bedarf den Verlauf der gesamten Codebasis bereit, um verlorene Arbeit zu verhindern. Unsere Entwickler behandeln Änderungen, die durch den Online-Shopify-Editor, die Verwaltung von Themen, Funktionen, Zweigstellen und mehrere Entwickler passiert sind. Die Reduzierung der Komplexität des Projekts und die Erstellung der geschäftsspezifischen Arbeit ist die Hauptagenda für die Shopify kundenspezifische Entwicklung.

Man muss üben, den Masterzweig bereit zu halten, und erst dann die separaten Features nach seiner Fertigstellung zusammenführen. Wenn Sie jemals einige unvollständige Funktionen oder Fehler beheben müssen, dann kann rechtzeitige Maßnahme ergriffen werden. Wir arbeiten in der Regel unter einem unveröffentlichten Thema, um die Änderungen verborgen und intakt während der Entwicklung zu halten.

Falls Änderungen (z.B. ein App-Entwickler) im Online-Themeneditor vorgenommen werden, stellen Sie sicher, dass Sie die Änderungen notieren und nach der Ausführung der Änderungen in Ihre jeweilige Datei einbinden. Es ist obligatorisch, jeden Code zu überprüfen und zu validieren.

Wenn sie dies nicht tun, wird sie nicht in der Lage sein, den Zweck zu erreichen, da diese Änderungen schließlich überschrieben werden. Stellen Sie sicher, dass die Änderungen in der richtigen Reihenfolge zusammengeführt werden, das bedeutet, dass Sie wissen, in welchem Commit Sie zusammengeführt werden müssen. Praktisch werden alle Themenänderungen in den Bericht eingecheckt, bevor sie in den Laden gehen. Die Hauptidee hier ist, dass Ihr Bericht immer Ihren Code verwaltet, nicht Themen.

Tipps #2: Shopify-Thema vor Ort

Da Shopify in der Cloud gehostet wird, können Sie einfach nicht lokal arbeiten und eine lokale Instanz der Software erstellen. Stattdessen laden Sie Themendateien hoch und beobachten Sie vorgenommene Änderungen in einem Online-Shopify-Shop.

Die Überwachung von Dateien und Themen ist der Schwerpunkt für eine bessere Entscheidungsfindung, daher ermöglicht das Shopify Thema gem eine wachsame Überwachung, bei der Sie aktiv ein Verzeichnis ansehen und automatisch Dateien zum jeweiligen Thema hochladen können, wenn Dateien gespeichert werden. GUI-Version der gleichen führt auch die gleiche Sache. Sie können die Setup-Anweisungen finden, erkunden Sie das Thema-Kit.

Sie können auch Ihren eigenen Texteditor und zugehörige Entwicklungstools verwenden, um zu arbeiten, wie jedes andere Projekt. Sie können Ihre gesamte Entwicklung im Admin-Design-Editor ausführen und durchführen, um sicherzustellen, dass die vorherigen Arbeiten nicht überschrieben wurden.

Für die kleinen Projekte, wenn Sie nicht der Hauptentwickler für die Website sind und Änderungen nur wenige sind, ist die Verwendung des Online-Editors die bessere Option. Das Bearbeiten von Online-Ausgaben impliziert, dass keine Probleme beim Überschreiben einer Datei auftreten, die nicht mit Ihren lokalen Änderungen übereinstimmt.

Tipps #3: Sass- und JavaScript-Kompilierung mit Grunt durchführen

Bei großen Projekten ist es wichtig, CSS und JavaScript zu strukturieren. Wir verwenden Sass objektiv für die Zusammenstellung unserer gesamten CSS. Shopify mit dem Sass Parser ausgestattet, in der Regel bevorzugen die Kompilierung lokal mit Grunt und Compass durchführen.

Unten ist der Themenbericht, um Ihnen den Einstieg zu erleichtern.

Sass kann über die Anzahl der Möglichkeiten kompiliert werden. Grunt ermöglicht das Umschließen der gesamten Sass-Datei in einem einzigen Verzeichnis, wodurch die CSS-Datei in Byte-Größenblöcke aufgeteilt wird.

Sie können Sass auf verschiedene Arten kompilieren. Da wir Grunt für andere Aufgaben verwenden, ist das Umschließen des Sass-Kompilierens hier für einen Schritt weniger erforderlich. Um dies zu erreichen, erstellen wir einen Ordner innerhalb des Stammverzeichnisses unseres Themas namens „sass“, der eine organisierte Struktur von Ordnern und Dateien enthält. Beachten Sie, dass dieser Ordner nicht in das Design des Speichers hochgeladen wird.

Ein solcher Ansatz für JavaScript, wenn er angewendet wird, reduziert es die Menge an JavaScript-Dateien beim Laden der Seite und hält alles intakt.

Es wird bevorzugt, JavaScript Liquid-Werte zuzuweisen und Ihre Logik direkt in JavaScript auszuführen.

Tipps #4: Achten Sie darauf, wann Sie JavaScript anstelle von Liquid verwenden sollten

Es ist zwingend notwendig, darauf hinzuweisen, dass Liquid nicht als Programmiersprache konzipiert wurde. Sein Hauptziel war es, die Daten zu erstellen, mit denen Sie derzeit arbeiten, und Markup zu erstellen. Obwohl es im Allgemeinen bevorzugt ist, Logik in Liquid auszuführen, ist es manchmal klar, die Daten an JavaScript weiterzugeben.

Falls Sie in den verschachtelten „for“-Schleifen, endlosen String-Anhängen stecken bleiben oder Liquid-Methoden schreiben möchten, ist es an der Zeit, JavaScript zu berücksichtigen, um schweres Heben auszuführen und auszuführen. Oft geben Sie einfach die gesuchten Daten in ein JavaScript-Objekt ab und arbeiten dort damit. Zum Beispiel:

<Skript>

Shopify.currentProdukt = Produkt | json;

if (Shopify.currentProduct)

console.log(Shopify.currentProduct.variants);

}

</script>

Denken Sie daran, dass der effektive Code immer überschaubar ist. Vermeiden Sie daher ein Durcheinander von geschweiften Klammern und langwierige Codierung. Vertrauen Sie auf javaScript-Computer, und führen Sie die Ausführung aus.

Tipp #5: Abstraktion durchführen, wo immer und wann immer möglich

Stellen Sie immer dann sicher, dass Designs für die Clients erstellt werden, und stellen Sie sicher, dass sie die primären Benutzer des Speichers sein müssen. Sie müssen die Funktionen der Website abstrahieren, wann immer und wo immer dies möglich ist. Daher, um die Hard-Code-Einstellungen in das Thema abzuwenden. Auch als Faustregel Thema sollte keine Daten speichern.

Nutzen Sie beispielsweise den Design-Editor (Schema), Gebietsschemas, Metafelder oder Relatable, um Inhalte wie Text oder Bilder zu steuern. Das Ergebnis ist, dass Ihre Kunden verwalten können, ohne dass die Designbearbeitung für einfache Aktualisierungen erforderlich ist.

Tipp #6: Sorgen um Ladezeiten und Leistung

Für die schnelle Website-Leistung der Prüfungen verwenden Sie
Google Chrome Developer Tools,
um die Engpässe innerhalb der Themen zu verfolgen.

JavaScript, Images und CSS-Komprimierung sind in der Regel die bevorzugte, auch, die intensive Liquid und JavaScript-Berechnung, verhindern Rendering-Inhalte auf der Seite, die in erster Linie ausgeblendet ist.

Tipp #7: Snippets gut gebrauchen

Flüssige Ausschnitte sind einer der besten Ansätze zum Aufteilen von Logik in separate Dateien. Es ist am besten, eine lange Liste von Snippet-Dateien im Vergleich zum Markup zu imbibe. (Da dies schwer zu verstehen ist.)

Ausschnitte bieten einen Ansatz, Inhalte logisch strukturiert zu organisieren, so dass das Markup leicht verfolgt werden kann, um übermäßige Wiederholungen abzuwenden. Immer wenn ein Markupabschnitt in mehreren Dateien wiederverwendet wird, werden Snippets verwendet. Bitte beachten Sie, dass Snippets Variablen erben, die von der Stelle deklariert wurden, an der sie enthalten waren. Unsere Entwickler brechen die flüssigen Datei-Themen wie folgt:

<Html>

<Kopf>

€ content_for_header . . . . . . . . . . . . . . .

‚% enthalten ‚Kopf‘ %‘

</head>

<Körper>

‚% enthalten ‚Header‘ %‘

<main id=“main“>

• content_for_layout

</main>

„% enthalten ‚Fußzeile‘ %‘

</body>

</html>

Tipp #8: Erstellen eigener JSON-Endpunkte für dynamische Daten

Die Vorlage wird in der Regel verwendet, wann immer Sie etwas anderes tun möchten. Jede Liquid-Vorlage darf mit einer eindeutigen Ansicht suffixiert werden, die für einen bestimmten Zweck verwendet wird. Wenn Sie z. B. eine Reihe von Produktseiten haben, können Sie eine Vorlage wie product.unique.liquid erstellen, wählen Sie die entsprechende Vorlage im Shopify-Administrator aus.

Sie können auch den Namen der Vorlage im Parameter „ansicht“ in der URL übergeben, um Shopify anzuweisen, eine bestimmte Vorlage zu verwenden.

Unten die Verwendung der automatischen Vervollständigungssuche als Beispiel. Sie können vorlagen/search.json.liquid als Vorlage erstellen und die JSON-Antwort in der Datei entwickeln.

‚% Layout keine % ‚

%paginieren Search.results um 50 %.

{

„Ergebnisse“: ’search.results | json ‚

}

%endpaginate %.

Dann in JavaScript::

.getJSON(‚/search?q=shirt&view=json‘, function(response)

console.log(Antwort)

});

Bitte beachten Sie, dass im angegebenen Code unten die Suche der Parameter „view“ übergeben wurde, der auf unser Vorlagen-Suffix namens „JSON“ eingestellt ist.

Diese Methode wird die ganze Zeit zusammen mit Relatable für die Verwendung von JavaScript verwendet, um die benutzerdefinierte Logik in Shops zu stärken. Beachten Sie, dass dies auf jede Vorlage zutrifft, was bedeutet, dass Sie einen ähnlichen Ansatz für die Kundendaten ausführen können:
 
‚% Layout keine % ‚

{

„first_name“: „-kunde.first_name“

„last_name“: „-customer.last_name“,

„email“: „-customer.email“,

„id“: „customer.id“,

„name“: „“customer.name“

„orders_count“: „Kunde.orders_count“

}

Dadurch wird ein schön formatiertes JSON-Dokument erstellt:

Schlussfolgerung

Wir hoffen, dass diese Punkte ein Mehrwert-Vorschlag für die Shopify-Entwicklungsein werden, unabhängig davon, ob es sich um erfahrene Programmierer oder Anfänger handelt. Wir sind sicher, dass diese Tipps die kundenorientierte, robuste flexible Codierung verbessern werden. Es ist von entscheidender Bedeutung, eine klare Analyse des Umfangs des Projekts und seiner Anforderungen zu haben. Da jedes Projekt einzigartig ist, muss sein Erzielung klar definiert und verstanden werden, bevor eine Form durch Codierung gegeben wird.

Scroll to top
Schedule a Meeting
close slider