Skip to content
Search for answers/

5 min read • Updated 3 months ago

Set up a customer portal

Enable the Customer Portal

  1. 1

    Go to the beta admin at https://admin.foxy.io and select the correct store

  2. 2

    Select Settings, then Customer Portal

  3. 3

    Click the toggle button to turn the option on

  4. 4

    Enter the base URL where the portal will be hosted into the Allowed Origins box and click Add Origin +. You may add multiple origins (for example, for a staging site)

  5. 5

    Note that this must match exactly the full domain (including subdomains) as well as https://. (It cannot be http://.)

  6. 6

    Click Save Changes (this is a pop-up modal)

Install the portal

  1. 1

    Create a page for where you would like the customer portal displayed (ex: Dashboard)

  2. 2

    In this new page, wherever you want the customer portal to load, copy/paste the snippet below:

    <foxy-customer-portal base="https://your-store-url/s/customer/">
</foxy-customer-portal>
  3. 3

    Replace your-store-url with your Foxy store subdomain.

  4. 4

    Before the closing </body> tag on the page, paste in the following code:

    <script type="module">  
    import 'https://unpkg.com/@foxy.io/elements@1/dist/cdn/foxy-customer-portal.js';

    const I18nElement = customElements.get('foxy-i18n');
    const i18nBase = 'https://unpkg.com/@foxy.io/elements@1/dist/cdn/translations';
    const availableTranslations = { 'customer-portal': ['de', 'en', 'es'] };

    I18nElement.onResourceFetch(async (ns, lang) => {
        if (!availableTranslations[ns]?.includes(lang)) return new Response(null, { status: 404 });
        return fetch(`${i18nBase}/${ns}/${lang}.json`);
    });
</script>
  5. 5

    Save and/or publish the changes and test.

Giving customers access

To give customers access you can add a link to the customer portal page anywhere on your website. Only customers who created an account at checkout will be able to login. By default, customer accounts are enabled.

Styling the portal

The Foxy customer portal uses the Lumo Theme for styling and elements. You can make styling changes by following the instructions below:

  1. 1

    Load up the Lumo Theme Editor at https://demo.vaadin.com/lumo-editor/

  2. 2

    Make desired style changes.

  3. 3

    Click the download button.

  4. 4

    Copy the displayed snippet.

  5. 5

    In your Customer Portal Page Settings, paste the copied HTML into the <head> section of the page.

  6. 6

    Publish changes.

Single Sign On

If you wish to keep logged in customers for the customer portal, logged in on the Foxy checkout as well, you can follow the instructions below:

  1. 1

    In the Foxy admin, go to the advanced settings at https://admin.foxycart.com/admin.php?ThisAction=EditAdvancedFeatures

  2. 2

    In the store secret field, click Show.
    - If there is a single value in store secret, copy it out to the computer's clipboard.
    - If you see multiple name/value pairs, select the value between the quotes listed for sso and copy it.

  3. 3

    Go to the CyberChef website here.

  4. 4

    Replace "YOUR_SECRET_HERE" with the store secret you copied in Step 2.

  5. 5

    Copy the output value.

  6. 6

    Create a blank page in your site (the name and url of the page can be anything).

  7. 7

    Copy/paste the snippet from below to before the closing </body> section.

    <script>
        function parseJWT(token) {
        let base64Url = token.split('.')[1];
        let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
        let jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));

        return JSON.parse(jsonPayload);
    }
    function getSSOUrl() {
        // Look for a cookie
        var value = "; " + document.cookie;
        var parts = value.split("; " + "fx.customer.sso" + "=");
        if (parts.length == 2) return decodeURIComponent(parts.pop().split(";").shift());

        // Look for localstorage
        try {
            let sessionStore = JSON.parse(localStorage.getItem('session'));
            if (sessionStore && sessionStore.hasOwnProperty('jwt')) {
                let sessionData = parseJWT(sessionStore.jwt);

                if (sessionData.exp > (Date.now() / 1000) && sessionData.hasOwnProperty('customer_id') && sessionStore.hasOwnProperty('sso')) {
                    return sessionStore.sso;
                }
            }
        } catch (error) {
            console.log("Error trying to get SSO URL:", error);
        }

        return false;
    }

    function getUrlParameter(name) {
        return new URLSearchParams(location.search).get('fcsid');
    }

    if (getSSOUrl()) {
        window.location.replace(getSSOUrl() + "&fcsid=" + getUrlParameter("fcsid"));
    } else {
        window.location.replace("https://FOXY_SUBDOMAIN/checkout?fc_customer_id=0&timestamp=1893456000&fc_auth_token=SECRET_OUTPUT&fcsid=" + getUrlParameter("fcsid"));
    }
</script>
  8. 8

    Replace "FOXY_SUBDOMAIN" with your Foxy subdomain, like mystore.foxycart.com or secure.mystore.com (found in your Settings here: https://admin.foxycart.com/admin.php?ThisAction=EditStore).

  9. 9

    Replace "SECRET_OUTPUT" with the output value from Step 5.

  10. 10

    Save changes.

  11. 11

    In Foxy, go to advanced settings here: https://admin.foxycart.com/admin.php?ThisAction=EditAdvancedFeatures.

  12. 12

    Enable the single sign on option.

  13. 13

    Paste the url of the new page you created into the single sign on url field.

  14. 14

    Save changes.

Test by logging into the customer portal, add a product to cart, and proceed to checkout. You should be logged in on the checkout page.
 

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.