Ajax Funktionalität im Theme einbauen

[jackie_22]

Hallo zusammen,

ich bin ganz neu im Shopify-Universum und taste mich langsam heran.
Aktuell beschäftige ich mich mit der App-Entwicklung. Das klappt auch soweit ganz gut, allerdings komme ich im Moment über das Backend nicht hinaus.

Ich würde ganz gerne auch im Frontend per Ajax x-beliebige Daten laden und anzeigen lassen.

Hierzu habe ich im Hauptverzeichnis meiner App die Datei ajax.php angelegt. Jetzt möchte ich ganz gerne in der Template-Datei eine Ajax-Funktion implementieren, die dann auf diese ajax.php-Datei zugreift und z.B. über curl Daten holt und wieder an die Ajax-Funktion zurückgibt, so dass ich das Ergebnis dann weiter verarbeiten kann.

Jetzt habe ich testhalber eine JavaScript-Datei mit einem Ajax-Aufruf eingebunden, um hierüber auf die Datei ajax.php zuzugreifen.
Dieser Zugriff wird von Shopify allerdings geblockt (has been blocked by CORS policy). Jetzt habe ich gelesen, das man da irgendwie mit einer Middleware arbeiten muss???.

Es wäre super, wenn mir jemand einen kleinen Tipp geben kann, wie ich vorgehen muss und was ich brauche, um das zu realisieren.

Gruß Heiko

[Gabe]

Hey Heiko! @jackie_22 

Erstmals ein herzliches Willkommen in der Shopify Welt!

Und danke für die Fragen die ich jetzt in unseren Developer Docs und auch Developer Foren etwas nachgeforscht habe und folgendes ist der Sachverhalt dazu, denn die Frage wurde des öfteren in unserer Community schon gefragt.

Um Ajax-Funktionalität in dein Shopify-Theme einzubauen und Daten asynchron zu laden, musst du ein paar Dinge beachten, insbesondere im Hinblick auf die Same-Origin-Policy und CORS (Cross-Origin Resource Sharing). Shopify blockiert standardmäßig aus Sicherheitsgründen direkte Ajax-Anfragen an externe Server oder Dateien, die nicht Teil der Shopify-Infrastruktur sind.

Shopify ermöglicht auch die Verwendung von App Proxies, um Anfragen von deinem Shopify-Shop sicher an externe URLs weiterzuleiten. Diese Methode hilft, CORS-Probleme zu umgehen, indem Anfragen so umgeleitet werden, als kämen sie von derselben Domain. Du kannst einen App Proxy in deinem Shopify Partner-Dashboard einrichten, indem du einen Subpfad und die URL deines Proxy-Servers angibst. Anfragen an diesen Subpfad werden dann an deine externe URL weitergeleitet, wodurch du dynamische Daten sicher in deinem Shopify-Shop anzeigen kannst​​.

Für typische E-Commerce-Aktionen (wie das Hinzufügen von Artikeln zum Warenkorb) bietet Shopify eine eigene Ajax API. Diese ist speziell für solche Aktionen vorgesehen und kann ohne CORS-Probleme verwendet werden. Wenn du Daten von deinem eigenen Server (z.B. von einer ajax.php Datei) in dein Shopify-Frontend laden möchtest, ist der empfohlene Weg die Verwendung eines App Proxies. Ein App Proxy leitet Anfragen von deinem Shopify-Shop sicher an eine externe URL weiter. Dies bedeutet, dass du innerhalb deiner App eine Endpunkt-URL definieren kannst (z.B. auf deinem Server, wo ajax.php liegt), die dann von Shopify über einen Proxy aufgerufen wird. Dies umgeht das CORS-Problem, da die Anfrage aus der Sicht des Browsers von derselben Domain kommt.

Wenn du direkte Ajax-Anfragen an deinen eigenen Server senden möchtest, ist es wichtig, dass dein Server angemessene CORS-Headers zurückgibt. Du kannst auf deinem Server CORS-Headers einstellen, um Anfragen von deiner Shopify-Domain zu akzeptieren. Ein gängiger Ansatz ist, die Access-Control-Allow-Origin-Header in deiner Serverkonfiguration oder in deinen PHP-Skripten zu setzen. Dies ermöglicht es deinem Shopify-Shop, Ressourcen von deinem Server zu beziehen, indem die Same-Origin-Policy umgangen wird​​.

Für bestimmte front-end Aktionen, wie das Hinzufügen von Produkten zum Warenkorb oder das Anzeigen von Produktvorschlägen, bietet Shopify, wie gesagt, die eigene Ajax API. Diese API ist speziell für die Entwicklung von Shopify-Themes vorgesehen und kann für solche Aufgaben verwendet werden, ohne CORS-Probleme zu verursachen. Die Ajax API kann jedoch nur von Themes genutzt werden, die von Shopify gehostet werden, und ist nicht für den Einsatz auf benutzerdefinierten Storefronts vorgesehen​​.

Wenn du direkt auf externe Ressourcen zugreifen musst und nicht über die Shopify Ajax API oder einen App Proxy gehen kannst, musst du sicherstellen, dass der Server, auf dem deine ajax.php liegt, angemessene CORS-Headers zurückgibt. Das bedeutet, du musst auf dem Server, der die ajax.php Datei hostet, entsprechende Headers setzen, die es erlauben, dass Anfragen von deiner Shopify-Domain akzeptiert werden. Eine einfache Möglichkeit, CORS-Headers in PHP zu setzen, wäre etwas wie das folgenden Beispiel:

<?php
header("Access-Control-Allow-Origin: *"); // Dies für den produktiven Einsatz entsprechend einschränken
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

Um eine Ajax-Funktion im Theme zu implementieren, kannst du direkt in deinem Theme-Code JavaScript hinzufügen oder eine separate JavaScript-Datei in dein Theme einbinden. Verwende dann die fetch API oder jQuery's $.ajax (falls jQuery verfügbar ist), um Anfragen an deinen definierten Endpunkt (z.B. den App Proxy) zu stellen. Ein einfaches Beispiel mit fetch könnte wie folgt aussehen:

fetch("/path/to/your/app/proxy?url=ajax.php", {
  method: 'GET', // oder 'POST', je nach Anforderung
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[jackie_22]

Hallo,

vielen Dank für diese ausführliche Antwort.
Ich werde mir den Bereich mit den App Proxies genauer anschauen. Ich denke das es genau das richtige dafür ist.

Gruß Heiko

[Gabe]

Super freut mich Heiko! 😉