How to retrieve current product identifier using Shopify JavaScript API integration

Other Questions Shopify
1

I’m working on a Shopify application that connects with an external image processing service called FlowerAPI. For this integration to work properly, I need to capture which specific product a visitor is currently viewing on the store.

My current approach involves modifying the product.liquid template file to include a concealed element that holds the product identifier. Then I can use jQuery to locate this hidden value and pass it along in my API requests.

// Example of what I'm trying to achieve
function fetchProductData() {
    const productId = $('#hidden-product-id').val();
    
    $.ajax({
        url: 'https://api.flowerservice.com/generate',
        method: 'POST',
        data: {
            item_id: productId,
            store_domain: window.location.hostname
        },
        success: function(response) {
            console.log('API call successful:', response);
        }
    });
}

Is there a more efficient method to make the product ID accessible to JavaScript on every product page? Am I missing a simpler solution that doesn’t require theme modifications?