home-assistant.io/source/_includes/custom/buy-dialog.html

{% if include.product and site.data.products[include.product] %}
    {% assign product = site.data.products[include.product] %}
    {% assign distributor_regions = product.distributors | group_by: 'ship_to' %}
    {% assign distributor_countries = product.distributors | group_by: 'flag_iso' %}
{% endif %}

<div class="ha-buy-dialog">
    <div class="ha-buy-dialog-inner">
        <div class="ha-buy-dialog-header">
            <div class="product-name">{{ product.name }}</div>
            <div class="close">
                <svg width="24" height="24" viewBox="0 0 24 24">
                    <path
                      d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
                  </svg>
            </div>
        </div>
        <div class="ha-buy-dialog-content">
            <div class="new">
                <select>
                    <option>Choose your country</option>
                    <option value="us">{{ site.data.countries["us"] }}</option>
                    <option value="cn">{{ site.data.countries["cn"] }}</option>
                    <option value="au">{{ site.data.countries["au"] }}</option>
                    <option value="cz">{{ site.data.countries["cz"] }}</option>
                    <option value="pl">{{ site.data.countries["pl"] }}</option>
                    <option value="it">{{ site.data.countries["it"] }}</option>
                    <option value="fr">{{ site.data.countries["fr"] }}</option>
                    <option value="gb">{{ site.data.countries["gb"] }}</option>
                    <option value="hu">{{ site.data.countries["hu"] }}</option>
                    <option value="nl">{{ site.data.countries["nl"] }}</option>
                    <option value="no">{{ site.data.countries["no"] }}</option>
                    <option value="pt">{{ site.data.countries["pt"] }}</option>
                    <option value="de">{{ site.data.countries["de"] }}</option>
                    <option value="se">{{ site.data.countries["se"] }}</option>
                    <option value="ch">{{ site.data.countries["ch"] }}</option>
                    <option value="dk">{{ site.data.countries["dk"] }}</option>
                    <option value="sk">{{ site.data.countries["sk"] }}</option>
                    <option value="ro">{{ site.data.countries["ro"] }}</option>
                </select>
            </div>

            <div class="ha-buy-dialog-tab-content-wrapper">
                {% for distributor_region in distributor_countries %}
                <div class="ha-buy-dialog-tab-content {% if forloop.first %}active{% endif %} active" id="{{ distributor_region.name | slugify }}">

                    <div class="ha-buy-dialog-distributor-items">
                        {% for distributor in distributor_region.items %}
                        <a href="{{ distributor.url }}" target="_blank" rel="noreferrer" class="ha-buy-dialog-distributor-item">
                            {% if distributor.logo %}
                            <img src="{{ distributor.logo }}" alt="{{ distributor.name }} logo" class="ha-buy-dialog-distributor-logo">
                            {% else %}
                            {{ distributor.name }}
                            {% endif %}
                            {% if distributor.ship_from %}
                            <span>Ships from {{ distributor.ship_from }}</span>
                            {% endif %}
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        
        let dialog = document.querySelector('.ha-buy-dialog');
        let tabs = dialog.querySelectorAll('.ha-buy-dialog-sidebar-tab');
        let tabContents = dialog.querySelectorAll('.ha-buy-dialog-tab-content');

        let select = dialog.querySelector('.new select');
        select.addEventListener('change', function () {
            let value = select.value;
            let tabContents = dialog.querySelectorAll('.ha-buy-dialog-tab-content');

            tabContents.forEach(tabContent => tabContent.classList.remove('active'));
            tabContents.forEach(tabContent => {
                if (tabContent.id === value) {
                    tabContent.classList.add('active');
                }
            });
        });

        tabs.forEach(tab => {
            tab.addEventListener('click', function () {
                tabs = dialog.querySelectorAll('.ha-buy-dialog-sidebar-tab');

                tabs.forEach(tab => tab.classList.remove('active'));
                tabContents.forEach(tabContent => tabContent.classList.remove('active'));

                let tabContent = dialog.querySelector(tab.getAttribute('data-tab'));
                if(!tabContent) return;

                tab.classList.add('active');
                tabContent.classList.add('active');
            })
        });

        let close = dialog.querySelector('.close');
        close.addEventListener('click', function () {
            dialog.classList.remove('open');
        });

        let openTargets = document.querySelectorAll('.buy');
        openTargets.forEach(target => {
            target.addEventListener('click', function (e) {
                e.preventDefault();
                dialog.classList.add('open');
                focusDistributors(dialog);
            });
        });

        if (window.location.hash === '#buy') {
            dialog.classList.add('open');
            focusDistributors(dialog);
        }

        dialog.addEventListener('click', function (e) {
            if (!e.target.closest('.ha-buy-dialog-inner')) {
                dialog.classList.remove('open');
            }
        });

        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') {
                dialog.classList.remove('open');
            }
        });

    });

    function focusDistributors(dialog){
        return;
        let tabs = dialog.querySelectorAll('.ha-buy-dialog-sidebar-tab');
        let tabContents = dialog.querySelectorAll('.ha-buy-dialog-tab-content');
        let timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        let region = timezone.split('/')[0].toLowerCase();
        let locale = Intl.DateTimeFormat().resolvedOptions().locale;
        let countryCode = locale.split('-')[1].toLowerCase();

        
        let defaultTab = dialog.querySelector(`.ha-buy-dialog-sidebar-tab[data-tab="#${region}"]`);
        if (defaultTab) {
            tabs.forEach(tab => tab.classList.remove('active'));
            tabContents.forEach(tabContent => tabContent.classList.remove('active'));

            defaultTab.classList.add('active');
            let tabContent = document.querySelector(defaultTab.getAttribute('data-tab'));
            tabContent.classList.add('active');

            let country = tabContent.querySelector(`.ha-buy-dialog-distributor-country[data-code="${countryCode}"]`);
            if (country) {
                country.scrollIntoView({ behavior: 'instant', block: 'center' });
            }
        }
    }
</script>