Produktvarianten und dynamische Lieferzeiten

[IvoEngelhardt]

Moin moin,

ich arbeite mich seit kurzen in Shopify ein und bin auf ein Problem gestoßen wo ich leider nicht den richtigen Ansatz finde.

Wir bieten für jedes Produkt zwei Varianten an und benötigen jeweils unterschiedliche Lieferzeiten für jede Varianten. 

Also Variante A -> Lieferzeit 2 Tage, Variante B -> Lieferzeit 1 Woche

Gibt es da eine passende App oder muss ich dieses im Code mit einer if/then Anweisung realisieren? 

Vielen Dank 

Ivo

[Gabe]

Hey Ivo! @IvoEngelhardt 

Das klingt interessant und da habe ich noch die eine oder andere Frage zu dem Use-Case den du beschreibst: handelt es sich hier um ein Lieferzeit Anzeigeproblem und möchtest du in der Variante auf der Product Page selber die unterschiedlichen Lieferzeiten anzeigen?

In deinen Versandeinstellungen kannst du ja die Versandtarife einrichten pro Versandzone. Die Lieferzeit selber ist eher was du in deiner Versandrichtlinie festlegst und in der Fußzeile verlinkst. Habe ich das richtig verstanden?

[IvoEngelhardt]

Hallo @Gabe,

danke für Deine Antwort. Wir haben folgendes Szenario:

Es gibt ein Produkt (ein Ersatzteil) mit zwei Varianten. Variante A: Versand des Ersatzteils, Variante B: Einsenden des Gerätes mit Einbau des Ersatzteils und anschließender Rücksendung.

Dabei soll wenn eine Variante ausgewählt wird sich die voraussichtliche Lieferzeit ändern und das ohne Neuladen der Seite. Also Lieferzeit bei der Variante A: 2 Tage, Variante B: 14 Tage oder sowas. So wie ich das verstehe, gelten die Versandrichtlinien und Einstellungen aber immer für das gesamte Produkt und kann nicht so für Varianten separat definiert werden, oder?

[Gabe]

Hey Ivo! @IvoEngelhardt 

danke für die Angaben und basierend auf was du sagst und den Informationen, die du erwähnt hast, hättest du gerne eine angepasste Versandmeldung pro Variante auf der Produktseite. Nicht vergessen, dass auch die Versandrichtlinie sowohl für das gesamte Produkt als auch für Varianten separat definiert werden kann. Diese kannst du dann in der Produktebeschreibung verlinken und auch im Footer ganz unten.

Ist das ein Shopify Theme und warum ich das frage? Weil ggf. habe ich hier einen Ansatz -> damit sich die Sichtbarkeit des Hinweises bei der Auswahl verschiedener Varianten aktualisiert, müßte man neben dem HTML-Code für den Text auch Javascript-Code verwenden. Man kann in der Tat etwas Javascript auf der Produktseite/in der Produktbeschreibung verwenden so dass die jeweilige Versandzeit angezeigt wird je nach Variante A oder B und ohne Refresh der ganzen Page (hierfür empfehle ich einen Programmierer oder Shopify Experten - gerne kann ich welche empfehlen).

Der HTML-Code befindet sich oft in der product-template.liquid, und sieht ähnlich wie folgt aus:

<p id="shipping-notice" style="display: none;">Dein Mustertext hier.</p>

Der Javascript-Code kann man oft in der Datei theme.js.liquid, im Bereich "Assets" finden ist und sieht ähnlich wie folgt aus - müsste aber angepasst werden:

//Display a custom shipping message
    if (variant.inventory_quantity <= 0 && variant.available && variant.inventory_management != '') {
      document.getElementById('shipping-notice').style.display = "block";
      document.getElementById('shipping-notice').style.color = "#ff0000";
    } else {
      document.getElementById('shipping-notice').style.display = "none";
    }

Im Wesentlichen wird der HTML- und Javascript Code so programmiert, dass der Satz angezeigt wird, je nachdem welche Bedingung der Javascript-Code als true oder false festlegt, sprich, dass die aktuelle Variante entweder 2 oder 14 Tage Lieferzeit hat. Der Workflow wäre der folgende -> wenn man Variante A oder B wählt erscheint unterhalb des Produktpreises das folgende:

• Lieferzeit: 2 Tage,
• Oder -> Lieferzeit: 14 Tage

Man kann auch weitere Shipping Infos anzeigen wie "Free Shipping" o. ä. denn das erhöht die Chance einer Conversion.

Ich habe auch ähnliche Anfragen in unserer Community gefunden wo die Bearbeitung einiger Codes im Theme gemacht wurde und die Schritte für die Bearbeitung der Variantenbeschreibung und dem Hinzufügen einer Versandzeitrahmens Conditional Logic. Siehe ein Beispiel hier.

Andere Optionen wären unsere Apps für die Variantenbeschreibung denn diese sparen dir wertvolle Zeit und Mühe die Bedingungen der Variantebeschreibungen selber einprogrammieren zu müssen mit den unterschiedlichen Versandzeiten. Siehe einer dieser Apps hier (auch mit einem Free Plan).

Ich habe auch einige hilfreiche Ressourcen gefunden, die bei der Bearbeitung der Produktseite helfen können, um den Besuchern zum Shop eine verbesserte Einkaufserfahrung zu bieten. Die folgende Anleitungen können im allgemeinen helfen das Code zu "tweaken" und etwas Conditional Logic einzubauen:

Product variants and options

• Find a variant ID
• Get customers to choose an option
• Hide sold-out variants
• Localize your product prices for search engines
• Show featured image until a variant is selected
• Select variants by clicking their images
• Use products with multiple options
• Add pickup availability to product pages
• Show the remaining inventory on product pages

[IvoEngelhardt]

Hallo @Gabe,

vielen Dank für diesen Lösungsansatz. Wir verwenden das Theme "Electro". Ich werde morgen früh mir dann mal die empfohlenen Apps ansehen oder mich an die Programmierung setzen und Dir eine Rückmeldung geben.

Nochmals vielen Dank.

[IvoEngelhardt]

Hallo @Gabe

ich habe soeben mich an die Lösung des Problems gemacht, scheitere aber an der fehlenden theme.js.liquid. Die gibt es in unserem Theme leider nicht. Auch eine lokale Suche mit grep -r "key" .  war nicht sonderlich erfolgreich. Wir haben aber eine Datei mit dem Namen: product-order-shipping.liquid.

Dort ist die Ausgabe des definiert und ich habe folgendes probiert:

<p>
    Variant first id: {{ product.variants.first.id }}<br />
    Variant last id: {{ product.variants.last.id }}
</p>

 Damit kann ich schon die aktuellen ID's der Varianten des Produktes ausgeben. Soweit so gut. Mit der folgenden Bedingung prüfe ich ob die erste Variante gewählt ist.

{% if product.selected_variant.id == product.variants.first.id %} <p id="shipping-notice">Variante 1 gewählt</p> {% endif %}

Leider nur beim Neuladen der Seite. Da ich keine theme.js.liquid habe, muss ich die Function wohl per onclick() in die SelectBox zufügen. Oder hast Du noch eine andere Idee bzw. Codesnipsel?

Vielen Dank

Ivo 

[Gabe]

Hey @IvoEngelhardt 

An erster Stelle rate ich immer zuerst im Code einer Themekopie zu basteln und NICHT im Code des Live Themes. Du willst das Live Theme ja nicht aus versehen zerschiessen.

Da das ein fremdes Theme ist können wir da nicht viel machen und ich rate einen Experten/Programmierer zu engagieren wie @tewe oder taskhusky.com. Kannst du die Theme Entwickler ggf. erreichen (https://bit.ly/3fLOJ52 -> arenacommerce?)

[IvoEngelhardt]

@Gabe

Ich habe das Theme selbstverständlich kopiert kopiert und führe dort mein Tests aus. 

Mals schauen ob ich da was machen kann. 

Danke Dir

[Gabe]

Bleib dran und du wirst es schaffen!

VG,