👍

To utilise this feature, you will also need to enable and configure the Aurora Doddle integration using our Doddle Guide.

Introduction

In order to utilise Doddle Collection points within your frontend templates you will need to update the following page templates:

• Basket
• Checkout
• Store Finder

Basket and Checkout Template Updates

In order for the basket and checkout to display a link to the Checkout Store Finder, and in turn reflect the selected store details, please download the attached JS and HTML templates and referencing them from within your basket and checkout templates as follows:

Templates:

• /basket/index.tpl.html
• /checkout/index.tpl.html

{include_js files="_js/collect_in_store.js"}
{include file="_includes/collect_in_store.tpl.html"}

📘

These should be located within your Collect in Store delivery containers, so they are only displayed to the customer when Collect in Store is selected as their delivery type.

It may also be necessary to update your update_basket JS function to set the correct parameters on subsequent requests to the getBasketDetails AJAX method, this can be achieved as follows:

if ( collect in store is selected ) {
  var store_id = $('[name="store_id"]').val();
  var delivery_store_id = $('[name="delivery_store_id"]').val();
  var delivery_store_type = $('[name="delivery_store_type"]').val();
  add_shipping_details_to_basket_parameters(params, 'store', delivery_store_id ? delivery_store_id : store_id, delivery_store_type);
}

This will result in the following being displayed:

The "search available stores" link will launch the Checkout Store Finder and allow a collection point to be selected.

Once a collection point has been selected, the store details will be displayed accordingly i.e.

👍

Ensure that all pre-existing references to clear, show or hide the .checkout_store_info element are removed to avoid undesirable behaviour.

👍

Please ensure that all links to your Checkout Store Finder include the correct parameters i.e.

/google/store-locator?window=1&checkout_store_finder=1&collect_in_store=1

Checkout Store Finder Updates

Template /content/store-finder.tpl.html

In order to allow Doddle Collection points to be displayed within our Checkout Store Finder and then selected, you will need to modify your Store Finder as follows:

1. Links to select store should be rendered with the following attributes:

   data-store-id="{$store.id}" 
   data-store-type="{$store.type}" 
   data-store-name="{$store.name}" 
   data-store-address="{$store.address}"
   

   For example:

   <a href="..." data-store-id="{$store.id}" data-store-type="{$store.type}" data-store-name="{$store.name}" data-store-address="{$store.address}" class="select_store">Select Store</a>
   

2. Ensure that when a select store link is clicked, the correct information is passed to the Collect In Store JS library i.e

   $(document).on('click', '.select_store', function (e) {
     e.preventDefault();
     if (typeof(window.parent.select_collection_store) == 'function') {
       var id = $(this).data('store-id');
       var type = $(this).data('store-type');
       var name = $(this).data('store-name');
       var address = $(this).data('store-address');
       parent.window.select_collection_store(id, type, name, address);
     }
   });
   

3. Update your Google Maps marker rendering logic to use an icon based on the store type i.e.

   function marker(map, store_type, latlng, title, content) {
      var marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        title: title, 
        icon: '/templates/example.com/_images/map_marker_'+store_type+'.png'
      });
      ...
   }
   ...
   {foreach from=$stores item="store"}
     marker(map, '{$store.type}', ...);
   {/foreach}
   

📘

Here is a Doddle Collection point map marker that we prepared earlier!