Availability search

The Methods filter block lets customers filter a collection page by the dates they want, or by method. It works with Shopify’s Search & Discovery app, using Supercycle’s metafields and the browser’s session storage to decide which products show. For the merchant setup, see Availability search.

How it works

The Methods filter block writes its state to session storage and re-renders the collection section from it. Your own code can read and write the same keys, so a date picker anywhere on the site can drive the filter. The search uses the calendar days in scaf-dates and returns the matching products. The Methods filter block’s date picker lists the rental lengths from enabled calendar methods, for example Rent for 4, 8, 16, or 30 days, and only those lengths can be selected. The collection URL stores those product IDs in one filter.p.m.scf.avf value, separated by commas. The dates and the method stay when the customer opens another collection, and when the theme’s Clear all removes other filters.

Session storage keys

string | null

The active filter. One of "calendar", "membership", "subscription", or "resale". Set it to null to clear every filter and show all products.

object | null

The selected date range for calendar mode. Only read when filterMode is "calendar".

Show properties

string

required

The first calendar day. Use midnight UTC, as in "2025-06-01T00:00:00.000Z", or a YYYY-MM-DD date such as "2025-06-01".

string

required

The last calendar day, in the same form as start_date.

Write filter state from your own code

Values are stored as JSON strings. Use this helper to write a key and notify the Methods filter block. You can inspect the current values in your browser’s developer tools under Application > Session Storage.

Set filter state

function setFilterState(key, value) {
  const serialized = JSON.stringify(value);
  sessionStorage.setItem(key, serialized);
  window.dispatchEvent(new StorageEvent("storage", {
    key: key,
    newValue: serialized,
    storageArea: sessionStorage
  }));
}

// Activate a mode
setFilterState("filterMode", "membership");
setFilterState("filterMode", "subscription");
setFilterState("filterMode", "resale");
setFilterState("filterMode", "calendar");

// Clear all filters
setFilterState("filterMode", null);

Set a date range

Calendar mode reads the range from scaf-dates:

Set a date range

setFilterState("scaf-dates", {
  start_date: new Date("2025-06-01").toISOString(),
  end_date: new Date("2025-06-07").toISOString()
});
setFilterState("filterMode", "calendar");

Call setFilterState again to change the dates or the method. The collection runs a new search and follows.

Read the current state

Read filter state

const mode = JSON.parse(sessionStorage.getItem("filterMode"));
// "calendar" | "membership" | "subscription" | "resale" | null

const dates = JSON.parse(sessionStorage.getItem("scaf-dates"));
// { start_date: "2025-06-01T00:00:00.000Z", end_date: "2025-06-07T00:00:00.000Z" } | null

JavaScript hooks

function

Called each time the collection section re-renders after a filter is applied. Use it to re-initialize third-party scripts or sync a custom UI to the current state. Define it before the Methods filter block initializes.

After each render

window.supercycleAfterSectionRender = function() {
  const mode = JSON.parse(sessionStorage.getItem("filterMode"));
  // Re-initialize your UI here
};

Metafields the filter reads

Supercycle sets these metafields automatically. You can inspect them under Custom data in the Shopify admin.

supercycle.methods. The product’s methods: Calendar, Membership, Subscription, or Resale. Filters products by method.
supercycle.uncommitted_inventory. Set when a variant has stock not committed to an active rental. Used by the membership, subscription, and resale filters.
supercycle.future_availability_inventory. Set when a variant has availability on future dates. Used by the calendar filter.

Drive the filter from a home page date picker

A date picker in a home page hero that sends customers to the collection page with calendar mode already active. The Methods filter block on the collection page reads the saved session storage on load and applies the filter.

Home page hero

<div id="sc-hero-search">
  <label>
    From
    <input type="date" id="sc-start" />
  </label>
  <label>
    To
    <input type="date" id="sc-end" />
  </label>
  <button id="sc-search">Check availability</button>
</div>

<script>
  var today = new Date().toISOString().slice(0, 10);
  document.getElementById("sc-start").min = today;
  document.getElementById("sc-end").min = today;

  document.getElementById("sc-start").addEventListener("change", function() {
    document.getElementById("sc-end").min = this.value;
    if (document.getElementById("sc-end").value < this.value) {
      document.getElementById("sc-end").value = "";
    }
  });

  document.getElementById("sc-search").addEventListener("click", function() {
    var start = document.getElementById("sc-start").value;
    var end = document.getElementById("sc-end").value;
    if (!start || !end) return;

    sessionStorage.setItem("filterMode", JSON.stringify("calendar"));
    sessionStorage.setItem("scaf-dates", JSON.stringify({
      start_date: new Date(start).toISOString(),
      end_date: new Date(end).toISOString()
    }));

    // Change this URL to your store's collection
    window.location.href = "/collections/all";
  });
</script>

Search availability from your own code

To build your own listing or filter instead of using the Methods filter block, call the search the block uses. Both calls go through the Shopify app proxy at /apps/supercycle on your store’s own domain, so send them from your storefront. Shopify signs them, and you never send an API key.

Get the dates and lengths you can search

Rental lengths and earliest start

GET /apps/supercycle/calendar_availability_filter/new

string

The first day a rental can start, as YYYY-MM-DD.

integer[]

The rental lengths your enabled calendar methods offer, in nights, in no particular order. A length in nights is one less than in days, so a 4-day rental is 3.

Search a date range

POST /apps/supercycle/calendar_availability_filter

Send a JSON body.

object

required

Show properties

string

required

The first day of the rental, as YYYY-MM-DD.

string

required

The last day of the rental, as YYYY-MM-DD. The nights from start_date to end_date must be one of the rentalPeriodNights, or no products match.

object

Only count variants with these options, for example { "size": "Small" }. A list matches any of its values: { "size": ["Small", "Medium"] }. Option names and values aren’t case-sensitive.

integer[]

The products available for every day of the range, as product numbers in ascending order. Each is the product’s scf.avf metafield, the value the filter.p.m.scf.avf collection filter matches. [-1] when no products are available.

Show the available products on a collection

const response = await fetch("/apps/supercycle/calendar_availability_filter", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    availability_filter: {
      start_date: "2025-06-01",
      end_date: "2025-06-07",
      variant_options: { size: "Small" }
    }
  })
});
const { availableProducts } = await response.json();

// One comma-separated value keeps the link short. [-1] shows an empty collection.
window.location.href = "/collections/all?filter.p.m.scf.avf=" + availableProducts.join(",");

The collection link only filters once the Rental availability filter is set up in Search & Discovery.

A search returns up to 1,200 products in one response, the first 1,200 by product number. That keeps a collection link carrying them under Shopify’s maximum URL length.

Send dates as YYYY-MM-DD. A full timestamp is read as its UTC date, which can be the day before the one the customer picked.

Add the filter to a custom or legacy theme

If your theme doesn’t support app blocks on collection pages, add the filter to the collection template.

Open the collection template

On Themes, open your theme’s … > Edit code menu, then open the file your theme uses for collections: sections/main-collection.liquid, sections/collection-template.liquid, or templates/collection.liquid.

Paste the filter component

Add the snippet wherever you want the filter to appear, usually above the product grid.

Collection template

<x-availability-filter data-settings='{
  "enable_calendar": true,
  "enable_membership": true,
  "enable_subscription": true,
  "enable_resale": true,
  "collections_section_id": "",
  "custom_css": ""
}'></x-availability-filter>

{% render 'vite-tag' with 'methods-filter.jsx' %}

Set the collection section ID

Paste your collection section’s ID into collections_section_id. It lets the filter re-render the product grid without a full page reload. See Filter by availability for how to find it.

Turn off methods you don't offer (optional)

Set any of enable_calendar, enable_membership, enable_subscription, or enable_resale to false to hide that filter.

Save and test

Save, then preview a collection that contains products with methods turned on to confirm the filter appears and filters the grid.

Introduction

App blocks

Code snippets

Guides

Troubleshooting

How it works

Session storage keys

Write filter state from your own code

Set a date range

Read the current state

JavaScript hooks

Metafields the filter reads

Drive the filter from a home page date picker

Search availability from your own code

Get the dates and lengths you can search

Search a date range

Add the filter to a custom or legacy theme

​How it works

​Session storage keys

​Write filter state from your own code

​Set a date range

​Read the current state

​JavaScript hooks

​Metafields the filter reads

​Drive the filter from a home page date picker

​Search availability from your own code

​Get the dates and lengths you can search

​Search a date range

​Add the filter to a custom or legacy theme

How it works

Session storage keys

Write filter state from your own code

Set a date range

Read the current state

JavaScript hooks

Metafields the filter reads

Drive the filter from a home page date picker

Search availability from your own code

Get the dates and lengths you can search

Search a date range

Add the filter to a custom or legacy theme