Streaming live at 10am (PST)

"Helpful" review Feedback button

Hello. I am trying to create a button like the “Helpful” button you see on Amazon reviews. My reviews section is a CMS list. (found at the bottom of the product template page) I would like a button in review which when clicked would give me a notification that that particular review was marked as helpful. (An automatically updating count of how many people found the review to be helpful, and corresponding reorganization of reviews based on their helpfulness rating would be awesome, but a simple notification would be sufficient for now if that is too involved to get into here.)

It would seem something along the lines of this solution by @webdev (Form button - Text tied to CMS) is what I’m looking for, but I’m not sure how to implement this such that the submission data is pulled from the CMS item as opposed to the display text. I appreciate any help and direction.


Here is my public share link:
https://preview.webflow.com/preview/savvyjack-v2?utm_medium=preview_link&utm_source=designer&utm_content=savvyjack-v2&preview=959011ce61986c625326fcc2687cb0cd&pageId=5df8275d2a63c0fec8be2495&itemId=5df8275d2a63c000fdbe2578&mode=preview

1 Like

Dis?

1 Like

Hey thanks @avivtech I appreciate the help. That definitely looks like a solution to accomplish this. My only questions would be 1. Do you know if this can be implemented with the free Zapier plan? and 2. Would this be costly for mobile page load times?

Thanks again!

Hey Mike,

  1. Yes (I am doing this with the Integromat free plan)
  2. No, there is almost no load on Webflow. The Automation platforms do most of the job.
1 Like

Great! Thanks again @avivtech

1 Like

Hey @avivtech. I have the voting system working on the site, so thanks again for that. The one issue I’m having is that the vote-count display (text block getting its value from collection -> vote_count) does not update after a vote until the page is manually refreshed. I’m thinking this may have something do do with my implementation of this seamless-pagination for the collection by @forresto - https://webflow.com/website/seamless-pagination. Have any more tips up your sleeve for me? :smile:

hmm… I am having hard times myself with the seamless pagination JS… :confused:

Ah okay. What problems are you having? Doubtful I can help, but for me, moving the targeted container up a parent made things work better. My custom code is targeting the highlighted “Customer-Reviews” in the pic.

Hmm the code I was pasting wouldn’t show for some reason. At least on my end…

Hey @avivtech I hate to keep bugging you with my problems, but I am having an issue that could be related to the seamless-pagination implementation, and so perhaps you’re already looking into it. When I click “next” at the bottom of the collection list and go to the second page, the vote button no longer works. Instead, the page reloads with the url appended with ?item_id=xxxx&item_name=xxxxx. Any ideas on what could be going on here?

Relevant page: https://www.savvyjackwax.com/product/mustache-wax
read-only-link: https://preview.webflow.com/preview/savvyjack-v2?utm_medium=preview_link&utm_source=designer&utm_content=savvyjack-v2&preview=959011ce61986c625326fcc2687cb0cd&pageId=5df8275d2a63c0fec8be2495&itemId=5df8275d2a63c000fdbe2578&mode=preview

Hello @SavvyJack , I really like your review form and star rating. Do you mind sharing how you create it? Much appreciate.

Cheers,
Ed

Hey @edflow . Thank you. You can check out my read-only link above to see all the details. The star labels are just a set of 5 radio buttons with the button set to absolute positioning and background set to a filled star png image, and then the radio button label stacked on top with a background image set to an empty star png. I then used interactions to make it so that if you click the third star for example, radio button labels 1-3 would bet set to 0% opacity exposing the filled star beneath, while radio labels 4 and 5 would be set to 100% opacity.

1 Like

Thank you Mike. The radio button opacity technique is brilliant.

1 Like