// Shop metafield: $app:{feature}
{
  discounts: {
    "12345": { tiers, id, title },     // keyed by product ID
    "__all": { tiers, id, title }      // for "all products" type
  },
  settings: { /* widget config */ },
  updatedAt: "2024-01-01T00:00:00Z"
}

// services/shopMetafieldService.js
import {initShopify} from '@functions/services/shopifyService';
import {SHOP_METAFIELD} from '@functions/const/feature';

export async function syncToShopMetafield(shopData, data) {
  const shopify = initShopify(shopData);

  const metafieldData = {
    namespace: SHOP_METAFIELD.NAMESPACE,
    key: SHOP_METAFIELD.KEY,
    value: JSON.stringify(data),
    type: SHOP_METAFIELD.TYPE
  };

  // Check if exists
  const metafields = await shopify.metafield.list({
    metafield: {owner_resource: 'shop'}
  });

  const existing = metafields?.find(
    m => m.namespace === SHOP_METAFIELD.NAMESPACE && m.key === SHOP_METAFIELD.KEY
  );

  if (!existing) {
    await shopify.metafield.create(metafieldData);
  } else {
    await shopify.metafield.update(existing.id, {
      value: JSON.stringify(data),
      type: SHOP_METAFIELD.TYPE
    });
  }

  return {success: true};
}

// const/feature/metafield.js
export const SHOP_METAFIELD = {
  NAMESPACE: '$app:feature',
  KEY: 'config',
  TYPE: 'json',
  OWNER_RESOURCE: 'shop'
};

{% comment %} blocks/widget.liquid {% endcomment %}
{% assign config = shop.metafields['$app:feature']['config'].value %}
{% assign product_id = product.id | append: '' %}
{% assign discount = config.discounts[product_id] | default: config.discounts['__all'] %}

{% if discount %}
  <div class="volume-tiers">
    {% for tier in discount.tiers %}
      <div>Buy {{ tier.quantity }}+ get {{ tier.discountValue }}% off</div>
    {% endfor %}
  </div>
{% endif %}

// Get metafield from Liquid-rendered data attribute
const config = JSON.parse(
  document.querySelector('[data-feature-config]')?.dataset.featureConfig || '{}'
);

// Or fetch via Storefront API (requires metafield storefront access)
const response = await fetch('/api/storefront', {
  method: 'POST',
  body: JSON.stringify({
    query: `{ shop { metafield(namespace: "$app:feature", key: "config") { value } } }`
  })
});

// Sync after any data change
export async function createDiscount(shopData, data) {
  const id = await repo.create(shopData.id, data);
  
  // Sync to metafield for storefront
  await syncAllToShopMetafield(shopData);
  
  return {success: true, data: {id}};
}

export async function syncProductMetafield(shopData, productId, data) {
  const shopify = initShopify(shopData);
  
  await shopify.graphql(`
    mutation setProductMetafield($input: ProductInput!) {
      productUpdate(input: $input) {
        userErrors { field, message }
      }
    }
  `, {
    input: {
      id: productId,
      metafields: [{
        namespace: '$app:feature',
        key: 'config',
        type: 'json',
        value: JSON.stringify(data)
      }]
    }
  });
}

{% assign config = product.metafields['$app:feature']['config'].value %}

[app_proxy]
url = "https://your-app.com/api/proxy"
subpath = "feature"
prefix = "apps"

// handlers/proxyHandler.js
export async function handleProxy(ctx) {
  const {shop, productId} = ctx.req.query;
  
  // Verify request is from Shopify
  if (!verifyProxySignature(ctx.req.query)) {
    return ctx.send({error: 'Unauthorized'}, 401);
  }
  
  const data = await service.getDataForProduct(shop, productId);
  return ctx.send(data);
}

// Slower - requires network request
const response = await fetch(`/apps/feature?productId=${productId}`);
const data = await response.json();

// Minimize metafield size - only include what's needed for display
const buildDiscountEntry = discount => ({
  t: discount.tiers.map(t => ({q: t.quantity, v: t.discountValue})), // shortened keys
  id: discount.id
});

// For bulk operations, sync once at the end
export async function bulkUpdate(shopData, ids, data) {
  const results = await Promise.all(
    ids.map(id => updateSingle(shopData, id, data))
  );
  
  // Single sync after all updates
  await syncAllToShopMetafield(shopData);
  
  return results;
}

// Use $app: prefix for app-owned metafields
// Format: $app:{app-handle}
const NAMESPACE = '$app:volume-discount';

// GraphQL mutation to make metafield visible to Storefront API
const mutation = `
  mutation enableStorefrontAccess {
    metafieldStorefrontVisibilityCreate(input: {
      namespace: "$app:feature"
      key: "config"
      ownerType: SHOP
    }) {
      userErrors { field, message }
    }
  }
`;

Storefront Data Delivery?
│
├─ GET (read data for display)
│  │
│  ├─ Shopify-only app?
│  │  └─ Metafield → Window Variable (fastest, lowest cost)
│  │
│  └─ Multi-platform app? (Shopify + WooCommerce + BigCommerce)
│     └─ App Proxy API (portable, but higher cost)
│
└─ POST (actions: track, submit, modify)
   └─ App Proxy API (required for mutations)

{% comment %} Theme App Extension - app-embed.liquid {% endcomment %}
<script>
  window.AVADA_APP_DATA = {
    config: {{ shop.metafields['$app:feature']['config'].value | json }},
    settings: {{ shop.metafields['$app:feature']['settings'].value | json }},
    productData: {{ product.metafields['$app:feature']['data'].value | json }}
  };
</script>

// POST action - always needs API
await fetch('/apps/feature/track', {
  method: 'POST',
  body: JSON.stringify({event: 'view', productId})
});

// GET - only if multi-platform needed
const data = await fetch('/apps/feature/config?productId=' + productId);