Enable the Customer Portal
- Go to the beta admin at https://admin.foxy.io and select the correct store
- Select Settings, then Customer Portal
- Click the toggle button to turn the option on
- 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)
- Note that this must match exactly the full domain (including subdomains) as well as `https://`. (It cannot be `http://`.)
- Click Save Changes (this is a pop-up modal)
Install the portal
- Create a page for where you would like the customer portal displayed (ex: Dashboard)
- 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>- Replace your-store-url with your Foxy store subdomain.
- 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>- 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:
Note
Only the Lumo Light Theme is currently supported. You can still make the needed changes to the Light Theme for a dark background.
- Load up the Lumo Theme Editor at https://demo.vaadin.com/lumo-editor/
- Make desired style changes.
- Click the download button.
- Copy the displayed snippet.
- In your Customer Portal Page Settings, paste the copied HTML into the <head> section of the page.
- 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:
Note
Single Sign On must be enabled to use this feature for your customer portal setup. You can do this within the Settings->Customer Portal settings in the beta admin at https://admin.foxy.io
- In the Foxy admin, go to the advanced settings at https://admin.foxycart.com/admin.php?ThisAction=EditAdvancedFeatures
-
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. Go to the CyberChef website at https://gchq.github.io/CyberChef/#recipe=SHA1()&input=MHwxODkzNDU2MDAwfFlPVVJfU0VDUkVUX0hFUkU - Replace "YOUR_SECRET_HERE" with the store secret you copied in Step 2.
- Copy the output value.
- Create a blank page in your site (the name and url of the page can be anything).
-
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×tamp=1893456000&fc_auth_token=SECRET_OUTPUT&fcsid=" + getUrlParameter("fcsid"));
}
</script>- 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).
- Replace "SECRET_OUTPUT" with the output value from Step 5.
- Save changes.
- In Foxy, go to advanced settings here: https://admin.foxycart.com/admin.php?ThisAction=EditAdvancedFeatures.
- Enable the single sign on option.
- Paste the url of the new page you created into the single sign on url field.
- 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.