How to Insert Push Button on a Dynamic Page

Ask the community
,
1

Hi people,
Can anyone tell me if it is possible to insert an individual tan button for each dynamic page content?

Actually I need to put an evaluation button with those stars in the dynamic pages, Wix itself has an evaluation app with stars and one that I can put through the html wix code, but how can I make it work individually in each dynamic content.

I hope you understand, I used google translator :wink:

This is the app like btn that I inserted with HTML code …

1167×324 27 KB

It could be something like this enjoy the forum of Wix …

951×346 18.6 KB

If anyone has any idea which way I can go to do this ?!
Thank you very much :wink:

1 Like
2

Hello Leia,

Unfortunately you cannot do that because it is an app, and has one instance of itself running, so whatever you do to one page it will save its state and show it on another page.

What is possible, however, is creating your own voting feature.

  1. Add two images(upvote and downvote), and add a user input field that has no placeholder or borders.

  1. Create a collection that keeps track of votes for every page and connect the input value (above) to the collections appropriate field (votes). (Be sure to get the current dynamic items value).

  2. Now comes the fun part, coding! Create a .onClick() event for each button. This event, when triggered, should look up the dynamic page in the new collection we created, and find its current vote and either increment it by one or decrements it by one depending on the button clicked.

  3. Be sure to check if the user voted so they cannot vote more then once, the simplest way to do this is with if statements.

Let me know if this helps,
Majd

3

Nice #MajdQumseya,
I’ll follow in the footsteps and try to do, we’ll see what’s going to happen. Very grateful :slight_smile:

4

So #MajdQumseya, I did everything I knew, and hey, I do not know much rsrsrs, but come on … The best part that is the code is the worst part for me, I’m trying to do a lot of things I’ve never done …

  1. Add two images(upvote and downvote), and add a user input field that has no placeholder or borders.

This part was quiet, but I inserted two images from my image bank and did not give properties option … anyway I tried two images from the Wix image bank, but after the onclick I did not know what to do :frowning:

Ah! I also created the database, in fact I used a test that was already created, I just erased the information (After all in Wixcode we can not delete or rename the databases already created).

1004×560 51.4 KB

Okay, I’ve parked, searched more and watched some videos to see if I could take another step, but it does not leave the place … Anyway, in short, after the onclick, I do not know what to do … Can you give one more help to those who do not know the code? If you know how to do in at least one item of my dynamic page I do at all quietly, just like I did in every other small discovery I got.

1322×564 116 KB

Thanks for the help.

5

Hello Leia,

Progress is made in small steps keep it up! Below I have made a boilerplate code for you to follow. Make sure to update all fields in your database as if you forget one it will be empty after update. Here is more information on update . All you have to worry about now is stopping the same user from voting twice. I recommend you do this by inserting a local storage object in the browser and reading that object in an if statement.

More on local storage here .

 
import wixData from 'wix-data';

let currentVotes, title, id;   

$w.onReady(function () {
  currentVotes = $w('#dynamicDataset').getCurrentItem().votes;     //getting current values
  title =  $w('#dynamicDataset').getCurrentItem().title;
  id = $w('#dynamicDataset').getCurrentItem()._id;
});

export function vectorImage1_click(event, $w) {      //on click for downvote
  let toUpdate = {                                   //Create object to update our  object in database
    "_id":          id,
    "title":         title, 
    "votes":        --currentVotes
  };                                                  //Make sure to update all fields as if you dont update a certain field it will be blank

  wixData.update("videoGallery", toUpdate)           //update
        .then( (results) => {
          let item = results; //see item below
        } )
        .then(()=> {
          $w('#dynamicDataset').refresh();
          console.log($w('#dynamicDataset').getCurrentItem().votes, "upvote");
        })
        .catch( (err) => {
          let errorMsg = err;
        } );
}

export function vectorImage2_click(event, $w) {
   let toUpdate = {
     "_id":          id,
     "title":         title,
     "votes":        ++currentVotes
   };

    wixData.update("videoGallery", toUpdate)
        .then(()=> {
            $w('#dynamicDataset').refresh();
            console.log($w('#dynamicDataset').getCurrentItem().votes, "downvote");
        })
        .catch( (err) => {
          let errorMsg = err;
        } );
}

export function dynamicDataset_itemValuesChanged() {
    $w('#dynamicDataset').refresh();
}

Try these things out and good luck! There are many ways to do what you want to do so have fun with the experimentation!

Best,
Majd

6

Majd, thank you very much, I did not stop for a minute to find a solution and I found a very interesting template from Wix that had a very nice evaluation function, I was very excited and I thought it would be better to migrate every site I had already done for this template to I have tried to reproduce everything on my site and the code did not work the onclick function does not work and it keeps showing up that onclick it is not a function.

1351×454 61.3 KB

This is the wix template:

1339×608 62.4 KB

But I’ll try this code you shared, let’s see what happens.

Very grateful again :slight_smile:
Léia Raquel

7

Anytime! Using an application from the Wix app store is also a good idea!
Best of luck,
Majd