PDF Link auf Produktseite in Custom Liquid

[EM-Partner]

Hallo zusammen,

ich hoffe, Ihr könnt mir helfen bei der Darstellung eines PDF-Download Links in meinem Custom Liquid auf der Produktseite.

Ich habe eine Einklappbare reihe als custom Liquid, die je nachdem ob ein Metafeld hinterlegt ist, eingeblendet wird oder eben nicht. Das funktioniert mit dem rich-text sehr gut, aber leider nicht mit dem Download Link.

Hier habe ich mal den verwendeten code, vielleicht kann jemand den korrekt umschreiben, dass der PDF-Link abgebildet wird, mit dem Dateinamen anstelle der URL.

{% if product.metafields.produktinformationen.datenblaetter %}
<div class="product__accordion accordion quick-add-hidden">
  <details id="Details">
    <summary>
      <div class="summary__title">
        <h2 class="h4 accordion__title">
          <span>Datenblätter</span>
        </h2>
      </div>
      {% render 'icon-caret' %}
    </summary>
    <div class="accordion__content rte" id="ProductAccordion">
  {{ product.metafields.produktinformationen.datenblaetter | metafield_tag }}
    </div>
  </details>
</div>
{% endif %}

Auf den Fotos ist zu sehen, dass ein PDF im Produkt hinterlegt ist, aber kein Link dazu.

Vielen Dank für eure Hilfe

Beste Grüße

Dennis

[Finer]

@EM-Partner wenn du einen Link anbieten möchtest, solltest du einen <a>-Tag (anchor Tag) verwenden:

{% if product.metafields.produktinformationen.datenblaetter != blank %}
<div class="product__accordion accordion quick-add-hidden">
  <details id="Details">
    <summary>
      <div class="summary__title">
        <h2 class="h4 accordion__title">
          <span>Datenblätter</span>
        </h2>
      </div>
      {% render 'icon-caret' %}
    </summary>
    <div class="accordion__content rte" id="ProductAccordion">
  <a href="{{ product.metafields.produktinformationen.datenblaetter | file_url }}" target="_blank">Datenblatt</a>
    </div>
  </details>
</div>
{% endif %}

Zudem ist es nötig, dass du die URL des Datenblatts (für das href-Attribut) verwendest, da der Titel des PDFs deinen Nutzern nichts bringen wird.

[EM-Partner]

Hallo Finer,

ich danke die ganz doll für die Anpassung👍

Optisch passt das auch alles sehr gut. 

Mit dem Code und dem dadurch generierten Link lande ich wieder auf dem Produkt.

Du schreibst:

---

Zudem ist es nötig, dass du die URL des Datenblatts (für das href-Attribut) verwendest, da der Titel des PDFs deinen Nutzern nichts bringen wird.

---

Wo müsste die URL eingefügt werden?

Denn ich verstehe nicht ganz, wie das dann dynamisch bleiben würde, wenn ich eine URL in den Liquid-Code einfüge.

Könntest du mir da nochmal bitte weiter auf die Sprünge helfen.

Danke und Grüße

Dennis

[Finer]

@EM-Partner wenn du in einem Metafeld eine Datei referenzierst, so kannst du den Titel der Datei, Ihre ID und die URL abrufen. 

Damit ein Link zum PDF erzeugt werden kann, benötigst du eine URL der Datei. Diese kannst du über einen Liquid-Filter dynamisch laden.

Ich habe meinen Code (siehen oben) korrigiert, da ich zunächst angenommen hatte, dass man die URL über die Endung ".url" erhält. Allerdings muss man das über den Filter "file_url" abrufen. Du solltest also den korrigierten Code nutzen können, damit du einen funktionierenden Link hast.

[EM-Partner]

@Finer Danke nochmals fürs Update 🙂

leider führt der Link nun zu einer 404 Seite.

Das Datenblatt ist so weit ich das sagen kann korrekt hinterlegt. 

Die URL, die durch Tippen auf den Link erzeugt wird, weicht jedoch von der URL der Datei ab.

Schaue ich bei Inhalt --> Datein--> Sicherheitsdatenblatt --> Link Kopieren.... kommt eine andere URL.

Fall ich hier die URLs posten kann oder soll, ohne dass es Probleme gibt, kann ich das gerne machen.

Ich vermute aber, das hat damit gar nichts zu tun.

Gibt eine Lösung für das Problem?

Dankend🙏

Dennis

[Nordalux]

Wie ist denn das Metafeld angelegt? Wenn es ein "normales" Metafeld zum Produkt ist, muss dies so lauten:

{{ product.metafields.custom.datenblaetter | file_url }}

[EM-Partner]

@Nordalux Danke für deine Antwort

Ich habe ein Metafeld mit einer Liste. Statt "Custom" habe ich "produktinformationen" verndet sodass es meiner Meinung nach nun so lautet: product.metafields.produktinformationen.datenblaetter

Hier nochmal zwei Screenshots dazu:

[Finer]

@EM-Partner du kannst sie gerne teilen. Hast du es mal im Vorschau-Modus angeschaut oder nur über den Theme-Editor?
Ich habe deinen Fall bei mir nachgebaut und es funktioniert nur im Vorschau-Modus.

[EM-Partner]

@Finer Im Vorschaumodus lautet die URL: https://www.empartner.net/cdn/shop/files/[%22gid://shopify/GenericFile/52202578575693%22]?748 

Im Backend lautet die URL: https://cdn.shopify.com/s/files/1/0727/1553/4669/files/SDB_Mikrorein.pdf?v=1728661961 

[Finer]

@EM-Partner wenn du mehrere Dateien anzeigen möchtest, muss man einen For-Loop in den Code einbauen. Ich bin davon ausgegangen, dass du nur jeweils eine Datei verwendest.

{% if product.metafields.produktinformationen.datenblaetter != blank %}
<div class="product__accordion accordion quick-add-hidden">
  <details id="Details">
    <summary>
      <div class="summary__title">
        <h2 class="h4 accordion__title">
          <span>Datenblätter</span>
        </h2>
      </div>
      {% render 'icon-caret' %}
    </summary>
    <div class="accordion__content rte" id="ProductAccordion">
{% for data_sheet in product.metafields.produktinformationen.datenblaetter.value %}
  <a href="{{ data_sheet.url }}" target="_blank">Datenblatt-{{forloop.index }}</a>
{% endfor %}
    </div>
  </details>
</div>
{% endif %}

[EM-Partner]

Hey @Finer,

sehr schön, vielen Dank!

So ist es schon so ziemlich perfekt. 

Wenn nun noch der Name des Datenblattes erscheinen würde statt des Indexwertes, damit der Kunde bei vielen Datenblättern weis welches relevant ist. Aber so bin ich schonmal total zufrieden 🙏

Vielen Dank dafür!

Liebe Grüße

Dennis

[Nordalux]

Probiere mal diesen Code, ist jedoch meinerseits ungetestet:

{% if product.metafields.produktinformationen.datenblaetter != blank %}
<div class="product__accordion accordion quick-add-hidden">
  <details id="Details">
    <summary>
      <div class="summary__title">
        <h2 class="h4 accordion__title">
          <span>Datenblätter</span>
        </h2>
      </div>
      {% render 'icon-caret' %}
    </summary>
    <div class="accordion__content rte" id="ProductAccordion">
      {% for data_sheet in product.metafields.produktinformationen.datenblaetter.value %}
        <a href="{{ data_sheet.url }}" target="_blank">
          {{ data_sheet.filename }}
        </a>
      {% endfor %}
    </div>
  </details>
</div>
{% endif %}

[EM-Partner]

@Nordalux Danke für den Versuch, da erscheint leider kein Link mehr.

[Finer · Accepted solution]

@EM-Partner dazu muss leider einen kleinen Workaround machen, da man nicht ohne weitere einfach den Dateinamen bekommt. Man muss sich den aus der URL fischen:

{% if product.metafields.produktinformationen.datenblaetter != blank %}
<div class="product__accordion accordion quick-add-hidden">
  <details id="Details">
    <summary>
      <div class="summary__title">
        <h2 class="h4 accordion__title">
          <span>Datenblätter</span>
        </h2>
      </div>
      {% render 'icon-caret' %}
    </summary>
    <div class="accordion__content rte" id="ProductAccordion">
{% for data_sheet in product.metafields.produktinformationen.datenblaetter.value %}
{% assign datei = data_sheet.url | split: '/' | last %}
{% assign datei_name = datei| split: '?v=' | first %}
  <a href="{{ data_sheet.url }}" target="_blank">{{ datei_name }}</a>
{% endfor %}
    </div>
  </details>
</div>
{% endif %}

Jenachdem wie man die Datei benannt hat, kann man "-" durch Leerzeichen ersetzen und auch das ".pdf" entfernen.

[EM-Partner]

Hey @Finer ,

Nochmals lieben Dank! Funktioniert prima.

Könntest du mir abschließend noch sagen, wie ich einen Zeilenumbruch bei mehreren PDF-Dateien generieren kann?

Der fertige Code sieht bei mir nun so aus (für alle, die auch basteln wollen/müssen):

{% if product.metafields.produktinformationen.datenblaetter != blank %}
<div class="product__accordion accordion quick-add-hidden">
  <details id="Details">
    <summary>
      <div class="summary__title">
        <h2 class="h4 accordion__title">
          <span>Datenblätter</span>
        </h2>
      </div>
      {% render 'icon-caret' %}
    </summary>
    <div class="accordion__content rte" id="ProductAccordion">
{% for data_sheet in product.metafields.produktinformationen.datenblaetter.value %}
{% assign datei = data_sheet.url | split: 'SDB_' | last %}
{% assign datei_name = datei| split: '.pdf' | first %}
<img src="https://cdn.shopify.com/s/files/1/0727/1553/4669/files/PDF-Vektorgrafik.svg?v=1729711036" alt="PDF-Icon" width="16px" height="16px">
  <a href="{{ data_sheet.url }}" target="_blank">Sicherheitsdatenblatt {{ datei_name }}</a>
{% endfor %}
    </div>
  </details>
</div>
{% endif %}

Durch

{% assign datei = data_sheet.url | split: 'SDB_' | last %}
{% assign datei_name = datei| split: '.pdf' | first %}
<a href="{{ data_sheet.url

verschwindet die Endung und der Anfang, die Dateien sahen vorher so aus:

SDB_Pflanzenkohle_Karbosave.pdf

Liebe Grüße

Dennis