How to create Coupon Spinner

#Coupons #Spinner #WixCode

In this example, I will go over how to create a spinner for your websites that lets users win coupons that you have created for your e-commerce store.

The first step is to create coupons. For those unaware of how to create coupons or looking for more info on coupons you can follow this link here: https://support.wix.com/en/wix-stores/managing-coupons.

After the coupons have been added, it is necessary to create a separate database with two fields: couponName, and couponCode. After this, add your coupons accordingly like so:

Next we will start designing the spinner page. This page should have a circle with the same width and height. You can add as many or as little items in the wheel by adding lines and grouping them together. Then finally add dummy text to the wheel (we will dynamically add this later), between each line and group that as well. So in total we have 1 circle, 1 text group with multiple text fields, 1 line group with multiple lines.

Final design should look something like this:

Before we start working on the functionality, it would also be a good idea to add a hidden text field to show the coupon code prize and a spin button and icon pointing to the current wheel item.

The final design will look something like this: *Note that prizeCode text is hidden on load.

Now lets populate the spinner text items. First we want to add a dataset that is configured to out Coupons Database that we created earlier and give it the id of couponsDataset.

Then add the following code to the page:

$w.onReady(async function () {
 let totalCount = $w("#couponsDataset").totalCount();
 let results = await $w("#couponsDataset").getItems(0, totalCount); 
    couponArray = results.items;
    $w('#textGroup').children.forEach((element, index) => {
        element.text = couponArray[index].couponName;
    });
});

This code gets all the items in our database and sets the text inside the text group we created to each item. If we preview the site now it should have the populated items:

Before we continue, let us change the text item id that the arrow is pointing to, to '#winningCoupon'. This text value will always have the winning value in it.

Next, change the button id to spinButton and add an onClick() event to it. Inside this event, you should put this code:

let spinOptions = {
 "duration": 1500,
 "delay": 1,
 "direction": "ccw",
 "cycles": 10
};

    $w('#wheelOfFortune').hide('spin', spinOptions).then(() => {
        $w('#wheelOfFortune').show('spin');
        randomizeSpinner(couponArray);
        showPrize();           
    });

As you can see we have 2 functions we have not declared yet, randomizeSpinner() and showPrize(), lets declare those now:

function randomizeSpinner(array) {
 let shuffledArray = shuffleArray(array);
    $w('#textGroup').children.forEach((element, index) => {
        element.text = shuffledArray[index].couponName;
    });
}

function showPrize() {
 let prize = $w('#winningCoupon').text;
 let coupon = couponArray.find((element, index) => {
 return element.couponName === prize;
    });
    $w('#prizeCode').text = `Your Coupon Code is: ${coupon.couponCode}`;
    $w('#prizeCode').show();

}

//Shuffle for the randomization
 function shuffleArray(array) {
 for (let i = array.length - 1; i > 0; i--) {
 const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
 return array;
}

Randomize Spinner function randomizes the array by shuffling the array then setting the text values to the shuffled array. As for show prize, we find the coupon code that correlates to the coupon Name and place it in the hidden text field with an id of '#winningCoupon', and finally we show it.

In conclusion, there are many different ways to do any of these sub tasks and your creativity is your limit. You can add a dummy wheel and hide it before showing the animated wheel spin on spin button click to get rid of the hiding and showing. You can try using a repeater to add the text and connect it to a database. You can totally change up the animation style and have only the arrow spin. Your creativity can go along way, and this is just a starting point for what is possible.

Goodluck!

Majd

DEMO