📍 Bolt Help / Add-On Products / 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

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

BigCommerce
Magento 2

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:

Add bolt-sso-custom to each button’s class.
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).
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>

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>

In this snippet, replace ${URL_OF_DESTINATION} with the URL to the destination page.
Attach the Block to a Widget. Navigate to Content > Widget > Add Widget. Then, use a static block.
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.
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

Limitations

Implementation

Next Steps

Filter by Section

Filter by Topic