Show pickup availability on product pages

• Variant selection functionality. The pickup availability JavaScript function needs to be run when variants are selected.

To implement pickup availability, you'll use the following:

• The variant object
• The store_availability object
• The location object

To support pickup availability functionality in your theme, you need to implements the following components:

• The pickup availability section: Renders the display content, which contains information about each location that the current variant is stocked at.
• The pickup availability container: An empty container on the product page that hosts the section content.
• A JavaScript function: Renders the section content inside the container, and makes any updates on variant selection.

The pickup availability section hosts the actual content to be displayed, which has two main components:

• Availability summary
• Availability modal

This section is rendered inside the pickup availability container by the JavaScript function.

The availability summary loops through the locations returned from the store_availabilites attribute of the current variant to find any locations that have pick_up_enabled set to true. If there are any, then the availability of the current variant at the first location is displayed, along with a button to open the availability modal.

The availability modal displays the product and variant titles, and each location that the current variant is stocked at. For each location, the current availability and address are shown.

The following is an example of a pickup availability section with an availability summary and modal.

The pickup availability container is an empty <div> element that the JavaScript function will render the section contents inside of. It should be placed wherever you want the availability summary to show on the product page.

To add the pickup availability section content inside the pickup availability container, you need to use the section rendering API. The request needs to be prefixed with a /variants/[variant-id] parameter, where [variant-id] is the variant ID of the selected variant.

To access the variant ID, and update the display when a variant is selected, you need to make a call to your pickup availability JavaScript function from the JavaScript responsible for updating product page elements on variant selection.