https://coloris.shop/Landing/formlp/js/check-colorset-items.js

1function colorsetItemsChecker() {
2  // 単品のヘアカラー商材でデベロッパー情報があるかないかを確認するためのセッション初期化
3  const colorsetStorageKey = "checkColorsetItems";
4  if (sessionStorage.getItem(colorsetStorageKey)) {
5    sessionStorage.removeItem(colorsetStorageKey);
6  }
7  // 0: デベロッパー情報の有無
8  // 1: ヘアカラー商材かどうか
9  // 2: ヘアカラー商材の定期かどうか
10  const isSingleColorsetArray = [false, false, false];
11  // ヘアカラー商材の定期がカートインされている場合にセッションが切れているか確認する処理
12  const element = document.querySelector(".js-colorset-option-values");
13  if (element) {
14    const content = element.textContent.replace(/\s+/g, "");
15    const now = new Date().getTime();
16    const colorsetOptionsData = localStorage.getItem("colorsetOptionsData");
17    if (colorsetOptionsData) {
18      const parsedData = JSON.parse(colorsetOptionsData);
19      const timeLimit = 24 * 60 * 60 * 1000;
20      //const timeLimit = 1000 * 10;
21      if (
22        parsedData.content === content &&
23        now - parsedData.timestamp >= timeLimit
24      ) {
25        // 24時間以上経過している場合の処理
26        console.log("セッション切れ");
27        let root = location.host;
28        //console.log(root);
29        if (root === "tt117.win-win.partners") {
30          root = "/Test/R5031_Coloris/";
31        } else {
32          root = "/";
33        }
34        const alertContent = `
35        <style>
36        .colorset-alert {
37          background: #d33;
38          color: #fff;
39          padding: 10px;
40          text-align: center;
41          line-height: 2;
42          margin-bottom: 10px;
43        }
44        .colorset-alert a {
45          background: #fff;
46          color: #333;
47          padding: 2px 20px;
48          margin-top: 10px;
49          display: inline-block;
50        }
51        .confirm-submit-btn.colorset-not-allowed {
52          pointer-events: none !important;
53          cursor: not-allowed !important;
54          opacity: 0.3;
55        }
56        </style>
57        <div class="colorset-alert">情報が正常に取得できませんでした。<br>この<span style="border-bottom:double 3px #fff;">商品をカートから削除後</span>、再度ヘアカラー診断をお試しください。<br><a href="${root}Form/ScoringSale/Top.aspx?scid=0000000003">ヘアカラー診断</a></div>
58        `;
59        const wrapper = element.closest(".cart-input-section");
60        if (wrapper.querySelector(".colorset-alert") == null) {
61          wrapper.insertAdjacentHTML("afterbegin", alertContent);
62        }
63        document
64          .querySelector(".confirm-submit-btn")
65          .classList.add("colorset-not-allowed");
66      } else if (parsedData.content !== content) {
67        localStorage.removeItem("colorsetOptionsData");
68        localStorage.setItem(
69          "colorsetOptionsData",
70          JSON.stringify({ content, timestamp: now })
71        );
72      }
73    } else {
74      localStorage.removeItem("colorsetOptionsData");
75      localStorage.setItem(
76        "colorsetOptionsData",
77        JSON.stringify({ content, timestamp: now })
78      );
79    }
80  } else {
81    localStorage.removeItem("colorsetOptionsData");
82    isSingleColorsetArray[0] = true; // デベロッパー情報がない
83  }
84
85  const cartinItemsName = document.querySelectorAll(
86    ".cart-heading__data--title"
87  );
88  if (cartinItemsName.length > 0) {
89    cartinItemsName.forEach((item) => {
90      let name = item.textContent.trim();
91      if (name.indexOf("カラーセット") !== -1) {
92        // item
93        //   .closest(".cart-product-list")
94        //   .querySelector(".cart-novelty")
95        //   .classList.add("is-hide");
96        item
97          .closest(".cart-product-list")
98          .querySelector(".cart-novelty")
99          .classList.add("is-colorset-novelty");
100
101        isSingleColorsetArray[1] = true; // ヘアカラー商材である
102      }
103      if (name.indexOf("定期") == -1) {
104        isSingleColorsetArray[2] = true; // ヘアカラー商材の定期である
105      }
106    });
107  }
108  sessionStorage.setItem(
109    colorsetStorageKey,
110    JSON.stringify(isSingleColorsetArray)
111  );
112}