Showing saved items count in the dashboard Answered

• 

  A J

  • September 03, 2024 17:35

  Hey Daniel Bøllingtoft, I believe this should be possible, just have to tweak the setup a bit.

  1. You can add a HTML embed element above your collections and add this line in it: <div id="saved-items-count"></div>
  2. Add the following three lines in the updateItemVisibility function inside the memberscript 106.

  const savedItemsCount = savedItems.length;
  const savedItemsCountElement = document.getElementById("saved-items-count");
  savedItemsCountElement.textContent = You have saved ${savedItemsCount} items;

  Feel free to modify the content and styling.
  Then save and Publish the site.

  I have attached a screenshot to clarify the placement of the second step code and have shown you how the output looks like when I test it with multiple collection.

  Hope this helps.

  

  0
• 

  Daniel Bøllingtoft

  • September 03, 2024 17:37

  Looks nice! Thanks.

  The only issue here is that the savedItemsCount has to be displayed on another page.

  As for our use case on our site the users can save recipes and see every saved recipes on a /saved-recipes page.

  But we would like to display the amount of saved recipes on /user-dashboaard

  0
• 

  A J

  • September 03, 2024 17:38

  Hey Daniel Bøllingtoft, yes that should be possible as well.

  The difference in the setup would be like:

  1. You can add a HTML embed element in your user dashboard page and add this line in it: <div id="saved-items-count"></div>
  2. Add this code in your user dashboard page's Before </body> tag section in Custom code:

  <script> 
  
  
  
  // display saved items count 
  
  
  
  document.addEventListener("DOMContentLoaded", async function() { 
  
  
  
  const memberstack = window.$memberstackDom; 
  
  
  
  const memberData = (await memberstack.getMemberJSON()).data || {}; 
  
  
  
  function getSavedItems() { 
  
  
  
  return memberData.savedItems || []; 
  
  
  
  } 
  
  
  
  const savedItems = getSavedItems(); 
  
  
  
  const savedItemsCount = savedItems.length; //new 
  
  
  
  const savedItemsCountElement = document.getElementById("saved-items-count"); //new savedItemsCountElement.textContent = `You have saved ${savedItemsCount} items`; //new 
  
  
  
  }); 
  
  
  
  </script>

   

   

  Save & Publish it.
  You can see how it works on the front-end in this video.
  I just created another page which does not have any collection items there and just added the code and element above to get the output.

   

  Hope this helps.
  0
• 

  Daniel Bøllingtoft

  • September 03, 2024 17:43

  Oh waow! That worked perfectly. Thanks alot!

  Just an addtional question.
  Would it be possible to assign these scripts to two different collection?
  As in our use-case. we got food recipes and drink recipes. So it would be like.

  You have (X) food recipes saved.
  You have (X) drink recipes saved.

  We do already display it in two different collections today in our saved recipes page, but we would love to display the numbers for each one aswell

  0
• 

  A J

  • September 03, 2024 17:44

  Great! Welcome 😇

  That would be possible, but that will involve changing the structure and logic of the member JSON, segmenting it via collections etc.

  Is this use-case too important to the website in order to change the structure and setup?

  0
• 

  Daniel Bøllingtoft

  • September 03, 2024 17:45

  That's not important enough to change that much.

  Our end goal for this function would actually be to make folders to save the items.

  So lets say you have saved 5 items. Then you can create folders like: [Dinner], [Breakfast], [Drinks for party]. Inside these, the user should be available to add the saved items.

  Main goal would be to make the user available to make the folders. If not possible, then we will try with pre-maded folders.

  All this will be on same page /saved-recipes

  0
• 

  A J

  • September 03, 2024 17:47

  I think you could opt for pre-defined categories for each collection item, like each item has a category associated with it like dinner / drinks etc. This will keep a cap on the number of custom sections that each user could possibly create and can help you handle it easily and keep the approach simpler for you. And probably use something like Finsweet to give user's a filterable approach. It's worth exploring the use-case though.

  Also on a side note, I can see that the menu gets cut off half-way on my desktop, so I have to zoom out everytime I need to access the options at the bottom like saved recipes. Maybe its different for devices, just bringing to your notice, so that you can adjust the structure accordingly.

   

  
  0

Please sign in to leave a comment.