README

Click & Collect for Craft Commerce adds drop in Click and Collect functionality to Craft Commerce.

Note: The license fee for this plugin is $99 via the Craft Plugin Store.

Requirements

This plugin requires Craft CMS 4.0.0 or later. This plugin requires Craft Commerce 4.6.0 or later. This plugin requires PHP 8.0 or later.

Click.and.Collect.for.Craft.Commerce.Demo.mp4

Installation

To install Click & Collect, follow these steps:

Open your terminal and go to your Craft project:
```
 cd /path/to/project
```

Then tell Composer to load the plugin:

 composer require burnthebook/craft-commerce-click-and-collect

Install the plugin via ./craft install/plugin craft-commerce-click-and-collect via the CLI, or in the Control Panel, go to Settings → Plugins and click the "Install" button for Click & Collect for Craft Commerce.

You can also install Click & Collect for Craft Commerce via the Plugin Store in the Craft Control Panel.

Click & Collect for Craft Commerce works on Craft 4.x and Craft Commerce 4.6.0

Usage

Within your Shipping Template (see note below), simply add the following line:

{% include 'craft-commerce-click-and-collect/frontend/collection-points' with { csrfToken: craft.app.request.csrfToken } %}

Note

Your shipping template is where users choose a Shipping Method. Since Click & Collect provides its own option, consider adding a "Delivery" and "Collection" tab, or a "Use Collection Point" option when selecting an address. The Shipping Address will automatically be set to the chosen Collection Point.

The included template provides a postcode lookup form (using postcodes.io). This fetches configured collection points from Craft, sorting them by distance, and shows users the earliest available collection time on each collection point. It also integrates with Craft Commerce, adding the necessary hidden fields to ensure that the order makes sense in the admin.

There may be some changes needed to integrate this into your design. For example, we only set the Shipping Address, not the Billing Address. If you want to collect the customers Billing Address you will need to add your own method collection. Please see Craft Commerce's default templates for an example: https://github.com/craftcms/commerce/tree/4.x/example-templates/dist/shop

If you want to reference example templates, or are using Craft Commerce's default templates, you can simply copy the modified templates from the plugin into your project with the following command (run within a terminal):

cp -r vendor/burnthebook/craft-commerce-click-and-collect/templates/dist/example-templates/* ./templates

This command will overwrite /templates/shop/_private/address/list.twig and /templates/shop/checkout/shipping.twig which have minimal modifications.

Overloading Plugin Templates

If you do not want to use the included plugin template, or need to modify it, run the following command within a terminal to get your own copy of the template to modify to your design:

mkdir -p /templates/craft-commerce-click-and-collect/frontend
cp -r vendor/burnthebook/craft-commerce-click-and-collect/templates/frontend/collection-points.twig ./templates/craft-commerce-click-and-collect/frontend/collection-points.twig

You will now have a copy of the template that you can modify. The included template is using Tailwind CSS and should be easily modifiable. You do not need to modify the {% include %} tag you used above if you do this.

Configuration

Before the plugin will work effectively you need to create some Collection Points and Opening Times within the CraftCMS Admin.

Once the plugin is installed, you will see a new menu item called "Click & Collect", if you click it you will see the list of Collection Points, as well a button to create a new Collection Point.

Important

When creating a new Collection Point, ensure to click the "Get Latitude & Longitude" button to get the correct Lat/Lng for your address.

Once your Collection Point is created you can then create Opening Times for that Collection Point by clicking the Opening Times menu item.

Tip

It's beneficial to ensure that each day for your Collection Point has an Opening Time as these are displayed as your Opening Hours within the modal that appears on the front end.

Once a Collection Point has been created with Opening Times, it will appear in the Postcode search on the front end and will be available for Click & Collect.

Changelog

Please see CHANGELOG.md for a detailed Changelog.

Roadmap

Some things to do, and ideas for potential features:

Move away from raw javascript and html-in-js within the included templates, look into using script type="text/template"
Extract as much critical javascript as possible to dedicated javascript files so that users only need worry about the html templates.
Investigate if this works with zipcodes for US based shipping.

Contributing

Thank you for considering contributing to the plugin!

Did you find a bug and know how to fix it? Please submit a Github Issue with detailed replication steps, and then a Pull Request that references that issue.

Do you intend to add a new feature? Please submit a Github Issue for discussion before submitting a Pull Request.

Please format your code using php-cs-fixer for PSR-2 coding style before submitting a Pull Request.

If you discover a security vulnerability, please send an email to Burnthebook at support@burnthebook.co.uk. All security vulnerabilities will be promptly addressed.

Thanks

#extending-craft channel in the Craft CMS Discord

burnthebook / craft-commerce-click-and-collect

Maintainers

Details