Hi all,
I have been working really hard on my site adding my own features and have ran into a problem. The issue I am currently having is getting my “3d view” button to work correctly on my collection pages. Below is the code I have for the way this button works.
3d-product.liquid
{% 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] }}
This file is then just rendered into my collection page in the position shown in the images below. Essentially when the product is hovered over, the product information and the buttons appear. This works perfectly with no issues as shown.
When analysing using “inspect element” I am also able to see that my code is working as it is loading in the content relative to each product successfully, as seen by the examples shown below. The content relative to each product being loaded in is meant to be a sketchfab 3d model viewer iframe, along with the 3d model details. This working can be seen in the images below.
The issue now is that for some reason when the 3D view button is opened up, it fails to load in the correct content? It looks as though the “mfp-content” class for the popup seems to load in and store the content from the first product in the collection, instead of using the content relative to the product button being clicked.
I am not sure why this happens, and am not sure how this magnific popup works. Please let me know why this is happening and how to fix this issue. If it is possible to fix this issue by not using magnific popup, please let me know as well, as I have noticed that my store has its own popup modals without using magnific popup that I would like to know how to use.
Please find below my website link, as I believe this may help with figuring out the problem.
I greatly appreciate the support and generosity.
Kind Regards
Nicolas Murdaca