merch internal banner

components/AdPlaceholder.vue

@@ -40,7 +40,7 @@
 import adPlaceholders from '../src/adPlaceholders.js';
 import getAdsInternal from '../src/adsInternal.js';
 import { mapState } from 'vuex';
-import { randomItem } from '../src/helpers.ts';
+import { randomItemWeighted } from '../src/helpers.ts';
 
 const MOBILE_BREAKPOINT = 992;
 
@@ -90,12 +90,12 @@ export default {
                 (this.adsInternal[this.currentKey] || adPlaceholders[this.currentKey]);
         },
         adConfig() {
-            if (!this.externalAdsEnabled && Math.random() < 0.5) {
+            if (!this.externalAdsEnabled && Math.random() < 0.3) {
                 return { active: false };
             }
 
             return this.adConfigPossibilities.length
-                ? { active: true, ...randomItem(this.adConfigPossibilities) }
+                ? { active: true, ...randomItemWeighted(this.adConfigPossibilities) }
                 : { active: false };
         },
         adConfigPossibilities() {
@@ -112,6 +112,7 @@ export default {
             if (this.externalAdsEnabled) {
                 const { slotId, adFormat, adLayout = null, responsive = false, video = false, sticky = false } = adPlaceholders[this.currentKey];
                 possibilities.push({
+                    chance: 1,
                     fuse: true,
                     slotId,
                     adFormat,

routes/contact.vue

@@ -74,6 +74,8 @@
             </div>
         </section>
 
+        <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />
+
         <section>
             <h3 class="mb-3">
                 <Icon v="users" />

src/adsInternal.js

@@ -21,7 +21,7 @@ export const adsInternal = [
         enabled: true,
         locale: 'pl',
         image: 'workshops-pl.png',
-        placeholders: ['content-1'],
+        placeholders: ['content-0'],
         link: 'https://zaimki.pl/szkolenia',
         display: 'd-none d-md-block',
         alt: 'Oferujemy szkolenia i warsztaty dla firm i organizacji',
@@ -30,7 +30,7 @@ export const adsInternal = [
         enabled: true,
         locale: 'pl',
         image: 'workshops-pl-mobile.png',
-        placeholders: ['content-mobile-1'],
+        placeholders: ['content-mobile-0'],
         link: 'https://zaimki.pl/szkolenia',
         display: 'd-block d-md-none',
         alt: 'Oferujemy szkolenia i warsztaty dla firm i organizacji',
@@ -39,7 +39,7 @@ export const adsInternal = [
     //     enabled: true,
     //     locale: 'en',
     //     image: 'workshops-en.png',
-    //     placeholders: ['content-1'],
+    //     placeholders: ['content-0'],
     //     link: 'https://en.pronouns.page/workshops',
     //     display: 'd-none d-md-block',
     //     alt: 'We offer training and workshops for companies and organisations.',
@@ -48,11 +48,28 @@ export const adsInternal = [
     //     enabled: true,
     //     locale: 'en',
     //     image: 'workshops-en-mobile.png',
-    //     placeholders: ['content-mobile-1'],
+    //     placeholders: ['content-mobile-0'],
     //     link: 'https://en.pronouns.page/workshops',
     //     display: 'd-block d-md-none',
     //     alt: 'We offer training and workshops for companies and organisations.',
     // },
+    {
+        enabled: true,
+        locale: 'en',
+        image: 'merch-1.png',
+        placeholders: ['content-0', 'content-mobile-0'],
+        link: 'https://shop.pronouns.page',
+        alt: 'Show off your pride and support the project – shop.pronouns.page',
+    },
+    {
+        enabled: true,
+        locale: 'en',
+        image: 'merch-1.png',
+        placeholders: ['header'],
+        link: 'https://shop.pronouns.page',
+        alt: 'Show off your pride and support the project – shop.pronouns.page',
+        chance: 0.1,
+    },
 ];
 
 export default (locale) => {
@@ -66,7 +83,7 @@ export default (locale) => {
             if (!adsInternalPerPlaceholder.hasOwnProperty(placeholder)) {
                 adsInternalPerPlaceholder[placeholder] = [];
             }
-            adsInternalPerPlaceholder[placeholder].push(ad);
+            adsInternalPerPlaceholder[placeholder].push({chance: 0.25, ...ad});
         }
     }
 

src/helpers.ts

@@ -232,6 +232,24 @@ export const shuffle = <T>(array: T[]): T[] => {
 
 export const randomItem = <T>(array: T[]): T => array[Math.floor(Math.random() * array.length)];
 
+interface WeightedItem {
+    chance?: number;
+}
+
+export const randomItemWeighted = <T extends WeightedItem>(array: T[]): T => {
+    const totalChance = array.reduce((sum, obj) => sum + (obj.chance ?? 1), 0);
+    let randomChance = Math.random() * totalChance;
+
+    for (const el of array) {
+        randomChance -= el.chance ?? 1;
+        if (randomChance <= 0) {
+            return el;
+        }
+    }
+
+    return array[array.length - 1];
+}
+
 export const randomNumber = (min: number, max: number): number => Math.floor(Math.random() * (max - min + 1)) + min;