Liquid, JavaScript, Themes
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
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?
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
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?
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:
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:
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
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.
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
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?)
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
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
Bleib dran und du wirst es schaffen!
VG,
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
Wie du eine intuitive und ansprechende Online-Shopping-Experience für deine Kunden au...
By Gabe Apr 1, 2024Shopify unterstützt die weltweit innovativsten Marken und Unternehmer:innen. Um Unterne...
By SarahF_Shopify Mar 25, 2024Was ist ein kleines Element eines Shopify Shops mit großer Wirkung? Ein Element ganz we...
By Kai Mar 14, 2024