Storing User's Favourite WebApp / Module Items
Users can "add" or "remove" their favourite WebApp and Module items. You can display them to the User in Lists.
Prerequisites
You have installed the Secure Zones Module
You have added a User Sign Up Form
A User has logged in
Introduction
We've added the ability for User's to store their favourite Module items within a "favourite_items" array, they'll be able to "add" and "remove" items from the list which will be stored alongside the rest of the CRM data available to that User in user_details.
Possible Use Cases for this feature include:
A wishlist of Products
Bookmarks of favourite Pages
Giving feedback on parts of a Site the User found helpful.
Syntax - Including the User Favourites Toggle Button Layout
This Layout will allow the User to add or remove an Item from their favourites.
The User Favourites Toggle Layout will only work within an item.liquid file (for Modules) or a WebApp Layout file that has access to {{this.id}}.
Use this Liquid to include your User Favourites Layout, the only parameter that'll differ for this is the "layout", here you can specify a custom layout: `
`
is_favourite
- you can use this within user_favourites_toggle
layouts to determine if the Module/ Webapp item is already added to the Users favourites like so:
Arguments
Our default Layout contains two buttons which we'd recommend you use for reference when setting this up. Let's have a look at these buttons and what they're doing:
Add to Favourites Button
Remove from Favourites Button
Required Arguments for both Buttons
To keep things simple, we've bundled the arguments you need to pass into the function into a single Liquid variable containing a JavaScript array {{this.favourite_item}}.
Advanced- modifying the arguments
If you need to modify them, you can split this into following the 4 items in the JavaScript array:
Custom Callback Functions
You can also pass success/ failure functions to the add/ remove buttons.
Step 1) Define your functions
Available arguments for success callback functions:
type - add/ remove
- whether item was added or removed from favouritesname
- name of item added/ removedbutton_element
- element that fired toggle function*Available arguments for error callback functions: *
error
- error message detailing why function failed
Step 2) Add the name of your success function as the second argument to the toggle button's function, and your error function as the third.
If you add an error function, you must add a custom success function.
Note it's important to only add the names of functions at this step- this means without the usual round brackets which would contain arguments- that's because we only want to store the functions now and call them later.
Hiding add/ remove buttons if User isn't logged into Secure Zone
You may want to hide the add/ remove buttons from the User if they aren't logged into a Secure Zone you could do so by wrapping your user_favourites Layout within this IF statement: `
`
Syntax - Outputting User's Favourite Module/ Webapp items
Now let's look at how we can output all of the User's Favourite items. The favourite_items object is stored within the User Details Layout.
You can include the user_details Layout like so: <div data-gb-custom-block data-tag="include" data-0='user_details' data-1='my_layout'></div>
Layouts for user_details are stored under the following path: site Manager/code Editor/layouts/modules>module_5/user_details/my_layout.liquid
Next within the "user_details" Layout, you can use the following Liquid variables:
favourite_items
- an array of IDs of favourite WebApp and Module Items you can loop over. This is mostly for use in your logic.favourite_items_string
- a comma-separated String of favourite WebApp and Module Items. This is formatted ready to be passed into an item_ids parameter for filtering WebApp and Module List views. See below.
Outputting Webapp favourite items
<div data-gb-custom-block data-tag="-" data-0='webapp' data-1=', id: ' data-2='1' data-3='1' data-4='my_layout'></div>
Outputting favourite Products
<div data-gb-custom-block data-tag="-" data-0='ecommerce/products' data-1=', layout: ' data-2='default'></div>
Outputting favourite Blog Posts (Modules)
<div data-gb-custom-block data-tag="-" data-0='module' data-1=', id: ' data-2='3' data-3='3' data-4='my_layout'></div>
Last updated