Probleme beim Tinker Theme in Kombination mit WOD: PreOrder Now-App

Technical Q&A
,
1

Ich habe ein kritisches Kompatibilitätsproblem mit dem Tinker-Theme auf unseren Produktseiten.

Das Problem beim Auswählen einer anderen Produktvariante (Größe) tritt Folgendes auf:

Das Theme aktualisiert die Varianten-ID in der URL nicht (der ?variant=XXXXX Parameter).

Dies unterbricht die WOD: PreOrder Now-App, die auf die korrekte Varianten-ID angewiesen ist, um zu funktionieren, was dazu führt, dass die Vorbestelloption nach der ersten Auswahl verschwindet.

Ich habe dasselbe Setup mit den Standard-Themes Dawn und Horizon getestet.

Bei Dawn & Horizon wird die Varianten-ID korrekt aktualisiert und die App funktioniert einwandfrei.

Dies bestätigt, dass das Problem speziell ein Fehler im JavaScript/Liquid-Code der Variantenwahl des Tinker-Themes ist.

Der WOD: PreOrder Now Support bestätigte mir bereits, dass die Erweiterung nicht korrekt funktionieren kann, wenn in der URL die varianten-ID nicht geändert wird.

2

Du liegst völlig richtig, das ist kein App-Problem, sondern ein Kompatibilitätsfehler im Theme-Code.
Das Tinker-Theme überschreibt wahrscheinlich das Standard-Verhalten von Shopify beim Variant-Wechsel (onVariantChange), ohne die Variant-ID in der URL zu aktualisieren. Dadurch kann die App WOD: PreOrder Now die Varianten-ID nicht auslesen und funktioniert nach der ersten Auswahl nicht mehr richtig.

Zum Überprüfen kannst du in deiner Theme-Datei (meist product-form.js, variant-picker.js oder ähnlich) nach folgendem Codeblock suchen:

window.history.replaceState({}, '', '?variant=' + variant.id);

Fehlt dieser oder wird er nur unter bestimmten Bedingungen ausgeführt, liegt genau dort der Fehler.
Füge einfach nach der Variant-Änderung folgenden Code ein:

if (variant && variant.id) {
  const url = new URL(window.location.href);
  url.searchParams.set('variant', variant.id);
  window.history.replaceState({}, '', url);
}

Damit wird die Variant-ID immer korrekt in der URL aktualisiert - genau wie bei den Themes Dawn und Horizon – und dein Problem mit der PreOrder-App sollte sofort behoben sein.

Wenn du möchtest, kann ich mir deine Produkt-Datei kurz ansehen und dir genau zeigen, wo der Code platziert werden sollte (Tinker hat je nach Version leicht unterschiedliche Strukturen).
Schreib mir einfach kurz – ich helfe dir gern dabei, das sauber und update-sicher einzubauen.

3

:globe_showing_americas:Übersetzt vom Englischen ins Deutsche mit Google Übersetzer
Bei themenspezifischen Problemen überprüfen Sie die Einstellungen oder wenden Sie sich DIREKT an den Entwickler des jeweiligen Themas.

English: For theme specific issues double check the settings, or contact that theme’s developer DIRECTLY

Dann ist die App von einer sehr fragilen Komponente abhängig.
Es ist also nicht das Theme, das ein kritisches Kompatibilitätsproblem hat.
Die App ist fragil und inkompatibel.
Geben Sie nicht zu viele Schuldzuweisungen, wenn Sie nicht wissen, was Sie tun.
Das führt dazu, dass echte Experten Sie in Zukunft ignorieren.

English:
Then the app is reliant on a very fragile thing.
So it’s isn’t the theme that has a “critical compatibility” issue.
The app is fragile and incompatible.
Don’t issue excessive blame if you don’t know what your doing.
It will make actual experts ignore you in the future.

4

Hallo Michkyy,

ich habe in den beiden JavaScripts deine angegebene Codezeile nicht genau gefunden.

Das hier kommt dem am nächsten und steht in der variant-picker.js:

    const currentUrl = this.dataset.productUrl?.split('?')[0];
    const newUrl = event.target.dataset.connectedProductUrl;
    const loadsNewProduct = isOnProductPage && !!newUrl && newUrl !== currentUrl;

    this.fetchUpdatedSection(this.buildRequestUrl(event.target), loadsNewProduct);

    const url = new URL(window.location.href);

    let variantId;

    if (event.target instanceof HTMLInputElement && event.target.type === 'radio') {
      variantId = event.target.dataset.variantId || null;
    } else if (event.target instanceof HTMLSelectElement) {
      const selectedOption = event.target.options[event.target.selectedIndex];
      variantId = selectedOption?.dataset.variantId || null;
    }

    if (isOnProductPage) {
      if (variantId) {
        url.searchParams.set('variant', variantId);
      } else {
        url.searchParams.delete('variant');
      }
    }

Kannst du damit etwas anfangen?

Vielen Dank schon mal für deine Antwort.

5

Hey,

Leider gibt es keine native Shopify-Einstellung dafür. Dieses Verhalten wird durch den JavaScript-Code des Themes gesteuert. Du müsstest entweder den Tinker-Theme-Entwickler kontaktieren oder den Code selbst im Theme-Editor anpassen (Online Store → Themes → Aktionen → Code bearbeiten). Suche die JavaScript-Datei für die Variantenauswahl (meist theme.js oder product.js im Assets-Ordner) und modifiziere sie, um die URL mit history.pushState() oder history.replaceState() zu aktualisieren, ähnlich wie Dawn es macht. Shopify Ajax API Dokumentation.

Wichtig: K1 PreOrder unterstützt viele Themes, einschließlich Custom-Themes. Falls es zu Kompatibilitätsproblemen kommt, bietet unser Team kostenlose Theme-Anpassungen an (ich bin Gründer von K1 PreOrder). K1 PreOrder App.

Melde dich bei Bedarf gerne.

Mit freundlichen Grüßen,
Yauheni