OpenTheme - A facade to bridge themes and a standard Theme API

collection-grid.liquid

<div class="collection-grid">
{% for product in collection.products %}
  <div 
    class="collection-grid__item" 
    <!-- We to know what product we're dealing with -->
    data-product-id="{{ product.id }}" 
    <!-- A lot of API calls need the product handle, not ID -->
    data-product-handle="{{ product.handle }}" 
    <!-- We don't always know which variant is selected within a grid item -->
    data-variant-id="{{ product.selected_or_first_available_variant }}">
  </div>
{% endfor %}
</div>

open-theme.js

window.OpenTheme = window.OpenTheme || {};

// Facade between theme and a standard implementation
window.OpenTheme = {
  selectors: {
    productForm: '.product-details form[action="/cart"]',
    productPrice: '.product-details .price',
  },
  on(name, cb) {
    switch (name) {
      case 'variant:changed': {
        document.addEventListener('archetype:variant:updated', cb);
      }
      case 'quickview:opened': {
        document.addEventListener('archetype:quickview:opened', cb);
      }
      default: {
        throw new Error(`${name} is invalid`);
      }
    }
  },
  queryProductForm() {
    return document.querySelector('.product-details form[action="/cart"]');
  },
  queryProductPrice() {
    return document.querySelector('.product-details .price');
  },
  // There's no standard for tracking selected variants in quickviews
  // Or on collection pages.
  updateQuickviewVariant(id) {
    const searchParams = new URLSearchParams(window.location.search);    
    searchParams.set('qv_variant_id', id);
    window.location.search = searchParams.toString();
  },
  // There's no standard for tracking which selling plan is selected
  updateSellingPlan(id) {
    const searchParams = new URLSearchParams(window.location.search);    
    searchParams.set('selling_plan', id);
    window.location.search = searchParams.toString();
  },
};

This is very early. I'll keep updating it as we discuss. The main areas are:

1. Which JavaScript events are needed in pretty much every theme? What metadata comes with it so that every app doesn't have to query the cart after the update?

• variant:changed: how does this event work in a grid? in a quickview?
• selling_plan:changed
• quickview:opened
• quickview:closed

3. Which data attributes are wrapping certain components and how do we find those data attributes to make a usable API in the DOM?

• data-product-id
• data-product-handle
• data-variant-id

5. Which query params are exposed and how do these affect the page?

• variant
• selling_plan
• modal_variant: I'm not sure about this one, but we need some way of knowing that a variant is selected in some other context