Produktdaten im Dawn Theme

[arrrda8]

Hallo Zusammen, 

ich habe folgende Frage. Ich habe im Editor eine .js Datei. In dieser muss die Produkt ID und die Verfügbarkeit des Produktes von der main-product.liquid gezogen werden um diese beiden Werte weiter in den Funktionen nutzen zu können. 

Ich komme leider nicht weiter, da ich diese nicht finde und nicht genau weiß wie ich das machen kann. Ich möchte im weiteren Verlauf über eine Flask API durch eine fetch() Funktion auf meine lokale MySQL Datenbank zugreifen. Das habe ich alles bereits fertiggestellt, nur für die GET Frage ist es notwendig dass ich die Produkt-ID VOR dem Aufruf erhalte, da die Tabellen in der DB wie folgt heißten "product_{{shopify_product_id}}" wobei product_shopify_id dann eben eine bestimmte Produkt-ID ist. 

Hoffe ihr könnt mir helfen!

[soenmez]

Hallo arrrda8,

vielen Dank für deine Frage hier im Community Forum 🙂

Zuerst musst du sicherstellen, dass die benötigten Informationen in deiner main-product.liquid Datei verfügbar sind.

Du kannst die Produkt-ID und Verfügbarkeit als data- Attribute in einem unsichtbaren Element (wie einem div) speichern.

Zum Beispiel:

<div id="product-info" data-product-id="{{ product.id }}" data-product-available="{{ product.available }}" style="display: none;"></div>

Danach kannst du auf diese Daten in deiner JavaScript-Datei zugreifen. Hier ist ein Beispiel, wie du das machen könntest:

let productInfoDiv = document.getElementById('product-info');
let productId = productInfoDiv.getAttribute('data-product-id');
let productAvailable = productInfoDiv.getAttribute('data-product-available') === 'true';  // Dies wird als String zurückgegeben, also musst du es zu einem Boolean umwandeln.

console.log(productId, productAvailable);  // Zum Testen

Jetzt hast du die Produkt-ID und die Verfügbarkeit in deinem JavaScript-Code verfügbar und kannst diese Werte in deinen Funktionen verwenden.

Viel Erfolg bei der Implementierung 🙂

[arrrda8]

Hallo Soenmez,

vielen Dank für deine Antwort! Sind denn "data-product-id" und "data-product-available" die richtigen Variablen? Ich weiß gar nicht, wie ich die richtigen Variablen im Code finde, nutze übrigens das Dawn Theme der Version 9. 

Das mit dem unsichtbaren Element hatte ich auch bereits gelesen, konnte mir aber nicht vorstellen wie ich das genau mache. 

[Gabe]

Hey @arrrda8 

Du könntest das data- Attribut verwenden, um beliebige Daten im HTML-Element zu speichern. Die Werte "data-product-id" und "data-product-available" sind geeignet, um die Produkt-ID und die Verfügbarkeit zu speichern. Die tatsächlichen Variablen, die du im Liquid-Template verwendest, hängen von deinem Theme ab. In den meisten Fällen sollte man jedoch in der Lage sein, product.id und product.available zu verwenden, um auf die Produkt-ID und den Verfügbarkeitsstatus zuzugreifen.

In Bezug auf das unsichtbare Element, da kann man ein Element auf der Seite haben, das für den Benutzer nicht sichtbar ist, aber Daten speichert, auf die du mit JavaScript-Code zugreifen kannst. Das style="display: none;" Attribut stellt sicher, dass das Element auf der Seite nicht sichtbar ist. Hier eine weitere Version des vorherigen Codes:

<!-- In der main-product.liquid-Datei -->
<div id="product-info" data-product-id="{{ product.id }}" data-product-available="{{ product.available }}" style="display: none;"></div>

// In der .js-Datei
document.addEventListener('DOMContentLoaded', (event) => {
  let productInfoDiv = document.getElementById('product-info');
  let productId = productInfoDiv.getAttribute('data-product-id');
  let productAvailable = productInfoDiv.getAttribute('data-product-available') === 'true'; 

  console.log(productId, productAvailable);  // Zum Testen
});

Der DOMContentLoaded Event-Listener stellt sicher, dass der JavaScript-Code erst ausgeführt wird, nachdem das gesamte Dokument geladen wurde, einschließlich aller synchronen Skripte und Stylesheets und somit prüfen, dass das "product-info" Element tatsächlich existiert, wenn man versucht, darauf zuzugreifen.