Как я могу использовать document.referrer с двумя разными модалами? - PullRequest
Новая
       36

Как я могу использовать document.referrer с двумя разными модалами?

0 голосов
/ 03 апреля 2020

У меня есть два разных модала на моем сайте, один с указанными c доменами для таргетинга, другой - для всех страниц с доменом website.com. Оба мода нацелены на document.referrer, и каждый модал имеет свой идентификатор (#closureModal и #parkModal).

Моя проблема заключается в том, что #parkModal запускается на всех страницах (а не указывает c страниц: website.com/parks/park1, website.com/acitivies/park1 и т. Д. c), поскольку он начинается с домена website.com ,

Как я могу разрешить двум различным модалам нацеливаться на document.referrer, при этом один из них не появится там, где он не предназначен? Как я могу использовать document.referrer с двумя разными модалами?

вот код #closureModal: 

  const tsp = ["website.com"];
  const closureReferrer = document.referrer;
  const referrer_hostname = closureReferrer !== "" ? new URL(closureReferrer).hostname : "";

  if (tsp.includes(referrer_hostname)) {
    console.log("Don't Show Modal", closureReferrer);
  }  else {
    console.log("Show Modal", closureReferrer);
    $( window ).on('load', function() {
      console.log("closure modal firing");
      $('#closureModal .closure').modal({
        backdrop: 'static',
        keyboard: false,
        show: true
      });
    });

  }

#parkModal похож на код: 

const domains = ["https://website.com/parks/park1", "https://website.com/parks/events/park1", "https://website.com/parks/events/park1", "https://website.com/parks/promotions/park1", "https://website.com/parks/go-green/park1", "https://website.com/parks/info/park1", "https://website.com/parks/activities/park1", "https://website.com/parks/events/park1/#/?park=park1"];
const parkReferrer = document.referrer;

if (domains.includes(parkReferrer)) {
  console.log("Don't Show Modal - from Cummins page", parkReferrer);
} else {
  console.log("Show Modal - From other Page", parkReferrer);
  $( window ).on('load', function() {
     console.log("park modal firing");
     $('#parkModal').modal({
     backdrop: 'static',
     keyboard: false,
     show: true
     });
  });
}

1 Ответ

0 голосов
/ 03 апреля 2020

Я не сразу вижу проблему, но у меня есть несколько советов о том, что может помочь вам приблизиться как к лучшему коду, так и к тому, что легче диагностировать.

Я вижу много дублирования кода. Необходимо ли иметь два разных события окна onload, которые оба смотрят на реферер и затем решают, какой модал отображать? Я рекомендую делать все это в одном обработчике onload, который смотрит на document.referrer только один раз, а затем определяет, какой модал отображать (если есть).

Что-то вроде: 

$( window ).on('load', function() {
   console.log("park modal firing");

   // define your parkReferrers and closureReferrers here
   const referrer = document.referrer;

   const displayParkReferrerModal = parkReferrers.includes(referrer);
   const displayClosureModal = closureReferrers.includes(referrer);

   let modalToDisplay;
   if (displayParkReferrerModal) {
     modalToDisplay = '#parkModal';
   } else if (displayClosureModal) {
     modalToDisplay = '#closureModal .closure';
   }

   if (modalToDisplay) {
     console.log(modalToDisplay);
     $(modalToDisplay).modal({
       backdrop: 'static',
       keyboard: false,
       show: true    
     });
     return;
   }

   console.log('no matching modal to display');
   return;     
});

Надеюсь, это полезно. Вы также можете абстрагировать это с помощью функции handleReferrerModal, которую затем вызываете в обработчике load. Это может быть чище, если на load.

происходит несколько разных вещей.
...