もっといい方法があるかもしれませんが、
セッションストレージを使用するのはいかがでしょうか？
[参考]
https://into-the-program.com/execution-firsttime-access/
https://hidekazu-blog.com/javascript-web-storage/
具体的に言いますと下記のようにコードを編集します。
loader.liquidの下記の部分を、
document.addEventListener('DOMContentLoaded', () => {
const links = document.querySelectorAll('a');
const preloaderHtml = document.getElementsByClassName('loader')[0];
const windowLocationPathnameTrim = removeLastSlash(window.location.pathname);
const domain = '{{shop.domain}}';
const permanent_domain = '{{shop.permanent_domain}}';
const excluded_classes = ["js-", "cart", "ajax", "toggle"];
if (preloaderHtml) {
links.forEach(link => {
const isExcluded = containsExcluded(link.classList, excluded_classes);
const url = link.getAttribute('href');
const isNewWindow = link.getAttribute('target');
const isSameDomain = (link.hostname === domain || link.hostname === permanent_domain);
const linkPathnameTrim = removeLastSlash(link.pathname);
let navigatingWithinPage = true;
if (isSameDomain) {
navigatingWithinPage = url.startsWith('#') ||
(linkPathnameTrim === windowLocationPathnameTrim && url.includes((link.pathname + '#')));
}
if (!isNewWindow && isSameDomain && !navigatingWithinPage && !isExcluded) {
link.addEventListener('click', function (event) {
event.preventDefault();
const url = this.getAttribute('href');
preloaderHtml.classList.add('loader--fadeOut');
setTimeout(() => window.location.href = url, 1 * 1000)
})
}
})
}
});
// fix for safari
window.addEventListener('pageshow', function (event) {
if (event.persisted) {
const preloaderHtml = document.getElementsByClassName('loader')[0];
preloaderHtml.classList.remove('loader--fadeOut');
}
});
下記のようにします。
const keyName = 'visited';
if (!sessionStorage.getItem(keyName)) {
document.addEventListener('DOMContentLoaded', () => {
const links = document.querySelectorAll('a');
const preloaderHtml = document.getElementsByClassName('loader')[0];
const windowLocationPathnameTrim = removeLastSlash(window.location.pathname);
const domain = '{{shop.domain}}';
const permanent_domain = '{{shop.permanent_domain}}';
const excluded_classes = ["js-", "cart", "ajax", "toggle"];
if (preloaderHtml) {
links.forEach(link => {
const isExcluded = containsExcluded(link.classList, excluded_classes);
const url = link.getAttribute('href');
const isNewWindow = link.getAttribute('target');
const isSameDomain = (link.hostname === domain || link.hostname === permanent_domain);
const linkPathnameTrim = removeLastSlash(link.pathname);
let navigatingWithinPage = true;
if (isSameDomain) {
navigatingWithinPage = url.startsWith('#') ||
(linkPathnameTrim === windowLocationPathnameTrim && url.includes((link.pathname + '#')));
}
if (!isNewWindow && isSameDomain && !navigatingWithinPage && !isExcluded) {
link.addEventListener('click', function (event) {
event.preventDefault();
const url = this.getAttribute('href');
preloaderHtml.classList.add('loader--fadeOut');
setTimeout(() => window.location.href = url, 1 * 1000)
})
}
})
}
});
// fix for safari
window.addEventListener('pageshow', function (event) {
if (event.persisted) {
const preloaderHtml = document.getElementsByClassName('loader')[0];
preloaderHtml.classList.remove('loader--fadeOut');
}
});
sessionStorage.setItem(keyName, true);
} else {
document.getElementById("loader").style.display = "none";
}
インデントが適当ですので、
気になるようでしたら適宜ご修正ください。
タブを閉じたり、新しいタブでサイトを開くと「初回」と判定されます。
もし、任意の時間を1回の訪問と見做したい場合はCookieを利用する方法に変えればそのようにできるはずです。
なお、
{% include 'loader' %}こちらで利用されているincludeは、非推奨となっていますので、
https://shopify.dev/docs/api/liquid/tags/include
{% render 'loader' %}とされた方がより良いです。
ご参考まで。
(キュー田辺)
