Die beste Struktur für Shopify-Projekte

Nachdem wir mit der Erstellung des Projekts in Shopify begonnen haben, schaffen wir zunächst eine API, mit der wir die Projektdatei lokal kommunizieren können. Wir tun dies über die Themekit-Plattform.

ThemeKit ist ein plattformübergreifendes Befehlszeilentool, mit dem Sie Shopify-Themes erstellen können. Über diese Plattform nehmen wir das Projekt lokal und verbinden es mit der API, die wir in der privaten App des Projekts erstellen.

Führen Sie den folgenden Befehl aus, um ein bestimmtes Design herunterzuladen und die Datei config.yml zu erstellen, die dieses Design mit einer lokalen Version in dem soeben erstellten Verzeichnis verbindet:

Terminal

theme get --password=[your_password] --store="[your-store.myshopify.com]" --themeid=[Ihre_Theme-ID]

Sobald das Projekt in der lokalen Version heruntergeladen wurde, erstellen wir ein Repository auf Github und verknüpfen es auch mit dem vorherigen Projekt. Der Grund, warum wir dies tun, ist, dass Github es uns ermöglicht, Dateien für alle von uns vorgenommenen Änderungen zu speichern. Der Vorteil davon ist, dass über Github mehr als zwei Personen gleichzeitig arbeiten können, wo es keinen Dateikonflikt geben kann und wo die Arbeit von jedem leicht verwaltet werden kann.

Von dem Moment an, in dem wir das Projekt lokal starten, müssen wir zuerst den Paketmanager für die Node JavaScript-Plattform installieren, wo diese Plattform alle Module platziert, damit der Knoten sie finden und die Konflikte verwalten kann.

Terminal

npm init

npm i

Sobald wir die NPM-Plattform installiert haben, fahren wir mit dem Befehl The theme watch fort, der ThemeKit anweist, nach Änderungen an Ihren lokalen Dateien zu suchen. Dieses Verfahren überträgt automatisch Änderungen an Ihrem Theme im verbundenen Shopify-Shop.

Terminal

Theme Watch –allow-live

Nachdem wir das Projekt in Shopify erstellt und auch mit Github verbunden haben, beginnen wir mit der Installation einiger Frameworks, die wir in vielen Projekten verwenden. Dies ermöglicht uns, einfacher und professioneller zu arbeiten. Darüber hinaus kann durch diese Frameworks Ihre Arbeit bestmöglich erleichtert werden, was sich sicherlich auf Ihr Zeitersparnis auswirken wird. Einige von ihnen sind:

· Tailwind CSS
· Alpine JS
· Swiper JS.

Alle diese Frameworks werden mit einem sehr einfachen Befehl installiert, indem nur das Wort „npm install“ hinzugefügt wird z.B.:

Terminal
npm install tailwindcss

npm install alpinejs

npm install swiper

Dementsprechend installieren wir in jedem Projekt Webpackmix. Dies ermöglicht es uns, eine Datei namens „webpack.mix.js“ zu erstellen. Auf diese Weise können wir alle CSS-Dateien in einer und auch alle JavaScript-Dateien in einer einzigen Datei erstellen. Eine Webpack.mix.js Datei könnte wie folgt aussehen:

Beispiele: Im Abschnitt mix.styles haben wir entschieden, dass alle CSS-Dateien wie application.css, custom.css und swiper-bundles.min.css in einer einzigen Datei namens „main.css“ verarbeitet werden.

Das Gleiche gilt für mix.scripts, wo wir alle JavaScript-Dateien in einer einzigen Datei namens „main.js“ eingebaut haben. Ein weiterer Grund dies zu verwenden ist, den SEO-Seitenzustandswert, die Leistung, die Seitengeschwindigkeit zu steigern, und auch der Code ist lesbarer und einfacher zu bearbeiten.

Wenn Sie mehr über E-Commerce-Entwicklungsplattformen oder Apps erfahren möchten, lesen Sie unsere Lexika für Shopify und Shopware. Unser engagiertes Outsourcing-Team kann Ihr Partner im E-Commerce sein.