Magento 2 Spin to Win Plugin

• The admin creates and manages the spin campaigns in the admin panel. 
• The admin manage the attributes of the spin wheel.
• While creating or editing the welcome form and the spin wheel, the admin can also preview it.   
• The store owner manage and creates the segments of the spin wheel. 
• The admin sets the positions of the segments on a spin wheel. 
• For a segment, the Gravity or probability of appearing must be set by the admin. 
• The admin can add an expiry date of the coupon code. 
• The admin has to manage the layout of the spin wheel. 
• A trigger option for a spin wheel is present in the admin specified pages for the customer.
• On clicking the trigger, the spin wheel shall pop up for the customers.
• The Report section includes the report and statistics for each spin campaign. 
• On winning the spin, the customer will receive a coupon code, which can be availed while making a purchase.
• Customers will get coupon data on the e-mail as well as on the frontend. 
• The extension is compatible with the Hyva Theme. 

Customers will get a zip folder. Then they have to extract the contents of this zip folder on their system.

visibility

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, 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, 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 Magento 2 (Adobe Commerce) 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 through 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 coupon code by logging in with the email id, that the customer uses to spin the wheel. 
• If set as ‘No,’ an error message- “Cannot Apply Coupon” shall display, if a customer 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 default template or custom template options to send the coupon code to the customers. 

• The admin may customize templates by navigating through Marketing > Communication > Email Template > Add New Template.

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

Furthermore, 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 Information settings as under: 

Campaign Name: The admin can configure the name of the campaign name which will display on the frontend.

Scheduled: The admin scheduled the campaign and set this as ‘Yes’ or ‘No.’

Start Date: The start date of the campaign can be set by the admin accordingly the campaign will display on the user panel. 

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

Status: The admin sets the status of the campaign as Enable or Disable. 

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

Priority: The priority of the campaign can be set by the admin. 

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

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

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

After that, under Spin Wheel Form, the admin needs to set the configurations of the spin wheel. 

The admin needs to set the following details for the Spin Wheel Form: 

Background Color: The background color of the spin wheel. How it will visible on the frontend? 

Image: Upload a background image for the spin wheel by browsing the files. So the background color of the wheel looks brighter. 

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

Show Inner Wheel: Set ‘Yes’ or ‘No’ to show the inner wheel on the frontend.

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

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

Center Logo: Upload the center logo as per your choice by browsing the files or you can choose any color.

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

Stroke Color: The color of the stroke which divides the wheel into parts. 

Segment Font Size: The font size of the wheel segment. 

Text Direction: The direction of the segment text is clockwise or anticlockwise.

Result Segment Text Color: The text color of the result segment shows after wheel rotation. 

Segment Styles: Add the 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. 

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

Note: Once the admin creates the segments, only then the segments will be visible on previewing the spin wheel. 

After the configurations of the Spin Wheel are set, the admin has to configure the Information section 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 to label the coupon code discount. 

Heading: It appears on the Result Form after spinning the wheel. 

Description: It appears in the Result Form under the Heading, description of the won label. 

Limit: How many times customer can spin the wheel? The number of times the segment shall occur. 

Gravity: The maximum number of chances for a segment to occur. 

Position: Position of the segment on the spin wheel. 

Type: The admin may choose to set this field as Win or Lose. 

• If set as “Win,” the configurations for ‘Win’ shall display under ‘Apply the rule only if the following conditions are met’ section, which the admin has to set. 
• This section will not appear if the admin chooses the “Lose” option against the Type field. 

Apply the rule only if the following conditions are met

The admin configures the following details under the Action section: 

Apply: Apply the 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 the 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.’

Expiry Date: For a coupon code, the admin can add an expiry date. 

The segments of the spin wheel that 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, Gravity, Position, and Action as shown below. 

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

SIDEBAR SLIDE

Layout Configuration

The admin configures the following fields under Layout Configuration: 

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

Wheel View: The view of the wheel that 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 scrolling to x%, etc. 

For instance, if the 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 the 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 of the coupon by making a 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 that includes details such as ID, Name, Email, Spin Time, Result, Status, and Coupon code is present as shown below. 

The customers will either find the spin wheel in its Full View or the Split View, in the frontend. 

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 explanation for Winning the Spin and Losing the Spin scenarios are present in the following sections. 

Winning the Spin

The customer will find the spin wheel in its split or 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 pinpoints 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 of the coupon, the customer can log in with the same email address which the customer 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 choose any product(s) from the collection page and make a purchase in the usual way. 

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

On 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 that 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 the 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 lost condition, a message (Oops! Hard Luck!) notifying the customer about losing the spin will display as shown in the image below. 

Note: 

• The probability of a segment appearing more times 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.