https://www.at-contact.jp/client_info/ATCONTACT/view/userweb/js/item_detail.js?timestamp=1791163393159

1//////////////// 商品ページ_アコーディオン機能 ////////////////
2
3// アコーディオン用クラスの生成
4class ItemDetailAccordion {
5    constructor(selecter, titleSelector, detailSelector) {
6        // selecter要素を取得
7        this.accordions = document.querySelectorAll(selecter);
8
9        // 複数のselecter要素を展開
10        this.accordions.forEach((accordion) => {
11            const title = accordion.querySelector(titleSelector);
12            const detail = accordion.querySelector(detailSelector);
13
14            if (title && detail) {
15                // クリックしたらactiveクラスを付与
16                title.addEventListener("click", () => {
17                    title.classList.toggle("active");
18                    detail.classList.toggle("active");
19                });
20            }
21        })
22    }
23}
24
25// ロード時にインスタンスを生成し発火。指定クラスがconstructorに引数で渡される
26document.addEventListener("DOMContentLoaded", () => {
27    new ItemDetailAccordion(".item-accordion", ".item-title", ".item-detail");
28});
29
30//////////////// 商品ページ_レビューゲージ機能 ////////////////
31
32const initReviewGauge = () => {
33
34    // レビューゲージ機能_親要素取得（監視対象クラス）
35    const reviewGauge = document.querySelector(".review_gauge");
36
37    // 監視する位置の設定
38    const options = {
39        root: null,
40        rootMargin: "0px",
41        threshold: 0.2,
42    };
43
44    // レビューゲージ機能の関数
45    const reviewsGetCount = (entries, obs) => {
46        const entry = entries[0]; // 最初の監視対象の変数
47
48        if (!entry.isIntersecting) return; // 指定範囲に入ってなければ処理終了
49
50        const reviewCount = document.querySelector("#review_count").innerText;
51        const reviewCountNumber = Number(reviewCount);
52        const reviewCalculation = document.querySelectorAll(".review_calculation");
53
54        // 空配列定義（ここに各レビュー率が入る）
55        let reviewArray = [];
56
57        // 各レビュー率を算出して空配列に格納
58        reviewCalculation.forEach((item) => {
59            const reviewText = item.innerText;
60            const reviewlate = (Number(reviewText) / reviewCountNumber) * 100;
61            reviewArray.push(reviewlate);
62
63            // 算出したレビュー率を表示
64            item.innerText = `${reviewlate.toFixed(0)}%`;
65            item.classList.add("review_black");
66        });
67
68        // レビューゲージ箇所の取得
69        const reviewLine = document.querySelectorAll(".review_line");
70
71        // 取得した%の値をwidthで適用しゲージを表示する。
72        reviewLine.forEach((item, index) => {
73            const width = reviewArray[index];
74            item.style.width = `${width}%`;
75
76            // widthが98%以上の時、角丸にする
77            if (width >= 98) {
78                item.style.borderRadius = "5px";
79            }
80        });
81
82        // 監視を停止
83        obs.unobserve(entry.target);
84    };
85
86    // IntersectionObserverインスタンスの生成
87    const observer = new IntersectionObserver(reviewsGetCount, options);
88
89    // 監視対象が指定の範囲に入ったら、reviewsGetCountを発火
90    observer.observe(reviewGauge);
91
92}
93
94initReviewGauge();
95
96
97//////////////// 商品ページ_レビュー時刻_秒数除去機能 ////////////////
98
99const removeReviewTimeSeconds = () => {
100
101    // review_time要素をすべて取得
102    const reviewTimes = document.querySelectorAll(".review_time");
103
104    reviewTimes.forEach((item) => {
105        const reviewTimeText = item.innerText.trim();
106
107        // 掲載日：YYYY/MM/DD にする
108        item.innerText = reviewTimeText.replace(/^(.+?\d{4}[-\/]\d{1,2}[-\/]\d{1,2})\s+.*$/, "$1");
109    });
110
111}
112
113removeReviewTimeSeconds();