[GSCP] 検索結果を1000件取得して初期20件、「もっと見る」で20件ずつ追加表示することはできますか？

変更日木, 18 6月で 3:09 午後

下記のコードはサンプルです。弊社ではサポートできかねますので、十分に注意してご利用ください。

※【前提】GSCP標準機能

スタイルシート例

/* 21番目以降のアイテムをデフォルトで非表示 */
div._items div._item:nth-child(n+21) {
    display: none;
}

/* 表示クラスが付与されたアイテムを表示 */
div._items div._item._is-visible {
    display: block !important;
}

/* 「もっと見る」ボタンのスタイル */
#load-more-btn {
    display: block;
    width: 200px;
    margin: 20px auto;
    padding: 10px;
    text-align: center;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 4px;
}

#load-more-btn:hover {
    background-color: #e0e0e0;
}

/* 全件表示されたらボタンを隠す */
#load-more-btn._hidden {
    display: none;
}

JavaScript

設定タグ中に ` allUpdateHook ` を追加します。

    resultCountList: [1000],
    allUpdateHook: function() {
        const items = document.querySelectorAll('div._items div._item');
        const itemsPerPage = 20;
        const storageKey = 'poplink_display_count';

        // 1. 保存された表示件数を取得（なければ初期値10）
        let currentCount = parseInt(sessionStorage.getItem(storageKey)) || itemsPerPage;

        // 2. 保存されていた件数分を表示状態にする
        items.forEach((item, index) => {
            if (index < currentCount) {
                item.classList.add('_is-visible');
            }
        });

        // ボタンの重複防止
        const oldBtn = document.getElementById('load-more-btn');
        if (oldBtn) oldBtn.remove();

        // 3. 全件表示済みでなければボタンを生成
        if (items.length > currentCount) {
            const btn = document.createElement('div');
            btn.id = 'load-more-btn';
            btn.innerText = 'もっと見る';
            
            const container = document.querySelector('div._items');
            container.parentNode.insertBefore(btn, container.nextSibling);

            btn.addEventListener('click', function() {
                const nextCount = currentCount + itemsPerPage;
                
                items.forEach((item, index) => {
                    if (index >= currentCount && index < nextCount) {
                        item.classList.add('_is-visible');
                    }
                });

                currentCount = nextCount;
                // 4. 表示件数をセッションに保存
                sessionStorage.setItem(storageKey, currentCount);

                if (currentCount >= items.length) {
                    btn.classList.add('_hidden');
                }
            });
        }
    },