Module «load-item-details».

Source:

https://html.ildar-meyker.ru/html-gosha/catalog.html

Демо:

Плагины:

Подключение:

//

Разметка:

// catalog.html

<div id="catalog-props"></div>
<div id="catalog-link"></div>

<div class='products'>
    <div>
        <a
            href="catalog-item.html"
            data-props-url="data-product.html"
        >
            <img
                src="img/temp/products/2/1.webp"
                alt=""
            />
        </a>
    </div>
    <div>
        <a
            href="catalog-item.html"
            data-props-url="data-product.html"
        >
            <img
                src="img/temp/products/2/2.webp"
                alt=""
            />
        </a>
    </div>
    <div>
        <a
            href="catalog-item.html"
            data-props-url="data-product.html"
        >
            <img
                src="img/temp/products/2/3.webp"
                alt=""
            />
        </a>
    </div>
   
</div>



// data-product.html

<div>
    <div id="data-link">
        <a href="catalog-item.html" class="btn-default">DETAILS</a>
    </div>

    <div id="data-props">
        <table class="table-props">
            <tr>
                <td>Size</td>
                <td>
                    <nav class="nav-tags nav-tags--sort">
                        <ul>
                            <li class="active">
                                <a href="#">S</a>
                            </li>

                            <li>
                                <a href="#">M</a>
                            </li>

                            <li>
                                <a href="#">L</a>
                            </li>

                            <li>
                                <a href="#">XL</a>
                            </li>

                            <li>
                                <a href="#">XXL</a>
                            </li>
                        </ul>
                    </nav>
                </td>
            </tr>

            <tr>
                <td>Color</td>
                <td>
                    <nav class="nav-tags nav-tags--sort">
                        <ul>
                            <li class="active">
                                <a href="#">White</a>
                            </li>

                            <li>
                                <a href="#">Blue</a>
                            </li>

                            <li>
                                <a href="#">Red</a>
                            </li>
                        </ul>
                    </nav>
                </td>
            </tr>

            <tr>
                <td>priсe</td>
                <td>75000 ₽</td>
            </tr>

            <tr>
                <td>Card</td>
                <td>
                    <button class="btn-default">ADD TO CART</button>
                </td>
            </tr>
        </table>
    </div>
</div>

Стили:

//

Инициализация:

// modules/catalog.js

let isMobile = null;
let xhr = null;

const mediaQueryMobile = window.matchMedia("(max-width: 999.98px)");

function addProductHtml(propsHtml, linkHtml) {
    $("#catalog-props").html(propsHtml);
    $("#catalog-link").html(linkHtml);
}

function handleItemClick(e) {
    if (isMobile) return;

    e.preventDefault();

    const $self = $(this);
    const url = $(this).data("props-url");

    xhr && xhr.abort();

    $self.addClass("loading");
    addProductHtml("", "");

    xhr = $.get(url)
        .done(function (data) {
            const propsHtml = $(data).find("#data-props").html();
            const linkHtml = $(data).find("#data-link").html();
            addProductHtml(propsHtml, linkHtml);
        })
        .fail((xhr) => {
            console.error(xhr);
        })
        .always(function () {
            $self.removeClass("loading");
        });
}

const handleMediaChange = (event) => {
    isMobile = event.matches;
};

$(function () {
    $(document).on("click", ".products a", handleItemClick);

    mediaQueryMobile.addEventListener("change", handleMediaChange);

    handleMediaChange(mediaQueryMobile);
});