Match Day Deals
Order on match days and score a chance to win seats in the stadium.
Services: React
Introduction:
Match Day Deals was a campaign that ran during the month of November, allowing users of the Just Eat Takeaway.com platform to win tickets to the UEFA Europa League® final after placing an order. The aim of this project was to create an Informative Landing Page and a Terms & Conditions page for the campaign.
Services: React
Highlighted Features:
Below, I have listed some key features of this project. They include parts elements that I have coded to save time and repetition, features of functionality, and areas of the site that were key for user experience.
Language selection:
The Match Day Deals campaign ran across 7 markets of which many have more than one language, therefore we need to give the consumers the option to change their language.
I did this by creating a menu.html file with all the available options. Then using some JavaScript, we get the language and show the available options on the page.
You can see the all the languages here: Austria, Belgium, Germany, Spain, France, Netherlands and Poland.
One file for multiple languages:
As this landing page is being used on variable markets I have used a js file to contain the relevant data and then pull it through whenever it is needed.
Additional step for Poland:
One of the differences between the Polish campaign and the other campaigns was that Poland were giving away two prizes instead of one. The addition of the second prize meant that there was an extra step in the 'How to enter' section.
Within the Entering.vue component I set a variable to true, if the country code is equal to 'pl_en' or 'pl_pl' (as there are two languages). Then I set up two settings for the slider, one to display all four steps and the other to display the three.
Then above I have an if statement, and if the 'poland' variable is true I show the Polish settings, otherwise I show the normal settings.
Additional prize for Poland:
The addition of the second prize also meant that there was another in the 'Prizes' section.
Within the Win.vue component I have replicated the variables from the Entering.vue component. Then above I loop through the list of prizes from the Content.js file. I also add a class if the variable is true, which makes the width of the prize boxes thinner, so I can fit two side by side.
Terms & Conditions:
As well as the Informative Landing Page this project contains a Terms & Conditions page.
The Terms & Conditions page is built using static HTML and uses the same menu.html file that the Informative Landing Pages use.
You can see the Terms & Conditions pages here: Austria, Bulgaria, Germany, Spain, France, Netherlands and Poland.
Conclusion:
Using a variety of features, I have been able to create an Informative Landing Page and a Terms & Conditions page to display information on the campaign.