Liquid, JavaScript, Themes
Hallo,
in der Produktbeschreibung meiner Ersatzteile steht immer dazu "geeignet für folgende Modelle....".
Um bei einem neuen Model nicht alle Beschreibungen für die Ersatzteile anfassen zu müssen, habe ich den HTML Code dazu in einer TXT Datei gespeichert und möchte diese nun im Html Code der Produktbeschreibung einbinden. Leider reichen meine Kenntnisse nicht aus für das wie... Kann mir jemand helfen??
Moin,
also wenn du reines HTML hast, dann gibt es da wo Du die Produktbeschreibung einfügst oben rechts so ein kleines Zeichen.
Da kannst Du zwischen "normaler" Ansicht und HTML Code switchen.
Das meine ich nicht. Ich möchte Teile des HTML Codes in eine externe Datei auslagern und in dem HTML Code einbinden...
Hey @WANDLER-ERoller
Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren. Un dhat dir unserer Hilfeseite zum Thema "Theme Vorlagen" nicht helfen können?
Um den HTML-Code für die Liste der geeigneten Modelle in eine externe Datei auszulagern und diese in die Produktbeschreibung deines Shopify-Shops einzubinden, kannst du JavaScript verwenden. Da Shopify jedoch die direkte Einbindung externer HTML-Dateien in Produktbeschreibungen nicht unterstützt, musst du den Inhalt über ein Skript nachladen.
Erstelle eine HTML-Datei mit dem Namen models.html
und speichere sie in einem öffentlich zugänglichen Ordner auf deinem Webserver. Der Inhalt der Datei sollte so aussehen:
<p>Geeignet für folgende Modelle:</p>
<p><a title="Ersatzteile" href="/products/Ersatzteile"> Ersatzteile </a></p>
</p>
<p>Weitere Texte.<br></p>
//Usw.
Füge das folgende JavaScript in das Theme deines Shopify-Shops ein, um den Inhalt der externen HTML-Datei nachzuladen. Dies kann im theme.liquid
-Template oder in einem speziellen JavaScript-Asset erfolgen.
<script>
document.addEventListener('DOMContentLoaded', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/models.html', true); // Ersetze '/path/to/models.html' durch den tatsächlichen Pfad zu deiner Datei
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('model-compatibility').innerHTML = xhr.responseText;
}
};
xhr.send();
});
</script>
Bearbeite die Produktbeschreibung und füge einen Platzhalter-Container ein, an dem der externe Inhalt eingefügt wird:
<div class="product__description rte">
<p>Ersatzteiel Texte hier.</p>
<div id="model-compatibility"></div>
</div>
Durch diese Methode kannst du den HTML-Code für die Modellliste zentral verwalten und einfach aktualisieren, ohne jede Produktbeschreibung manuell ändern zu müssen. Dies spart Zeit und reduziert die Fehleranfälligkeit. Achte darauf, den Pfad zur models.html
-Datei korrekt anzugeben und sicherzustellen, dass die Datei öffentlich zugänglich ist.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
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. 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
An welcher Stelle im theme.liquid muss ich den Code platzieren?
--script für Modelanzeige alle
<script>
document.addEventListener('DOMContentLoaded', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://cdn.shopify.com/s/files/1/0611/7923/2456/files/inc-all-model.txt', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('model-compatibility').innerHTML = xhr.responseText;
}
};
xhr.send();
});
</script>
-- script Ende für Modelanzeige alle
Hey @WANDLER-ERoller
Das kann ich so von hier aus nicht sagen ohne in deinen Theme Code einzutauchen was ich als Community Moderator ja nicht darf oder kann. Das musst du selber in einer Theme Kopie testen.
Apropos
Wenn du es selber DIY programmieren 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. Die obigen Tipps sind bloß generelle Tipps die Theme-abhängig sind, ohne Gewähr und diesen lediglich dazu dich in die richtige Richtung zu weisen!
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
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
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024