Question:
Can anyone help me make the src of my custom element on my dynamic use the html link from my database?
I’m have a dynamic page which shows my original artworks and information about the art.
I want my customers to be able to see the correct 3d artwork that matches the artwork they are reading about.I’m using google model viewer to show a 3d rendering of the artwork using a custom element.
It works when I put in an attribute using the UI titled src and enter the value as the url to the glb file (3d model). But I can’t seem to yet figure out a way to make the src value connect to my database so it shows the correct model.
Product:
Wix Editor
Chat gpt gave me this code:
Which I entered in the js velo file after importing the model viewer.
import “google/model-viewer”; // Import th$w.onReady(function () {
// Wait for the dataset to be fully loaded
$w.onReady(function () {
// Wait for the dataset to be fully loaded
$w(“#Puzzle”).onReady(() => {
const currentItem = $w(“#Puzzle”).getCurrentItem(); // Fetch the current item from the dataset
console.log(“Current Item:”, currentItem); // Log the entire item for debugging
// Check if the current item and the aRurl field exist
if (currentItem && currentItem.aRurl) {
console.log("AR URL:", currentItem.aRurl); // Log the AR URL value
// Get the model-viewer element from the page
const modelViewer = $w("#modelviewer"); // Use $w to access the element
if (modelViewer) {
modelViewer.src = currentItem.aRurl; // Set the src attribute dynamically with the URL
} else {
console.log("Model Viewer element not found.");
}
} else {
console.log("No AR URL found for this item.");
}
});
});
Any advice is greatly appreciated! Thank you so much!!
