> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supercycle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Methods filter

> Allows customers to search by availability

Allow customers to search by the availability of items from the collection page. For setup instructions see the [Methods filter guide](/documentation/online-store/search).

## Building a custom filter

The filter uses metafields and session storage to filter products with Shopify's Search & Discovery app.

### Session storage

<ParamField path="filterMode" type="string | null">
  The active filter method. One of `"calendar"`, `"membership"`, `"subscription"`, or `"resale"`. Set to `null` to clear all filters and show all products.
</ParamField>

<ParamField path="scaf-dates" type="object | null">
  The selected date range for calendar mode. Only relevant when `filterMode` is `"calendar"`.

  <Expandable title="properties">
    <ParamField path="start_date" type="string" required>
      ISO 8601 date string. e.g. `"2025-06-01T00:00:00.000Z"`
    </ParamField>

    <ParamField path="end_date" type="string" required>
      ISO 8601 date string. e.g. `"2025-06-07T00:00:00.000Z"`
    </ParamField>
  </Expandable>
</ParamField>

### Writing filter state from your own code

Values are stored as JSON strings. Use the helper below to write a key and notify the block — you can inspect the current values at any time in **DevTools > Application > Session Storage**.

```javascript theme={null}
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);
```

### Setting a date range (calendar mode)

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

### Reading the current filter state

```javascript theme={null}
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
```

### Global JavaScript hooks

<ParamField path="window.supercycleAfterSectionRender" type="function">
  Called each time the collection section re-renders after a filter is applied. Use it to re-initialise third-party scripts or sync a custom UI to the current state. Must be defined before the block initialises.
</ParamField>

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

### Shopify metafields

These are the metafields Supercycle uses to power the filter. They are set automatically and can be inspected in **Shopify > Settings > Custom data**.

**Product metafields**

<ParamField path="supercycle.methods" type="list.single_line_text_field">
  The rental methods available for a product. Values: `Calendar`, `Membership`, `Subscription`, `Resale`. Used to filter products by method type.
</ParamField>

**Variant metafields**

<ParamField path="supercycle.uncommitted_inventory" type="number_integer">
  Set to `1` when the variant has stock not yet committed to an active rental. Used by the Membership, Subscription, and Resale filters.
</ParamField>

<ParamField path="supercycle.future_availability_inventory" type="number_integer">
  Set to `1` when the variant has availability for future dates. Used by the Calendar filter.
</ParamField>

### Example: home page date picker

A date picker in a home page hero that sends customers to the collection page with calendar mode pre-activated. The Methods filter block on the collection page will read the saved sessionStorage state on load and apply the filter automatically.

```html theme={null}
<!-- Add this to your home page hero section -->
<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()
    }));

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

## Adding the Methods filter to custom or legacy themes

If your theme doesn't support app blocks on collection pages, you can add the filter directly to your liquid template.

<Steps>
  <Step title="Open your collection template">
    Go to **Online Store → Themes → … → Edit code**.
    Open one of these files depending on your theme:

    * `sections/main-collection.liquid`
    * `sections/collection-template.liquid`
    * `templates/collection.liquid`
  </Step>

  <Step title="Paste the filter component">
    Add the snippet below wherever you want the filter to appear — typically above your product grid.

    ```liquid theme={null}
    <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' %}
    ```
  </Step>

  <Step title="Set the Collection section ID">
    Find your collection section ID and paste it into the `collections_section_id` value. This enables the filter to re-render just the product grid without a full page reload. See the [Methods filter setup guide](/documentation/online-store/search#step-4-find-your-collection-section-id) for how to find it.
  </Step>

  <Step title="Disable unwanted methods">
    Set any of `enable_calendar`, `enable_membership`, `enable_subscription`, or `enable_resale` to `false` to hide those filter options.
  </Step>

  <Step title="Save and test">
    Save, then preview a collection page with Supercycle methods enabled to confirm the filter appears and works correctly.
  </Step>
</Steps>