20 min read • Updated a month ago
Foxy Logic
Learn how to dynamically protect and customize content on your website with the Foxy Customer Portal Content Protection script. Tailor visibility based on customer status, subscriptions, purchases, or attributes while enabling favorite actions and logout functionality.
Setup Instructions
Include the Script
Copy and paste the provided JavaScript code into your website's Custom Footer code, this is usually before the </body> tag . Click here to get it.
Configure Settings
Look for the Script Settings section in the code at the top of the script. You can customize settings for:
| Configuration Properties | Description |
|---|---|
| protectedPath | Relative URL path that requires an authenticated user (leave blank if not required). |
| loginOrSignupPath | Relative URL path to redirect if unauthenticated user attempts to load protected path. |
| onLogInPath | Relative URL path to redirect authenticated customer to on first login (leave blank for no redirection) |
| useLatestTransactionOnly | If set to true, only the codes from the latest transaction will be used for code based classes. Accepts only booleans. |
| ignoreSubscriptionsWithPastDue | If set to true, a customer will not be considered a subscriber if all their active subscriptions are past due. Accepts only booleans. |
| removeElementsFromPage | If set to true, elements will be removed from the page instead of just hidden (except for pages with the portal embedded on it). Accepts only booleans. |
| webhookEndpointURL | If using the Favorites functionality, this variable needs to contain the URL of the endpoint that handles the logic for this. It’s possible to have one by creating a webhook using Make or Zapier, or a Netlify function. |
Include Customer Portal Element
Ensure your website includes the foxy-customer-portal element. This element is crucial for the script to work correctly because customers being logged in is crucial for getting information on transactions, subscriptions, customer attributes, etc. If you are not using the customer portal element this script will not work correctly for you.
Define Custom Attributes
Add custom attributes to HTML elements to control when they should be visible or hidden.
Using Custom Attributes for Showing and Hiding
Note
Below where “product_code_string”, “subscription_code_string”, or “attribute_name_string” are listed those spaces need to be filled with the respective custom attribute value.
Authentication Status
Handle content visibility when customer is authenticated or not with these attributes:
| Custom Attribute Name | Value | Description |
|---|---|---|
| foxy-logic-authenticated | true | Visible only when a user is logged in. |
| foxy-logic-authenticated | false | Visible only when a user is not logged in. |
Subscription Status
Elements linked to subscription status can be controlled with attributes:
| Custom Attribute Name | Value | Description |
|---|---|---|
| foxy-logic-subscribed | true | Visible when subscribed to any subscription. |
| foxy-logic-subscribed | false | Visible when not subscribed to any subscription. |
| foxy-logic-subscriber-past-due | true | Visible when there is a past due amount. |
| foxy-logic-subscriber-past-due | false | Visible when there is not a past due amount. |
Subscription by Code Attribute
For subscription by code, use the attributes:
| Custom Attribute Name | Value | Description |
|---|---|---|
| foxy-logic-subscribed-to | subscription_code_string | Visible only when subscribed to the subscription associated with the specified subscription code |
| foxy-logic-not-subscribed-to | subscription_code_string | Visible only when not subscribed to the subscription associated with the specified subscription code |
Transaction Includes Product Purchased Codes
Customize visibility based on if the customer has purchased that item before or not, using attributes:
| Custom Attribute Name | Value | Description |
|---|---|---|
| foxy-logic-transaction-includes | product_code_string | Shows an element when the customer has a transaction that includes that product code. |
| foxy-logic-transaction-not-includes | product_code_string | Shows an element when the customer doesn’t have a transaction that includes that product code. |
Customer Attributes
Tailor content based on custom attributes assigned to the customer. Use:
| Custom Attribute Name | Value | Description |
|---|---|---|
| foxy-logic-customer-attribute-includes | attribute_name_string | Shows elements when a customer has a specific attribute name. |
| foxy-logic-customer-attribute-not-includes | attribute_name_string | Shows elements when a customer doesn’t have a specific attribute name. |
Customer Favorites
This functionality piggy backs on the Customer Attributes to allow you to show or hide content, or created a list of favorite products by using the custom attributes:
| Custom Attribute Name | Value | Description |
|---|---|---|
| foxy-logic-favorite-includes | product_code_string | Displays elements if the product has been marked as a favorite |
| foxy-logic-favorite-not-includes | product_code_string | Displays elements when a product has not yet been marked as a favorite |
Foxy Actions
These custom attributes allow you to handle customer actions:
Logout
| Custom Attribute Name | Value | Description |
|---|---|---|
| foxy-logic-action | logout | Enable customers to log out by clicking on an element. |
Dynamic Redirect on Login
Redirect customers on login by appending the redirect query parameter in the portal URL of your site, and add the relative path to any page of your site. E.g: https://yoursite.com/login?redirect=/products/product-example-page
Favorites
The favorites functionality enables users to mark products as favorites or remove them from favorites by clicking elements associated with an item.
Instructions on how to use it below:
Setting Favorite Code
| Custom Attribute Name | Value | Description |
|---|---|---|
| foxy-logic-favorite-code | product_code_string | It links the favorite action to a specific code or identifier. This custom attribute must be set on a parent element shared by both the mark and unmark favorite actions." |
When marking and item as favorite, the system checks if the customer has this code; if not, it is added.
Marking an item as a favorite
| Custom Attribute Name | Value | Description |
|---|---|---|
| foxy-logic-action | favorite | When a user clicks on an element with the attribute, the item is marked as a favorite. |
Unmarking an item as a favorite
| Custom Attribute Name | Value | Description |
|---|---|---|
| foxy-logic-action | unfavorite | When a user clicks on the element with the attribute, the item is removed from favorites. |
Checking Favorite Status
The logic first checks if the item has the favorite code before displaying the unfavorite option.
Conversely, it checks if the item does not have the favorite code before displaying the favorite option.
Favorites Webhook Endpoint URL
The variable webhookEndpointURL on the script setting contains the URL of the external service or webhook endpoint. This is the destination where requests are sent to perform actions.
To get an endpoint you can use Make to create a scenario with a webhook module that will provide you with that URL.
Set up Make Scenario
Here’s a Make Scenario Blueprint you can use to get most of the logic ready for interacting with the Foxy API, by importing into Make. For the rest simply login to your store’s administration, head to the “Integrations” page and click the “Get Token” button. You’ll need to fill in a few details, but after submitting you’ll be presented with client_id and client_secret for your OAuth Client, and the access_token and refresh_token with a store_full_access scope linked to the current store. Copy these values to your side and store them securely - as they won't be accessible again after that point.
After you have imported the Scenario Blueprint what you need to do is the following:
Apart from that you are going to need to map the values coming from the Webhook. So after setting you Content Protection script settings and setting up the custom attributes for the elements you need to test the favorites and map it on the Make scenario, here’s more information on how to map values on Make.