How to create a "like & dislike" YouTube alike feature via Wix Editor?

Ask the community
,
1

1235×403 21.3 KB

Hi, I am creating a “like-dislike” YouTube alike feature via Wix Editor. But I am stuck and needing your help.

The feature contains two buttons (like & dislike, the text can be customized), after clicking one of them, there is a small form popping out asking for certain info. After submission, there will be a cumulative number displayed beside the button.

May I ask for your insights/hints? Thanks a lot.

2

Hi there,

You need to maintain the IDs of those who votes (likes/dislikes) for each article/video/page, etc. in the database, and when someone clicks on the like buton, a function will add his/her ID to the list of people who liked it, and remove his/her name from the list of people who disliked it - if they had disliked it before.

3

Bump

4

This would be the basic and easiest path:

$w.onReady(() => {
    $w('#dynamicDataset').onReady(async () => {
        await refreshDataset()
        showLikesDislikes()
        let media = $w('#dynamicDataset').getCurrentItem()
        console.log(media)
        $w('#btnLike').onClick(() => {
            likeMedia(media)
        })
        $w('#btnDislike').onClick(() => {
            dislikeMedia(media)
        })
    })
})

async function likeMedia(media) {
    media.likes++
    $w('#dynamicDataset').setFieldValue("likes", media.likes)
    $w('#textLikes').text = media.likes.toString()
    await saveDataset($w('#btnLike'))
}

async function dislikeMedia(media) {
    media.dislikes++
    $w('#dynamicDataset').setFieldValue("dislikes", media.likes)
    $w('#textDislikes').text = media.dislikes.toString()
    await saveDataset($w('#btnDislike'))
}
async function saveDataset(button) {
    button.disable()
    await $w('#dynamicDataset').save()
    button.enable()
}

async function refreshDataset() {
    await $w('#dynamicDataset').refresh()
}

function showLikesDislikes() {
    $w('#textDislikes').hidden
        ? $w('#textDislikes').show()
        : $w('#textDislikes').hide()
    $w('#textLikes').hidden
        ? $w('#textLikes').show()
        : $w('#textLikes').hide()
}

Test Like / Dislike Buttons

5

Hi there! Looks awsome. I just have one question: Is it possible to like and dislike only once per user? In the demo (Test Like / Dislike Buttons), anyone can like and dislike as many times as they want…

It would be awsome to have this feature…:grinning: