category above product name

<!-- category above product detail title @tuanphan -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
    console.log('jQuery ready - using AJAX method');
    
    function insertCategories() {
        if ($('.product-categories').length > 0) {
            console.log('Categories already exist');
            return;
        }
        
        const $titleElement = $('h1.product-title');
        console.log('Title element found:', $titleElement.length);
        
        if ($titleElement.length === 0) {
            console.log('No title element found');
            return;
        }
        
        var pathname = window.location.pathname;
        console.log('Getting data from:', pathname + "?format=json-pretty");
        
        jQuery.ajax({
            url: pathname + "?format=json-pretty",
            dataType: "json",
            success: function (data) {
                console.log('AJAX success - got data:', data);
                
                const item = data.item;
                const nestedCategories = data.nestedCategories;
                
                console.log('Item:', item);
                console.log('Category IDs:', item ? item.categoryIds : 'No item');
                console.log('Nested categories:', nestedCategories);
                
                if (!item || !item.categoryIds || !nestedCategories || !nestedCategories.itemCategories) {
                    console.log('Missing required data in AJAX response');
                    return;
                }
                
                const $categoriesContainer = $('<div class="product-categories"></div>');
                
                item.categoryIds.forEach(function(categoryId) {
                    const category = nestedCategories.itemCategories.find(function(cat) {
                        return cat.id === categoryId;
                    });
                    
                    if (category) {
                        console.log('Adding category:', category.displayName);
                        const $categoryLink = $('<a class="product-category-link"></a>')
                            .attr('href', category.fullUrl)
                            .text(category.displayName);
                        
                        $categoriesContainer.append($categoryLink);
                    }
                });
                
                if ($categoriesContainer.children().length > 0) {
                    $titleElement.before($categoriesContainer);
                    console.log('Categories inserted successfully via AJAX');
                } else {
                    console.log('No categories to insert');
                }
            },
            error: function(xhr, status, error) {
                console.log('AJAX error:', error);
            }
        });
    }
    
    insertCategories();
});
</script>
<style>
a.product-category-link {
    border: 1px solid #000;
    padding: 10px 20px;
    margin-right: 10px;
    border-radius: 50px;
}
</style>