Implement the SSO Login Button
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:
- 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 examplehttps://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!