2024.3.14 即將上線

NPB 商品類別元件調整數量上限至 8 個商品類別

在 NPB 中可自訂商品類別元件於 PC & Mobile 端的展示方式，PC 端控制數量 1~8 個，Mobile 端控制數量 1~4 個；

主要異動 CSS 代碼

.category__item-container {
  display: grid;
  padding: 0;

  @media (min-width: 768px) {
    margin-top: -$desktop-gap;
    margin-bottom: -$desktop-gap;
    padding: $desktop-gap;
  }

  .category__image-container:hover {
    &::after {
      background-color: rgba(#000, 0.5);
    }
    .category__img {
      filter: grayscale(1);
    }
  }
}

.category__item {
  @media screen and (max-width: 767px) {
    padding: 0 $mobile-gap;
  }
}

影響範圍

商品類別元件

異動情況

我們對佈局系統進行了重大更新，以更好地支援列設定。原本的彈性佈局（Flex Layout）已更改為網格佈局（Grid Layout）。這表示原本的單行顯示現在會根據列設定進行換行顯示。這將為用戶提供更大的靈活性和控制力，使他們能夠更好地自訂和管理佈局。

由於佈局的更改，項目之間的間距控制也進行了更新。原本由padding和gap控制的項目間距現在由padding和grid-column-gap或grid-row-gap來控制。這將使間距控制更加精細，更符合網格佈局的特性。

建議修改

如果店家有通過 JavaScript 在商品類別元件中添加其他內容，需要檢查是否有跑版情況；

如果店家有對商品類別元件客製化修改過 item 間距，建議檢查舊的 CSS attribute 是否生效；

商品類別 hover 動畫由原本的其他項目加上遮罩，變成當前目標加上遮罩，如果有客製化過 hover 動畫也需要檢查是否有跑版情況。