Is it possible to only load in code when a button is clicked?

Shopify Discussion
,
1

Hi Shopify Community,

I am trying to optimise my website for loading speed, as it is very slow and have run into an issue I am not sure how to solve.

To begin, there is only one problem that is making my website slow at loading, and that is a custom coded feature I created for my “product-cards”.

1.png
1.png1917×921 233 KB

This custom coded feature I have on my site, is a button that allows my customers to see products in a “3D interactable view”, so they know what the product looks like from all angles. This feature however dramatically slows down my site, because it loads this code in for every single product card on the page.

Here is what the code looks like.

3d-Product.liquid

{{ '3d-product.css' | asset_url | stylesheet_tag }}

  {% render 'icons-3d-view' %}
  
      {{ '3dmodel.3dbutton' | t }}
  

 
  
  {%- capture description -%}
    {%- render 'split-text', text: product.description -%}
  {%- endcapture -%}
  {%- assign description_arr = description | split: '@@' -%}
  

    

      {{ description_arr[0] }}
    

    	
      {{ description_arr[2] }}

I am rendering this code into my product-cards, using this line of code.

{% render ‘3d-product’ with product_card_product as product %}

2.png
2.png1917×921 261 KB

As you can see, the issue is that I am using {% render %} to add the code, meaning that large chunk of code is loaded for every product even though the person isn’t looking at the 3D view for every product.

If it helps, here is what the “3D interactive view” looks like for a product. It is a “sketchfab” Iframe for the product. The Iframe and text for this is sourced from the product description using a custom code named “split-text”, so that the Iframe and text is unique for every product.

3.png
3.png1920×910 164 KB

How would I go about changing my code, so that the "3d-Product.liquid" code is only loaded for a product, once the button is “clicked”. This would solve all my problems if this is possible to do. I was thinking the solution could be to use an “onclick” javascript function, but I don’t know how to implement this. Is it possible to only have the website load in a code on demand. (e.g, button being clicked).

If this is possible, please let me know how I would implement this. Thank you to everyone in advance for supporting and helping me with this issue. I greatly appreciate the support and generosity. I hope this question is useful for others in the future as well.

Kind Regards,

Nicolas Murdaca