Build a custom subscription storefront

{%- liquid
  assign juo_groups = product.selling_plan_groups | where: 'app_id', 'juo-subscriptions'
  assign juo_group_ids = juo_groups | map: 'id'
-%}

<script type="application/json" id="subscription-data-{{ product.id }}">
  {
    "requiresSellingPlan": {{ product.requires_selling_plan | json }},
    "selectedVariantId": {{ product.selected_or_first_available_variant.id | json }},
    "selectedSellingPlanId": {{ product.selected_selling_plan.id | json }},
    "variants": [
      {%- for variant in product.variants -%}
        {
          "id": {{ variant.id | json }},
          "available": {{ variant.available | json }},
          "price": {{ variant.price | json }},
          "sellingPlans": [
            {%- assign first = true -%}
            {%- for allocation in variant.selling_plan_allocations -%}
              {%- if juo_group_ids contains allocation.selling_plan_group_id and allocation.selling_plan.recurring_deliveries -%}
                {%- unless first -%},{%- endunless -%}
                {%- assign first = false -%}
                {
                  "id": {{ allocation.selling_plan.id | json }},
                  "name": {{ allocation.selling_plan.name | json }},
                  "price": {{ allocation.price | json }},
                  "compareAtPrice": {{ allocation.compare_at_price | json }},
                  "perDeliveryPrice": {{ allocation.per_delivery_price | json }}
                }
              {%- endif -%}
            {%- endfor -%}
          ]
        }{%- unless forloop.last -%},{%- endunless -%}
      {%- endfor -%}
    ]
  }
</script>

const data = JSON.parse(
  document.getElementById("subscription-data-PRODUCT_ID").textContent
);

function plansFor(variantId) {
  return data.variants.find((v) => v.id === variantId)?.sellingPlans ?? [];
}

// The URL can carry any selling plan, including other apps' plans and
// fixed plans. Use it only if it is one of this variant's Juo plans.
const initialPlans = plansFor(data.selectedVariantId);
const urlPlanIsValid = initialPlans.some(
  (p) => p.id === data.selectedSellingPlanId
);

const state = {
  variantId: data.selectedVariantId,
  sellingPlanId: urlPlanIsValid
    ? data.selectedSellingPlanId
    : data.requiresSellingPlan
      ? initialPlans[0]?.id ?? null
      : null,
};

function selectVariant(variantId) {
  const previous = plansFor(state.variantId).find(
    (p) => p.id === state.sellingPlanId
  );
  const plans = plansFor(variantId);

  state.variantId = variantId;

  if (state.sellingPlanId != null || data.requiresSellingPlan) {
    // Keep the same frequency if the new variant offers it.
    const match = plans.find((p) => p.name === previous?.name);
    state.sellingPlanId = (match ?? plans[0])?.id ?? null;
  }

  render();
}

function selectSellingPlan(sellingPlanId) {
  state.sellingPlanId = sellingPlanId; // null for one-time purchase
  render();
}

document.addEventListener(
  "submit",
  (event) => {
    const form = event.target;
    if (!form.matches('form[action*="/cart/add"]')) return;

    // Only handle forms for this product.
    const variantId = Number(form.elements.id?.value);
    if (!data.variants.some((v) => v.id === variantId)) return;

    let input = form.querySelector('input[name="selling_plan"]');
    if (input == null) {
      input = document.createElement("input");
      input.type = "hidden";
      input.name = "selling_plan";
      form.append(input);
    }

    input.value = state.sellingPlanId ?? "";
    input.disabled = state.sellingPlanId == null; // one-time: send no plan
  },
  true
);

await fetch(window.Shopify.routes.root + "cart/add.js", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    items: [
      {
        id: state.variantId,
        quantity: 1,
        selling_plan: state.sellingPlanId, // omit or null for one-time
      },
    ],
  }),
});

mutation AddSubscriptionLine($cartId: ID!, $lines: [CartLineInput!]!) {
  cartLinesAdd(cartId: $cartId, lines: $lines) {
    cart { id }
    userErrors { field message }
  }
}

{
  "cartId": "gid://shopify/Cart/...",
  "lines": [
    {
      "merchandiseId": "gid://shopify/ProductVariant/111",
      "quantity": 1,
      "sellingPlanId": "gid://shopify/SellingPlan/222"
    }
  ]
}

async function changeLinePlan(item, sellingPlanId) {
  const body = {
    id: item.key,
    quantity: item.quantity, // defaults to 1 if omitted
    selling_plan: sellingPlanId, // null for one-time purchase
  };

  // Passing `properties` replaces the whole object, so copy the existing
  // ones. Clear `_selling_plan_id` so it does not point at the old plan.
  if (item.properties?._selling_plan_id != null) {
    body.properties = { ...item.properties, _selling_plan_id: "" };
  }

  await fetch(window.Shopify.routes.root + "cart/change.js", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  });
}