Add Click and Collect Support

Neto now supports Click & Collect for orders through the webstore Core Checkout. This allows your customers to nominate a collection location instead of selecting a shipping or delivery option. Then be notified when their order is ready for collection.

As part of this update a number of new Click & Collect related sections have been added on the purchase confirmation page of the webstore, as well as various email and print docs.

If your webstore does not have these sections you can tweak your templates using the following guide. Note, Click & Collect is not supported on Managed Checkout though you can continue to use a "Free Pick Up" shipping method instead.

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

Read through the Getting Started Guide to get a better sense of how the control panel, Database and Front End store interact.
Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
The code snippet in this tweak doc uses Bootstrap 4, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

This setup may require you to create new theme templates. Ensure you have SFTP access before completing this tweak. Not sure about the changes required? Reach out to Neto Support.

Available Data Tags

These tags are available within an order email template or when filtering a [%show_order%] function to just shipping details: [%show_order id:'[@order_id@]' details:'shipping'%]

Name	Description
`[@warehouse_name@]`	Name of the Click & Collect location
`[@warehouse_address@]`	Full address of the Click & Collect location
`[@warehouse_street1@]`, `[@warehouse_street2@]`	Click & Collect location address lines
`[@warehouse_city@]`	Click & Collect location address city
`[@warehouse_state@]`	Click & Collect location address state
`[@warehouse_country@]`	Click & Collect location address country
`[@warehouse_phone@]`	Click & Collect location address phone number
`[@warehouse_operation_hours@]`	The operating hours of the Click & Collect location e.g. "Mon - Fri: 9:00am - 5:00pm"
`[@warehouse_operation_hours_timezone@]`	The timezone of the Click & Collect location, only prints if value differs from system timezone
`[@collection_eta@]`	The estimated collection time for orders at the Click & Collect location
`[@is_click_collect_order@]`	Prints `1`/`0` depending if the order is marked for Click & Collect

Coding Instructions

Step 1: Theme Template Changes

Connect to your webstore via SFTP and navigate to:

httpdocs/assets/themes/[THEME_NAME]/templates/cart/includes

Where [THEME_NAME] is the the theme folder that you want to check has the Click & Collect details. This could be your current active theme, or any other theme you have installed. Check your theme has a invoice_click_collect_info.template.html template in the includes folder. If it does not, create one and add the following code:

<h3 class="my-2">Click & collect information</h3>
<div class="row">
    <div class="col-12 col-sm-6">
        <h4>Location</h4>
        <p class="mb-1">[@warehouse_name@]</p>
        <p class="mb-1">[@warehouse_address@]</p>
    </div>
    <div class="col-12 col-sm-6">
        <h4>Opening hours <span class="text-muted small">
        [%if [@warehouse_operation_hours_timezone@] ne ''%]
        ([@warehouse_operation_hours_timezone@])
        [%/if%]
        </span></h4>
        <p class="mb-1">[@warehouse_operation_hours@]</p>
    </div>
    <div class="col-12 col-sm-6 mt-sm-2">
        <h4>Ready for Collection In Approximately</h4>
        <p class="mb-1">[@collection_eta@]</p>
    </div>
</div>

(Skeletal Theme reference)

Next, go back to the includes folder and check your invoice_body.template.html template. Locate the [%show_order id:'[@order_id@]' details:'shipping'%] function and confirm the existing [%param *header%] code block includes the Click & Collect Info template:

[%show_order id:'[@order_id@]' details:'shipping'%]
    [%param *header%]
        [%if [@is_click_collect_order@] ne '1'%]
            <h3 class="my-2">Shipping information <span class="text-muted small">[@order_id@]</span></h3>
            <div class="row">
                <div class="col-12 col-sm-6">
                    <h4>Shipping address</h4>
                    [@ship_first_name@] [@ship_last_name@]<br/>
                    [%if [@ship_company@] ne ''%][@ship_company@]<br/>[%/ if%]
                    [@ship_street1@] [@ship_street2@]<br/>
                    [@ship_city@], [@ship_state@] [@ship_zip@]<br/>
                    [@ship_country@]
                </div>
                <div class="col-12 col-sm-6">
                    <h4>Shipping method</h4>
                    <p class="mb-1"><i class="fa fa-envelope"></i> [@shipping_method@]</p>
                </div>
                [%if [@ship_comment@]%]
                    <div class="col-12 col-sm-6">
                        <h4>Special delivery instructions</h4>
                        <p class="mb-1">[@ship_comment@]</p>
                    </div>
                [%/if%]
            </div>
        [%else%]
            [%load_template file:"cart/includes/invoice_click_collect_info.template.html"/%]
        [%/if%]
    [%/param%]
[%/show_order%]

(Skeletal Theme reference)

Step 2: Document Template Changes

Return to the root of your webstore file system, then navigate to:

private/www/netosuite/SysDoc/printdocs/includes/template/click_collect_collection_details.template.html

If you are missing the template folder, or the click_collect_collection_details.template.html template within, create them and add the following code:

<strong>Collection Details</strong>
<p>
    Location: <br />
    [@warehouse_name@] <br />
    [@warehouse_address@]
</p>
<p>
    Opening hours <span class="text-muted small">
    [%if [@warehouse_operation_hours_timezone@] ne ''%]
    ([@warehouse_operation_hours_timezone@])
    [%/if%]
    </span>: <br />
    [@warehouse_operation_hours@]
</p>
<p>
    Ready for Collection In Approximately: <br />
    [@collection_eta@]
</p>

Next, return to the printdocs folder and navigate to: /order/invoice/template.html

Check your invoice templates Ship to section includes the Click & Collect Collection Details template

[%if [@is_click_collect_order@]%]
[%load_template file:'printdocs/includes/template/click_collect_collection_details.template.html'/%]
[%else%]
<h4>Ship to</h4>
[%if [@ship_company@]%]<p>[@ship_company@]</p>[%/if%]
<p>[@ship_first_name@] [@ship_last_name@][%if [@ship_phone@]%], [@ship_phone@][%/if%]</p>
<p>[@ship_street1@] [%if [@ship_street2@]%], [@ship_street2@][%/if%]
<p>[@ship_city@], [@ship_state@] [@ship_zip@]</p>
<p>[@ship_country_name@]</p>
[%/if%]

Step 3: Email Template Changes

Return to the SysDoc folder, then navigate to: /emails/order/receipt/default.email.html

Check your template includes the Click & Collect Collection Details template so Click & Collect customers will see collection details for the location they selected.

Dear [@bill_first_name@],
<p>
Thank you for shopping with [@send_from_company@].
</p>
[%if [@is_click_collect_order@]%]
[%load_template file:'printdocs/includes/template/click_collect_collection_details.template.html'/%]
[%/if%]
<p>
[%if [@username@]%]
To track the progress of this and other orders online please go to <a href="[%url page:'account'%][%/url%]">your account</a> and select the order you want to track.
[%else%]
To track the progress of your order online please <a href="[%url page:'account' type:'nr_track_order' id:'[@order_id@]'%][%param qs%]email=[%encodeuri%][@email@]%[/encodeuri%]&zip=[@ship_zip@][%/param%][%/url%]">click here</a>.
[%/if%]
</p>

Depending on your webstore settings, the Order Receipt email may trigger when a Click & Collect order is dispatched. This provides the opportunity to send a 'Pick Up Confirmation' email if you customise the Order Receipt template to check the order status. To do so, you will need to include a [%show_order%] function to scope in the [@order_status@] tag

Dear [@bill_first_name@],
[%show_order id:'[@order_id@]'%]
    [%param *header%]
        [%if [@is_click_collect_order@] and [@order_status@] eq 'Dispatched' %]
            <p>Your order has been collected. Thank you for shopping with [@send_from_company@].</p>
        [%else%]
            <p>Thank you for shopping with [@send_from_company@].</p>
            [%if [@is_click_collect_order@]%]
            [%load_template file:'printdocs/includes/template/click_collect_collection_details.template.html'/%]
            [%/if%]
        [%/if%]
    [%/param%]
[%/show_order%]

You can also customise the email subject to make it clear the email relates to a Click & Collect order

[@send_from_company@] Order [%if [@is_click_collect_order@] %]Pickup [%else%]Receipt [%/if%] #[@order_id@]

When a Click & Collect order is placed in the Pending Pickup status, a 'Ready for Collection' email will be triggered to notify the customer. To customise the contents of this email template via SFTP navigate to:

private/www/netosuite/SysDoc/emails/order/pending_pickup/default.email.html

Note, by default changes to the Click & Collect Collection Details template will update both your Order Receipt Email and Order Invoice Document. To avoid this, create a duplicate Details template for the Order Receipt template and update the load_template function. Alternatively, you can hard code different Click & Collect Details in each template and remove the load_template function.

Your webstore theme and print/email templates now support Click & Collect.

Request a quote