Liquid, JavaScript, Themes
Hallo zusammen,
ich benutze das Theme Taste und teste gerade abschließend den Bestellvorgang im Testmodus, die Homepage ist noch nicht online.
Wenn ich einen Artikel in den Warenkorb lege und danach auf weiter shoppen klicke, komme ich auf eine ganz andere Seite und nicht zurück zu den Produkten.
Vor einigen Wochen habe ich das schonmal getestet, da hat alles einwandfrei funktioniert.
Shop:
https://www.kulinarische-handwerker.de/cart
https://www.kulinarische-handwerker.de/collections/all
Screenshot liegt bei, vielleicht hilft`s.
Gelöst! Zur Lösung
Erfolg.
@Kulinaut du musst im Code-Editor unter Abschnitte in die main-cart-items.liquid
In Zeile 29 & 34 muss dann dieser Inhalt
(Zeile 29) <a href="{{ routes.all_products_collection_url }}" class="underlined-link">
(Zeile 34) <a href="{{ routes.all_products_collection_url }}" class="button">
mit folgenden ersetzt werden
(Zeile 29) <a href="{{ routes.root_url }}" class="underlined-link">
(Zeile 34) <a href="{{ routes.root_url }}" class="button">
Dann führt der Link zur Startseite
Erfolg.
@Kulinaut, der Button gehört zum Abschnitt "Vorgestellte Kategorie". Du kannst entweder eine andere Kategorie definieren (das geht direkt über den Theme-Editor) oder man muss dazu in den Code. Hier muss man aufpassen, da dieser Abschnitt ggf. auf anderen Seiten zum Einsatz kommt, und dann nicht wie gewünscht die restlichen Produkte einer Kategorie anzeigt.
Man kann das Theme über den Code so weit anpassen, dass man in je nach Anwendung entscheiden kann, ob es ein Link zu einer beliebigen Seite oder zu einer bestimmten Kategorie führen soll. Ist aber etwas komplexer. Die Erläuterung hierfür ist etwas zu umfangreich, als dass ich das eben mal hier einfügen könnte.
Daher poste ich hier mal einen Link zum Shopify Experts Portal 😉:
https://experts.shopify.com/location/germany
@Kulinaut dieser Button sieht im Code folgendermaßen aus
<a href="{{ routes.all_products_collection_url }}" class="button">
{{ 'general.continue_shopping' | t }}
</a>
Übersetzt bedeutet es, dass der Nutzer auf die Kategorie "Alle Produkte" weitergeleitet wird.
Eventuell macht es mehr Sinn, denn Kunden wieder auf die Startseite zu verweisen.
Eine Weiterleitung auf das Produkt, dass zum Warenkorb hinzugefügt worden ist, ist m.E. nicht sinnvoll, da der Kunde es schon ausgewählt hat.
Hast du schon mal im Code-Editor deines Themes etwas angepasst?
Hallo Finer,
Danke für die schnelle Antwort. Im Code Editor habe ich noch nichts angepasst.
Die Weiterleitung sollte auch nicht zurück zum bereits bestellten Produkt, zurück in die Kategorie "Alle Produkte" wäre gut, bzw. auf die Startseite, dort findet der Käufer ja alles.
Hey @Kulinaut
Wow, kulinarische-handwerker.de wird ein tolles Shop! Und dass der "Weiter Shoppen" zur "All Collections" Page leitet ist wahrscheinlich keine schlechte idee.
Suche nach dem Code für die Checkout-Schaltfläche, indem du in der Datei nach name="checkout"
suchst. Die Codezeile für die Checkout-Schaltfläche variiert je nach Theme, sieht aber etwa so aus:
<button type="submit" id="checkout" name="checkout" class="btn">
{{ 'cart.general.checkout' | t }}
</button>
Im nächsten Schritt musst du eine neue Codezeile einfügen, um den Link Einkauf fortsetzen zu erstellen. Der Code, den du einfügen musst, hängt davon ab, auf welcher Seite der Link angezeigt werden soll und der Code für die All Collections wäre etwas wie:
<a href="/collections/all" title="Continue shopping">Weiter shoppen</a>
Zur Homepage weiterleiten:
<a href="/" title="Continue shopping">Weiter shoppen</a>
Für einen Link, der zu der zuletzt angesehenen Collection führt:
<a
id="continue-shopping"
href=""
title="Weiter shoppen">
Weiter shoppen
</a>
Wenn du einen Link hinzugefügt hast, der auf die zuletzt geöffnete Kategorieseite verweist, musst du deinem Theme-Code etwas JavaScript-Code hinzufügen. Befolge dazu die nächsten Schritte.
Klicke in der Übersicht Layout auf theme.liquid
.
Suche das abschließende Tag </body>
am Ende der Datei. Füge den folgenden Code über dem abschließenden Tag </body>
ein:
<script>
if(Storage !== undefined) {
var defaultLink = "/collections/all";
{% if template contains 'collection' %}
sessionStorage.collection = "{{ collection.url }}";
{% endif %}
{% if template contains 'cart' %}
if( !sessionStorage.collection ) {
sessionStorage.collection = defaultLink;
}
document.getElementById("continue-shopping").href = sessionStorage.collection;
{% endif %}
}
</script>
Hoffe das hilft!
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
Hey Gabe,
das ist alles schön und gut, nur frage ich mich gerade, warum ich jetzt im Code etwas einfügen muss, für eine Funktion, die meines Wissens im Theme Taste eine Standardfunktion ist. Wo sonst kommt die Funktion "weiter Shoppen" dann her?
Wie schon erwähnt, vor ein paar Wochen hat das funktioniert.
Gut, dass ich keine Ahnung von Codierung habe, sonst wäre es ja langweilig.
Aber ich versuche es mal. Doch wo genau muss der Code rein, in welche Zeile, bzw. unter welche Zeile genau? Siehe Screenshot im Anhang.
Bitte nochmal antworten, Danke vorab.
Grüße, Peter
Erfolg.
@Kulinaut du musst im Code-Editor unter Abschnitte in die main-cart-items.liquid
In Zeile 29 & 34 muss dann dieser Inhalt
(Zeile 29) <a href="{{ routes.all_products_collection_url }}" class="underlined-link">
(Zeile 34) <a href="{{ routes.all_products_collection_url }}" class="button">
mit folgenden ersetzt werden
(Zeile 29) <a href="{{ routes.root_url }}" class="underlined-link">
(Zeile 34) <a href="{{ routes.root_url }}" class="button">
Dann führt der Link zur Startseite
@Finer, @Gabe
Super. Perfekt, funktioniert.
Jetzt führt nur der "Alle anzeigen" Button noch in die falsche Richtung.
Könnt Ihr mir dafür bitte auch noch die genauen Zeilen durchgeben, wo ich das ändern muss🤔
Dann gebe ich auch einen aus 🤝🤝
Erfolg.
@Kulinaut, der Button gehört zum Abschnitt "Vorgestellte Kategorie". Du kannst entweder eine andere Kategorie definieren (das geht direkt über den Theme-Editor) oder man muss dazu in den Code. Hier muss man aufpassen, da dieser Abschnitt ggf. auf anderen Seiten zum Einsatz kommt, und dann nicht wie gewünscht die restlichen Produkte einer Kategorie anzeigt.
Man kann das Theme über den Code so weit anpassen, dass man in je nach Anwendung entscheiden kann, ob es ein Link zu einer beliebigen Seite oder zu einer bestimmten Kategorie führen soll. Ist aber etwas komplexer. Die Erläuterung hierfür ist etwas zu umfangreich, als dass ich das eben mal hier einfügen könnte.
Daher poste ich hier mal einen Link zum Shopify Experts Portal 😉:
https://experts.shopify.com/location/germany
Hallo nochmal,
ich habe es nun kapiert, Danke für Eure Hilfe.
Weiter so!!!!
Beste Grüße, Peter.
Hallo @Finer
Danke schon mal für deine Antwort oben, das hat mein Problem zum Teil schon gelöst. Eine Frage habe ich aber noch:
Kannst du mir den korrekten Syntax für eine Weiterleitung an eine bestimmte Kategorie nennen (z.B. "Alle Produkte")? Dies entspricht ja dann in den collections "alle-produkte".
Wäre es also:
(Zeile 29) <a href="{{ routes.alle_produkte_url }}" class="underlined-link">
(Zeile 34) <a href="{{ routes.alle_produkte_url }}" class="button">
Was ich nicht ganz verstehe ist, dass man diese ...collections/all Seite nirgends anpassen kann, oder habe ich es einfach übersehen? Ich verwende übrigens das Dawn Theme...
Vielen Dank
@SwissChris sofern du einen spezifischen Link verwenden willst, müsstest du die URL verwenden:
<a href="/collections/alle-produkte" >Button Text</a>
Aber die meisten Felder, bei denen ein Link hinterlegt werden (im Theme-Editor) kannst du ja die spezifische URL eintragen, ohne dass du Liquid-Objekt verwenden musst. In diesem Fall klickst du in das URL-Feld und dir werden die shopinternen Optionen angezeigt (Seiten, Kategorien, Produkte, usw..)
Hallo @Finer
Danke für die Antwort. Im Grunde also normaler HTML Syntax.
Du schreibst: "Aber die meisten Felder, bei denen ein Link hinterlegt werden (im Theme-Editor) kannst du ja die spezifische URL eintragen, ohne dass du Liquid-Objekt verwenden musst. In diesem Fall klickst du in das URL-Feld und dir werden die shopinternen Optionen angezeigt (Seiten, Kategorien, Produkte, usw..)"
Das ist mir klar. Für die meisten Buttons und sonstigen Links kann man dies im Theme Editor direkt machen. Dies gilt aber nicht für den Fall mit der collections/all Seite. Diese Seite wird soweit ich weiss von Shopify selbst erstellt und kann nirgends bearbeitet werden. Zumindest wüsste ich nicht wie und wo. Falls ich es übersehen habe, bitte ich dich, mich zu korrigieren.
Man kann zwar eine Kategorie mit dem Namen "all" erstellen, dies ist aber eher ein Hack als eine echte Lösung.
Den Link müste man ja im Theme Editor auf der Warenkorb-Seite anpassen können. Das kann man aber nicht, zumindest nicht im Dawn Theme.
Das hat mega geholfen, vielen, vielen Dank 😍
Hallo Finer,
Danke für die schnelle Antwort. Im Code Editor habe ich noch nichts angepasst.
Die Weiterleitung sollte auch nicht zurück zum bereits bestellten Produkt, zurück in die Kategorie "Alle Produkte" wäre gut, bzw. auf die Startseite, dort findet der Käufer ja alles.
Zusatz:
Klicke ich Warenkorb auf "Alle anzeigen", werde ich ebenfalls auf die gleiche Seite geleitet wie bei dem Button "weiter Shoppen"
@Kulinaut welches Theme verwendest du denn?
Taste
@Gabe Kannst du helfen???
Hallo, ich habe das gleiche Problem. Möchte nicht dass der Weiter Shoppen Button auf Alle Produkte verlinkt und habe hier im Forum nur eine Möglichkeit gefunden, dann direkt zur Startseite zurückzuführen,
Habe schon {{ routes.root_url }} eingepflegt, wo davor {{ routes.all_products_collection_url }} sowohl im main-cart-items.liquid als auch im cart.drawer.liquid
stand. Beim Cart drawer hat es wohl geklappt, aber bei Main Cart Items kommt jetzt 404...
Hoffe, jemand kann mir da weiterhelfen? Wenn möglich würde ich gerne auf eine bestimmte Kollektion verweisen. Aber wenn das zu kompliziert ist, nehme ich lieber die Startseite.
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024