FROM CACHE - de_header

Wie kann ich die SKU im Javascript abfragen?

Wie kann ich die SKU im Javascript abfragen?

Cheekymonkey13
Entdecker
30 1 1

Hallo 🙂

 

ich möchte eine Logik anhand der aktuellen SKU aufbauen. 

Was ist die einfachste Möglichkeit, um dies zu tun?

Viele Grüße

Christof

8 ANTWORTEN 8

Finer
Shopify Expert
2122 461 764

@Cheekymonkey13 Im Grunde kommt es darauf an wie es eingesetzt werden soll.

Soll die Logik auf der Produktseite, im Warenkorb oder in einer anderen Stelle / Seite Ergebnisse auswerfen?

 

Wenn es sich um eine Logik auf der Produktseite handelt, ist Javascript eventuell gar nicht notwendig.

Es ist auch möglich, eine Logik mithilfe von Liquid zu erstellen.

So kann man mit Liquids Konditionen und Filter in den Code einfügen, um anhand einer Logik, Inhalte anzuzeigen oder zu berechnen.

In deinem Fall wird das "variant object" - {{ variant.sku }} dafür sorgen, dass die Artikelnummer angezeigt wird.

Aber ich würde dir in diesem Zusammenhang empfehlen, dir die Overview dazu durchzulesen.

 

Aber wie bereits erwähnt, es kommt darauf an, wo und wie du mit der Artikelnummer umgehen willst.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Cheekymonkey13
Entdecker
30 1 1

Ich dachte an Javascript, weil ich anhand der SKU eine Animation für den Modelviewer weitergeben möchte (oder kann ich Alerts auf die Produkt-Varianten Buttons setzen). Das Ganze spielt sich auf der Produktseite ab.

 

Wenn ich const sku = {{ variant.sku }} eingebe, kommt folgender Error:

 

Uncaught ReferenceError: Cannot access 'sku' before initialization
at HTMLDivElement.<anonymous>

 

Wenn ich statt variant product eingebe und bspw. ID, dann kann ich den Wert nutzen, d.h. product ist accessable, variant nicht. Wie komme ich an variant? 🙂

 

VG
Christof

Finer
Shopify Expert
2122 461 764

@Cheekymonkey13 Da eine Variante einem Produkt untergeordnet ist, findet häufig ein Abruf einer Variante auf Produktebene statt, damit der entsprechende Wert der Variante gezogen werden kann.
Das sieht in der Regel so aus:

assign current_variant = product.selected_or_first_available_variant

und später im Code

{{ current_variant.sku }}

 vielleicht funktioniert es auch direkt mit dem "current_variant.sku"

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Cheekymonkey13
Entdecker
30 1 1

Danke! Das hilft schonmal sehr.

 

Vielen Dank!

 

Nutze aktuell:  const sku = {{ product.selected_or_first_available_variant.sku }}

 

Jetzt habe ich 2 Probleme: Zum einen kommt Uncaught ReferenceError: N210 is not defined
at HTMLDivElement.<anonymous>. 

 

Selbst wenn ich um die {{}} ein String() setze, erscheint der Error.

Eventuell hängt es mit dem Error zusammen, aber es wird immer die Standard-Sku angegeben, selbst wenn Varianten mit anderer SKU ausgewählt sind.

Cheekymonkey13
Entdecker
30 1 1

Das erste Problem ließ sich durch eine Integer-only naming convention lösen.

 

Verbleibend bleibt das Problem, dass die SKU bei wechselnder Produktvarianten-Auswahl gleichbleibt.

Cheekymonkey13
Entdecker
30 1 1

Update: 
Wenn ich die Page refreshe, aktualisiert sich die SKU. Für meine Anwendung ist das leider aber keine mögliche Option, da ich den modelviewer live updaten möchte. 

Ich bin auf diesen Link gestoßen https://craigbaldwin.com/blog/3d-models-ar-shopify/, in dem der Autor sagt, er nutze eine Vue Watch auf den currentSkus. Hast du da eine Idee was er meint, bzw. wie das exemplarisch implementiert aussehen könnte?

Cheekymonkey13
Entdecker
30 1 1

Okay. Sorry für den Spam, ich denke, dass das aber für jeden, der etwas ähnliches vorhat interessant sein kann 🙂

Ich werde jetzt meinen Lösungsansatz zeigen und dann würde mich trotzdem freuen, falls mir jemand einen direkteren Weg zeigen kann.

 

1 . SKU auf Product Page anzeigen

 

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-... 

Dieser Link zeigt generell, wie man die SKU auf der Product Page anzeigt. Ist zwar nicht direkt mein Ziel, hilft aber beim Verstehen. Mit meinem Theme, Prestige, war das so nicht möglich. Habe mir die SKU manuell anzeigen lassen, diese hat sich jedoch nicht aktualisiert.

2. SKU updaten

Zusätzlich gibt es die Möglichkeit in den Theme Optionen die SKU anzuzeigen. Hier aktualisiert sich die SKU.

Im Code wird das hierbei gerenderet:

 

{%- render 'product-meta', form: form, block: block, product: product -%}

 
Wenn ich dieses Snippet an eine andere Stelle paste, wurde das ohne SKU gerendert, vermute aber, dass evtl. die Settings nicht richtig übergeben wurden.

 

3. SKU beziehen

 

Anschließend habe ich im theme.Js geschaut, wie die Sku geupdatet wird. Dafür sind folgende Zeilen notwendig. 

 

key: "_updateSku",
      value: function _updateSku(newVariant) {
        if (!this.options['showSku'] || !newVariant) {
          return;
        }

        var productSkuNumber = this.element.querySelector('.ProductMeta__SkuNumber');

        if (productSkuNumber && newVariant['sku']) {
          productSkuNumber.innerText = newVariant['sku'];
        }
      }

 

An dem querySelector habe ich mich bedient und es funktioniert tatsächlich.

 

var sku = document.querySelector('.ProductMeta__SkuNumber');

 

Das funktioniert jedoch nur, wenn im Theme die Option "SKU anzeigen" aktiviert ist. Ich werde versuchen, das <div> noch zu hiden, mal sehen.

 

4. Offene Fragen (bin für jegliche Hilfe dankbar)

1: Gibt es einen besseren Weg, die geupdatete SKU zu erfahren?

2: Wie kann ich eine Funktion auslösen, wenn die SKU geupdatet wird.

3: Wie handle ich nicht-numerische SKUs in JS am besten (habe nie mit JS gearbeitet).

 

 

Ich hoffe, ich konnte hiermit jemand anderem etwas weiterhelfen und hoffe noch mehr, dass mir jemand anderes hiermit etwas weiterhelfen kann 😉

 

 

Cheekymonkey13
Entdecker
30 1 1

Um mir selbst zu antworten als Dokumentation:

 

document.querySelector('.ProductMeta__SkuNumber')
    .addEventListener('DOMSubtreeModified', function() {
    // do something    
    nv = document.querySelector('.ProductMeta__SkuNumber').innerText
    
    if(!sku | !nv){
     return; 
    }
    
    if(sku != nv){
      sku = document.querySelector('.ProductMeta__SkuNumber').innerText
      foo()
    }   
});
  function foo(){    
    console.log('Test', this.sku);
  }

 

Das hier reagiert auf das Event, dass die SKU geändert wird. Komischerweise triggert es zweimal, deswegen die If-Klausel.