Kutter Discount Wars – ██FR█████ █INTELL███████████

This content originally appeared on DEV Community and was authored by VPEngine

This is a submission for the Wix Studio Challenge .

What I Built

Kutter Discount Wars offers a videogame based e-commerce experience.

Users play a simple alien-caterpillar invasion game and their play score determines the discount they’ll get on all purchases in the store.

The discounts will range from 0 – 25%, depending on the user’s play score.

The higher the user scores, the higher the discount.

After a user is done playing the game, a discount coupon is generated and the user can “Proceed to Shopping” on the Wix shop and checkout using that coupon.

Demo

PLAY GAME, GET COUPON & PROCEED TO SHOPPING on Wix Shop.

WEB STUDIO SITE DEMO: https://vakinduphilliam.wixstudio.io/kutterwars

GAME PLAY & GET COUPON: https://vpengine.github.io/KutterWars/index.html

The Game Screenshots:

Kutter Wars Shopping Cart Screenshots:

Development Journey

The frontend videogame is built using JavaScript and HTML.

The shopping experience is built using Wix Studio, and the Velo JavaScript APIs.

We used the following Wix Velo APIs, Functions and Packages:

addProducts() – Add product to Cart,
getProduct() – Capture product details,
getQuantity() – Capture product stock quantity,
removeProduct() – Remove product from cart,
updateLineItemQuantity() – Update cart item quantity,
onChange() – Cart changed event,
applyCoupon() – Cart coupon discount,
removeCoupon() – Remove discount coupon,
wixLocationFrontend.url – To capture current page url,
wixStorageFrontend.setItem – To store local browser data.
wixStorageFrontend.getItem – To retrieve local browser data.
wixStoresFrontend – Interact with store items.

Add product to Cart button code: addProducts():

import {cart} from "wix-stores-frontend";
// INSTALL NPM PACKAGES: wix-stores-frontend

// $w.onReady(function () {

$w("#myButton").onClick((event) => {

let targetId = event.target.id; // "myProductId"

// Capture product id using getProduct()
let productId = $w(`#${targetId}`)
.getProduct()
.then((product)=>{
    return product._id;
})
.catch((error)=>{
    return null;
});

// Capture product stock quantity using getQuantity()
let itemQuantity = $w(`#${targetId}`)
.getQuantity()
.then((productQuantity)=>{
    return productQuantity;
})
.catch((error)=>{
    return null;
});

let products =[{
    productId: productId,
    quantity: itemQuantity
}];

// Add product to cart using addProducts()
cart
.addProducts(products)
.then((updatedCart)=>{
    // products added to cart
    const cartId = updatedCart._id;
    const cartLineItems = updatedCart.lineItems;
})
.catch((error)=>{
    // products not added to cart
    console.error(error);
});

});

// });

Remove product from cart code: removeProduct():

import {cart} from "wix-stores-frontend";
// INSTALL NPM PACKAGES: wix-stores-frontend

// $w.onReady(function () {

const cartLineItemId =3;

cart
.removeProduct(cartLineItemId)
.then((updatedCart)=>{
    // product removed
    const cartLineItems = updatedCart.lineItems;
})
.catch((error)=>{
    // products not removed
    console.error(error);
});

// });

Update cart item quantity: updateLineItemQuantity():


import {cart} from "wix-stores-frontend";
// INSTALL NPM PACKAGES: wix-stores-frontend

// $w.onReady(function () {

const cartLineItemIdx =2;
const quantityx = 10;

// Update cart item quantity using updateLineItemQuantity()
cart
.updateLineItemQuantity(cartLineItemIdx, quantityx)
.then((updatedCart)=>{
    // cart line item quantity updated
    const cartId = updatedCart._id;
    const cartLineItems = updatedCart.lineItems;
})
.catch((error)=>{
    // products not added to cart
    console.error(error);
});

// });

Cart coupon discount code: applyCoupon():


import {cart} from "wix-stores-frontend";
import {local} from "wix-storage-frontend";
// INSTALL NPM PACKAGES: wix-stores-frontend, wix-storage-frontend

// $w.onReady(function () {

var discount = local.getItem("discountNumber");
var discountCoupon = local.getItem("discountCoupon"); // Coupon obtained from game play

const couponCode = discountCoupon; // For example, KutterGame-15 means value of discount is at 15%

cart
.applyCoupon(couponCode)
.then((updatedCart)=>{
    const couponDiscount = updatedCart.appliedCoupon.discountValue;
})
.catch((error)=>{
    console.error(error);
});

// });

Remove discount coupon code: removeCoupon():


import {cart} from "wix-stores-frontend";
// INSTALL NPM PACKAGES: wix-stores-frontend

// $w.onReady(function () {

cart
.removeCoupon()
.then((updatedCart)=>{
    const cartId = updatedCart._id;
    const cartLineItems = updatedCart.lineItems;
})
.catch((error)=>{
    console.error(error);
});

// });

Capture discount and coupon from URL parameters:


//var urlString ="https://vakinduphilliam.wixsite.com/kutter-wars?d=7&c=KutterGame-7"; // Example URL
import wixLocationFrontend from "wix-location-frontend";
import {local} from "wix-storage-frontend";
// INSTALL NPM PACKAGES: wix-storage-frontend, wix-location-frontend

// $w.onReady(function () {

var urlQuery = wixLocationFrontend.query; // get url query

// Get parameter values
var discount = urlQuery.d;
var coupon = urlQuery.c;

if(discount =='' || coupon == '' || typeof discount == 'undefined' || typeof coupon == 'undefined'){

local.setItem("discountNumber", 0);
local.setItem("discountCoupon", "null");

} else {
local.setItem("discountNumber", discount);
local.setItem("discountCoupon", coupon);

}

// });

VPEngine @vpengine

<!– Thanks for participating! →

This content originally appeared on DEV Community and was authored by VPEngine