https://www.sinsay.com/special/store/1.4.0/store.js

1// COUNTRIES MOCKS
2const countries = {
3    BG: {
4        countryCode: 'BG',
5        englishName: 'Bulgaria',
6        defaultLanguage: 'BG',
7        languageVersions: {
8            BG: {
9                countryName: 'България',
10                languageName: 'български език',
11                storeURL: '/bg/bg/',
12                notification: 'Поръчките ще бъдат изпълнени в България.',
13                goToStore: 'Влезте в онлайн магазина',
14                logoSubheader: 'Ние сме в 19 страни',
15                contentInfo: 'За да продължите, трябва да изберете страната на доставка'
16            }
17        }
18    },
19    BA: {
20        countryCode: 'BA',
21        englishName: 'Bosnia and Herzegovina',
22        defaultLanguage: 'BA',
23        languageVersions: {
24            BA: {
25                countryName: 'Bosna i Hercegovina',
26                languageName: 'b/h/s jezik',
27                storeURL: '/ba/bs/',
28                notification: 'Narudžba će biti završena za Bosne i Hercegovine.',
29                goToStore: 'Idi u prodavnicu',
30                logoSubheader: 'Nalazimo se u 19 zemalja',
31                contentInfo: 'Da biste nastavili, morate izabrati zemlju dostave'
32            }
33        }
34    },
35    CZ: {
36        countryCode: 'CZ',
37        englishName: 'Czech Republic',
38        defaultLanguage: 'CZ',
39        languageVersions: {
40            CZ: {
41                countryName:  'Česká republika',
42                languageName: 'český jazyk',
43                storeURL: '/cz/cz/',
44                notification: 'Objednávky budou vyřízeny v České republice.',
45                goToStore: 'Přejít do obchodu',
46                logoSubheader: 'Jsme v 19 zemích',
47                contentInfo: 'Chcete-li pokračovat, musíte vybrat zemi doručení'
48            }
49        }
50    },
51    DE: {
52        countryCode: 'DE',
53        englishName: 'Germany',
54        defaultLanguage: 'DE',
55        languageVersions: {
56            DE: {
57                countryName: 'Deutschland',
58                languageName: 'Deutsche Sprache',
59                storeURL: '/de/de/',
60                notification: 'Die Bestellungen werden in Deutschland ausgeführt.',
61                goToStore: 'Shop ansehen',
62                logoSubheader: 'Wir liefern in 19 Länder',
63                contentInfo: 'Um fortzufahren, wähle bitte das Zielland aus'
64            }
65        }
66    },
67    EE: {
68        countryCode: 'EE',
69        englishName: 'Estonia',
70        defaultLanguage: 'EE',
71        languageVersions: {
72            EE: {
73                countryName: 'Eesti',
74                languageName: 'Eesti keel',
75                storeURL: '/ee/et/',
76                notification: 'Tellimused täidetakse Eestis.',
77                goToStore: 'Külasta kauplust',
78                logoSubheader: 'Tegutseme 19 riigis',
79                contentInfo: 'Jätkamiseks vali riik'
80            }
81        }
82    },
83    GR: {
84        countryCode: 'GR',
85        englishName: 'Greece',
86        defaultLanguage: 'GR',
87        languageVersions: {
88            GR: {
89                countryName: 'Ελλάδα',
90                languageName: 'Ελληνική γλώσσα',
91                storeURL: '/gr/el/',
92                notification: 'Οι παραγγελίες θα πραγματοποιηθούν στο Ελλάδα.',
93                goToStore: 'Πήγαινε στο κατάστημα',
94                logoSubheader: 'Βρισκόμαστε σε 19 χώρες',
95                contentInfo: 'Για να συνεχίσετε πρέπει να επιλέξετε τη χώρα αποστολής'
96            }
97        }
98    },
99    HR: {
100        countryCode: 'HR',
101        englishName: 'Croatia',
102        defaultLanguage: 'HR',
103        languageVersions: {
104            HR: {
105                countryName: 'Hrvatska',
106                languageName: 'Hrvatski jezik',
107                storeURL: '/hr/hr/',
108                notification: 'Narudžbe će biti isporučene u Hrvatskoj.',
109                goToStore: 'Odi u trgovinu',
110                logoSubheader: 'Mi smo u 19 zemalja',
111                contentInfo: 'Ako želite nastaviti, odaberite zemlju dostave'
112            }
113        }
114    },
115    IT: {
116        countryCode: 'IT',
117        englishName: 'Italy',
118        defaultLanguage: 'IT',
119        languageVersions: {
120            IT: {
121                countryName: 'Italia',
122                languageName: 'Lingua italiana',
123                storeURL: '/it/it/',
124                notification: 'Gli ordini saranno evasi in Italia.',
125                goToStore: 'Vai al negozio',
126                logoSubheader: 'Siamo in 19 paesi',
127                contentInfo: 'Per continuare, seleziona il Paese di consegna'
128            }
129        }
130    },
131    LV: {
132        countryCode: 'LV',
133        englishName: 'Latvia',
134        defaultLanguage: 'LV',
135        languageVersions: {
136            LV: {
137                countryName: 'Latvija',
138                languageName: 'Latviešu valoda',
139                storeURL: '/lv/lv/',
140                notification: 'Pasūtījumi tiks izpildīti Latvijā.',
141                goToStore: 'Iet uz veikalu',
142                logoSubheader: 'Mēs atrodamies 19 valstīs',
143                contentInfo: 'Lai turpinātu, jāizvēlas piegādes valsts'
144            }
145        }
146    },
147    LT: {
148        countryCode: 'LT',
149        englishName: 'Lithuania',
150        defaultLanguage: 'LT',
151        languageVersions: {
152            LT: {
153                countryName: 'Lietuva',
154                languageName: 'lietuvių kalba',
155                storeURL: '/lt/lt/',
156                notification: 'Užsakymai bus įvykdyti Lietuvoje.',
157                goToStore: 'Užsukite į parduotuvę',
158                logoSubheader: 'Esame 19 šalių',
159                contentInfo: 'Norėdami tęsti, turite pasirinkti pristatymo šalį'
160            }
161        }
162    },
163    HU: {
164        countryCode: 'HU',
165        englishName: 'Hungary',
166        defaultLanguage: 'HU',
167        languageVersions: {
168            HU: {
169                countryName: 'Magyarország',
170                languageName: 'magyar nyelv',
171                storeURL: '/hu/hu/',
172                notification: 'A megrendeléseket Magyarországon teljesítik.',
173                goToStore: 'Vissza az üzletbe',
174                logoSubheader: '19 országban vagyunk jelen',
175                contentInfo: 'A folytatáshoz ki kell választanod a szállítási országot'
176            }
177        }
178    },
179    PL: {
180        countryCode: 'PL',
181        englishName: 'Poland',
182        defaultLanguage: 'PL',
183        languageVersions: {
184            PL: {
185                countryName: 'Polska',
186                languageName: 'język polski',
187                storeURL: '/pl/pl/',
188                notification: 'Zamówienia będą realizowane na terenie Polski.',
189                goToStore: 'Idź do sklepu',
190                logoSubheader: 'Jesteśmy w 19 krajach',
191                contentInfo: 'Aby kontynuować musisz wybrać kraj dostawy'
192            }
193        }
194    },
195    RO: {
196        countryCode: 'RO',
197        englishName: 'Romania',
198        defaultLanguage: 'RO',
199        languageVersions: {
200            RO: {
201                countryName: 'România',
202                languageName: 'Limba română',
203                storeURL: '/ro/ro/',
204                notification: 'Comenzile vor fi onorate în România.',
205                goToStore: 'Mergi la magazin',
206                logoSubheader: 'Suntem în 19 țări',
207                contentInfo: 'Pentru a continua trebuie să selectați țara de livrare'
208            }
209        }
210    },
211    MK: {
212        countryCode: 'MK',
213        englishName: 'North Macedonia',
214        defaultLanguage: 'MK',
215        languageVersions: {
216            MK: {
217                countryName:  'Северна Македонија',
218                languageName: 'македонски јазик',
219                storeURL: '/mk/mk/',
220                notification: 'Нарачките ќе бидат исполнети во Северна Македонија.',
221                goToStore: 'Одете кај продавница',
222                logoSubheader: 'Не има во 19 земји',
223                contentInfo: 'За да продолжите, морате да ја селектирате земјата на испорака'
224            }
225        }
226    },
227    SI: {
228        countryCode: 'SI',
229        englishName: 'Slovenia',
230        defaultLanguage: 'SI',
231        languageVersions: {
232            SI: {
233                countryName: 'Slovenija',
234                languageName: 'slovenski jezik',
235                storeURL: '/si/sl/',

236                notification: 'Dostava je možna le na naslove v Sloveniji.',
237                goToStore: 'Pojdi v trgovino',
238                logoSubheader: 'Smo v 19 državah',
239                contentInfo: 'Za nadaljevanje morate izbrati državo dostave'
240            }
241        }
242    },
243    SK: {
244        countryCode: 'SK',
245        englishName: 'Slovakia',
246        defaultLanguage: 'SK',
247        languageVersions: {
248            SK:  {
249                countryName: 'Slovensko',
250                languageName: 'slovenský jazyk',
251                storeURL: '/sk/sk/',
252                notification: 'Objednávky budú vybavené v Slovensku.',
253                goToStore: 'Prejsť do obchodu',
254                logoSubheader: 'Sme v 19 krajinách',
255                contentInfo: 'Ak chcete pokračovať, musíte vybrať krajinu doručenia'
256            }
257        }
258    },
259    RS:  {
260        countryCode: 'RS',
261        englishName: 'Serbia',
262        defaultLanguage: 'RS',
263        languageVersions: {
264            RS: {
265                countryName: 'Srbija',
266                languageName: 'Srpski jezik',
267                storeURL: '/rs/sr/',
268                notification: 'Porudžbina će biti završena u Srbiji.',
269                goToStore: 'Idi na prodavnicu',
270                logoSubheader: 'Nalazimo se u 19 zemalja',
271                contentInfo: 'Da biste nastavili, morate izabrati zemlju dostave'
272            }
273        }
274    },
275    UA: {
276        countryCode: 'UA',
277        englishName: 'Ukraine',
278        defaultLanguage: 'UA',
279        languageVersions: {
280            UA: {
281                countryName: 'Україна',
282                languageName: 'українська мова',
283                storeURL: '/ua/uk/',
284                notification: 'Замовлення буде виконано через Україні.',
285                goToStore: 'До магазину',
286                logoSubheader: 'Ми відкриті у 19 країнах світу',
287                contentInfo: 'Щоб продовжити, необхідно вибрати країну доставки'
288            }
289        }
290    },
291    ZZ: {
292        countryCode: 'ZZ',
293        englishName: 'Global store',
294        defaultLanguage: 'EN',
295        languageVersions: {
296            EN: {
297                countryName: 'Global store',
298                languageName: 'english',
299                storeURL: '/sq/en/',
300                notification: 'In this store, you will only be able to explore our brand collections.',
301                goToStore: 'Go to store',
302                logoSubheader: 'We are in 19 countries',
303                contentInfo: 'To continue you must select the delivery country'
304            }
305        },
306    },
307    SELECT: {
308        countryCode: 'select',
309        englishName: 'Select',
310        defaultLanguage: 'select',
311        languageVersions: {
312            select: {
313                countryName: 'Select',
314                languageName: '',
315                storeURL: '',
316                notification: '',
317                goToStore: 'Go to store',
318                logoSubheader: 'We are in 19 countries',
319                contentInfo: 'To continue you must select the delivery country'
320            }
321        }
322    }
323}
324
325// CONSTANTS
326const browserLang = (window.navigator.language).slice(0,2).toUpperCase();
327const cookieLang = 'Lang';
328const isStoreSelectorBannerShown = 'isStoreSelectorBannerShown';
329const isStoreSelectorBannerShownValue = 'true';
330const defaultCountryName = 'Global store';
331const defaultCountryCode = 'ZZ';
332const globalStoreCountryCode = 'SQ';
333const selectCountryName = 'Select';
334const selectCountryCode = 'SELECT';
335
336// HTML ELEMENTS
337const storeSelectorLogoSubheader = document.querySelector('.store-selector-logo-subheader');
338const storeSelectorContentInfo = document.querySelector('.store-selector-content-info');
339const storeSelectorValueContainer = document.querySelector('.store-selector-value-container');
340const storeSelectorIconFlagContainer = document.querySelector('.store-selector-icon-flag-container');
341const storeSelectorIconValue = document.querySelector('.store-selector-icon-value');
342const storeSelectorValue = document.querySelector('.store-selector-value');
343const storeSelectorIconChevron = document.querySelector('.store-selector-chevron');
344const storeSelectorList = document.querySelector('.store-selector-list');
345const storeSelectorSeoList = document.querySelector('.store-selector-seo-list');
346const storeSelectorItemAnchors = document.querySelectorAll('.store-selector-item-anchor');
347const storeSelectorNotification = document.querySelector('.store-selector-notification');
348const storeSelectorChipsContainer = document.querySelector('.store-selector-chips');
349const storeSelectorButton = document.querySelector('.store-selector-button');
350
351
352// EVENTS
353document.addEventListener('DOMContentLoaded', () => {
354
355    // CREATE BASIC VALUE
356    getDefaultValue();
357
358    // CREATE COUNTRIES LIST
359    addCountriesList(countries);
360
361    // REMOVE SEO LIST FROM DOM
362    storeSelectorSeoList.remove();
363
364    // REMOVE REDIRECTS

365    storeSelectorItemAnchors.forEach(anchor => {
366        anchor.addEventListener('click', (event) => {
367            event.preventDefault();
368        });
369    });
370
371    // OUTSIDE LIST CLICK
372    window.addEventListener('click', (event) => {
373        if (!/value|icon|list|item/.exec(event.target.classList.value)) {
374            storeSelectorList.classList.remove('store-selector-visible');
375            storeSelectorIconChevron.classList.remove('store-selector-chevron-rotate');
376            storeSelectorValueContainer.classList.remove('store-selector-value-container-active');
377        }
378    });
379
380    // INSIDE INPUT LIST CLICK
381    storeSelectorValueContainer.addEventListener('click', () => {
382        const storeSelectorItems = document.querySelectorAll('.store-selector-item');
383
384        storeSelectorItems.forEach(item => {
385            if (storeSelectorValue.textContent.includes(item.textContent)) {
386                item.classList.add('store-selector-item-active');
387            } else {
388                item.classList.remove('store-selector-item-active');
389            }
390        });
391
392        storeSelectorValueContainer.classList.toggle('store-selector-value-container-active');
393        storeSelectorList.classList.toggle('store-selector-visible');
394        storeSelectorIconChevron.classList.toggle('store-selector-chevron-rotate');
395    });
396})
397
398// METHODS
399const getDefaultValue = () => {
400    const langCookie = getCookieValue(cookieLang);
401    const cookieLangCountryCode =  langCookie.length ?
402        langCookie.split('/').slice(1,2)[0].toUpperCase() === defaultCountryCode ? globalStoreCountryCode :
403            langCookie.split('/').slice(1,2)[0].toUpperCase() : '';
404    const defaultCountry = langCookie && langCookie.length ?
405        countries[cookieLangCountryCode] : countries[countryCode.toUpperCase()] || countries[selectCountryCode];
406
407    if (defaultCountry.englishName === selectCountryName) {
408        storeSelectorValue.classList.add('store-selector-value-select');
409    } else {
410        storeSelectorValue.classList.remove('store-selector-value-select');
411    }
412
413    handleCountry(defaultCountry)
414}
415
416const addCountriesList = (countriesObj) => {
417    const countries = Object.assign({}, countriesObj)
418    delete countries['SELECT'];
419
420    const countriesList = Object.values(countries);
421
422    countriesList.forEach((country) => {
423        let selectedLanguage = browserLang !== country.defaultLanguage ?
424            Object.keys(country.languageVersions).includes(browserLang) ?
425                country.languageVersions[browserLang] : country.languageVersions[country.defaultLanguage] :
426            country.languageVersions[country.defaultLanguage];
427
428        let countryItem = document.createElement('li');
429        let iconContainer = document.createElement('div');
430        let icon = document.createElement('div');
431        let anchor = document.createElement('a');
432
433        icon.classList.add('store-selector-icon');
434        icon.classList.add(`store-selector-icon-flag-${country.countryCode.toUpperCase()}`);
435
436        iconContainer.classList.add('store-selector-icon-container');
437        iconContainer.appendChild(icon);
438
439        anchor.classList.add('store-selector-item-anchor');
440
441        anchor.href = selectedLanguage.storeURL;
442
443        anchor.innerText = handleItemValue(country.englishName, selectedLanguage.countryName)
444
445        anchor.addEventListener('click', (event) => {
446            event.preventDefault();
447        });
448
449        countryItem.classList.add('store-selector-item');
450        countryItem.setAttribute('data-name', selectedLanguage.countryName);
451
452        countryItem.setAttribute('data-lang', selectedLanguage.storeURL);
453
454        countryItem.appendChild(iconContainer);
455        countryItem.appendChild(anchor);
456
457        if (storeSelectorValue.textContent.includes(countryItem.textContent)) {
458            countryItem.classList.add('store-selector-item-active');
459        } else {
460            countryItem.classList.remove('store-selector-item-active');
461        }
462
463        countryItem.addEventListener('click', () => handleItemClick(country));
464
465        storeSelectorList.appendChild(countryItem);
466    })
467}
468
469const handleLogoSubheader = (selectedLanguage) => {
470    const { logoSubheader } = selectedLanguage;
471
472    storeSelectorLogoSubheader.textContent = logoSubheader;
473}
474
475const handleContentInfo = (selectedLanguage) => {
476    const { contentInfo } = selectedLanguage;
477
478    storeSelectorContentInfo.textContent = contentInfo;
479}
480
481const handleIconFlag = (countryCode) => {
482    let iconClass;
483    const isFlagVisible = countryCode !== 'select';
484
485    if (storeSelectorIconValue.classList.length > 0) {
486        storeSelectorIconValue.classList.forEach((item) => {
487            if (item && item.includes('store-selector-icon-flag-')) {
488                iconClass = item;
489            }
490        });
491    }
492
493    if (iconClass && iconClass.length) {
494        storeSelectorIconValue.classList.replace(iconClass, `store-selector-icon-flag-${countryCode}`);
495    } else {
496        storeSelectorIconValue.classList.add(`store-selector-icon-flag-${countryCode}`);
497    }
498
499    if (isFlagVisible) {
500        storeSelectorIconFlagContainer.classList.add('store-selector-visible');
501    }
502}
503
504const handleNotification = (selectedLanguage) => {
505    const { notification } = selectedLanguage;
506
507    if (notification.length > 0) {
508        storeSelectorNotification.classList.add('store-selector-visible');
509        storeSelectorNotification.textContent = notification;
510    } else {
511        storeSelectorNotification.classList.remove('store-selector-visible');
512        storeSelectorNotification.textContent = '';
513    }
514}
515
516const addChips = (name, chips, selectedIdx) => {
517    chips.forEach((chip, idx) => {
518        if (chip.languageName.length) {
519            let item = document.createElement('div');
520
521            item.classList.add('store-selector-chip');
522
523            if (selectedIdx === idx) {
524                item.classList.add('selected-chip');
525            }
526
527            item.setAttribute('data-name', name);
528            item.setAttribute('data-lang', chip.storeURL);
529            item.innerText = chip.languageName;
530            item.addEventListener('click', () => handleChipClick(chip, idx));
531
532            storeSelectorChipsContainer.appendChild(item);
533        }
534    })
535};
536
537const removeChips = () => {
538    if (storeSelectorChipsContainer.children.length > 0) {
539        while (storeSelectorChipsContainer.firstChild) {
540            storeSelectorChipsContainer.firstChild.remove()
541        }
542    }
543}
544
545const handleItemValue = (englishName, countryName) => {
546    const singleCountryNames = [defaultCountryName, selectCountryName];
547    return !singleCountryNames.includes(countryName)  ? `${countryName} (${englishName})` : `${countryName}`;
548}
549
550const handleButton = (selectedChip) => {
551    const { goToStore, storeURL, countryName } = selectedChip;
552
553    const url = `${window.location.origin}${selectedChip.storeURL}`;
554    const isPointerEventsActive = countryName !== 'Select';
555
556    storeSelectorButton.setAttribute('href', url);
557    storeSelectorButton.setAttribute('data-lang', storeURL);
558
559    storeSelectorButton.style.pointerEvents = isPointerEventsActive ? 'auto' : 'none';
560
561
562    if (isPointerEventsActive) {
563        storeSelectorButton.classList.add('store-selector-button-active');
564    }
565
566    storeSelectorButton.textContent = goToStore;
567}
568
569const handleCountry = (selectedCountry) => {
570    const { englishName, countryCode, defaultLanguage, languageVersions } = selectedCountry;
571    const languageValues = Object.values(languageVersions);
572    const languageKeys = Object.keys(languageVersions);
573    const browserLang = (window.navigator.language).toUpperCase();
574
575    const langCookie = getCookieValue(cookieLang);
576    const cookieLangLanguageCode = languageKeys.find(key => languageVersions[key].storeURL === langCookie);
577
578    const selectedIdx = langCookie.length && languageKeys.includes(cookieLangLanguageCode) ?
579        languageKeys.indexOf(cookieLangLanguageCode) : languageKeys.includes(browserLang) ?
580        languageKeys.indexOf(browserLang) : languageKeys.indexOf(defaultLanguage);
581
582    const selectedLanguage = Object.values(languageVersions)[selectedIdx];
583
584    // CREATE SELECTED VALUE
585    storeSelectorValue.innerText = handleItemValue(englishName, selectedLanguage.countryName)
586
587    // CREATE LOGO SUBHEADER
588    handleLogoSubheader(selectedLanguage);
589
590    // CREATE CONTENT INFO
591    handleContentInfo(selectedLanguage);
592
593    // CREATE FLAG
594    handleIconFlag(countryCode);
595
596    // CREATE NOTIFICATION
597    handleNotification(selectedLanguage);
598
599    // REMOVE CHIPS IF CHIPS EXIST
600    removeChips();
601
602    // CREATE CHIPS LIST
603    addChips(englishName, languageValues, selectedIdx);
604
605    // CREATE BUTTON
606    handleButton(selectedLanguage);
607
608    if (selectedLanguage.notification.length || selectedLanguage.languageName.length) {
609        storeSelectorValueContainer.classList.add('store-selector-value-container-margin-bottom');
610    } else {
611        storeSelectorValueContainer.classList.remove('store-selector-value-container-margin-bottom');
612    }
613
614    if (languageVersions.length) {
615        storeSelectorChipsContainer.classList.add('store-selector-chips-padding');
616    } else {
617        storeSelectorChipsContainer.classList.remove('store-selector-chips-padding');
618    }
619}
620
621// HANDLERS

622const handleItemClick = (country) => {
623    // CREATE COUNTRY
624    handleCountry(country);
625
626    storeSelectorList.classList.remove('store-selector-visible');
627
628    if (country.englishName !== selectCountryName) {
629        storeSelectorValue.classList.remove('store-selector-value-select');
630    }
631
632    storeSelectorIconChevron.classList.remove('store-selector-chevron-rotate');
633    storeSelectorValueContainer.classList.remove('store-selector-value-container-active');
634}
635
636const handleChipClick = (chip, idx) => {
637    const chips = document.querySelectorAll('.store-selector-chip');
638
639    chips.forEach((chip) => {
640        chip.classList.remove('selected-chip');
641    })
642    chips[idx].classList.add('selected-chip');
643
644    handleButton(chip);
645};
646
647const handleButtonClick = () => {
648    if (storeSelectorButton.getAttribute('data-lang').length) {
649        localStorage.setItem(isStoreSelectorBannerShown, isStoreSelectorBannerShownValue);
650        setCookieValue(cookieLang, storeSelectorButton.getAttribute('data-lang'), 365);
651    }
652}
653
654// COOKIE METHODS
655const setCookieValue = (key, value, exDays) => {
656    const day = new Date();
657
658    day.setTime(day.getTime() + (exDays * 30 * 24 * 60 * 60 * 1000));
659
660    const expires = 'expires=' + day.toUTCString();
661
662    document.cookie = key + '=' + value + '; ' + expires + '; path=/';
663}
664
665const getCookieValue = (cookie) => {
666    const name = cookie + "=";
667    const decodedCookie = decodeURIComponent(document.cookie);
668    const ca = decodedCookie.split(';');
669
670    for (let i = 0; i <ca.length; i++) {
671        let c = ca[i];
672
673        while (c.charAt(0) === ' ') {
674            c = c.substring(1);
675        }
676
677        if (c.indexOf(name) === 0) {
678            return c.substring(name.length, c.length);
679        }
680    }
681    return '';
682}