Play Game 🎮 Earn Coupon | Wix Studio eCommerce Engagement 📈 Tool

This is a submission for the Wix Studio Challenge .

What I Built

A game to increase user engagement 📈 on your eCommerce website. By allowing them to play a crazy math 🧠 game and win 🎖️ Coupons.

---

Demo

🔴 Live Demo: https://rajeshj3.wixstudio.io/ecom

Screens	Zoomed Component
Landing Page
Game Preview
Game Screen
Coupon Screen
Cart Screen

---

How it works

• Go to https://rajeshj3.wixstudio.io/ecom 🔗

• You'll see a button "Play and Get Discount".

• Click on that button to play the game. ▶️

• Now, you have to solve the provided simple math equation. 🧠

• Once you solve the equation, you'll earn a 20% off Coupon Code. 🤑

• Add items to your cart and apply the coupon. 🤩

• Enjoy! 🚀

---

Development Journey

Wix provides amazing Velo documentation. With this project, I explored Wix Studio for the 1st time, and I must say it's pretty straight forward to get started with.

APIs and Libraries I utilize?

• wix-marketing.v2

  Used createCoupon API to generate a new and unique coupon for the winner, this coupon is valid for next 24 hours only. Utilized getCoupon API to retrieve the newly created coupon to show on the UI.

• wix-auth

  To create and retrieve a coupon, the requesting user must have necessary permissions. But, in case of an anonymous user, one needs to elevate the request. For this, I used the elevate API with Anyone permission.

• wix-web-module

  Used Permissions API from wix-web-module to created and retrieve coupons.

---

Code on GitHub

Core logic for the game lives in src/pages/masterPage.js.

RajeshJ3 / wix-ecom

Git Integration & Wix CLI

This repo is part of Git Integration & Wix CLI, a set of tools that allows you to write, test, and publish code for your Wix site locally on your computer.

Connect your site to GitHub, develop in your favorite IDE, test your code in real time, and publish your site from the command line.

Set up this repository in your IDE

This repo is connected to a Wix site. That site tracks this repo's default branch. Any code committed and pushed to that branch from your local IDE appears on the site.

Before getting started, make sure you have the following things installed:

• Git
• Node, version 14.8 or later.
• npm or yarn
• An SSH key added to your GitHub account.

To set up your local environment and start coding locally, do the following:

1. Open your terminal and navigate to where you want…

View on GitHub

---

Follow Me

Twitter @rajesh_j3

LinkedIn @rajeshj3

---

Thanks,

Happy Coding 👨‍💻

---