I am following this guide to implement the AR functionality but it after loading the product page it keeps telling me the object cannot be opened once it loads the AR view, however the 3D view of the image itself does work correctly. The AR itself is also opening through the camera but the ‘Objects cannot be opened’ message in in the middle of the screen.
Javascript is throwing this error:
Uncaught TypeError: Cannot read property 'forEach' of undefined
at Object.add (shopify-xr.en.js:1)
at Object.addModels (shopify-xr.en.js:1)
at setupShopifyXr (0-41m-4g-copper-fc-cable:960)
at HTMLDocument.
Looks like the XR library cannot find the objects.
The product page template liquid (simplified) looks like this:
```markup
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign product_media_scale = '2' -%}
{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign compare_at_price = current_variant.compare_at_price -%}
{%- assign price = current_variant.price -%}
{% case section.settings.media_size %}
{% when 'small' %}
{%- assign product_media_width = 'medium-up--one-third' -%}
{%- assign product_description_width = 'medium-up--two-thirds' -%}
{%- assign product_thumbnail_width = 'medium-up--one-third' -%}
{%- assign height = 345 -%}
{% when 'medium' %}
{%- assign product_media_width = 'medium-up--one-half' -%}
{%- assign product_description_width = 'medium-up--one-half' -%}
{%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
{%- assign height = 530 -%}
{% when 'large' %}
{%- assign product_media_width = 'medium-up--two-thirds' -%}
{%- assign product_description_width = 'medium-up--one-third' -%}
{%- assign product_thumbnail_width = 'medium-up--one-fifth' -%}
{%- assign height = 720 -%}
{% when 'full' %}
{%- assign product_media_width = '' -%}
{%- assign product_description_width = '' -%}
{%- assign product_thumbnail_width = 'medium-up--one-eighth' -%}
{%- assign height = 1090 -%}
{%- assign enable_zoom = false -%}
{% endcase %}
{%- assign featured_media = product.featured_media -%}
{% for media in product.media %}
{% unless media.media_type == 'image' %}{% assign enable_zoom = false %}{% endunless %}
{% capture media_id %}FeaturedMedia-{{ product.id }}-{{ media.position }}{% endcapture %}
{% capture named_media_id %}FeaturedMediaNamed-{{ section.id }}-{{ media_id }}{% endcapture %}
{% capture media_wrapper_id %}{{ named_media_id }}-wrapper{% endcapture %}
{% capture media_class %}product-featured-media{% endcapture %}
{% case media.media_type %}
{% when 'image' %}
{% include 'product-image' %}
{% when 'video' %}
{% include 'product-video' %}
{% when 'external_video' %}
{% include 'external-video' %}
{% when 'model' %}
{% capture model_class %}model-wrapper {{ media_class }} {% endcapture %}
{{ media | model_viewer_tag: class: model_class }}
{% endcase %}
{% include 'media-style' with small_style: true, width: height, height: height, wrapper_id: media_wrapper_id, media_id: named_media_id %}
{% endfor %}
{% if product.media.size > 1 %}
{% if product.media.size > 3 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}
{% if enable_thumbnail_slides == true %}
{% endif %}
{% for media in product.media %}
{% capture media_id %}FeaturedMedia-{{ product.id }}-{{ media.position }}{% endcapture %}
- {% if media.media_type == "model" %}
{% include 'icon-3d-badge-full-color' %}
{% endif %}
{% if media.media_type == "video" or media.media_type == "external_video" %}
{% include 'icon-video-badge' %}
{% endif %}
{% endfor %}
{% if enable_thumbnail_slides == true %}
{% endif %}
{% endif %}
# {{ product.title }} - id: {{ product.id }} - SKU: {{ current_variant.sku }}
{% include 'product-price', variant: current_variant %}
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
{%- endif -%}
{% capture "form_classes" -%}
product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
{%- endcapture %}
{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '', data-product-form-redirect-url: '/cart' %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
{% endfor %}
{% endunless %}
{% if section.settings.show_quantity_selector %}
{% endif %}
{% include 'icon-error' %} {{ 'products.product.quantity_minimum_message' | t }}
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
{% if customer %}
CUSTOMER IS LOGGED IN!
{% else %}
CUSTOMER IS NOT LOGGED IN!
{% endif %}
{% endform %}
{%- comment -%}
Live region for announcing updated price and availability to screen readers
{%- endcomment -%}
{{ product.description }}
{% if section.settings.show_share_buttons %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
The window.ShopifyXR.addModels(); function is throwing the error.
What from that guide am I missing? Or should I somehow attach a class or id to the media div?