Interoperability between Product Card Widget and Consolidated Checkout

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

Demo

Product card

The product card widget is displayed on a product card to show if you can get the product with Porterbuddy. The postcode entered here is stored in and read from a cookie to provide convenience for recurring visitors.

⇰ Go to checkout

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.

Consolidated Checkout

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,
    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.