Trying to enqueue lit-html in my wordpress site using a cdn but I get Uncaught TypeError
Trying to enqueue lit-html in my wordpress site using a cdn but I get Uncaught TypeError
Hi guys im trying to enqueue lit-html in my wordpress website by adding this to the php:
function my_theme_enqueue_scripts() {
wp_enqueue_script('lit-html-js', 'https://cdn.jsdelivr.net/npm/lit-html@3.1.2/lit-html.min.js', array(), '3.1.2', true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
function add_type_attribute($tag, $handle, $src) {
// Only add the module type attribute to your specific handle
if ('lit-html-js' === $handle) {
$tag = '<script type="module" src="' . esc_url($src) . '"></script>';
}
return $tag;
}
add_filter('script_loader_tag', 'add_type_attribute', 10, 3);
and then I do this in an html block of the wp bakery builder:
<script type = "module">
import { html, render } from 'lit-html';
async function getCategories() {
try {
const response = await fetch('https://zanixa3.merchsolution.net/wp-json/wp/v2/categories');
if (!response.ok) {
throw new Error('Failed to retrieve categories');
}
const categories = await response.json();
// Process categories to find top-level categories and their subcategories
const processedCategories = categories.map(category => ({
...category,
subcategories: categories.filter(sub => sub.parent === category.id)
})).filter(category => category.parent === 0);
// Render the categories
render(renderCategories(processedCategories), document.getElementById("categories-tabs-za"));
} catch (error) {
console.error('Error:', error);
}
}
const renderCategories = (categories) => html`
<div>
${categories.map(category => html`
<div>
<button @click="${() => toggleSubcategories(category.id)}">${category.name}</button>
${category.subcategories && category.subcategories.length > 0 ? html`
<div id="subcategories-${category.id}" style="display: none;">
${category.subcategories.map(subcategory => html`
<button>${subcategory.name}</button>
`)}
</div>
` : ''}
</div>
`)}
</div>
`;
function toggleSubcategories(categoryId) {
const subcategoriesElement = document.querySelector(`#subcategories-${categoryId}`);
if (subcategoriesElement) {
subcategoriesElement.style.display = subcategoriesElement.style.display === 'none' ? 'block' : 'none';
}
}
document.addEventListener('DOMContentLoaded', () => {
getCategories();
});
</script>
and i get this error in the console: Uncaught TypeError: Failed to resolve module specifier "lit-html". Relative references must start with either "/", "./", or "../". why is that...?
I tried different ways of enqueueing it but it still doesn't work, I used to be able to fix this but I forgot how it was done...
Turbo Multi-language Translator
Make the better internet purchasing globaly
Turbosify SEO Speed Booster
5.0 (7)•Free plan available
Get better conversions by improving store loading speed
Installed
Turbo Multi-language Chat - AI Customer service in one hand