FROM CACHE - de_header

Produkt Varianten | Tischsystem

mcs2
Neues Mitglied
16 0 0

Hallo, 

 

wir bieten in Zukunft ein sehr umfangreiches Tischsystem an. Dies möchte ich gerne mit den Shopify Produkt Varianten sowie ergänzend mit einer App umsetzen, sodass ich die begrenzte Variantenanzahl umgehen kann. Dies funktioniert mittlerweile schon ganz gut. Nun möchte ich aber die verschiedenen Auswahloptionen hinter einem typischen "Customize"-Button verstecken. Sodass diese noch nicht von Anfang an alle sichtbar sind. Begründung ist, dass die Seite sonst einfach zu lang wird. Gibt es eventuell eine App oder eine andere Lösung, um so etwas umsetzen zu können? 

 

Außerdem wäre es schön, wenn sich die Metafelder für Varianten auch dynamisch anpassen könnten, so wie Artikelnummer, Preis usw. ohne dass die Seite neu lädt. Hierbei bräuchte ich ebenfalls Unterstützung. 

 

Wir nutzen das Theme "Flow". 

 

Ich freu mich auf eure Antworten 🙂

3 ANTWORTEN 3

Gabe
Shopify Staff
17872 2827 4164

Hey @mcs2 

 

Ein tolles Theme, das Flow Theme - gute Wahl! 😉


Das klingt auch super was ihr umsetzen wollt, und es gibt hier ein paar verschiedenen Ansätze die ich jetzt auflisten werde hier. Beachte auch, dass bald ggf. der Limit erhöht wird, ich kann aber nicht sagen, ob und wann. Bis dahin:

 

"Customize"-Button:

  • Manuelle Implementierung: Du kannst mit ein wenig Liquid- und Javascript-Code in deinem Theme den "Customize"-Button hinzufügen. Wenn der Kunde darauf klickt, werden die versteckten Auswahloptionen sichtbar gemacht.
    1. Nutze CSS, um die Variantenauswahl standardmäßig zu verbergen.
    2. Füge einen "Customize"-Button hinzu.
    3. Benutze JavaScript/jQuery, um den Klick auf den Button zu erkennen und die versteckten Auswahloptionen anzuzeigen.
  • Apps: Es gibt viele Apps im Shopify App Store, die das Hinzufügen von Produktvarianten und -optionen erleichtern. Einige der populären sind "Infinite Options", "Bold Product Options" oder "Advanced Product Options". Die Apps könnten eine Funktion bieten, die dem ähnelt, was du suchst, oder können zumindest so konfiguriert werden, dass sie deinen Anforderungen entsprechen. Einfach die Demos der Apps im App Store durchklicken um zu sehen ob sie das machen was ihr braucht. Wenn nicht, dann beschreibe hier bitte genau wie die Apps das nicht machen was ihr braucht.

Dynamische Anpassung der Metafelder:

  • Ajax und Liquid: Durch die Verwendung von Ajax kannst du die Seite aktualisieren, ohne sie neu zu laden. Wenn ein Kunde eine Variante auswählt, kannst du einen Ajax-Aufruf auslösen, der die relevanten Informationen (z.B. Artikelnummer, Preis usw.) von Shopify abruft und sie auf der Seite ohne Neuladen aktualisiert. Das erfordert etwas Kenntnis in Liquid, JavaScript und Ajax und gerne kann ich dir ein paar Code Lösungen anbieten um das in einer testumgebung zu testen und realisieren.
  • Apps: Einige der oben genannten Apps wie "Bold Product Options" oder "Advanced Product Options" bieten dynamische Preisaktualisierungen an, je nachdem welche Optionen oder Varianten der Kunde auswählt. Dies könnte auch eine Lösung für das dynamische Update der Metafelder sein.

Theme "Flow":

  • Wenn du das "Flow" Theme verwendest, musst du sicherstellen, dass jede Anpassung oder App, die du hinzufügst, mit diesem Theme kompatibel ist. Einige Apps könnten spezifische Anpassungen für bestimmte Themes erfordern. In solchen Fällen wäre es ratsam, sich direkt an den Theme-Entwickler oder an einen Shopify-Experten zu wenden, um sicherzustellen, dass alles reibungslos funktioniert.

Wenn du nicht über die notwendigen technischen Fähigkeiten verfügst, empfehle ich dir, einen Shopify-Experten oder -Entwickler zu beauftragen, der diese Anpassungen für dich durchführt. Gerne kann ich welche empfehlen! 😉 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

mcs2
Neues Mitglied
16 0 0

Hallo @Gabe

 

das hört sich super an, danke schonmal!

 

Könntest du uns die Codelösungen für das dynamische Update der Metafelder geben? Dann testen wir das mal aus.. Folgendes habe ich bereits ausprobiert, leider ohne Erfolg: https://community.shopify.com/c/technical-q-a/showing-variant-metafield-on-the-product-page-dynamica...

Gabe
Shopify Staff
17872 2827 4164

@mcs2 

 

Aber gerne, so dass du das zusammen mit deinem Entwickler das näher 👁️ kannst!

Ganz so einfach wird das aber leider nicht sein (v. a. wenn man unsere Developer Doku liesst) und hier wäre nochmal zu erwägen ob die Apps das nicht besser und out-of-the-box können...

 

Wenn du es doch selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

 

Füge zuerst einen Button zu deinem Produkt Template hinzu, wie z. B. mit einem Code wie folgt (wie gesagt, ohne Gewähr und Theme-abhängig):

 

<button id="customize-button">Customize</button>

 

Verberge die Variantenauswahlfelder über CSS:

 

.variant-selector {
    display: none;
}

 

Füge JavaScript/jQuery hinzu, um die versteckten Variantenauswahlfelder anzuzeigen, wenn der "Customize"-Button geklickt wird:

 

$('#customize-button').on('click', function() {
    $('.variant-selector').show();
});

 

Dann musst du sicherstellen, dass jQuery in deinem Theme enthalten ist. Wenn nicht, musst du es hinzufügen. Erstelle einen Event-Handler für die Variantenauswahl:

 

$('#variant-dropdown').on('change', function() {
    var variantId = $(this).val();
    fetchUpdatedVariantData(variantId);
});

 

Definiere die fetchUpdatedVariantData Funktion, um einen Ajax-Aufruf durchzuführen: 

 

function fetchUpdatedVariantData(variantId) {
    $.ajax({
        type: 'GET',
        url: '/products/' + {{ product.handle }} + '.js',
        dataType: 'json',
        success: function(product) {
            var selectedVariant;
            for (var i = 0; i < product.variants.length; i++) {
                if (product.variants[i].id == variantId) {
                    selectedVariant = product.variants[i];
                    break;
                }
            }
            if (selectedVariant) {
                // Beispiel: Aktualisiere den Preis und die SKU
                $('#price').text('$' + selectedVariant.price);
                $('#sku').text(selectedVariant.sku);

                // Wenn du Metafelder aktualisieren möchtest, musst du diese Daten vermutlich aus einer anderen Quelle beziehen, da der oben genannte Ajax-Aufruf nur die Standardprodukt- und Varianteninformationen zurückgibt.
            }
        }
    });
}

 

  • Dieser Code verwendet jQuery und geht davon aus, dass du ein Dropdown-Menü mit der ID variant-dropdown für die Variantenauswahl und Elemente mit den IDs price und sku hast, um den Preis und die SKU anzuzeigen.
  • Der Code ruft die Produktinformationen über Ajax im JSON-Format ab und aktualisiert dann die Seite mit den Informationen der ausgewählten Variante.
  • Das obige Beispiel zeigt, wie du Preis und SKU aktualisierst. Wenn du Metafelder aktualisieren möchtest, benötigst du möglicherweise eine zusätzliche API-Abfrage oder ein Plugin, um diese Daten zu erhalten.

Das sind ziemlich einfache Implementierungen und je nach deinem genauen Setup müssen sie möglicherweise mit einem Experten angepasst werden. 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog