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 note 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 {% include 'user favourites toggle', layout 'default' %} 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 {% if is favourite != true %} {% else %} {% endif %} 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 \<button class="btn btn success" onclick="user add to favourites({{this favourite item}},added success,favourite toggle failed)"> add to favourites \</button> remove from favourites button \<button class="btn btn danger" onclick="user remove from favourites({{this favourite item}},removed success,favourite toggle failed)"> 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 \[ "{{this id}}", //contains the id of the module item being added/ removed "{{this name}}", //contains the name of module item being added/ removed "{{context current user id}}", // id of the user adding/ remove the favourite item "{{context authenticity token}}" // token given to the user, this is required ] a note on security even if a malicious user submits a fraudulent user id argument, we will double check on the server side, so it won't be possible for them to change the favourites of other users custom callback functions you can also pass success/ failure functions to the add/ remove buttons step 1) define your functions \<script> function custom success function(type, name, button element) { typeword = type == 'add' ? "added" "removed"; alert('success! you have ' + typeword + ' ' + name + 'to favourites' ); } function custom error function(error) { alert('error'); } \</script> available arguments for success callback functions type add/ remove whether item was added or removed from favourites name name of item added/ removed button 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 \<button class="btn btn success" onclick="user add to favourites({{this favourite item}},custom success function,custom error function)"> add to favourites \</button> 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 {% if context current user %} {% endif %} 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 {% include 'user details', layout 'my layout' %} 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 {% include 'webapp', id '1', layout 'my layout', item ids favourite items string %} outputting favourite products {% include 'ecommerce/products', layout 'default', item ids favourite items string %} outputting favourite blog posts (modules) {% include 'module', id '3', layout 'my layout', item ids favourite items string %}