Produkt Seite - HTML Code in einklappbarer Reihe

[mjmu]

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]

@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]

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]

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/c/shopify-design/edit-theme-code-to-enter-metafield-with-html-in-colla...

Leider funktioniert das aber nicht, der code wird immer noch als text  angezeigt.

[Finer]

@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' %}
  <p><iframe style src="{{ product.metafields.my_fields.details }}" ></p>
{% else %}
  {{ block.settings.content }}
  {{ block.settings.page.content }}
{% endif %}

[mdv2023]

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]

Ok, ich glaube ich habe dich missverstanden.

Trotzdem habe ich mehrere Reihen, mit unterschiedlichem Inhalt. Kann man deine Lösung dafür anpassen?

[Finer]

@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]

@Finer 

Ja, ich möchte einen Tab mit Video, einen mit Produktbeschreibung und einen mit Gebrauchsanweisung.

Alle 3 enthalten HTML Code.

[Finer]

@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]

Ok, ich hab jetzt für die 3 Tabs folgenden Code ins Man-product.liquid gegeben:

	  
				{% if block.settings.heading == 'Experten testen - Produktvideo' %}
  <p><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]

@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' %}
  <p><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]

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]

Ich habe den Code jetzt angepasst. Der Fehler mit dem nicht geschlossenen Tag tritt nicht mehr auf.

{% if block.settings.heading == 'Experten testen - Produktvideo' %}
  <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <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>
  </div>

 Allerdings wird die Verbindung noch immer abgelehnt:

[mjmu]

@Finer Hast du noch eine Idee wie man das mit der abgelehnten Verbindung lösen kann? Das wäre perfekt! Danke dir!

[mjmu]

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