FROM CACHE - de_header

externen html Code in der Produktbeschreibung einbinden

WANDLER-ERoller
Tourist
5 0 0

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??

5 ANTWORTEN 5

PRINT21
Forscher
86 5 37

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.

 

Unbenannt.JPG

VG Steffen
Print21.de | Mega-Print.de
WANDLER-ERoller
Tourist
5 0 0

Das meine ich nicht. Ich möchte Teile des HTML Codes in eine externe Datei auslagern und in dem HTML Code einbinden...

Gabe
Shopify Staff
17946 2845 4182

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

WANDLER-ERoller
Tourist
5 0 0

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

Gabe
Shopify Staff
17946 2845 4182

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