How to Style Custom-Coded Memberstack Save Buttons and Monitor User Saves Answered
Hello everyone,
I am following the #106 - Liking & Saving CMS Items v0.1, but I have a problem with the code. I didn't create my buttons in Webflow; I have custom-coded them. However, it won't let me style the like buttons I am trying to implement in the custom code. Is there a way I can style the ms-code-save and ms-code-unsave in my custom code?
Thank you for your help!
Comments
26 comments
Hey Deonte Archie, I believe this should be possible. Just for testing purpose, I tried a similar icon that you are using and used some custom styles (result shown in screenshot). Please ignore the choice of colors as its just for testing purpose to show the contrast. 😅
I inserted a custom HTML embed inside save_wrap div element:
<div ms-code-save="{{Slug}}" class="save_save">
<i class="fa-regular fa-heart"></i>
</div>
<div ms-code-unsave="{{Slug}}" class="save_unsave">
<i class="fa-solid fa-heart"></i>
</div>
I just added styling in the <style> tag accordingly:
.fa-heart {
font-size: 1.5rem;
padding: 0.5rem;
border-radius: 50%;
}
.fa-regular.fa-heart {
color: #fff;
background: black;
}
.fa-solid.fa-heart {
color: #ed072a;
background: #faf31e;
}
Hey AJ, Thank you for taking the time to respond to my question. Do you know how the like and save work for member using custom code? They example is when you the custom attribute in webflow but I put the custom attribute in the custom html embed which wasn’t explained in the tutorial.
Hey Deonte Archie, welcome.
For the sake of your use-case, even I added the buttons and attributes via custom code and not via webflow elements that came along with the memberscript cloneable. To show you how I set it up as shown above, let me share some screenshots for reference.
So I got rid of the svg icons that came with the cloneables and its div wrap and just have a Custom HTML embed inside the main div save_wrap. (#1 screenshot)
This embed has the code shared above which uses custom icons (#2 screenshot)
The custom styling is placed inside the style tag where other styling is placed (#3 screenshot)
Hope this helps.
Hey AJ, Thank you for breaking it down, the information you provided was very helpful. The problem I have is when I add the [ms-code-save], [ms-code-unsave] { display: none; } still shows both of my hearts, and [ms-code-save-item] { display: none;] makes my collection items disappear. How can I fix that part or what you showed me handle that part?
I don't get the point of adding display: none because it makes my cms items and hearts disappear.
The display: none which comes with the memberscript is just to ensure that when a person saves an item, the unsaved icon should not appear and vice versa. So ideally it should not hide CMS items.
Hey Deonte Archie, just tested your site, I can see you have made all the icons visible on hover and hide in general, which works fine if you intended to do that.
And when I click the save button, it saves the item and vice versa, you can double check if the member json has this data as well.
But in order to show the difference between two buttons that is save and unsave, you could use fa-regular-heart in the code, i.e. currently both the buttons for save and unsaved have the same color and styling so users might not know if they have favorited an item or not.
So probably use this:
cursor: pointer;styling for your custom favorite icons too, to just let the user know that its a clickable element.Hey AJ, Thanks for the help! I had to use the regular icons instead of the solid icons. Yes, using a cursor point would be better to let the user know the icons are clickable.
Yes sure, welcome. I can see it works now as well.
Hey Deonte Archie, did you login via the mobile device to test this saving feature? The saving feature shows up when the user is logged in, in order to save the items based on each user's choice.
Have you checked this template out? This should give you an idea on how to integrate this feature to your website.
I just checked the site and figured that even though the code is right, clicking the share button actually opens all of the cms items share icons modal, but since you have set the .share-modal element's position to be fixed, you are not able to see that multiple share modals have been opened. I have showed what happens when I click any one element's share icon in the screenshot, after removing the fixed position to show the issue more clearly. So the issue is not that it shows the first item's link alone, technically the CMS slug link is perfect for each modal, the issue here is it's opening every CMS item's share modal and is overlapping each other and only the top most that is the first cms item in your case is seeming visible at the front. And likewise closing one modal closes all the modals.
So the issue lies in how the modals are triggered currently, so you might want to have a look at that and re-think the approach.
Hey AJ, Yes I had to log in with a user to see the list. Thank you!
No I havent, going to check it out right now.
Thank you for explaining the problem. On my end each model open up individually but it only links to the first cms item that is posted. I remember I gotten all the cms items to have their own link and modal but I change that code yesterday. 🤔 I’m still going to change it back to that code because I could probably figure out my problem starting from there since it works in a way.
Hey Deonte Archie, yes it just gives a visual effect that only one modal with the first cms item is opening up due to the fixed styling, but in reality all 6 modals are opened on one click, but since the position is fixed, it is overlapping each other and it gives an effect that only the top most modal is open, but that's not the case unfortunately.
Okay, I just have to fix the styling and build a script that only let 1 modal open up at a time when it is click on.
Yes, the share icon slug code is perfect and works as you intend it to, just need to fix the modal triggers
I can see you have an interaction to open elements with share-modal class, but since all CMS items are gonna have the element with same class, everything is opening up when one button is clicked.
Okay I see, that makes sense. Each CMS item have the same class but if someone creates a new post I have to let it generate a new class for that post? I guess I have to mess around with it to see.
Hi guys - how's it going?
Quick question, is it possible to be able to see (in the dashboard) what items users are saving when implementing the #106 - liking & saving CMS items button?
I'm saying that I need to see what the user has saved in his favorite list, inside the memberstack dashboard, me, as a website admin
Ohh! You can see it in their member JSON - if you use #106, it saves slugs, so you will be able to read it easily
Hey Julian Galluzzo - quick question
I'm trying to require user to be autheticated in order to save items. Could you point me in the right direction to do that?
Basically, if they try to save the item by clicking the "heart" icon, I want to display a popup or a message that they need to create account or log in
Hope that makes sense!
Makes perfect sense!
All you'd need to do is add data-ms-content="members" to the like/save wrapper, then make another one that has a "fake" like button inside of it - then, make that link to a signup/login page or open a modal, and add data-ms-content="!members" to that one!
Hope this helps 🥳
Worked wonders Julian Galluzzo thanks so much! 🙌
Two more things, if I may.
No problem at all!! 🙌
I think this is the only way to see them unfortunately 🤔 Memberstack has no access to data like the featured image of that cms item
For the tooltip or label, if it helps, we just released this! https://www.memberstack.com/scripts/tooltips-for-webflow
Actually Julian Galluzzo i'm referring to how its done here, where you see that top-right tooltip that says "you've liked an item"
Not sure how can I obtain that 🤔
Side note, I'm trying to use this solution to redirect the user to the same page he's authenticating from
I'm using a modal from the nav for auth/ login, and after user signs up or logs in, i want to keep him on the same page
For some reason, it always redirects to the homepage still
This is my project
https://preview.webflow.com/preview/realtor-dev?utm_medium=preview_link&utm_source=des[…]&itemId=66e151d0193c0a8f1d0a4fc0&locale=en&workflow=preview
that was done using this! https://www.memberstack.com/scripts/custom-toast-notifications
As for the redirect thing, check this out https://webflow.com/made-in-webflow/website/dont-redirect-on-login-memberstack
Thats exactly the setup i have for the redirect, yet its not working - i might be missing something. Would you be able to have a quick look? I'd appreciate a lot 🙏
Assuming you also have the sitewide code and have your memberstack redirects set to go to /success, everything looks good to me - could you confirm those things? If so, please send me a link where i can test the signup process and see why it's not working
Hey Julian Galluzzo quick question
Is it possible to send email notifications to memberstack admin whenever a user saves an item to the favorite list?
Hey Gabriel! I don't think so unfortunately as updating JSON doesn't trigger the member updated webhook
Not possible with any sort of automation like make or zapier?
Julian Galluzzo
You could hypothetically post to a make webhook from the front end when a user clicks the button! But there is no actual trigger from memberstack when JSON is updated
Please sign in to leave a comment.