Enable Click & Collect

Since version 3.22

Let customers collect their order in a store. This guide explains what the Gezy Click & Collect checkout step does, how stores and pickup slots are listed, and how to customize the storefront component.

Overview

Gezy shipping modes carry a transport type. Modes whose transport type is enlevement are Click & Collect modes: instead of a delivery address, the customer picks a store to collect the order from, and — when the back office requires it — a pickup slot.

There is nothing to enable on the Front-Commerce side. As soon as a shipping mode with the enlevement transport type is eligible for the cart, it appears in the checkout alongside the delivery and pickup point modes, and selecting it displays the store picker.

The transport type is the only source of truth: a Click & Collect mode is exposed with the Gezy_enlevement method type. The back office also returns an available_clickncollect flag on shipping modes, but as of LMB 2026-09 it is hardcoded to true on every mode, so Front-Commerce does not read it.

info

Before this version, enlevement modes were filtered out of availableShippingMethodList. If your back office already exposes such a mode, it will now show up in the checkout of your storefront.

What the customer goes through

1. Choosing the mode applies it to the cart. The back office scopes the store list to the mode set on the cart, so the store list is only available once the mode has landed — this is why selecting the mode and listing the stores are two separate calls.
2. Choosing a store. Stores are listed with their address and opening hours, and can be filtered by city or postcode. Stores are never geolocated by the back office, so they cannot be placed on a map.
3. Booking a slot, when the back office makes it mandatory. In that case a store with no slot left cannot be collected from at all, and is not listed.
4. Adjusting the cart, when the chosen store cannot prepare every line. The customer either picks another store, or chooses how many units of each short line to keep — defaulting to what the store holds, capped to it, and removing the line when kept at 0. Emptying the cart that way sends the customer back to the cart page.
5. Validating the step. The shipping step is refused while no store is selected, so a cart can never be ordered as Click & Collect without a collection point.
6. Reviewing the order. The checkout recap shows the booked store, its opening hours and the slot in place of the shipping address.

Customize the storefront component

The store picker is registered as the Gezy_enlevement component of the shippingMethodAdditionalData feature, so you can replace it the same way you would any other shipping method component:

app/extension-name/index.ts

import { defineExtension } from "@front-commerce/core";

export default defineExtension({
  name: "my-click-and-collect",
  meta: import.meta,
  unstable_lifecycleHooks: {
    onFeaturesInit: (hooks) => {
      hooks.registerFeature("shippingMethodAdditionalData", {
        ui: {
          componentsMap: {
            Gezy_enlevement: new URL(
              "theme/modules/Checkout/MyStorePickup/MyStorePickup.tsx",
              import.meta.url
            ),
          },
        },
      });
    },
  },
});

To adapt the shipped component instead of replacing it, override any file under theme/modules/Checkout/GezyStorePickup/ — the store list, a store row, the slot selector and the missing-products dialog are each their own component.

The shipped component also declares an AddressRecapLine, which replaces the shipping address with the booked store in the checkout recap. If you replace the component, declare an AddressRecapLine on yours too (you can reuse theme/modules/Checkout/GezyStorePickup/GezyStorePickupRecapLine): without it, the recap falls back to the shipping address the customer typed.

Store availability on the product page

A product eligible to Click & Collect carries a Store pickup block on its page, opening the list of stores with their stock status for that product, their address and their opening hours, searchable by city or postcode.

Eligibility is decided by the back office and is not per-product: an article is eligible as soon as at least one enlevement shipping mode has stores attached to it. It is exposed as Product.gezyClickAndCollectAllowed, and the block renders only when it is true.

The store list is not loaded with the product page: the back office is only asked when the customer opens the block, since most visitors never do.

note

The back office only returns the eligibility flag on the article detail endpoint, not on the article search one. A product read through a list — a category, a search, a cross-sell — therefore reports gezyClickAndCollectAllowed: false. This only matters if you query the field outside a product page.

The block is registered as the StoreStock component of the productView feature, so you can replace it the way you would the configurator:

app/extension-name/index.ts

hooks.registerFeature("productView", {
  ui: {
    componentsMap: {
      StoreStock: new URL("theme/modules/MyStoreStock.tsx", import.meta.url),
    },
  },
});

Your component receives the product as queried by ProductFragment, which the shipped block only extends with path and gezyClickAndCollectAllowed (through GezyStoreStockFragment). If your component needs other fields, override theme/pages/Product/ProductFragment.gql to spread your own fragment, otherwise they will be undefined.

Your component can reach the list through Product.gezyStoreStock or the route below. Each entry is a GezyStoreStock (an FcPickup) carrying isInStock, which tells whether the store holds the product. The store's quantity is not exposed.

Routes

The shipped components reach the back office through these routes, which a component of your own can reuse:

• POST /api/gezy/storePickupList — applies the Click & Collect mode to the cart and returns its store list (shippingAddressId, carrierCode, methodCode).
• POST /api/gezy/adjustStorePickupCart — brings the cart down to what a store can fulfill (storeId, and items as a JSON array of { itemId, quantity }).
• GET /api/gezy/cartStorePickup — the store and slot booked on the cart, used by the checkout recap.
• GET /api/gezy/productStoreStock/:slug — the per-store availability of a product. It takes the product slug, not its sku: the eligibility flag only comes back from the article detail endpoint, which the back office resolves by slug, so asking by sku silently returns an empty list.

Troubleshoot

Enable the front-commerce:gezy:modules:checkout:shipping debug flag to log the payload sent when a shipping mode is applied, and the store list answered by the back office (including use_timeslot and each store's stock and slot count).

Enable front-commerce:gezy:modules:catalog:storeStock to log how many stores the back office returns for a product.

A product page showing no Store pickup block while the back office does expose a Click & Collect mode usually means that mode has no store attached to it: that is what makes an article eligible.