Buy online, pick up in-store (BOPIS)

This is for:

Developer
In this article

"BOPIS" stands for "Buy Online, Pick Up In-Store." It’s a commerce strategy that allows customers to place orders for items online and then pick up those items at a physical store location. This approach combines the convenience of online shopping with the immediacy of in-store fulfillment. Using the method of your choice, your site will need to determine which store is the closest to the customer. You must then retrieve the identifier associated to this store that matches the value from your catalog availability identifier field.

You can leverage this store identifier, for example store-123, in your search interface to filter on products that are only available in this store. Ensure you have properly configured your availability channels. The identifier must match the value set in the catalog’s availability identifier field.

Example

When configuring your availabilities in your catalog configuration, you selected the availabilityid` field as the Availability ID field, which uniquely identifies each availability channel in your index. You then pushed availability items where the availabilityid field contains a unique identifier (that is, store-123):

 {
    "availabilityid": "store-123",
    "lat": 45.4975,
    "long": -73.5687,
    "availableskus": ["001-red-8_wide","001-red-9_wide","001-red-10_wide","001-red-11_wide", "001-blue-8_wide"],
    "objecttype": "Availability"
 }

With both your items and catalog on the same availabilityid, you can therefore add the @availabilityid==store-123 query to filter on all products that are available in this store.

Availability constraints

An availability constraint refers to a specific limitation or condition that influences the availability and accessibility of products within a commerce system. It implies that certain criteria, such as price lists, groups, entitlements, or stores, are set as constraints, and these constraints may determine whether certain products are accessible or visible in specific channels.

In a business-to-business (B2B) scenario, availability constraints might be defined by factors like price lists, groups, or entitlements. For instance, certain customers or groups of customers may have access to specific price lists or product groups based on their business relationship with the company.

In a business-to-consumer (B2C) scenario, the availability constraint could be a store. This suggests that certain products may only be available for purchase or pickup in specific physical stores, tying into the concept of BOPIS.

The following code showcases how to add a filter in the query to only retrieve products that are available in your channel, in the context of the Coveo Atomic library search interface.

Important

For this filter to work properly, your search interface must use a catalog configured with multiple channels.

<head>
  <!-- ... -->
    <script type="module">
    import {loadAdvancedSearchQueryActions} from 'https://static.cloud.coveo.com/atomic/v2/headless/headless.esm.js'; 1

    function setAvailabilityFilter(engine) { 2
      const action = loadAdvancedSearchQueryActions(engine).updateAdvancedSearchQueries({ 3
        aq: '@availabilityid=<AVAILABILITY_ID>', 4
      });
      engine.dispatch(action);
    }

    (async () => {
      await customElements.whenDefined('atomic-search-interface');
      const searchInterface = document.querySelector('atomic-search-interface');

      await searchInterface.initialize({
        accessToken:'<ACCESS_TOKEN>', 5
        organizationId: '<ORGANIZATION_ID>' 6
        organizationEndpoints: await searchInterface.getOrganizationEndpoints('<ORGANIZATION_ID>')
      });

      const engine = searchInterface.engine; 7
      setAvailabilityFilter(engine); 8

      searchInterface.executeFirstSearch();
    })();
  </script>
  <!-- ... -->
</head>
1 Import the target loadAdvancedSearchQueryActions Headless action loader via the CDN.
2 Create a function that takes as input an engine instance and uses the imported action loader to dispatch an action to update the query expression sent to Coveo.
3 Retrieve an action using the updateAdvancedSearchQueries action loader. Utilize the aq property to specify a query filter by choosing the unique availability ID of the channel for which you wish to fetch products.
4 Replace <AVAILABILITY_ID> with the unique availability ID of the channel for which you wish to fetch products.
5 <ACCESS_TOKEN> (string) is an API key or search token that grants the Allowed access level on the Execute Queries domain, as well as the Push access level on the Analytics Data domain in the target organization.
6 <ORGANIZATION_ID> (string) is the unique identifier of your Coveo organization (for example, mycoveoorganizationa1b23c).
7 Access and store the engine in a variable.
8 Call the setAvailabilityFilter method to dispatch the action.

For more information on dispatching actions, see the Headless documentation.