HTML + Metafield als src bzw. Dynamische Quelle

[roomours]

Hallo, 

ich würde gerne auf unseren Produktseiten einen Google Model Viewer einbauen, der sich die Quelle des 3D Files  dynamisch zieht. Das habe ich über einen HTML Block im Theme Builder von Impulse eingefügt

<script defer type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script defer nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

<model-viewer style="width: 100%; height: 40vh;	background-color: #e5e5e5;" bounds="tight" 
src="https://cdn.shopify.com/s/files/1/0277/3660/4742/files/FC.opt.glb?v=1636460327" ar ar-modes="webxr scene-viewer quick-look" camera-controls environment-image="neutral" poster="poster.webp" shadow-intensity="1" camera-orbit="-315.8deg 85.68deg auto" auto-rotate>
</model-viewer>

An sich sieht das auch schon gut aus, nur soll eben nur 1 Template für die 3D fähigen Produkte erstellt werden. 

Ist es möglich die src durch ein Metafield zu steuern?

Also so in der Art: src=" {{product.metafields.custom.3d_modell }}" 

Ich kenne mich mit Code nicht aus und Copy + Paste mir nur alles zusammen, deshalb weiß ich nicht ob und wie das evtl. möglich ist. . 

Und wenn, wie müsste ich das Metafield anlegen, als File oder Link.. ? 

Vielen Dank für die Hilfe

Sarina

 

[Finer]

@roomours dein Beispiel sieht sehr cool aus, Glückwunsch dazu!
In Bezug auf deine Frage: Mein erster Ansatz wäre eine Datei hochzuladen und die URL dann in das Script zu laden.

Bisher gab es einige Schwierigkeiten, die URL einer Datei zu erhalten, aber folgender Ansatz scheint in einigen Fällen zu funktionieren:

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

 
Ich bin gespannt, ob das bei dir funktioniert.

[roomours · Accepted solution]

Vielen Dank dafür!

Ich habe es nun hinbekommen 🙂 das | file_url brauchte es gar nicht mehr, aber der Type Link statt File war dann das ausschlaggebende. 

Bei mir hat der Code dann folgendermaßen zum Ergebnis geführt, falls das mal noch jemand im Ganzen benötigt: 

<script defer type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script defer nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

<model-viewer bounds="tight"  Style= "width: 100%;	height: 50vh; background-color: #e5e5e5"; src="{{ product.metafields.custom.cad_file }}" ar ar-modes="webxr scene-viewer quick-look" camera-controls environment-image="neutral" poster="poster.webp" shadow-intensity="1" camera-orbit="-315.8deg 85.68deg auto" auto-rotate>
</model-viewer>