Click & Collect / Omnichannel
Click and collect is a feature that can be enabled for Omnichannel based sites that have physical stores. This adds the ability to choose a fulfilment type, select a store as well as get stock information on a per store basis.
Stores
Stores can be queried in 1 of 3 ways. All Stores, By ID, or Nearest Stores. For the nearest stores query, first we need to get the location the customer cares about, then this can be used to query for the nearest stores. Stores are also aware of other nearby stores.
query AllStores {
stores {
id
displayName
urlTag
phoneNumber
openingTimes {
day
openingTime
closingTime
}
address {
addresseeName
companyName
addressLine2
addressLine3
addressLine4
addressLine5
state
postalCode
country
phoneNumber
clickAndCollect
}
}
}
query StoreById {
store(id: 88) {
id
displayName
urlTag
phoneNumber
openingTimes {
day
openingTime
closingTime
}
address {
addresseeName
companyName
addressLine2
addressLine3
addressLine4
addressLine5
state
postalCode
country
phoneNumber
clickAndCollect
}
nearbyStores {
id
displayName
urlTag
phoneNumber
openingTimes {
day
openingTime
closingTime
}
address {
addresseeName
companyName
addressLine2
addressLine3
addressLine4
addressLine5
state
postalCode
country
phoneNumber
clickAndCollect
}
}
}
}
query NearestStores {
searchLocations(query: "Salford Quays") {
displayName
longitude
latitude
postcode
}
nearbyStores(longitude: -2.28995, latitude: 53.4767) {
id
displayName
urlTag
phoneNumber
openingTimes {
day
openingTime
closingTime
}
address {
addresseeName
companyName
addressLine2
addressLine3
addressLine4
addressLine5
state
postalCode
country
phoneNumber
clickAndCollect
}
}
}
Querying a store for a product
When you want to find out if a product is available in your local store, this is very similar to the nearest stores query. The response is slightly different as you now also get the distance and stock quantity of that store. Against the product variant, we also expose the fulfilment methods that are supported for a given product. More information about these can be found in the schema.
query ClickAndCollect {
product(sku: 12826915, strict:false) {
variants {
title
eligibleForFulfilmentMethods
clickAndCollectStores(longitude: -2.28995, latitude: 53.4767) {
store {
displayName
}
distanceMiles
stock
}
}
}
}
Adding a product to basket
For sites that support omnichannel, so have more than 1 type of fulfilment method (other than the usual home delivery of purely online sites), when adding a product to basket, more information is now required.
A fulfilment method, and optional store id are now required (depending on if the fulfilment method utilises a store).
mutation AddToBasket {
addProductToBasket(
basketId: null
sku: 10797927
quantity: 8
fulfilmentInput: { # new field in the input
method: COLLECT_IN_STORE
storeId: 88
}
settings: { currency: GBP, shippingDestination: GB }
) {
id
items {
product {
title
}
chargePricePerUnit {
currency
amount
displayValue
}
quantity
appliedOffers {
totalBasketDiscount {
currency
amount
displayValue
}
removeable
message
info
}
freeGift
}
appliedOffers {
totalBasketDiscount {
currency
amount
displayValue
}
removeable
message
info
}
messages {
type
message
}
selectYourSample {
id
title
message
currentAmountSpent {
currency
amount
displayValue
}
tiers {
id
thresholdAmountSpent {
currency
amount
displayValue
}
products {
sku
title
images {
thumbnail
}
}
selectedProducts {
sku
}
maxSelectedProducts
}
}
}
}
Basket
As we now have more information about the product when adding it to basket, this data is also exposed against the basket item as shown below. Store and store stock will only be exposed if the fulfilment type involves a store.
query ViewBasket {
basket(
id: "2298e807-50ee-4120-abfa-3c0f0ef78fca:1611587680727",
settings: {
currency:GBP
shippingDestination: GB
}
acknowledgeMerge: true
) {
id
items {
product {
title
}
chargePricePerUnit { # item price after offers have applied
currency
amount
displayValue
}
totalChargePrice { # line price after offers have applied
currency
amount
displayValue
}
quantity
fulfilmentMethod # new field
store { # new field
id
displayName
}
storeStock # new field
}
messages {
type
message
}
eligibleForCheckout # new field
}
}
Another change to the basket to support the mixed fulfilment methods is around errors and messaging. We now expose new error types as well as show item level messaging for line level issues. These errors can also block the ability for a customer to checkout and require the customer to fix these issues if they exist.
The basket level messages now support 2 new types:
- MIXED_FULFILMENT_METHODS - this signifies the site does not support warehouse and store based fulfilment in the same order so must be corrected
- ITEMS_HAVE_ERRORS - this signifies that that one of the individual items has an error that must be fixed
For the new basket item messages under basket.items.messages, these have a message and a type. The 3 supported types and descriptions can be found below and in the schema.
NOT_ENOUGH_STOCK
This flag will appear if there is not enough stock for the product and fulfilment option the customer has chosen. These issues can be fixed by changing the requested stock.
If there is absolutely no stock, FULFILMENT_ISSUE is returned instead.
PRODUCT_ISSUE
This flag will appear if the product is no longer eligible for the selected fulfilment option, e.g. this product may no longer be available for home delivery, or click and collect or the product is marked as not purchasable online anymore. These problems can be fixed by changing the fulfilment type - note the product may no longer be available for any fulfilment type.
FULFILMENT_ISSUE
This flag will appear if the selected fulfilment type is no longer available. This can be where the store is closed or does not have click and collect available and is related the the fulfilment type itself rather than the product. These problems can be fixed by changing something about the fulfilment type e.g. changing store.