📍 Bolt Help / Add-On Products / SSO Commerce / Embedded Shopper Account Editing / Implement the Address Component

Implement the Address Component

Steps to implement the Address Component from the Embedded Shopper Account Editing add-on.

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.

📖On This Page
Filter by Section
Filter by Topic