Ratings Input 5th Star to Have Custom Code

Ask the community
,
1

Hi,

I am creating a ratings input and I have no idea how to add custom code to the one of the stars (see attached)


I have some code but it’s designed for a button (or its id). I want to know how can I reference the 5th star so I can add my own code.

Basically, I want when I click on the 5th star, a Lightbox to open then after 4 seconds the page to redirect.

Here’s the code I have for the button:

import wixWindow from 'wix-window';
export function button3_click(event) {
let data = {
url: 'https://www.google.com/'
};
wixWindow.openLightbox('pop-up', data);
}

And then the pop-up

import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
let pmtdata = wixWindow.lightbox.getContext();
if(pmtdata) {
setTimeout( () => {
wixLocation.to(`${pmtdata.url}`);
}, 4000);
}
});

Please help.

Thanks!

2

Are you aware that there are already examples from Wix that you can look at for ratings and reviews?

On normal page.
https://support.wix.com/en/article/corvid-tutorial-capturing-and-displaying-ratings

In Wix Stores.
https://support.wix.com/en/article/corvid-tutorial-adding-ratings-and-reviews-to-a-wix-stores-site

As for clicking on the fifth (5th) star on the ratings input, you might just find it easier to simply put a transparent element over that last star and have that element set to open the lightbox and then use setTimeout function to count down and then redirect the user to a new page.

Depending on what you are doing with your lightbox, here is simple code for opening it with a onClick event from your page and closing it with a setTimeout delay from within the lightbox itself.
https://www.wix.com/corvid/forum/community-discussion/set-timeout-for-lightbox

If you are wanting to pass data to the lightbox from the page or from the lightbox to the page, then you can see previous forum post here.
https://www.wix.com/corvid/forum/community-discussion/open-close-lightbox-event

Plus the actual API Reference for it here.
https://www.wix.com/corvid/reference/wix-window.html#openLightbox
https://www.wix.com/corvid/forum/community-discussion/open-close-lightbox-event
https://www.wix.com/corvid/reference/wix-window.lightbox.html#getContext

3

GOS,

Thanks for replying. Yes, I have checked the examples but they are not for what I am looking to do. I believe I had already tried what you suggested. I made a transparent button and then placed it on top of the fifth star and it does the job. However, the star, in that case, is not having a hover effect to turn green. And that’s why I was looking for a way to add the functionality to the fifth star by id reference or something. I am really not that experienced with Wix and not sure how to go about this. ):

I appreciate your help!

4

There are two examples you should look at:

Both of these examples, demonstrate how to accept a rating from a member or visitor. The RECIPE Lightbox has a RatingsInput element with the following event handler:

export async function ratingsInput1_change(event) {
   changed = true; // rating changed so refresh repeater
   $w('#ratingsInput1').disable();
   // get the new rating from the ratings input
   const newRating = $w('#ratingsInput1').value;
   await rateRecipe(recipeId, newRating);
   let recipeRating = await getRecipeRating(recipeId);
   $w('#ratingsInput1').enable();
   if (recipeRating.count > 0) {
      $w('#ratingsDisplay').rating = recipeRating.ratingAvg;
      $w('#ratingsDisplay').numRatings = recipeRating.count;
   } else {
      $w('#ratingsDisplay').rating = null; // clear rating
      $w('#ratingsDisplay').numRatings = 0;
   }
   
   // ==> something like what you want to do
   // if the user gave a rating of 5, then do your special stuff
   if(newRating === 5) {
      let data = {
         url: 'https://www.google.com/' 
      };
      wixWindow.openLightbox('pop-up', data);
   }   
}

You can reference the 5th star by checking in the event handler what the selected value is. I added a small chunk of code to the event handler that does something like what I imagine you want to do.

5

Yes I wasn’t thinking that way and it wasn’t that clear in the original post that they wanted something to happen if somebody was to give a full five rating, just that they wanted to click on the last star from the ratings input. So hopefully this is what they are wanting here. :+1:

6

Yisrael,

Thanks for your time to get back on this. I have inserted the code in the page and it has many errors (Please see attached).

553×515 55 KB

There’s just something that I probably hadn’t clarified in my comments. We are not wanting to receive/process the stars (I am not even sure if that code doing that), I used the ratingsInput just for visual representation and clicking purposes. I just want the following:

The user clicks on the 5th star, immediately the pop-up opens, and after 4 seconds from clicking, the page opens a new window to another link.

I am really sorry if I was confusing it’s just Wix is not my arena and I appreciate everyone’s help on this!

7

@aalaliwi Please realize that you can’t just “copy and paste” code and expect it to work. You need to understand what’s happening if you expect to be able to write code that does what you want.

The code in the example I provided merely demonstrates a technique of doing something special when the site visitor gives a rating of 5. You need to figure out how to apply this technique to your own code.