Guide

3rd Party Collection Point integration guide

Aurora supports the integration of 3rd Party Collection Points into the Store Finder to allow customers to have their orders delivered to collection points from a range of services (as supported by DPD Interlink) and integrates with the Aurora Store Locator to simplify selection of your desired Collection Point.

This support article describes how an Agency should integrate 3rd Party Collection Point in to the Aurora Front-end Templates.

Suggest Edits

👍

If you have not yet learnt how to configure DPD Interlink in Aurora, please see the DPD Interlink support article for more detail.

Introduction

The 3rd Party Collection Point integrations allow customers to have their orders delivered to 3rd party collection points from a range of services (as supported by DPD Interlink) and integrates with the Aurora Store Locator to simplify selection of your desired Collection Point.

This guide describes how a digital agency should integrate 3rd Party Collection Points in to the Aurora Front-end Templates.

👍

All of the code described in this article is already implemented and readily available for download as working examples from the Aurora Demo Example Store. Read on for assistance integrating the changes required from these examples to incorporate them into your existing Front-end Templates.

🚧

These templates are provided for illustrative purposes only and if used, are entirely the responsibility of the Agency to maintain going forward.

Basket page integration

Template /basket/index.tpl.html

  1. Add a html div with a class attribute of checkout_store_info. This will be used for displaying selected store information. The div must also have data-store-id and data-store-type attributes with store id and store type values. Inside the div you must also add 2 input tags. Please see a sample implementation below:

    <div class="checkout_store_info" data-store-id="{if $store}{$store.id}{/if}" data-store-type="{if $store}{$store.type}{else}physical{/if}">
    <h2 class="checkout_selected_store_h2">Selected store:</h2>
    <h3>{if $store}{$store.name}<br/>{$store.address}{else}Please select a store{/if}</h3>
    <p>
        <a href="" title="" class="basket_collect_in_store_link template_button">Search available stores</a>
        <span class="error-store" style="display:none;">Please select a store</span>
    </p>
    <input type="hidden" name="store_id" value="{if $store}{$store.id}{/if}" id="store_id" class="store_id" />
    <input type="hidden" name="delivery_store_id" value="{if $store}{$store.id}{/if}" id="delivery_store_id" class="store_id" />
    <input type="hidden" name="delivery_store_type" value="{if $store}{$store.type}{else}physical{/if}" id="delivery_store_type" />
</div>

Js file _js/basket.js

  1. Add a new js function amendBasketParamsWithShippingParams:

    /**
 * Amends passed basket parameters with shipping params
 * @param array params - basket params
 * @param string type - shipping type
 * @param string storeType - store type when type is collection from store
 * @param string storeId - store id when type is collection from store
 */
function amendBasketParamsWithShippingParams(params, type, storeType, storeId){
    params['delivery_type'] = type;
    
    if(type == 'store'){
        params['delivery_store_type'] = storeType;
        
        if(storeType == 'physical'){
            params['collect_in_store'] = '1';
            params['store_id'] = storeId; // for backwards compatibility
            params['delivery_store_id'] = storeId;
        }
        else{
            params['delivery_store_id'] = storeId;
        }
    }
    else if(type == 'collect_plus'){
        params['collect_plus_delivery'] = '1';
    }
    else if(type == 'home'){
        ; // nothing extra to set
    }
}

  2. Change $('.basket_choose_store_link').livequery('click', function(e) {...}); method to:

    1. Set values for data-store-id and data-store-type attributes of a tag identified by .checkout_store_info__div
    2. Set values for input tags identified by .store_id and #delivery_store_type
    3. Call amendBasketParamsWithShippingParams(...) js function to amend Ajax parameters

    Sample implementation:

    $('.basket_choose_store_link').livequery('click', function(e) {
    e.preventDefault();
    var params = {};
    
    var id = $(this).data('store-id');
    var type = $(this).data('store-type');
    var info = $(this).data('store-info');
    
    amendBasketParamsWithShippingParams(params, 'store', type, id);
    
    $.get('/ajax/Ajax_Basket/getBasketDetails', params, function(response) {
        parent.$.fn.colorbox.close();
        if (window.parent.$('.checkout_store_info').length) {
            window.parent.$('.checkout_store_info').attr('data-store-id', id);
            window.parent.$('.checkout_store_info').attr('data-store-type', type);
            window.parent.$('.checkout_store_info h3').html(info);
            window.parent.$('.checkout_store_info').show();
            
            window.parent.$('.checkout_store_info').find('.store_id').val(id);
            window.parent.$('.checkout_store_info').find('#delivery_store_type').val(type);
            if (window.parent.$('body.checkout').length) {
                parent.changeCountry();
            }
            
            parent.updateShippingOptions(response.delivery_options);
        } else {
            window.top.location.reload();
        }
    });
});

  3. Change $('input[name=basket_choose_delivery_type], select[name=basket_choose_delivery_type]').live('change', function(e) {...} ); :

    a. Remove this code:

    $('.basket_selected_store_info').html($('.basket_store_id').find('option:selected').attr('rel'));

    b. Find:

    $('.basket_collect_plus_selected_address').hide();
$('.basket_collect_plus_remove').hide();

    and insert after them:

    $('.checkout_store_info').show();

    c. In else if ($(this).val() == 'collect_plus') { block find and remove these lines:

    $('.basket_store_id').parent().hide();
$('.basket_selected_store_info').html('').hide();

    and insert this just after:

    $('.checkout_store_info').hide();

    d. In else { block find and remove:

    $('.basket_store_id').parent().hide();
$('.basket_store_id').val('');
$('.basket_selected_store_info').html('').hide();

    and add this line:

    $('.checkout_store_info').hide();

    Sample implementation of whole function:

    $('input[name=basket_choose_delivery_type], select[name=basket_choose_delivery_type]').live('change', function(e) {
    if ($(this).val() == 'store') {
        if ($('.basket_collect_info').length) {
            $('.basket_collect_info').hide();
        }

        $('.basket_choose_delivery_date').hide();
        $.get('/ajax/Ajax_Basket/deleteBasketDeliveryDate');

        $('.basket_country').parent().hide(); // aaaa
        $('.basket_ship_to_where').val('store');

        if ($('.basket_inline_store_search').length > 0) {
            $('.basket_inline_store_search > input:text').focus();
        }

        // Collect+ Data
        $('.basket_collect_plus_selected_address').hide();
        $('.basket_collect_plus_remove').hide();
        
        $('.checkout_store_info').show();

        updated_shipping_option = true;
    } else if ($(this).val() == 'collect_plus') {
        $('.basket_collect_info').show();
        $('.basket_choose_delivery_date').hide();
        $.get('/ajax/Ajax_Basket/deleteBasketDeliveryDate');

        if ($('.basket_inline_collect_search').length > 0) {
            $('.basket_inline_collect_search > input:text').focus();
        } else {
            $.get('/ajax/Ajax_Basket/startCollectPlus', { }, function (response) {
                $.colorbox({width:"410px", height:"210px", html: response['collect_plus_form'], scrolling: true, onOpen:function() { $("body").css("overflow", "hidden"); }, onClosed:function() { $("body").css("overflow", "auto"); }});
            }, 'json');
        }

        $('.basket_ship_to_where').val('');
        $('.basket_shipping_info').show();

        $('.checkout_store_info').hide();
        
        updated_shipping_option = true;
    } else {
        if ($('.basket_collect_info').length) {
            $('.basket_collect_info').hide();
        }

        $('.basket_country').parent().show(); // aaaa
        $('.basket_choose_delivery_date').show();
        $('.basket_shipping_options_for_home_delivery').show(); // aaaa
        $('.basket_delivery_option').parent().show();
        $('.basket_ship_to_where').val('');
        $('.basket_shipping_info').show();

        // Collect+ Data
        $('.basket_collect_plus_selected_address').hide();
        $('.basket_collect_plus_remove').hide();

        $('.checkout_store_info').hide();
        
        updated_shipping_option = false;
    }

    update_basket($(this));
});

  4. Add $(document).ready(function(){...} ); containing this code:

    $(document).ready(function(){
    if($('#basket_choose_delivery_type:checked').val() == 'store'){
        $('.checkout_store_info').show();
    }
    else{
        $('.checkout_store_info').hide();
    }
});

  5. Modify update_basket() function:
    a. remove or comment out a code block which sets store parameters into params variable

    /* This code should not be used anymore
if ($('.basket_store_id:visible').length || $('input.basket_store_id[type=hidden]').val() || $('.basket_inline_store_search:visible').length) {
	params['store_id'] = $('.basket_store_id').val();
	params['collect_in_store'] = '1';
	store_info = $('.basket_store_id').find('option:selected').attr('rel');
	if (typeof(store_info) !== 'undefined' && store_info.length > 0) {
		$('.basket_selected_store_info').html(store_info).show();
	} else {
		$('.basket_selected_store_info').hide();
	}
} else if ($('.basket_collect_plus:visible').length || $('.basket_inline_collect_search:visible').length){
	params['collect_plus_delivery'] = '1';
}
*/

    b. add a function amendBasketParamsWithShippingParams() call just before $.get('/ajax/Ajax_Basket/getBasketDetails', params, function (responseJson) {...} ); :

    amendBasketParamsWithShippingParams(params, $('#basket_choose_delivery_type:checked').val(), $('.checkout_store_info').attr('data-store-type'), $('.checkout_store_info').attr('data-store-id'));

  6. Add a function updateShippingOptions() :

    function updateShippingOptions(options){
	update_basket_shipping (options);
}

  7. That's all. You can find all these changes in basket.js file at https://demo.auroracommerce.com/basket

Checkout page integration

Template /checkout/index.tpl.html

  1. Add a html div with an class attribute equal to checkout_store_info. If you already have it, please modify it accordingly. This html div will be used for displaying selected store information. The div must also have data-store-id and data-store-type attributes containing store id and store type values. Inside the div you must also add 2 input tags. Please see a sample implementation below: 

    <div class="checkout_store_info" data-store-id="{if $store}{$store.id}{/if}" data-store-type="{if $store}{$store.type}{else}physical{/if}">
    <p><a class="basket_collect_in_store_link" href="{if $language_iso}/{$language_iso}{/if}/google/store-locator/" target="_blank">Search available stores</a></p>
    <h3>{if $store}{$store.name}<br/>{$store.address}{else}{/if}</h3>
    <input type="hidden" name="store_id" value="{if $store}{$store.id}{/if}" id="store_id" class="store_id" />
    <input type="hidden" name="delivery_store_id" value="{if $store}{$store.id}{/if}" id="delivery_store_id" class="store_id" />
    <input type="hidden" name="delivery_store_type" value="{if $store}{$store.type}{else}physical{/if}" id="delivery_store_type" />
</div>

  2. That's all for checkout template.

Js file _js/checkout.js

  1. Add a new js function amendBasketParamsWithShippingParams:

    /**
 * Amends passed basket parameters with shipping params
 * @param array params - basket params
 * @param string type - shipping type
 * @param string storeType - store type when type is collection from store
 * @param string storeId - store id when type is collection from store
 */
function amendBasketParamsWithShippingParams(params, type, storeType, storeId){
    params['delivery_type'] = type;
    
    if(type == 'store'){
        params['delivery_store_type'] = storeType;
        
        if(storeType == 'physical'){
            params['collect_in_store'] = '1';
            params['store_id'] = storeId; // for backwards compatibility
            params['delivery_store_id'] = storeId;
        }
        else{
            params['delivery_store_id'] = storeId;
            //params['collect_in_store'] = '0'; // must not be set at all as backend accepts any value as yes
        }
    }
    else if(type == 'home'){
        ; // nothing extra to set
    }
}

  2. Modify update_mini_basket() method:
    a. Remove this code:

    if ( ($('.checkout_store_id:visible').length || $('.checkout_store_id').val()) && $('input[name=shiptowhere]:checked').val() == 'store') {
	params['collect_in_store'] = '1';
	params['store_id'] =  $('.checkout_store_id').val();
}

    b. Add a call to amendCheckoutParamsWithShippingParams() function just before $.get('/ajax/Ajax_Basket/getBasketDetails', params, function (responseJson) { ... } ) ; :

    amendCheckoutParamsWithShippingParams(params, $('input[name="shiptowhere"]:checked').val(), $('.checkout_store_info').attr('data-store-type'), $('.checkout_store_info').attr('data-store-id'));

  3. Modify $('input[name=delivery_option][type=radio]').livequery('click', function(e) { ... } ); function:
    a. Remove this code:

    if ($('input[name=shiptowhere]:checked').val() == 'store') {
	params['collect_in_store'] = '1';
	params['store_id'] =  $('.checkout_store_info #store_id').val();
	params['delivery_store_type'] =  $('.checkout_store_info #delivery_store_type').val();
}

    b. Add a call to amendCheckoutParamsWithShippingParams() function just before $.get('/ajax/Ajax_Basket/getBasketDetails', params, function (responseJson) { ... } ); :

    amendCheckoutParamsWithShippingParams(params, $('input[name="shiptowhere"]:checked').val(), $('.checkout_store_info').attr('data-store-type'), $('.checkout_store_info').attr('data-store-id'));

  4. Add a new function:

    function updateShippingOptions(options){
	update_delivery_options(options);
}

  5. That's all. You can find the full checkout.js file at https://demo.auroracommerce.com/checkout

Updated 8 months ago