https://www.toli.co.jp/showroom/js/cms_top.js

1const { createClient } = microcms;
2
3const client = createClient({
4  serviceDomain: "tolishowroom", // service-domain は XXXX.microcms.io の XXXX 部分
5  apiKey: "73ZaGymV5FBGgjJmldTueZyMug8QV9CIoYfK",
6});
7client
8  .get({
9    endpoint: "news",
10  })
11  .then((res) => {
12    const newsList = res.contents;
13    const newsContainer = document.getElementById("showroom_news");
14
15    if (newsList.length === 0) {
16      // newsListが0であればshowroom_newsを非表示にする
17      newsContainer.style.display = "none";
18      return;
19      // 以降の処理を実行しない
20    }
21    // newsList を publishedAt 順にソート
22    newsList.sort((a, b) => new Date(b.publishedAt) - new Date(a.publishedAt));
23    let newsHtml = "";
24
25    newsList.forEach((news) => {
26      const publishedDate = new Date(news.publishedAt);
27      const formattedDate = `${publishedDate.getFullYear()}.${(
28        "0" +
29        (publishedDate.getMonth() + 1)
30      ).slice(-2)}.${("0" + publishedDate.getDate()).slice(-2)}`;
31
32      // 表示するショールーム名を生成
33      let showroomList = "";
34      if (news.showroom.length === 7) {
35        showroomList = `<li class="p-top__newsShowroomCategory p-top__pictShowroom">全国</li>`;
36      } else {
37        news.showroom.forEach((showroom) => {
38          showroomList += `<li class="p-top__newsShowroomCategory p-top__pictShowroom">${showroom}</li>`;
39        });
40      }
41
42      const currentDate = new Date();
43      const timeDifference = Math.abs(
44        currentDate.getTime() - publishedDate.getTime(),
45      );
46      // 切り捨てを使用
47      const differenceInDays = Math.floor(timeDifference / (1000 * 3600 * 24));
48
49      let hasNewClass = "";
50
51      // 今日がpublishedAtを起点に4日後以降でない場合のみ以下の条件を確認
52      if (differenceInDays < 4) {
53        if (news.has_new) {
54          hasNewClass = "p-top__newsPict";
55        }
56      }
57
58      const link = news.has_detail
59        ? `/showroom/detail.html?id=${news.id}`
60        : news.url;
61
62      const titleDisplay =
63        news.has_detail === false && !news.url
64          ? `<p>${news.title}</p>`
65          : `<a class="p-top__newsLink" href="${link}">${news.title}</a>`;
66
67      newsHtml += `
68        <dl class="p-top__newsItem">
69          <dt class="p-top__newsTtl ${hasNewClass}">
70            <time class="p-top__newsTime" datetime="${formattedDate}">${formattedDate}</time>
71          </dt>
72          <dd class="p-top__newsDes">
73            <ul class="p-top__newsShowroomCategoryList">
74              ${showroomList}
75            </ul>
76            ${titleDisplay}
77          </dd>
78        </dl>`;
79    });
80
81    newsContainer.innerHTML = `
82      <div class="p-top__newsContents">
83        <div class="p-top__news__headArea">
84          <h2 class="p-top__news__headTtl">ショールームからのお知らせ</h2>
85        </div>
86        <div class="p-top__newsLists">
87          ${newsHtml}
88        </div>
89      </div>`;
90  });