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