0

There is the standard way to implement "load more products" via ajax request the next page and append the needed part of the html code to listing. There is the problem with js init also, the std method to solve it $('body').trigger('contentUpdated') on Ajax success. In Hyva that doesn't work. I see the normal html code with call functions, I saw the functions in devtools, but got the list of errors like Uncaught ReferenceError: initRating174662b7cb4f4111 is not defined visually code looks absolutely normal. Like I need to reinit the page, but not clear how to do that

enter image description here

2 Answers 2

2

Use Hyva's hyva.replaceDomElement(targetSelector, content) helper function, docs here.

In summary, you would need to add the new script tags to the head of the page before adding the content to the body which is exactly what that function does.

2
  • The idea of special method usage is clear. I got the next page content using GET request, got the necessary part of the code to insert but hyva.replaceDomElement not working al all. I even tried to force it to execute in static primitives (below), not working this replaceDomElement at all, googling didn't give me any success const div = document.createElement('div'); div.textContent = 'Lorem ipsum dolor sit amet'; hyva.replaceDomElement('.to-append', div);
    – Max.A
    Commented May 17 at 18:19
  • @Max.A Since you are already able to add the content in a different way, try to add the scripts to the header before appending the content using the other helper method hyva.activateScripts(contentNode). Note: this method is available on v1.3.6 and newer versions.
    – S.Murtadha
    Commented May 19 at 7:33
0

@Max.A

Hey, Please follow the following code:

document.addEventListener("DOMContentLoaded", function() {
    const container = document.getElementById("product-container");
    const loadMoreBtn = document.getElementById("load-more-btn");
    let currentPage = 1;
    const url = `/your/api/endpoint?page=${currentPage}`;

    loadMoreBtn.addEventListener("click", function() {
        fetch(url)
            .then(response => response.json())
            .then(data => {
                if (data.length > 0) {
                    data.forEach(product => {
                        const productElement = document.createElement("div");
                        productElement.textContent = product.name; // Update this to display product details
                        container.appendChild(productElement);
                    });
                    currentPage++;
                    url = `/your/api/endpoint?page=${currentPage}`;
                } else {
                    loadMoreBtn.disabled = true;
                }
            })
            .catch(error => console.error("Error fetching products:", error));
    });
});

Create the HTML Structure: Ensure you have a container element to hold the products and a button to trigger the loading of more products.

<div id="product-container">
    <!-- Products will be appended here -->
</div>
<button id="load-more-btn">Load More</button>

Write the JavaScript: Use the fetch API to fetch more products when the "Load More" button is clicked. Update the product container with the new products.

Thank You!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.