Using well-structured, script-generated HTML is crucial for effective theme development.

Retired Boards Appdev Store Design
, , ,
1

Please confirm , I have developed theme it’s close to complete , kindly share it’s correct way to show data’s on liquid file .Kindly share suggestions

Example code

function fetchCart() {
fetch(‘/cart.js’)
.then(response => response.json())
.then(cart => {
console.log(‘Cart data:’, cart);

const cartItemsList = document.getElementById(‘cart-items-list1’);
const totalElement = document.getElementById(‘cart-total1’);

if (cartItemsList && totalElement) {
$(‘.collections_info’).show();
cartItemsList.innerHTML = ‘’;
let total = 0;

if (cart.items.length === 0) {

document.getElementById(‘cart_totalinfo’).style.display=“none”;
document.getElementById(‘collections_info’).style.display=“block”;

} else {
$(‘.collections_info’).hide();

cart.items.forEach(item => {
total += item.line_price;

cartItemsList.innerHTML += `

Rs. ${(item.price / 100).toFixed(2)}
${item.options_with_values.map(option => `
${option.name}:
${option.value}
`).join('')}
- ${item.quantity} +
Rs. ${(item.line_price / 100).toFixed(2)}
{{ 'sections.cart.remove' | t }}
`; }); }

totalElement.textContent = Sub total: Rs. ${(total / 100).toFixed(2)};
} else {
console.error(‘Cart items list or total element not found.’);
}
})
.catch(error => console.error(‘Error fetching cart:’, error));
}

2 
function fetchCart() {
    fetch('/cart.js')
        .then(response => response.json())
        .then(cart => {
            console.log('Cart data:', cart);

            const cartItemsList = document.getElementById('cart-items-list1');
            const totalElement = document.getElementById('cart-total1');

            if (cartItemsList && totalElement) {
                // Display cart information if elements exist
                $('.collections_info').show();
                cartItemsList.innerHTML = '';
                let total = 0;
                let cartItemsHTML = '';

                if (cart.items && cart.items.length === 0) {
                    // Handle case when cart is empty
                    document.getElementById('cart_totalinfo').style.display = "none";
                    document.getElementById('collections_info').style.display = "block";
                } else {
                    // Hide collections info when there are items in the cart
                    $('.collections_info').hide();

                    cart.items.forEach(item => {
                        total += item.line_price;

                        cartItemsHTML += `
                            

                                

                                    

                                        
                                            

                                                
                                            

                                        
                                    

                                    
                                        

                                            
                                                ${item.handle}
                                            
                                        

                                        Rs. ${(item.price / 100).toFixed(2)}

                                        
                                            ${item.options_with_values.map(option => `
                                                

                                                    
${option.name}:

                                                    ${option.value}

                                                

                                            `).join('')}
                                        

                                        
                                            

                                                
                                                ${item.quantity}
                                                
                                            

                                        

                                        
                                            Rs. ${(item.line_price / 100).toFixed(2)}
                                        

                                        
                                    

                                

                            

                        `;
                    });

                    // Update the innerHTML of the cart item list after processing all items
                    cartItemsList.innerHTML = cartItemsHTML;
                }

                // Update the total amount
                totalElement.textContent = `Sub total: Rs. ${(total / 100).toFixed(2)}`;
            } else {
                // Log an error if elements are not found
                console.error('Cart items list or total element not found.');
            }
        })
        .catch(error => console.error('Error fetching cart:', error));
}
3

You can try this code

  • Optimized performance: Instead of updating the innerHTML inside the loop, all HTML is built up in cartItemsHTML and set in one go.

  • Checked for cart.items existence: Ensures that cart.items is available before processing.

  • Improved error handling: Logs an error message if the necessary elements aren’t found to help with debugging.

4

Thank you so much for your help! I’ll be updating my code with these improvements.

5

Glad to help you. Have a good day.

  • Please press ‘Like’ if you find it helpful. Thank you.