mjmu
July 15, 2023, 1:14pm
1
Hallo,
ich möchte auf meiner Produktseite (Theme Refresh 10.0.0) in eiher einklappbaren Reihe HTM Code anzeigen lassen.
Dazu habe ich ein Metafeld mit mehrzeiligem Text erstellt.
Dann habe ich auf der Seite eines Produktes den HTML Code bei den Metafeldern eingegeben:
Dann habe ich im Theme bei der einklappbaren Reihe das Metafeld ausgewählt:
Trotzdem wird der Code in der Vorschau als Text angezeigt.
Wie kann ich das lösen?
Danke für eure Hilfe!
Finer
July 15, 2023, 7:45pm
2
@mjmu dazu müssest du in den Code und dort den Code für das Metafeld direkt platzieren. Es kann sein, dass dein aktuelles Theme ein “escape” Filter verwendet, wodurch der HTML-Code sichtbar gemacht wird.
Hast du Erfahrungen mit dem Anpassen vom Theme Code gemacht?
mjmu
July 16, 2023, 1:31am
3
Ok danke.
Ja, ich hab schon Erfahrung mit Anpassen von Code.
Wo müsste ich den Code denn platzieren?
Bzw. kann man das escape ausschalten?
mjmu
July 16, 2023, 12:03pm
4
Ich habe jetzt folgendes Fix für das main-product.liquid gefunden:
{% if block.settings.heading == 'Details' %}
{{ product.metafields.my_fields.details }}
{% else %}
{{ block.settings.content }}
{{ block.settings.page.content }}
{% endif %}
Wurde hier auch als Lösung für das Problem gelistet:
https://community.shopify.com/post/1501016
Leider funktioniert das aber nicht, der code wird immer noch als text angezeigt.
Finer
July 16, 2023, 3:55pm
5
@mjmu ändert sich im Iframe, abgesehen von der UR, etwas von Produkt zu Produkt?
Ich denke, es wäre einfacher das Iframe direkt in den Code zu platzieren und nur die URL des Videos im Metafeld zu speichern.
Das würde dann so aussehen:
{% if block.settings.heading == 'Details' %}
<iframe style="" src="{{ product.metafields.my_fields.details }}"></p>
{% else %}
{{ block.settings.content }}
{{ block.settings.page.content }}
{% endif %}
Nein, sonst ändert sich nichts.
Das Problem bleibt aber bestehen, da ich auch anderen HTML Code in andere Tabs einfügen möchte, der leider ebenfalls als Text angezeigt wird.
(Bin der Threadersteller, da ist unser 2. Account)
mjmu
July 18, 2023, 11:46am
7
Ok, ich glaube ich habe dich missverstanden.
Trotzdem habe ich mehrere Reihen, mit unterschiedlichem Inhalt. Kann man deine Lösung dafür anpassen?
Finer
July 18, 2023, 12:21pm
8
@mjmu könntest du mir etwas genauer erklären, was du mit mehreren Reihen und mit unterschiedlichem Inhalt meinst? Willst du mehrere Tabs die unterschiedlichen Metafeld-Werte abbilden?
Um welche Inhalte geht es denn?
mjmu
July 18, 2023, 1:59pm
9
@Finer
Ja, ich möchte einen Tab mit Video, einen mit Produktbeschreibung und einen mit Gebrauchsanweisung.
Alle 3 enthalten HTML Code.
mjmu
July 22, 2023, 9:56am
10
Hat jemand eine Idee, wie man das lösen kann? Ich habe Einzeiligen Text beim Metafeld versucht, aber das lässt nur simple HtML Formatierung wie fetter Text zu. Iframes werden nicht angezeigt.
Danke euch…
Finer
July 23, 2023, 2:49pm
11
@mjmu da du in dem Code eine den Titel des einklappbaren Textes als Grundlage definierst (“Details”), reicht es, wenn du einen anderen Titel für den Tab verwendest. Dann kannst du auch den dynamischen Inhalt (Metafelder) zurückgreifen und für eine Gebrauchsanweisung und die Produktbeschreibung platzieren.
mjmu
July 23, 2023, 8:21pm
12
Ok, ich hab jetzt für die 3 Tabs folgenden Code ins Man-product.liquid gegeben:
{% if block.settings.heading == 'Experten testen - Produktvideo' %}
<iframe style="aspect-ratio: 16 / 9; width: 100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen="" src="{{ product.metafields.custom.product_page_video_html }}"></p>
{% else %}
{{ block.settings.content }}
{{ block.settings.page.content }}
{% endif %}
{% if block.settings.heading == 'Produktdetails' %}
{{ product.metafields.custom.product_page_produktdetails_html }}
{% else %}
{{ block.settings.content }}
{{ block.settings.page.content }}
{% endif %}
{% if block.settings.heading == 'Gebrauchsanweisung' %}
{{ product.metafields.custom.product_page_gebrauchsanweisung_html }}
{% else %}
{{ block.settings.content }}
{{ block.settings.page.content }}
{% endif %}
Das Komische ist jetzt folgendes:
Der HTML Code ist jetzt random als Text und 1x als Code in der Seite.
Beim Video kommt auch noch dazu, dass das Video nicht geladen wird, wenn die Verbindung abgelehnt wird:
Wenn ich das Iframe hardgecoded direkt in die Setie schreibe lädt es aber.
Ich wäre wirklich sehr dankbar, wenn du mir noch 1x helfen könntest!
Finer
July 24, 2023, 10:11am
13
@mjmu ich habe mal deinen Fall nachgebaut, aber bei mir wird alles korrekt dargestellt (nicht als HTML).
Derzeit gehst du drei (getrennte) Fallunterscheidungen durch, die jedes Mal, Inhalte darstellen.
Ändere den Code folgendermaßen:
{% if block.settings.heading == 'Experten testen - Produktvideo' %}
<iframe style="aspect-ratio: 16 / 9; width: 100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen="" src="{{ product.metafields.custom.product_page_video_html }}"></p>
{% elsif block.settings.heading == 'Produktdetails' %}
{{ product.metafields.custom.product_page_produktdetails_html }}
{% elsif block.settings.heading == 'Gebrauchsanweisung' %}
{{ product.metafields.custom.product_page_gebrauchsanweisung_html }}
{%else%}
{{ block.settings.content }}
{{ block.settings.page.content }}
{% endif %}
mjmu
July 24, 2023, 12:06pm
14
Super!! Danke dir!!
Es funktioniert jetzt alles, bis auf das Video. Die Verbindung wird noch immer abgelehnt und scheinbar ist auch ein Fehler im Code:
Danke dir für deine Hilfe!
mjmu
July 25, 2023, 10:14am
15
Ich habe den Code jetzt angepasst. Der Fehler mit dem nicht geschlossenen Tag tritt nicht mehr auf.
{% if block.settings.heading == 'Experten testen - Produktvideo' %}
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen="" src="{{ product.metafields.custom.product_page_video_html }}"></iframe>
Allerdings wird die Verbindung noch immer abgelehnt:
mjmu
July 26, 2023, 10:08pm
16
@Finer Hast du noch eine Idee wie man das mit der abgelehnten Verbindung lösen kann? Das wäre perfekt! Danke dir!