My Account Integration · Installation & Configuration Guide

This is the first step of adding the integrations: customers need a way to see the status of their account and make edits to their profile information. This snippet shows and credits, memberships, account balance in the customer’s account, allows the customer to edit their saved credit card information, redeem gift cards, and log out if they wish. Drop the code snippet below into a desired place on the My Account page:

<div class="mariana-customer-profile-binding"></div>

Account Sub-Navigation

To navigate between the different parts of the Account (My Account, My Classes, My Purchases), we recommend creating a sub-navigation within the Account page. For example:

<div class="account__nav">
  <!-- change the href attributes of the anchor tags to match your pages -->
  <a href="/my-account/" class="account__nav-links">My Account</a>
  <a href="/my-classes/" class="account__nav-links">My Classes</a>
  <a href="/my-purchases/" class="account__nav-links">My Purchases</a>
</div>

Add the sub-navigation above or below the integration snippet and change the anchor tags to match your pages, if necessary.

Dynamic Account Button

We now support a dynamic account button. Down below is an example of how to incorporate it into your navigation bar. It will handle the Login to Log Out when a user is logged in, as well hide the Account button when a user is not logged in. We recommend putting it into a dropdown.

To activate a dynamic logout button, you need to attach class MT_authenticated-block to your logout button, and it will only appear when a user is logged in.

Code snippet below is just an example of how to incorporate the login/logout, please adjust according to your setup.

Dynamic Account Button Example Snippet

<!-- change the redirect urls to match your setup. This will handle the Login and Create Account redirects -->
<div class="mariana-auth-link-binding"
  data-mariana-account-redirect-url="/my-account/"
  data-mariana-login-redirect-url="/login/"
  data-mariana-signup-redirect-url="/register/"
></div>
</div>
  <!-- use MT_authenticated-block for the dynamic button. It's only visible when logged in -->
  <a class="nav__item MT_authenticated-block">
  <div class="mariana-logout-button-binding"></div>
</a>

Live Example (including Sub-Navigation)

If you would like to check out a live example, head over to https://mariana-integrations-demo.herokuapp.com/default/account/

Parameters

None