DEV Community

Cover image for Play Game 🎮 Earn Coupon | Wix Studio eCommerce Engagement 📈 Tool
Rajesh Joshi
Rajesh Joshi

Posted on

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

#devchallenge #wixstudiochallenge #webdev #javascript

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.

GitHub logo 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:

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 👨‍💻

Top comments (0)

Read next

devmarcosanjos profile image

Client-Side Rendering (CSR)

Marcos Anjos -

zanepearton profile image

Rust + WASI: Application Monitoring

Zane -

pflashgary profile image

Build Your First React App: Mood Tracker

pflashgary -

willowjr profile image

What I’ve Learned from Building a Calculator with Vue.js

William Kwadwo Owusu -