Differences

This shows you the differences between two versions of the page.

--- admin:online-platform-cms:using-web-ui-custom-events [2021/08/31 08:42] – https://advbet.slack.com/archives/CKK5LEACA/p1630399117020800 algirdas-matas
+++ admin:online-platform-cms:using-web-ui-custom-events [Unknown date] (current) – external edit (Unknown date) 127.0.0.1
@@ Line 8: / Line 8: @@
   * **userRegisterComplete** (//when user adds final required details to his profile, e.g. date of birth, city, age. etc., and clicks to complete registration//)
   * **cmsPageLoaded** (//when CMS page is fully loaded//)
+  * **routeChange** (//runs before each route change//)
 To run your chosen script(s) (e.g. GTM, etc...) after any custom script is fired, we can add these scripts to 3rd party scripts section, documented [[admin:online-platform-cms:3rd-party-scripts|here]].
@@ Line 41: / Line 42: @@
 ===== Custom event data models: =====
-Example of user object model in **userLogIn**, **userRegisterInitial**, **userRegisterComplete** events:
+=== Example of user object model in userLogIn, userRegisterInitial, userRegisterComplete events: ===
 <code>
 {
@@ Line 106: / Line 107: @@
 </code>
-Example of user object in **userRegisterVerify** event:
+=== Example of user object in userRegisterVerify event: ===
 <code>
 {
@@ Line 122: / Line 123: @@
 The user object depends on the verification method.
+=== Example of user object in routeChange event: ===
+<code>
+{
+ moduleName: 'prematch',
+ from: {
+  fullPath: string,
+  name: string,
+ },
+ to: {
+  fullPath: string,
+  name: string,
+ }
+}
+</code>
+===== Additional info =====
+=== 'routeChange' event info ===
+  * routeChange fires this event before every route change, so we can react to changed routes with our custom script(s) added via Admin CMS section.
+  * Use 'name' field from 'from' or 'to' objects preferably, as fullPath is url, which is more likely to change in the future, compared to names.
+  * This event allows custom script to stop the route change in the app by adding 'Event.preventDefault()' in the event's listener.
+  * Each game has it's own module names, so Roulette page will fire 'roulette' and Dogs page 'dogs' modaleNames.
+  * Games with nested URLs will have the same moduleName, but different names under the 'from' and 'to' objects.
+Script example and what it does:
+  * When user visits a page betgames-iframe, the app fires 'routeChange' event, with the moduleName 'betgames-iframe'
+  * Script catches this event and prevents the route from changing for this particular 'betgames-iframe' module, so user stays on the same route
+  * User is shown a modal, with two buttons, 1 - Continue, 2 - Go back
+  * Continue button redirects user to another page (script builds custom URL)
+  * Go back button will hide the popup and the user stays on the same route
+<code>
+ document.addEventListener("routeChange", routeChangeEvent => {
+   var isDataFreeWebsite = window.location.origin.includes('datafree');
+   if (!isDataFreeWebsite) {
+     return;
+   }
+   if (routeChangeEvent.detail.moduleName === 'betgames-iframe') {
+       // preventDefault prevents the route from updating, so the user cannot access this page normally as he would. In this case
+       // we provide our custom solution to guide user when he tries to visit this module (page)
+       routeChangeEvent.preventDefault();
+       displayBetGamesModal(routeChangeEvent.detail.to, routeChangeEvent.detail.from);
+   }
+});
+function displayBetGamesModal(to, from) {
+  var modalElement = document.createElement('div');
+  modalElement.setAttribute('id', 'dataFreeModal');
+  modalElement.style.position = 'absolute';
+  modalElement.style.top = '0';
+  modalElement.style.bottom = '0';
+  modalElement.style.left = '0';
+  modalElement.style.right = '0';
+  modalElement.style.margin = '0 auto';
+  modalElement.style.background = 'rgba(255,255,255,05)';
+  modalElement.style.zIndex = '10000';
+  var modalTitle = document.createElement('h2');
+  modalTitle.innerHTML = 'Data free modal';
+  modalTitle.style.color = '#000';
+  var modalContinueButton = document.createElement('button');
+  modalContinueButton.innerHTML = 'Continue';
+  modalContinueButton.addEventListener('click', function() {
+    const paidDataUrl = window.location.origin.replace('datafree.co', 'bet' + to.fullPath);
+    window.location.href = paidDataUrl;
+  });
+  var modalGoBackButton = document.createElement('button');
+  modalGoBackButton.innerHTML = 'Go Back';
+  modalGoBackButton.addEventListener('click', function() {
+    modalElement.remove();
+    // If name is not set, it means that client came straight to this page through the browsers address section, so this is an exception and
+    // should be handled differently, since after removing the modal, user will see blank page.
+    if (!from.name) {
+      window.location.href = 'https://bettingworld.datafree.co/';
+    }
+  });
+  modalElement.appendChild(modalTitle);
+  modalElement.appendChild(modalContinueButton);
+  modalElement.appendChild(modalGoBackButton);
+  document.body.appendChild(modalElement);
+}
+</code>