Script Tag Not Executing Inside Embed Block

Retired Boards Appdev Extensions
,
1

I’m developing a Shopify App Embed Block to display a list of recommended products. The H1 tag (“Recommended Products”) is successfully displayed on the page, but the product list is not rendered because the JavaScript code inside the <script> tag is not executed. Here’s my code:

<div id="custom-product-list" class="product-list">
<!-- Products will be injected here by JavaScript -->
<h1>Recommended Products</h1>
</div>

<script>
// Mock products array (this can be fetched via AJAX instead)
export const products = [
{
_id: '1',
title: 'product 1',
description: 'Lorem ipsum product 1 dummy description.',
price: 100,
compare_at_price: 80,
featured_image: 'https://images.pexels.com/photos/985635/pexels-photo-985635.jpeg',
url: 'https://images.pexels.com/photos/985635/pexels-photo-985635.jpeg',
},
{
_id: '2',
title: 'product 2',
description: 'Lorem ipsum product 2 dummy description.',
price: 200,
featured_image: 'https://images.pexels.com/photos/147641/pexels-photo-147641.jpeg',
url: 'https://images.pexels.com/photos/147641/pexels-photo-147641.jpeg',
}
];

function renderProducts(productList) {
const productContainer = document.getElementById('custom-product-list');
productContainer.innerHTML = '';

productList.forEach((product) => {
const productItem = `
<div class="product-item">
<a href="${product.url}">
<img src="${product.featured_image}" alt="${product.title}">
</a>
<h3><a href="${product.url}">${product.title}</a></h3>
<p class="price">
${product.compare_at_price > product.price
? `<span class="sale-price">$${product.price}</span>
<span class="original-price">$${product.compare_at_price}</span>`
: `<span class="regular-price">$${product.price}</span>`}
</p>
</div>
`;
productContainer.insertAdjacentHTML('beforeend', productItem);
});
}

document.addEventListener('DOMContentLoaded', () => {
renderProducts(products);
});
</script>

{% schema %}
{
"name": "Custom Product List",
"target": "section",
"settings": [
{
"type": "number",
"id": "product_limit",
"label": "Number of Products",
"default": 5
}
]
}
{% endschema %}

The H1 tag appears on the page, but the script responsible for rendering the products does not run. This code is inside a Shopify Liquid template file for an App Embed Block.

Why is the JavaScript not executing in this Shopify App Embed Block, and how can I make sure the script is executed to display the product list?

2

My guess is that DOMContentLoaded event is not fired or was fired before the script executed.

Try adding a console inside the event listener callback function and see if you can find the message in the console.

You can also try calling “renderProducts” without using the event listener.

3

Thank you for your answer. This won’t work. I added a console. log inside the callback and those also won’t get printed. Then I changed the content of the h1 tag and the changes are visible on the web page. Is there any issue in my approach or am I doing anything wrong? Is it possible to add script tags in the liquid template of a Shopify app embed.

4

I am fairly certain that script tags work in an App Embed Block. Try removing the rest of the script and just have a console.log to verify that it works, and also inspect the HTML code and check that the updated script tag is there.


# Recommended Products