出品＞カテゴリー登録

「デザイン＞PC/SP＞ページ設定」 の詳細は、こちらをご確認ください。

<div class="raku2_theme01">
    <div class="block_outer">
        <div id="raku2_ts_area">
            <div class="block_body">
                <div class="raku2_ts">
                    <h2>商品カテゴリ</h2> <!-- 全体の見出し -->
                    <!--{foreach from=$arrGlobalTree item=tree1}-->
                    <!--{if $tree1.plg_raku2_disp_flag=="1"}-->
                    <ul class="raku2_ts_level_0">
                        <li>
                            <a href="/mypage/order_list.php?category_id=<!--{$tree1.category_id}-->"
                                class="category-link"><!--{$tree1.category_name}--></a>
                            <!--{if !$tree1.children}-->
                            <!--{else}-->
                            <span class="raku2_ts_toggle">+</span>
                            <ul class="raku2_ts_level_1" data-category-id="<!--{$tree1.category_id}-->">
                                <!--{foreach from=$tree1.children item=tree2 name=loop}-->
                                <li <!--{if $smarty.foreach.loop.index==0}-->class="raku2_ts_li_1_first"<!--{/if}-->>
                                    <a href="/mypage/order_list.php?category_id=<!--{$tree2.category_id}-->"
                                        class="category-link"><!--{$tree2.category_name}--></a>
                                    <!--{if !$tree2.children}-->
                                    <!--{else}-->
                                    <span class="raku2_ts_toggle">+</span>
                                    <ul class="raku2_ts_level_2" data-category-id="<!--{$tree2.category_id}-->">
                                        <!--{foreach from=$tree2.children item=tree3}-->
                                        <li><a href="/mypage/order_list.php?category_id=<!--{$tree3.category_id}-->"
                                                class="category-link"><!--{$tree3.category_name}--></a>
                                        </li>
                                        <!--{/foreach}-->
                                    </ul>
                                    <!--{/if}-->
                                </li>
                                <!--{/foreach}-->
                                <!--{/if}-->
                            </ul>
                        </li>
                    </ul>
                    <!--{/if}-->
                    <!--{/foreach}-->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.querySelectorAll('.raku2_ts .raku2_ts_toggle').forEach(toggle => {
        toggle.addEventListener('click', function (e) {
            const ul = this.parentElement.querySelector('ul');
            if (ul && ul.classList.contains('raku2_ts_level_0')) {
                closeAllChildren(ul);
            }
            if (ul && (ul.classList.contains('raku2_ts_level_1') || ul.classList.contains('raku2_ts_level_2'))) {
                const isVisible = ul.classList.contains('visible');

                if (isVisible) {
                    ul.style.maxHeight = "0";
                    ul.classList.remove('visible');
                } else {
                    ul.style.maxHeight = "0";
                    ul.classList.add('visible');
                    const outerHeight = ul.scrollHeight;
                    setTimeout(() => (ul.style.maxHeight = `${outerHeight}px`), 10);
                }

                this.textContent = isVisible ? '+' : '−';

                if (isVisible) {
                    return;
                }
                if (ul.classList.contains('raku2_ts_level_2')) {
                    updateTreeLevel2Height(ul);
                }
            }
            e.stopPropagation();
        });
    });

    // 最上位カテゴリを閉じる時は全て閉じる、子カテゴリはそのまま
    function closeAllChildren(ul) {
        const children = ul.querySelectorAll('.raku2_ts_level_1, .raku2_ts_level_2');
        children.forEach(child => {
            child.classList.remove('visible');
            child.style.maxHeight = "0";
        });
    }

    // 高さの補正
    function updateTreeLevel2Height(level2) {
        const treeLevel2 = level2;
        const parentElement = treeLevel2.closest('.raku2_ts_level_1');
        const parentHeight = parentElement.offsetHeight;
        const level2Height = level2.scrollHeight;
        parentElement.style.maxHeight = `${parentHeight + level2Height}px`;
    }
    
    document.addEventListener('DOMContentLoaded', function () {
        // 現在のURLからクエリパラメータを取得
        const urlParams = new URLSearchParams(window.location.search);
        const categoryId = urlParams.get('category_id'); // 現在選択されたカテゴリID

        if (categoryId) {
            const activeLink = document.querySelector(`.raku2_ts a[href*="category_id=${categoryId}"]`);

            if (activeLink) {
                // アクティブリンクにスタイルを追加
                activeLink.classList.add('active');

                // 階層の状態を制御
                handleCategoryVisibility(activeLink);
            }
        }
    });

    // 階層の親要素を再帰的に開く
    function openParentsRecursively(element) {
        if (!element) return;

        // 自身のカテゴリを開く
        openCategory(element);

        // 親階層を探す
        const parentUl = element.closest('.raku2_ts_level_1, .raku2_ts_level_0');
        if (!parentUl || parentUl === element) return;

        openParentsRecursively(parentUl);
    }

    // URLクエリパラメータのカテゴリに基づいて表示制御
    function handleCategoryVisibility(activeLink) {
        const targetUl = activeLink.closest('.raku2_ts_level_2, .raku2_ts_level_1, .raku2_ts_level_0');
        openParentsRecursively(targetUl);
    }

    // 指定したカテゴリを開く
    function openCategory(categoryElement) {
        if (categoryElement) {

            if (categoryElement.classList.contains('raku2_ts_level_1')) {
                let totalHeight = categoryElement.scrollHeight;

                const childLevels = categoryElement.querySelectorAll('.raku2_ts_level_2');
                childLevels.forEach(child => {
                    totalHeight += child.scrollHeight;
                });

                categoryElement.style.maxHeight = `${totalHeight}px`;
            } else if (categoryElement.classList.contains('raku2_ts_level_2')) {
                categoryElement.style.maxHeight = `${categoryElement.scrollHeight}px`;
            }
            categoryElement.classList.add('visible');

            updateToggle(categoryElement);
        }
    }
    // トグルの表示を更新
    function updateToggle(categoryElement) {
        const liElement = categoryElement.closest('li');
        if (liElement) {
            const toggleElement = liElement.querySelector('.raku2_ts_toggle');
            if (toggleElement) {
                const isVisible = categoryElement.classList.contains('visible');
                toggleElement.textContent = isVisible ? '−' : '+';
            }
        }
    }
</script>

    #raku2_ts_area h2 {
        background-color: transparent;
        color: var(--main-color);
        font-size: 140%;
        font-weight: 600;
        text-align: left;
        padding: 10px;
        margin: 0;
        border: none;
    }

    .raku2_ts .raku2_ts_level_0 {
        list-style-type: none;
        padding: 0;
        margin: 0;
        width: 218px;
        background-color: white;
    }

    .raku2_ts li {
        word-wrap: break-word;
    }

    .raku2_ts .raku2_ts_level_0>li {
        padding: 10px;
        cursor: pointer;
        font-weight: bold;
        position: relative;
    }

    .raku2_ts .raku2_ts_level_1>li {
        font-weight: bold;
        cursor: pointer;
        position: relative;
        padding-bottom: 5px;
    }

    .raku2_ts .raku2_ts_level_1 .raku2_ts_li_1_first {
        padding-top: 15px;
    }

    .raku2_ts .raku2_ts_level_2>li {
        font-weight: normal;
        padding-bottom: 5px;
    }

    .raku2_ts .toggle {
        float: right;
        font-weight: bold;
        cursor: default;
    }

    .raku2_ts .raku2_ts_level_1>li .toggle {
        float: none;
        position: absolute;
        right: 10px;
        color: #888;
        font-weight: bold;
    }

    .raku2_ts .raku2_ts_level_1 {
        list-style-type: none;
        background-color: #f0ebe5;
        padding-left: 10px;
        margin: 0;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease-out;
    }

    .raku2_ts .raku2_ts_level_1.visible {
        max-height: 9999px;
    }

    .raku2_ts .raku2_ts_level_2 {
        list-style-type: none;
        background-color: #f0ebe5;
        padding-left: 20px;
        margin: 0;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease-out;
    }

    .raku2_ts .raku2_ts_level_2.visible {
        max-height: 9999px;
    }