FROM CACHE - de_header
Gelöst

Abschnitt featured product im Blog verwenden

Melanie_fenou
Tourist
4 1 1

Hallo liebe Community,

ich möchte in Blog-Beiträgen empfohlene Produkte verlinken. Ich nutze dafür zum einen im Theme den Abschnitt "image with text block", welcher einen Button enthält, der zur Shopseite des Produktes führt. Zum anderen möchte ich gern den "featured product" Abschnitt verwenden. Dieser ermöglicht, den Artikel direkt auf der Blogseite in den Warenkorb zu legen. Dies funktioniert auch, leider springt die Seite nun bei Öffnen des Blogbeitrages direkt auf diesen Abschnitt. Ich lande als bei Aufrufen der Seite nicht am Seitenanfang mit der Überschrift, sondern direkt unter dem Blogartikel beim Produkt.

 

Hat jemand eine Idee woran dies liegt und wie man es beheben kann? Ich bin noch recht unerfahren mit Shopify und darum für jede Anleitung sehr dankbar!

 

Herzliche Grüße

Melanie

1 AKZEPTIERTE LÖSUNG

Gabe
Shopify Staff
17946 2846 4186

Erfolg.

Hey Melanie! @Melanie_fenou 

 

Danke für die Angaben und scheint sich hier um einen Anchor Link zu handeln. Dabei erhält der "featured product" Abschnitt in deinem Theme automatisch den Fokus, wenn die Seite geladen wird was durch einige JavaScript-Codezeilen oder spezifische HTML-Einstellungen verursacht werden kann. 

 

Du kannst den "featured product" Abschnitt im Theme Code suchen (normalerweise zu finden unter sections/featured-product.liquid oder einem ähnlich benannten File). Überprüfe, ob es ein HTML-Element mit dem Attribut autofocus gibt. Wenn ja, dann kannst du dieses Attribut entfernen.

 

Ein Anker-Link ist auch ein spezieller Typ von Hyperlink, der zu einem bestimmten Punkt auf einer Seite führt. Er verwendet die #-Notation, um einen bestimmten Abschnitt einer Seite zu identifizieren. Zum Beispiel könnte der Link https://deine-seite.de/blogbeitrag#produktabschnitt  direkt zum Abschnitt "produktabschnitt" auf der Seite "blogbeitrag" führen.

 

Du kannst die URL in der Adressleiste deines Browsers überprüfen, wenn du den Blogbeitrag öffnest. Wenn du am Ende der URL ein #-Zeichen gefolgt von einem Wort oder einer Phrase siehst, dann handelt es sich wahrscheinlich um einen Anker-Link.

 

Oder zum featured-product.liquid Abschnitt gehen (oder einem ähnlich benannten Abschnitt) in deinem Theme und suche nach einem id Attribut, das dem Namen nach dem # in der URL entspricht. Es könnte so aussehen:

 

<div id="produktabschnitt">
  <!-- Inhalt des Featured Product Abschnitts -->
</div>

 

Wenn du solch ein id-Attribut findest, dann ist das der Anker, zu dem die Seite scrollt. Löschen oder Ändern des Ankers: Wenn du den Anker nicht benötigst, kannst du einfach das id-Attribut aus dem HTML-Code entfernen. Wenn du es benötigst, aber nicht möchtest, dass die Seite automatisch dorthin scrollt, könntest du das id in etwas anderes ändern und sicherstellen, dass keine Links mehr auf das alte id verweisen.

 

Wenn du es selber machen 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!

 

Das Problem könnte auch durch JavaScript verursacht werden, das automatisch zu einem bestimmten Bereich der Seite scrollt.

  • Suche in den JavaScript-Dateien deines Themes (oft in einem Ordner namens assets und mit einer .js-Endung) nach Funktionen, die den Scroll-Effekt auslösen könnten. Dies kann eine Funktion wie scrollTo, scrollIntoView oder etwas Ähnliches sein.
  • Insbesondere könntest du nach solchen Funktionen suchen, die innerhalb eines "DOMContentLoaded"- oder "window.load"-Ereignisses aufgerufen werden.

Die meisten modernen Webbrowser bieten Entwicklertools, mit denen du den Quellcode und die Netzwerkanfragen einer Webseite inspizieren kannst. Du könntest diese Tools verwenden, um herauszufinden, welches Skript oder welcher Code das automatische Scrollen auslöst.

  • Öffne deinen Blogbeitrag im Webbrowser.
  • Rechtsklick und wähle "Untersuchen" oder "Element untersuchen" (abhängig vom Browser).
  • Gehe zum Tab "Konsole". Hier werden JavaScript-Fehler angezeigt, falls vorhanden. Es könnte Hinweise geben, welches Skript das Scrollen auslöst.

---
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Oder lass wissen, wenn du weitere Fragen dazu hast oder 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.

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

Lösung in ursprünglichem Beitrag anzeigen

5 ANTWORTEN 5

Gabe
Shopify Staff
17946 2846 4186

Erfolg.

Hey Melanie! @Melanie_fenou 

 

Danke für die Angaben und scheint sich hier um einen Anchor Link zu handeln. Dabei erhält der "featured product" Abschnitt in deinem Theme automatisch den Fokus, wenn die Seite geladen wird was durch einige JavaScript-Codezeilen oder spezifische HTML-Einstellungen verursacht werden kann. 

 

Du kannst den "featured product" Abschnitt im Theme Code suchen (normalerweise zu finden unter sections/featured-product.liquid oder einem ähnlich benannten File). Überprüfe, ob es ein HTML-Element mit dem Attribut autofocus gibt. Wenn ja, dann kannst du dieses Attribut entfernen.

 

Ein Anker-Link ist auch ein spezieller Typ von Hyperlink, der zu einem bestimmten Punkt auf einer Seite führt. Er verwendet die #-Notation, um einen bestimmten Abschnitt einer Seite zu identifizieren. Zum Beispiel könnte der Link https://deine-seite.de/blogbeitrag#produktabschnitt  direkt zum Abschnitt "produktabschnitt" auf der Seite "blogbeitrag" führen.

 

Du kannst die URL in der Adressleiste deines Browsers überprüfen, wenn du den Blogbeitrag öffnest. Wenn du am Ende der URL ein #-Zeichen gefolgt von einem Wort oder einer Phrase siehst, dann handelt es sich wahrscheinlich um einen Anker-Link.

 

Oder zum featured-product.liquid Abschnitt gehen (oder einem ähnlich benannten Abschnitt) in deinem Theme und suche nach einem id Attribut, das dem Namen nach dem # in der URL entspricht. Es könnte so aussehen:

 

<div id="produktabschnitt">
  <!-- Inhalt des Featured Product Abschnitts -->
</div>

 

Wenn du solch ein id-Attribut findest, dann ist das der Anker, zu dem die Seite scrollt. Löschen oder Ändern des Ankers: Wenn du den Anker nicht benötigst, kannst du einfach das id-Attribut aus dem HTML-Code entfernen. Wenn du es benötigst, aber nicht möchtest, dass die Seite automatisch dorthin scrollt, könntest du das id in etwas anderes ändern und sicherstellen, dass keine Links mehr auf das alte id verweisen.

 

Wenn du es selber machen 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!

 

Das Problem könnte auch durch JavaScript verursacht werden, das automatisch zu einem bestimmten Bereich der Seite scrollt.

  • Suche in den JavaScript-Dateien deines Themes (oft in einem Ordner namens assets und mit einer .js-Endung) nach Funktionen, die den Scroll-Effekt auslösen könnten. Dies kann eine Funktion wie scrollTo, scrollIntoView oder etwas Ähnliches sein.
  • Insbesondere könntest du nach solchen Funktionen suchen, die innerhalb eines "DOMContentLoaded"- oder "window.load"-Ereignisses aufgerufen werden.

Die meisten modernen Webbrowser bieten Entwicklertools, mit denen du den Quellcode und die Netzwerkanfragen einer Webseite inspizieren kannst. Du könntest diese Tools verwenden, um herauszufinden, welches Skript oder welcher Code das automatische Scrollen auslöst.

  • Öffne deinen Blogbeitrag im Webbrowser.
  • Rechtsklick und wähle "Untersuchen" oder "Element untersuchen" (abhängig vom Browser).
  • Gehe zum Tab "Konsole". Hier werden JavaScript-Fehler angezeigt, falls vorhanden. Es könnte Hinweise geben, welches Skript das Scrollen auslöst.

---
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Oder lass wissen, wenn du weitere Fragen dazu hast oder 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.

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

Melanie_fenou
Tourist
4 1 1

Vielen lieben Dank, Gabe!

Hast du einen Tipp, wo ich den Code für den Abschnitt einsehen kann und wie ich den Anchor Link im Code erkenne?

Gabe
Shopify Staff
17946 2846 4186

@Melanie_fenou 

 

Tut mir leid, ich habe weitere Edits oben hinzugefügt während du geantwortet hast. 

 

Kannst du diese Seite refreshen und schauen ob ich deine Frage oben beantwortet habe, Melanie?

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

Melanie_fenou
Tourist
4 1 1

Wow, danke für diese ausführliche Erklärung! Da werde ich mich mal ganz vorsichtig rantasten. Ich denke, damit ist die Frage beantwortet. 😊

 

Ganz lieben Dank dir und ein schönes Wochenende!

Gabe
Shopify Staff
17946 2846 4186

Gerne geschehen und dir ebenfalls! 😉

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