Adding Smart Download Links to Your Product Pages in Shopware

One of our recent projects involved a unique request from a client: They needed a download link for a ZIP archive containing relevant information for each product on their Shopware site’s listing pages. However, the catch was to only display this link if the ZIP archive actually existed on the server.

In other words, we had to find a convenient way to check for a file’s existence before displaying a download link inside Shopware, and we figured we’d share our solution here – just in case someone else may find it useful.

The core of our solution involved a JavaScript plugin that searches for download links within product listings and verifies the presence of each file through a ‘HEAD’ request. If the response indicates the file exists, the link is activated and made visible. Otherwise, it stays hidden.

Here’s a snapshot of how the plugin operates:

init() {
    document.querySelectorAll('.download-link').forEach(link => {
        fetch(link.dataset.url, { method: 'HEAD' })
            .then(response => {
                if (response.ok) {
                    link.classList.remove('d-none');
                    link.href = link.dataset.url;
                }
            })
            .catch(() => {});
    });
}

To incorporate this functionality into a Shopware theme, the following HTML snippet is added to the product listing template:

<a class="download-link d-none" href="#" data-url="path/to/productfile.zip">Download Files</a>

But wait, there’s one important thing to note: While this solution effectively meets the specific needs of our client, it’s probably not as well suited for larger shops. The reason for this is that, for every download link, a request is fired upon page load. In our case, this isn’t a problem though, because we expect very few traffic and the server only serves assets, which don’t consume much resources.

Anyway, we hope you’ll find this useful nonetheless, and should you implement this solution or adapt it to fit your unique requirements, we’d love to hear about your experience.