I have an ecommerce website I have been designing on Webflow.
I am currently on the product page template and need help!
As you are aware there are static elements that carry across all products and there are CMS-like information generated for all products which change depending on the product selected.
I currently have custom code which generates a hologram of my product from a third party however I can’t seem to find a way to integrate this into the products/CMS so the generated hologram (custom code) changes with the different product selection.
It is currently only a static element.
I only have one product atm which you will see but just note that if there were more products, the hologram would remain the same as currently seen on my site since it is a static element.
Can someone please help me find a way to integrate this custom code into the products/CMS so it isn’t a static element?
You’ll need to make it so that the request you make to blocks.glass includes a field from the CMS, which matches up the product with the asset from blocks.glass.
Unfortunately, I have tried adding a field and hasn’t worked. It just displays the custom code.
But when a static element, it displays the holographic image.
I created a field within the product CMS by adding a text field and then inserted the product’s custom code. I couldn’t find a field in the product CMS settings purely for custom code.
Create a div element where you want the thing to be on the page.
Give the div an id (e.g. holo-div).
Put a script like this as an HTML embed in the page:
<script>
var iframe = document.createElement('iframe');
// Set attributes for the iframe
iframe.src = 'https://blocks.glass/embed/6856'; // Set the source URL
iframe.width = '600'; // Set the width
iframe.height = '400'; // Set the height
iframe.frameBorder = '0'; // Remove the border
// Get the reference to the div with id "holo-div"
var iframeDiv = document.getElementById('iframe-div');
// Append the iframe to the div
iframeDiv.appendChild(iframe);
</script>
You can then update the iframe.src=... with the correct URL for each product with the CMS.
I have been able to integrate the custom code into the product CMS and display it accordingly!
I also realised I made a mistake as I created a text field within the product settings in which I was inserting the link to the hologram. I realised this needed to be a link field so I changed that and it worked with both the original custom code and also your code.
Although your code is very easy to understand, clear and easily navigated. I think I will stick to the original custom code as it also displays the hologram while editing/designing the website as your code only displays on the published site.
