Interoperability between Product Card Widget and Unified Shipping Module

A webshop embedding both the product card widget as well as the Unified Shipping Module can benefit from interoperation between the two widgets. The product card widget can store the postcode entered in a cookie. The Unified Shipping Module can use this cookie to immediately display a shipping options and ideally save the user from entering the postcode again.

Demo

Shop Checkout

For the checkout, the postcode stored in the cookie on the product page is used as initial value for the postcode input field.

⇰ Back to product page

Configuration

Product card widget

The product card widget stores the entered postcode when the configuration option "allowStorage" is set to true. As this is the default value for this option, completely leaving out this option will also work.

Unified Shipping Module

To activate loading and saving the postcode in a cookie, set the configuration option "storePostCode" to true (default is false). Additionally, the postcode input must be enabled by setting the property "showPostCodeInput".

<script>
  window.porterbuddy = {
    // other fields omitted
    showPostCodeInput: true,
    storePostCode: true,
    language: 'NO',
    storedPostCodeDelay: 1000,
  }
</script>

To allow for external scripts to set a postcode from different sources, the callback for "onPostcodeEntered" is delayed when the postcode is set from the cookie. A call to "setRecipientInfo" within this delay will cancel this callback call. The length of this delay in milliseconds can be specified as configuration option "storedPostCodeDelay". The default value for this option is 10ms, for technical reasons, no shorter value for this delay is used.