Blazor WebAssembly and Javascript/jQuery

I'm attempting to integrate external HTML/CSS and JavaScript/jQuery into a default Blazor WebAssembly project, but I'm encountering numerous issues. Despite using JavaScript interoperability (JS interop) to enable JavaScript functionality, I haven't been successful. My knowledge of JavaScript is limited. I've uploaded the project to GitHub so readers can review the code and try it themselves. The features I'm struggling to implement include a sign-in modal popup, a dropdown list of top categories, and a carousel displaying the latest reviews (please refer to attached images). I'm looking for a solution that uses Blazors jsInterop.

After some trial and error, I found the solution for enabling jQuery libraries within a Blazor WebAssembly.

To initialize the jQuery code, I needed to place it inside functions. Therefore, the code below belongs to the file functions.js:

    (function ($) {

    "use strict";

    // Modal Sign In
    $('#sign-in').magnificPopup({
        type: 'inline',
        fixedContentPos: true,
        fixedBgPos: true,
        overflowY: 'auto',
        closeBtnInside: true,
        preloader: false,
        midClick: true,
        removalDelay: 300,
        closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>',
        mainClass: 'my-mfp-zoom-in'
    });

    // Jquery select
    $('.custom-search-input-2 select, .custom-select-form select').niceSelect();

    $('#reccomended').owlCarousel({
        center: true,
        items: 2,
        loop: true,
        margin: 0,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            767: {
                items: 2
            },
            1000: {
                items: 3
            },
            1400: {
                items: 3
            }
        }
    });

})(window.jQuery); 

...should be wrapped in functions that can be called from Blazor components. I created a new file, custom.js, which contains functions that wrap the above code:

//sign-in modal popup            
export function initializeModalSignIn() {
            // Modal Sign In
            $("#sign-in").magnificPopup({
                type: "inline",
                fixedContentPos: true,
                fixedBgPos: true,
                overflowY: "auto",
                closeBtnInside: true,
                preloader: false,
                midClick: true,
                removalDelay: 300,
                closeMarkup:
                    '<button title="%title%" type="button" class="mfp-close"></button>',
                mainClass: "my-mfp-zoom-in",
            });
        }
        window.initializeModalSignIn = initializeModalSignIn;
    
//Dropdown list of top categories        
export function initializeNiceSelect() {
        $(".custom-search-input-2 select, .custom-select-form select").niceSelect();
    }
    window.initializeNiceSelect = initializeNiceSelect;
    
        export function initializeOwlCarousel() {
    
//Carousel        
$("#reccomended").owlCarousel({
            center: true,
            items: 2,
            loop: true,
            margin: 0,
            responsive: {
                0: {
                    items: 1,
                },
                600: {
                    items: 2,
                },
                767: {
                    items: 2,
                },
                1000: {
                    items: 3,
                },
                1400: {
                    items: 3,
                },
            },
        });
    }
    window.initializeOwlCarousel = initializeOwlCarousel;

Now I'm able to call these functions from MainLayout.razor.cs

public partial class MainLayout
{
    [Inject]
    IJSRuntime JSRuntime { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initializeOwlCarousel");
            await JSRuntime.InvokeVoidAsync("initializeNiceSelect");
            await JSRuntime.InvokeVoidAsync("initializeModalSignIn");
        }
    }
}

Include the custom.js file inside wwwroot/index.html like this:

<script type="module" src="js/custom.js"></script>

In Blazor WebAssembly, I call JavaScript functions in OnAfterRenderAsync because this lifecycle method ensures that the component's rendering is complete and the DOM elements are fully available, allowing JavaScript to safely interact with them.