Implement the Address Component
The Address Component enables merchants to embed a piece of the shopper’s Bolt Account into their own UI.
REQUIREMENT
Ensure the Bolt Embed Script is available on the page you are implementing the address component.
1. Replace the Cart Platform Default Address Component
Replace your cart platform’s default address component with a placeholder div element.
Remove the default address code block from the source code with the BigCommerce template editor.
Replace it with:
<div id="addresses_list" />
In the Magento admin dashboard, write javascript to select the address element using querySelector. Then, add the javascript code to Block under Content - Block. Finally, attach the Block to Content - Widget.
Example
<script>
// Check page title and make sure it's executed on the right page
if (document.querySelector("[data-ui-id='page-title-wrapper']")?.innerHTML === "Address Book") {
// create a placeholder div
var address_div = document.createElement('div');
address_div.setAttribute("id", "addresses_list");
// replace the cart platform default component with the placeholder div
document.querySelector(".message.info.empty").replaceWith(address_div)
}
</script>
2. Mount the Address Component
Add the following javascript code to the storefront execution process.
<script>
function mountAddressElement() {
var BoltEmbedded = window.Bolt("${PUBLISHABLE_KEY}");
var address_component = BoltEmbedded.create("shopper_address");
address_component.mount("#addresses_list");
}
// load Bolt script and mount component
if (window.Bolt) {
mountAddressElement();
} else {
var embedScript = document.querySelector('#bolt-embed');
embedScript.addEventListener('load', function() {
mountAddressElement();
});
}
</script>
Next Steps
Next, embed the Payment Component into your UI to enable shoppers to edit their payment methods from your site.