'Choose Options' side drawer not loading (Enterprise Theme)

Shopify Discussion
1

I am using the ‘Enterprise Theme’ and have a number of products that have variants that customers can choose. But when selecting the ‘Choose Options’ button, to select the required size and add it to the cart, the side drawer appears, but doesn’t load, as shown in the image.

Choose Options loading.png
Choose Options loading.png602×443 61.2 KB

For products with no variants, the ‘Add to cart’ button works fine and products are added to the cart immediately.

I am using a GemPages template for my Product Pages, but not on the Collections Page.

Has anyone else had this issue?

2

Hey @Adam7719 ,

The issue with the ‘Choose Options’ side drawer not loading on the Enterprise Theme when using GemPages for product pages is a known problem. This issue arises because GemPages modifies the HTML structure of the product page, which can interfere with the default functionality of the ‘Choose Options’ button.

Try this:

  1. Check for Updates: Ensure that both your Shopify theme and GemPages are up to date. Sometimes, these issues are resolved in newer versions of the apps or themes.

  2. Custom JavaScript: You might need to add custom JavaScript to your theme to ensure the ‘Choose Options’ functionality works correctly with GemPages. This script should ensure that the drawer loads the correct content when the button is clicked.

    document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.choose-options-button').forEach(button => {
    button.addEventListener('click', function(event) {
      event.preventDefault();
      const productId = this.getAttribute('data-product-id');
      const variantId = this.getAttribute('data-variant-id');
   
      fetch(`/products/${productId}?variant=${variantId}`)
        .then(response => response.text())
        .then(html => {
          const parser = new DOMParser();
          const doc = parser.parseFromString(html, 'text/html');
          const drawerContent = doc.querySelector('.drawer-content');
          document.querySelector('.side-drawer').innerHTML = drawerContent.innerHTML;
        });
    });
  });
});

    This script assumes that the ‘Choose Options’ button has a class of .choose-options-button and that it has data-product-id and data-variant-id attributes. Adjust the selectors as needed for your specific setup.

  3. Theme Settings: Check your theme settings to ensure that the ‘Choose Options’ functionality is enabled and properly configured. Sometimes, theme settings can interfere with the expected behavior.

  4. Fallback to Default Theme: As a temporary measure, you can revert to the default Shopify theme for product pages to see if the ‘Choose Options’ button works as expected. This can help isolate whether the issue is with GemPages or another factor.

This should work. In case not, we’d love to take a look at your theme’s code and GemPage config and fix this for you (Just DM or email us your collaborator code!)

Cheers!
Shubham | Untechnickle