Description : Show discounts for games on steam, it uses the cheapshark.com API

https://www.cheapshark.com/api/1.0/deals...ageSize=60

It can be placed by using the variable : {$steamdiscount}

Author : https://community.mybb.com/user-132128.html

Configuration:
You can add your own CSS for it by going to :

ACP -> Teplates&Styles -> Themes -> Your theme ->  Add Stylesheet

Name the file steamdiscounts.css

Attached to:  Globally
Check the box Write my own content

UPDATE 20.04.2025

- Added a setting page of the plugin to update the API directly in ACP
- Added a  cache local system with the duration of 1 hour so that it will not make as many calls making the api to get blocked for your website.
- Added a debug function so that it will create a steam_api_debug.json fil in your board files that can display possible errors

My Example of steamdiscounts.css :

.steam-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    height: 210px;
    text-align: center;
}

.steam-slide {
    display: none;
    padding: 10px;
    color: #fff;
}

.steam-slide.active {
    display: block;
    animation: fade 0.5s ease-in-out;
}

.steam-slide a img {
    width: 100%;
    height: 90px;
    object-fit: contain;
    border-radius: 4px;
    margin-bottom: 5px;
    transition: transform 0.3s ease;
    background: #000;
}

.steam-slide a img:hover {
    transform: scale(1.05);
}

.steam-slide h4 {
    margin: 5px 0;
    font-size: 14px;
    color: #fff;
}

.steam-slide .price {
    font-size: 13px;
    color: #ccc;
}

.steam-slide .discount {
    color: #4caf50;
    font-weight: bold;
}

.view-link {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    background: #1760bb;
    color: white;
    font-size: 12px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
}

.view-link:hover {
    background: #114a91;
}

.steam-slider-controls {
    position: absolute;
    top: 40%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.steam-slider-controls button {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 18px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 4px;
    pointer-events: all;
}

.steam-slider-controls button:hover {
    background: rgba(23, 96, 187, 0.7);
}

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

Sự miêu tả: Hiển thị giảm giá cho các trò chơi trên steam, nó sử dụng API cheapshark.com

https://www.cheapshark.com/api/1.0/deals...ageSize=60

Nó có thể được đặt bằng cách sử dụng biến: {$steamdiscount}

Tác giả: https://community.mybb.com/user-132128.html

Cấu hình:
Bạn có thể thêm CSS của riêng mình cho nó bằng cách truy cập:

ACP -> Teplates & Styles -> Chủ đề -> Chủ đề của bạn -> Thêm Stylesheet

Đặt tên cho tệp steamdiscounts.css

Đính kèm với:  Trên toàn cầu
Đánh dấu vào hộp Viết nội dung của riêng tôi

CẬP NHẬT 20.04.2025

- Thêm trang cài đặt của plugin để cập nhật API trực tiếp trong ACP
- Đã thêm một hệ thống cục bộ bộ nhớ cache với thời lượng 1 giờ để nó không thực hiện nhiều cuộc gọi thực hiện api bị chặn cho trang web của bạn.
- Thêm chức năng gỡ lỗi để nó sẽ tạo một tệp steam_api_debug.json trong các tệp bảng của bạn có thể hiển thị các lỗi có thể xảy ra

Ví dụ của tôi về steamdiscounts.css :

.steam-slider {
    vị trí: tương đối;
    tràn: ẩn;
    chiều rộng: 100%;
    chiều rộng tối đa: 100%;
    chiều cao: 210px;
    text-align: giữa;
}

.steam-slide {
    hiển thị: không có;
    đệm: 10px;
    màu sắc: #fff;
}

.steam-slide.active {
    hiển thị: khối;
    hoạt hình: mờ dần 0,5 giây;
}

.steam-slide một img {
    chiều rộng: 100%;
    chiều cao: 90px;
    object-fit: chứa;
    bán kính viền: 4px;
    lề-đáy: 5px;
    chuyển đổi: biến đổi 0,3 giây dễ dàng;
    nền: #000;
}

.steam-slide a img:hover {
    biến đổi: tỷ lệ (1.05);
}

.steam-slide h4 {
    lề: 5px 0;
    kích thước phông chữ: 14px;
    màu sắc: #fff;
}

.steam-slide .price {
    kích thước phông chữ: 13px;
    màu sắc: #ccc;
}

.steam-slide .discount {
    màu sắc: #4caf50;
    font-weight: in đậm;
}

.view-link {
    hiển thị: khối nội tuyến;
    lề trên cùng: 6px;
    đệm: 4px 10px;
    Bối cảnh: #1760bb;
    Màu sắc: trắng;
    kích thước phông chữ: 12px;
    trang trí văn bản: không có;
    bán kính viền: 4px;
    chuyển tiếp: nền 0,3 giây;
}

.view-link:di chuột {
    Bối cảnh: #114a91;
}

.steam-slider-controls {
    vị trí: tuyệt đối;
    hàng đầu: 40%;
    chiều rộng: 100%;
    hiển thị: linh hoạt;
    justify-content: khoảng cách giữa;
    biến đổi: translateY(-50%);
    sự kiện con trỏ: không có;
}

.steam-slider-controls {
    nền: rgba (0,0,0,0.5);
    Màu sắc: trắng;
    biên giới: không có;
    kích thước phông chữ: 18px;
    đệm: 4px 10px;
    con trỏ: con trỏ;
    bán kính viền: 4px;
    sự kiện con trỏ: tất cả;
}

.steam-slider-controls nút:di chuột {
    nền: rgba (23, 96, 187, 0.7);
}

@keyframes mờ {
    từ { độ mờ: 0; }
    đến { opacity: 1; }
}