Magento 2 Spin to Win

• The admin creates and manages the Spin Campaigns in the admin panel. 
• Spin Campaign scheduling is done by the admin. 
• Managing the attriutes of the spin wheel is the admin’s task. 
• While creating or editing the welcome form, the admin can also preview it. 
• The admin can preview the result form while creating or editing it. 
• On creating or editing the spin wheel, the admin can preview it. 
• The admin can preview the spin and coupon button while creating or editing it. 
• Segments of the spin wheel are created and managed by the admin. 
• The admin sets the positions of the segments on a spin wheel. 
• Gravity or the probabaility of appearing must be set by the admin.
• Each segments’ limit is managed by the admin. 
• The admin has to manage the layout of the spin wheel. 
• A trigger option for a spin wheel is present on the home page for the customer.
• The Report section includes the report and statistics for each spin campaign. 
• On clicking the trigger, the spin wheel shall poop up for the customers.
• To spin the wheel , the customer needs to enter the name or email address, or both. 
• The customers may either win or lose the spin. 
• On winning the spin, the customer will receive a coupon code, which can be availed on making a purchase.
• Customer will get coupon data in e-mail and as well as on the frontend

Customers will get a zip folder. Then they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder.

You need to transfer this app folder into the Magento2 root directory on the server as shown below.

After the successful installation, you have to run these commands in the Magento2 root directory.

First command – php bin/magento setup:upgrade

Second command –  php bin/magento setup:di:compile

Third Command – php bin/magento setup:static-content:deploy

After running the commands, you have to flush the cache from the Magento admin panel by navigating through->System->Cache management as shown below.

For translating the module language, navigate through src/app/code/Webkul/SpinToWin/i18n and edit the en_US.csv file.

Thereafter, rename the CSV as “en_SA.csv” and translate all right side content after the comma in the Arabic language. After editing the CSV, save it.

Then upload it to the path src/app/code/Webkul/SpinToWin/i18n where the Magento2 is installed on the server. The module gets translated into the Arabic Language. It supports both RTL and LTR languages.

After installing the Magento2 Spin to Win module, the admin can set the permissions by navigating thorugh Stores > Configuration > Spin to Win. 

The admin can set the permission under General Settings as follows:

Email Validation: The admin can set this field as ‘Yes’ or ‘No’. 

• If set as ‘Yes,’ the customer can use the spin to win coupon by logging in with the email id, that the customer uses to login to spin the wheel. 
• If set as ‘No,’ an error message- “Cannot Apply Coupon” shall display, if a cutsomer logs in with a different email id. 

Manage Email: The admin needs to add the email from which the Spin to Win notification is sent to customer on winning the spin. 

Send Coupon Code to Customer: The admin may choose from any of the given template options to send the coupon to the customers. 

As the configurations of the module is set, the admin can create a new campaign by navigating through Spin to Win > Add New Campaign.

On clicking the Add New Campaign button, the admin will find the Information tab under Spin to Win Details option. 

The admin will have to configure the Spin Campaign Information by filling in the details such as- Campaign Name, Status, Start and End Date, etc. 

The admin can configure the Spin Campaign Informaton settings as under: 

Campaign Name: The admin can configure the name of the canpaign. 

Scheduled: The admin can set this as ‘Yes’ or ‘No.’

Start Date: Start Date of campaign can be set by the admin. 

End Date: End Date of campaign can be set by the admin. 

Status: The admin sets the status of the campaign as Enabled or Disabled. 

Websites: The admin can select the websites to display the campaign. 

As the admin saves the information, a success message- “Spin Campaign data has been saved successfully.”

Also, on saving the Spin Campaign Information, the other tabs- Form, Spin Wheel, Add Segment, Segments, Layout, Trigger, Report will display. 

Next, the admin needs to navigate to the Spin Wheel tab.

Under Spin Wheel Form, the admin needs to set the configurations of the spin wheel. 

The admin needs to set the following details- 

Background Color: The background color of the spin wheel. 

Image: Upload image by browsing the files.  

Background Image Repeat Property: The admin may choose any option from the given options.

Show Inner Wheel: Set ‘Yes’ or ‘No’ for show inner wheel.

Inner Radius: Define the Inner Radius, if show inner wheel is set as ‘Yes.’

Center Color: The color on the center of the spin wheel. 

Center Logo: Upload center logo by browsing the files. 

Pin Image:  Choose or browse the pin image which points the segments while spinning the wheel. 

Stroke Color: The color of the stroke. 

Segment Font Size: The font size of  the segment. 

Text Direction: The direction of the segment text.

Result Segment Text Color: The text color of the result segment. 

Segment Styles: Add background and text color of the segment.  

On configuring the settings the admin has to save the settings so as to view the preview under Preview Form. 

On clicking the “Click Here to Preview” button, the spin wheel as shown in the image below, pops up. 

After the configurations of the Spin Wheel are set, the admin has to configure the Information and the Action sections under the Add Segment tab as shown in the image below. 

Information

The admin will have to configure the following details under the Information section: 

Label: It is shown on the spin wheel.

Heading: It appears on the Result Form. 

Description: It appears in the Result Form under the Heading. 

Limit: The number of times the spin shall occur. 

Gravity: The maximum number of chances of a spin to occur. 

Position: Position of the segment on the spin wheel. 

Action

The admin configures the following details under the Action section: 

Apply: Apply discount rule which admin offers on winning the spin. 

Discount Amount: As per the rule set, the admin sets an appropriate discount amount. 

Maximum Qty Discount is Applied to: The admin sets the maximum quantity to which teh discount will be applicable.

Discount Quantity Step(Buy X): The admin sets the Discount Quantity for the specific discount rule. 

Discard Subsequent Rules: The admin set this field as ‘Yes’ or ‘No.’

The segments of the spin wheel which the admin adds under the Add Segment will be visible in the Segments tab as shown in the image below. 

The tabular representation includes details such as ID, Type, Label, Heading, Limit, Availed, Gavity, Position, Action as shown below. 

Under the Layout tab, the admin configures the layout of the spin wheel. 

Layout Configuration

The admin configures the following fields under Layout Configuration: 

View: The admin choose a spin wheel view from the dropdown list. 

Position: The spin wheel position, which the admin configures as ‘Left’ or ‘Right.’

Wheel View: The view of the wheel which the admin may set as ‘Split’ or ‘Full.’ 

Trigger Button Position: The admin may choose to set the trigger button position as Top Right, Botton Right, Top Left, etc. 

To set the configurations of the Trigger tab, the admin will have to configure the fields under the Visibility and the Spin to Win Button. 

Visibility

The admin can configure the Visibility section as follows: 

Spin Wheel Visibility: For this field, the admin may choose on which page such as Home Page, Login Page, Registration Page, etc. will display. 

Spin to Win Button Visibility: This is applicable only if the Show Spin to Win Button is set to “Yes”. The admin can choose Home Page, Login Page, Category Page, etc. to display the Spin to Win Button. 

Show Spin Wheel on Event: The admin may choose options such as Immediately, After x seconds, When scroll to x%, etc. 

For instance, if admin chooses the “Home page” and “When scroll to x%,”, when the customer scrolls the homepage to x%, (let’s say, 3%), then the spin to wheel shall appear.

Spin to Win Button

The admin can configure the Spin to Win Button section as follows: 

Show Spin to Win button: The admin may set this field as ‘Yes’ or ‘No.’

Button Label: A label for the Spin to Win button may be set by the admin, for instance, “Spin to Win.”

Background Color: The admin can set the background color of the Spin to Win button. 

Text Color: The text color of the Spin to Win button is set by the admin. 

Spin to Win Image: The admin can browse the files for the spin to win image. 

Won Coupon Button

The admin can configure the Spin to Win Button section as follows: 

Show Won Coupon Button: The admin can set this field as ‘Yes’ or ‘No.’

Button Label: The Label of the Button such as “Won Button.”

Background Color: The Background Color of the  “Won Button.”

Text Color: The Color of the Text of the Won Button. 

The customers avail the coupon by making purchase, which they receive on winning the spin.

Under the Report tab, a statistical view, including the details such as Total Spins, Total Wins, Total Orders and Total Sales will be present as shown in the image below. 

A tabular representation which includes details such as IS, Name, Email, Spin Time, Result, Status and Coupon code is present as shown below. 

The customers can either opt for the Full View or the Split View of the spin wheel. 

Spin Wheel- Full View

The Spin to Win wheel in its Full View will be as shown in the image below. 

Spin Wheel- Split View

The Split View of the Spin to Win wheel is shown in the image below.

The Spin to Win Trigger is also present on the bottom right of the page. The customer can simply click on the trigger to view the spin wheel. 

The customer may tend to either win the spin, or lose the spin. 

The sections, Winning the Spin and Losing the Spin sections, includes the explaination of the same. 

Winning the Spin

The cutsomer will find the spin wheel in its split or the full view form. In the image below, the spin wheel is in its split view.

The customer will have to enter the email address in the Email Address field in order to spin the wheel.

After adding the email address, the customer needs to click on the Spin Wheel button to spin the wheel. 

As the wheel stops, the pin shall be pointing on a segment. 

In the image below, the pin points at 10% off, which is a Win condition. 

The coupon code, along with the message (Hi Five! You Won the Spin!) shall display as shown in the image below. 

To avail the coupon, the customer can login with the same email address which the cutsomer used to spin the wheel.

On winning the spin and receiving the coupon, the Spin to Win Trigger which is present in the Homepage will change to Won Coupon Trigger as shown in the image below. 

The customer can chose any product(s) from the collection page and make a purchase in a usual way. 

Customers canclick on the 

On clicking the Won Coupon button, the customer can view the coupon code as shown below. 

In the Checkout page, the customer can enter the coupon code in the Apply Discount Code tab as shown in the image below. 

Under Order Summary, the customer can view the amount of discount availed with the coupon.

The customers will find the coupon code with Discount  under Order Summary as shown below.

On navigating to the order id of the order which the customer places under My Orders, the customer will find the coupon code with Discount. 

Losing the Spin

There may be chances when the customer can even lose the spin. 

The customer has to add the email address under Email Address and click on Spin Wheel button to spin the wheel.

The spin wheel stops on “Better Luck Next Time,” which is a Lose Condition. 

As no coupon shall display for a lose condition, a message (Oops! Hard Luck!) notifying the customer about losing the spin will display as shown in the image below. 

Note: 

• The number of times a segement appears will depend on the Gravity which is set by the admin for a respective segment.
• For instance, if for Segment_1 admin sets the gravity as 30, and for Segment_2, the admin sets the gravity as 100, it is likely that Segment_2 will appear more number times.