📍 Bolt Help / Add-Ons / 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.

Page Contents

Click to expand.

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.

# accounts

‹

 Install Bolt Embed Script
Implement the Payment Component

›