Styjun

How serious is plagiarism in a master’s thesis?

Chilling juice in copper vessel

Will Jimmy fall off his platform?

Multi-user CRUD: Valid, Problem, or Error?

What is the highest level of accuracy in motion control a Victorian society could achieve?

Tiny URL creator

Computer name naming convention for security

comparing two addresses

Is this car delivery via Ebay Motors on Craigslist a scam?

Is conquering your neighbors to fight a greater enemy a valid strategy?

Any way to meet code with 40.7% or 40.44% conduit fill?

Is this standard Japanese employment negotiations, or am I missing something?

Why isn't 10.0.0.0/8 used instead of 192.168.0.0/16 for private addresses?

Why did Super-VGA offer the 5:4 1280*1024 resolution?

How do resistors generate different heat if we make the current fixed and changed the voltage and resistance? Notice the flow of charge is constant

When is one 'Ready' to make Original Contributions to Mathematics?

Did William Shakespeare hide things in his writings?

Shipped package arrived - didn't order, possible scam?

Initializing variables in an "if" statement

Taking my Ph.D. advisor out for dinner after graduation

My professor has told me he will be the corresponding author. Will it hurt my future career?

Machine Learning Golf: Multiplication

Is there a minimum amount of electricity that can be fed back into the grid?

I'm feeling like my character doesn't fit the campaign

BigCommerce - Custom Shipping Method (RoyalMail Widget for Collect Location)

BigCommerce - Custom Checkout (Adding Field to Cart)Bigcommerce show shipping methodCreate custom shipping method in BigcommerceBigCommerce Theme Customizationget the customer group in BigcommerceBigcommerce custom shipping handlingBigcommerce free shipping based on customer groupGet shipping method for order using BigCommerce APIBigcommerce customize Export Templatebigcommerce single page checkout not working in checkout sdkCustomizing a BigCommerce product listing

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

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>```

checkout bigcommerce shipping-method

share|improve this question

asked Mar 25 at 20:47

Muhammad UsamaMuhammad Usama

8611 silver badge1212 bronze badges

• 
  
  
  

  
  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 at 21:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I am looking for a better solution than this one.
  
  – Muhammad Usama
  Mar 26 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)? developer.bigcommerce.com/api-reference/cart-checkout/…
  
  – Karen White
  Mar 26 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 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 at 18:56
  

  
  
  
  

add a comment | 

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>```

checkout bigcommerce shipping-method

share|improve this question

asked Mar 25 at 20:47

Muhammad UsamaMuhammad Usama

8611 silver badge1212 bronze badges

• 
  
  
  

  
  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 at 21:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I am looking for a better solution than this one.
  
  – Muhammad Usama
  Mar 26 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)? developer.bigcommerce.com/api-reference/cart-checkout/…
  
  – Karen White
  Mar 26 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 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 at 18:56
  

  
  
  
  

add a comment | 

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>```

checkout bigcommerce shipping-method

share|improve this question

asked Mar 25 at 20:47

Muhammad UsamaMuhammad Usama

8611 silver badge1212 bronze badges

 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>```

share|improve this question

asked Mar 25 at 20:47

Muhammad UsamaMuhammad Usama

8611 silver badge1212 bronze badges

share|improve this question

asked Mar 25 at 20:47

Muhammad UsamaMuhammad Usama

8611 silver badge1212 bronze badges

asked Mar 25 at 20:47

Muhammad UsamaMuhammad Usama

8611 silver badge1212 bronze badges

asked Mar 25 at 20:47

Muhammad UsamaMuhammad Usama

8611 silver badge1212 bronze badges