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
|
|
|
|
|
|
|
|
|
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. UtilizedgetCoupon
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 withAnyone
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
.
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:
- Open your terminal and navigate to where you wantโฆ
Follow Me
Twitter @rajesh_j3
LinkedIn @rajeshj3
Thanks,
Happy Coding ๐จโ๐ป
Top comments (0)