Produkttitel Wechsel je nach Variante

[mvxritz]

Guten Tag zusammen,

ich habe in meinem Shop für Produkte mehrere Varianten, einmal "normal" und einmal "bio". Nun suche ich nach einer Lösung bei der sich der Produkttitel auf der Produktseite je nach auswahl ändert. Sprich wenn normal ausgewählt wird, sollte nur Acerola Tabletten da stehen und wenn bio ausgewählt wird, dann Bio Acerola Tabletten. 

(Siehe Beispiel: https://amazonas-products.shop/products/bio-acerola-lutschtabletten?variant=43732479508745

Ist das irgendwie möglich?

Vielen Dank im vorraus!!

Viele Grüße,

Moritz

[Gabe · Accepted solution]

Hey Moritz! @mvxritz 

Danke für den Link und die Beschreibung und das ist ein super Shop, hut ab!

Du möchtest also, dass der Titel auf Produktebene sich mit der Variante ändert wenn man zwischen "Bio" und "Normal", sprich, von Acerola Tabletten zu Bio Acerola Tabletten und zurück.

Um den Produkttitel im Source Code zum Options-button zu verknüpfen wird eine ziemliche Programmierung verlangen (siehe ein Beispiel weiter unten) und ob es überhaupt möglich sein wird ist nicht klar, denn der Produkttitel wird vom Produktstamm gezogen und ist daher in das Theme ge-hardcoded und jedes Theme ist anders im Code aufgebaut und strukturiert.

Einfacher geht das wenn du ein Feld verwenden würdest anstatt den Produkttitel, wie z. B. das SKU oder das Vendor Feld, oder ein Metafeld und dann zeigst du einfach den anderen Titel bei Auswahl im Frontend.

Dann haben wir auch kostenlose Apps die du zum Shop hinzufügen kannst um sie zu testen wie die:

• Super Variant Title App
• Honey Variant Title App

Frontend Apps die man nicht mehr braucht rate ich während der Probezeit zu entfernen, wenn man sie nicht behalten will. Auf diese Weise werden mögliche Gebühren für Apps vermieden.
Einige Frontend Apps können auch das Theme Code ändern und die Page Loading Speeds verlangsamen und man sollte überprüfen, ob die App zusätzliche Schritte zur Deinstallation erfordert, bevor man die App aus dem Shop entfernt. Solche Apps (oder Code Änderungen) können ein Theme auch aus den Theme Updates ausschließen wenn das Theme Code geändert wird. Siehe dazu bitte die App Dokumentation (https://bit.ly/3oCC5qc).

Das Coding

Andere Workarounds gibt es wie z. B. wenn du ein Sonderzeichen am Ende des Produkttitels und vor zusätzlichen Ketwords einfügst, so dass nur noch der erste Teil des Titels im Schaufenster angezeigt wird.

Also zum Beispiel: "Produktname - Schlüsselwort1 - Schlüsselwort2 usw." wird zu "Produktname - Schlüsselwort1 - Schlüsselwort2 usw." Siehe mehr in diesem Leitfaden dazu.

Du kannst auch etwas Code zum theme.js hinzufügen (Theme-abhängig und vielleicht zuerst in einer Themekopie vorher testen). Suche da nach theme.Product und bei dem this.selectors Abschnitt füge die folgenden Zeile:

$title: $('#product-main-title', this.$container)

Danach gehst du zum Abschnitt "productPage" und nach der "variant.available if-statement" kopiere diesen Code:

// Update variant h1 title
var title = this.productSingleObject.title;
if(variant.title != "Default Title") {
    title = title + " / " + variant.title;
}
this.selectors.$title.html(title);

Und dann in deiner product-template.liquid dein h1 für den Produkttitel und füge ihm eine id hinzu (wie den Code unten). Dadurch wird der Titel jedes Mal aktualisiert, wenn du deine Produktvariante änderst:

<h1 id="product-main-title" class="product-single__title" itemprop="name">{{ product.title }}</h1>

Aber wie gesagt, teste das in einer Theme-kopie zuerst. Einen Experten kann ich gerne empfehlen!

Lass wissen, wenn du weitere Fragen hast zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[mvxritz]

Vielen Dank für die hilfreiche Antwort!!!