Click and collect

The click and collect feature enables the customer to select a store to pick up their product from instead of getting it delivered. The solution can either be configured with the stock location on each order line or on the whole order. This way, the solution can be tailed to the specific needs.

There are two scenarios:

1. On the product page, you can choose to either ship the product or collect it yourself. This is done using two separate buttons e.g.: Add to cart and Collect in store as shown in Figure 1.1.
2. In the cart, you can choose to collect the products instead of getting them shipped by selecting the Click & Collect shipping provider.

For both of the mentioned scenarios you will want a way to separate your click and collect stock locations from your ordinary stock locations that aren’t available for click and collect. This is done by creating a new stock location category and then you can render all the stock locations in this category as pickup points.

So:

• Navigate to Settings > Ecommerce > Product catalog > Stock location categories and create a new category for Click and collect
• Create/edit your existing stock locations you want available for click and collect and put them in this Click and collect category
• Assign a dedicated "Pickup point" user to the stock location, where the user address, country, and phone number represent the pickup point's

Now you’re ready to complete the setup - you only need to decide which scenario you want for your shop.

In the first scenario, you have both options on the product page:

• Add the product to cart and get it shipped
• Select a store to collect it from yourself

For the Collect in store option, you render all the stock locations in your Click and collect category (Figure 3.1). The selected stock location is then added to the order line of the product.

Figure 3.1 The Stock locations modal

This must be implemented in your product details template in the Product Catalog app and could be done using the following code example. First off, the definitions and script section at the top of the template:

Then you must add the Collect in store button that is shown if any stock units have been configured in the Stock Matrix for the product. The button needs to have a data-toggle and data-target defined, like so:

And most importantly, insert the code for the actual stock location modal somewhere in your template. In this example, STOCKLOCCAT1 is the stock location category ID of our Click & Collect category.

In the cart, each product has the pickup point saved in the order line and it can be rendered like shown in Figure 4.2.

This must be implemented in the template for the Show Cart step in the Shopping Cart app, where the Stock location can be rendered inside the OrderLines loop using the tag: Ecom:Order:OrderLine.StockLocation.Name

In the second scenario, products are added to the cart with the usual Add to cart button and then in the checkout, you can choose a Click and collect shipping method (Figure 5.1) which transforms the whole order into a Click and collect order.

Figure 5.1 You can select the Click and collect shipping method in the checkout

So, create a new shipping method with the Click & collect - Stock Locations shipping provider (Figure 5.2).

Set the parameters to the following:

• Stock location type: Select your click and collect stock location category
• Shipping Provider Template: Select the StockLocationServicePoint.html template

This enables the provider to render some content in the checkout: a list of the stock locations in your chosen stock location category, as shown in the image above.

Figure 5.2 The parameters for the Click & collect - Stock Locations shipping provider

The last step is to implement this in the template for the Information step in the Shopping Cart app. You will need:

• A new function in the script section
• Incorporating the function in the payment and shipping section

So, open your Information step template and add this updateCart function in the script section:

Then scroll down to the fieldset section for Payment and delivery and add the onchange=’updateCart()’ or onclick=”updateCart()” parameter to the radio buttons for both payment and shipping, as shown in this code - or simply replace your Payment and delivery fieldset section with this code: