đź“Ť Bolt Help / Add-Ons / SSO Commerce / Embedded Shopper Account Editing / Implement the SSO Login Button
Implement the SSO Login Button
Steps to implement the SSO Login Button from the Embedded Shopper Account Editing add-on.

Page Contents

Click to expand.

Embedded Shopper Account Editing relies on an active Bolt session cookie. Because of this reliance, any button that could direct a shopper to a page containing an Embedded Address or Payment Component must contain an SSO login button.

Limitations

  • If a shopper stays on the Embedded Address Component for longer than Bolt’s session timeout duration, address data may not be updated.
  • Embedded Shopper Account Editing may not function as expected in a browser’s incognito mode.

Implementation

In your storefront navigation HTML template, find each button element that point to the Bolt Embedded Shopper Account Editing Components. Then, for each button element:

  1. Add bolt-sso-custom to each button’s class.
  2. Add attribute data-destination-on-success and set the value to the URL of the destination (for example https://bolt-order-management.mybigcommerce.com/account.php?action=address_book).
  3. Remove the existing href attribute.
<nav id=”shopperProfileNavButtons”>
    <button id=”shopperProfileAddresses” class=”bolt-sso-custom” data-destination-on-success=”https://bolt-order-management.mybigcommerce.com/account.php?action=address_book`”>
        <p>Edit My Address</p>
    </button>

    <button id=”shopperProfilePayments” class=”bolt-sso-custom” data-destination-on-success=”https://bolt-order-management.mybigcommerce.com/account.php?action=payments`”>
        <p>Edit My Payment Options</p>
    </button>
</nav>
  1. Create a Block and add the following javascript to the Block. This will find all links on the page that match 
    <script>
    var buttons = document.querySelectorAll("a[href='${URL_OF_DESTINATION}']");

    if (buttons.length) {
        for (i = 0; i < buttons.length; i++) {
            var button = buttons[i];

            button.removeAttribute('href');
            button.setAttribute('class', button.getAttribute('class') + ' bolt-sso-custom');
            button.setAttribute('data-destination-on-success', '${URL_OF_DESTINATION}');
            button.setAttribute('style', 'cursor:pointer;');
        }
    }

    if (window.BoltAccount) {
        window.BoltAccount.injectButtons()
    }
</script>
  2. In this snippet, replace ${URL_OF_DESTINATION} with the URL to the destination page.
  3. Attach the Block to a Widget. Navigate to Content > Widget > Add Widget. Then, use a static block.
  4. Display the Widget on the page footer. Navigate to the Layout Update section. Select Display on All Pages. Use the Page Footer for the container.
  5. Navigate to Widget Options. Select the Block, then select the code block created in the first step.

Next Steps

That’s it! Run a few tests and enjoy the convenience of Bolt’s Embedded Shopper Accounts Editing!

# accounts

‹

 Implement the Payment Component
Global Consent Collection

›