0

I would like to setup custom shipping option using RoyalMail collect widget so customer can go through widget and it would return address after customer selection. So we need to map those address fields with customer shipping address fields.

I have tried with checkout-js-sdk but it required considerable effort to create customm checkout from scratch. I am aiming to have a solution to map widget with BigCommerce shipping method using JavaScript or Angular Js. 

    window.language = {{ langJson 'optimized_checkout' }};      
    widgetConfigObj = {
        viewingOptions:['Grid'],
        royalMail: { getRMId: function () { return 'key' } },
        deliveryPostCode: 'NG11DB',
        defaultRadius: 10,
        defaultNbrOfResults: 10,
        onOpenWidget: function () {
            //document.getElementById('checkout').disabled = true;
        },
        onLocationSelected : function(localCollect) {   
            console.log(location.organisationName);                
        },
        onCancelSelection : function() {/*a call back in case of cancelation*/},
    };
    var stopMusicExt = document.getElementsByClassName('optimizedCheckout-form-checklist-item')[2];
    stopMusicExt.onclick = localCollectSelected(widgetConfigObj);
</script>```
Muhammad Usama
  • 151
  • 1
  • 13
  • 1
    Hi! The DOM for _Optimized One Page Checkout_ is not guaranteed to be stable over time. If you are going to do these changes make sure it degraded gracefully and doesn't prevent your shoppers from checking out if the DOM has changed and your Javascript can't find some elements. – Ignacio Catalina Mar 25 '19 at 21:22
  • Yes, I am looking for a better solution than this one. – Muhammad Usama Mar 26 '19 at 13:35
  • Hey @MuhammadUsama, You definitely don't want to tie into any Angular elements. We do our best to keep class names the same, but we're in the process of converting the checkout from Angular to React, so that will definitely change. Beyond that, you can use the storefront checkout API to get the shopper's address once they've entered it on the shipping step, but it sounds like you will need a way to store the pickup location and persist it to the order (maybe in the Order comments field)? https://developer.bigcommerce.com/api-reference/cart-checkout/storefront-checkout-api – Karen White Mar 26 '19 at 17:29
  • Hello @KarenWhite, Basically I would to mapped checkout shipping selection option with RoyalWidget so after user go through widget process, it returns pickup location address which I need to replace on Shipping address added by Customer in fields. I don't need to store information in order comments field or Storefront checkout api in above process. – Muhammad Usama Mar 26 '19 at 18:33
  • Thanks for the clarification. I'd probably still look to the storefront checkout API to write to the shipping address fields, but let me know if you're thinking about the mapping in a different way. – Karen White Mar 26 '19 at 18:56

0 Answers0