Play Game ๐ŸŽฎ Earn Coupon | Wix Studio eCommerce Engagement ๐Ÿ“ˆ Tool

rajeshj3

Rajesh Joshi

Posted on July 15, 2024

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.

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โ€ฆ

Follow Me

Twitter @rajesh_j3

LinkedIn @rajeshj3


Thanks,

Happy Coding ๐Ÿ‘จโ€๐Ÿ’ป


๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
rajeshj3
Rajesh Joshi

Posted on July 15, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About