{*  <div class="tba_zuordnung">
{if $shopArticle->geraetezuordnung != '<table border="0" cellpadding="2" cellspacing="0"></table>'}
    <h2>{$shopArticle->name} passend f&uuml;r Ger&auml;t:</h2>
    {$shopArticle->geraetezuordnung}
{/if}
</div>  *}

{* 
{assign var="theme_image_path" value="https://{$SERVER_NAME}{$THEME_DIR}/media/images"}
{assign var="theme_js_path" value="https://{$SERVER_NAME}{$THEME_DIR}/media/js"}

<div class="tba_zuordnung">
    <h2>{$shopArticle->name} passend für Gerät:</h2>
    <div id="geraetezuordnung-container" data-article-id="{$shopArticle->id}"></div>
    <div id="loading-indicator" style="display:none; text-align: center;">
    <img src="{$theme_image_path}/loader.gif" alt="Loader">



    </div>
</div>
<script src="{$theme_js_path}/lazyload.js"></script>
 *}



{*  <div class="tba_zuordnung">
   
    <div id="geraetezuordnung-container" data-article-id="{$shopArticle->number}">
        
    
    
    
    <div class="attributes_table">
        

    {if $shopArticle->geraetezuordnung != '<table border="0" cellpadding="2" cellspacing="0"></table>'}
        <h2>{$shopArticle->name} passend f&uuml;r Ger&auml;t:</h2>
        {$shopArticle->geraetezuordnung}
                {/if}
    </div>



    </div>
    <div id="loading-indicator" style="display:none; text-align: center;">
        <img src="{$THEME_DIR}/media/images/loader.gif" alt="Loading...">
    </div>
</div>

<script src="{$THEME_DIR}/media/js/lazyload.js"></script>
 *}

 <div class="tba_zuordnung">
    <div id="geraetezuordnung-container" data-article-id="{$shopArticle->number}">
        <div class="attributes_table">
            {if $shopArticle->geraetezuordnung != '<table border="0" cellpadding="2" cellspacing="0"></table>'}
                <h2>{$shopArticle->name} passend f&uuml;r Ger&auml;t:</h2>
                <div class="lazy-content" data-loaded="false">
                    {$shopArticle->geraetezuordnung}
                </div>
            {/if}
        </div>
    </div>
    <div id="loading-indicator" style="display:none; text-align: center;">
        <img src="{$THEME_DIR}/media/images/loader.gif" alt="Loading...">
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const lazyContent = document.querySelector(".lazy-content");

    if ("IntersectionObserver" in window) {
        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && lazyContent.getAttribute("data-loaded") === "false") {
                    lazyContent.setAttribute("data-loaded", "true");
                    document.getElementById("loading-indicator").style.display = "none";
                }
            });
        });

        observer.observe(lazyContent);
    }
});
</script>
