DEV Community

coderbang1
coderbang1

Posted on

can someone suggest me, what i have to do to connect contentful with my ecom site.

#javascript #html #css

i have created a ecom sites in JavaScript. now i want to connect it with contentful. i think i did everything right, but its not working.

here is my main.js file

 const client = contentful.createClient({ // This is the space ID. A space is like a project folder in Contentful terms space: "bao7ve9vhfk1", // This is the access token for this space. Normally you get both ID and the token in the Contentful web app accessToken: "8MOXl3bT6KvbpuTnU65ICHNmKrCThiusXPOqVJ92KHk"
Enter fullscreen mode Exit fullscreen mode

});

 let carts = document.querySelectorAll('.add-cart'); let products = [ { name: "Grey Tshirt", tag: "greytshirt", price: 15, inCart: 0 }, { name: "Grey Hoddie", tag: "greyhoddie", price: 20, inCart: 0 }, { name: "Black Tshirt", tag: "blacktshirt", price: 15, inCart: 0 }, { name: "Black Hoddie", tag: "blackhoddie", price: 20, inCart: 0 } ]; for(let i=0; i< carts.length; i++) { carts[i].addEventListener('click', () => { cartNumbers(products[i]); totalCost(products[i]); });
Enter fullscreen mode Exit fullscreen mode

}

function onLoadCartNumbers() {

let productNumbers = localStorage.getItem('cartNumbers'); if( productNumbers ) { document.querySelector('.cart span').textContent = productNumbers; }
Enter fullscreen mode Exit fullscreen mode

}

function cartNumbers(product, action) {

let productNumbers = localStorage.getItem('cartNumbers'); productNumbers = parseInt(productNumbers); let cartItems = localStorage.getItem('productsInCart'); cartItems = JSON.parse(cartItems); if( action ) { localStorage.setItem("cartNumbers", productNumbers - 1); document.querySelector('.cart span').textContent = productNumbers - 1; console.log("action running"); } else if( productNumbers ) { localStorage.setItem("cartNumbers", productNumbers + 1); document.querySelector('.cart span').textContent = productNumbers + 1; } else { localStorage.setItem("cartNumbers", 1); document.querySelector('.cart span').textContent = 1; } setItems(product);
Enter fullscreen mode Exit fullscreen mode

}

function setItems(product) {
// let productNumbers = localStorage.getItem('cartNumbers');
// productNumbers = parseInt(productNumbers);

let cartItems = localStorage.getItem('productsInCart'); cartItems = JSON.parse(cartItems); if(cartItems != null) { let currentProduct = product.tag; if( cartItems[currentProduct] == undefined ) { cartItems = { ...cartItems, [currentProduct]: product } } cartItems[currentProduct].inCart += 1; } else { product.inCart = 1; cartItems = { [product.tag]: product }; } localStorage.setItem('productsInCart', JSON.stringify(cartItems));
Enter fullscreen mode Exit fullscreen mode

}

function totalCost( product, action ) {
let cart = localStorage.getItem("totalCost");

if( action) { cart = parseInt(cart); localStorage.setItem("totalCost", cart - product.price); } else if(cart != null) { cart = parseInt(cart); localStorage.setItem("totalCost", cart + product.price); } else { localStorage.setItem("totalCost", product.price); }
Enter fullscreen mode Exit fullscreen mode

}

async function displayCart() {
let content = await client.getEntries({
content_type: 'ecom'
});

 //.then((response) => console.log(response.time)) //.catch(console.error) let cartItems = localStorage.getItem('productsInCart'); cartItems = JSON.parse(cartItems); let cart = localStorage.getItem("totalCost"); cart = parseInt(cart); let productContainer = document.querySelector('.products'); if( cartItems && productContainer ) { productContainer.innerHTML = ''; Object.values(cartItems).map( (item, index) => { productContainer.innerHTML += `<div class="product"><ion-icon name="close-circle"></ion-icon><img src="./images/${item.tag}.jpg" /> <span class="sm-hide">${item.name}</span> </div> <div class="price sm-hide">$${item.price},00</div> <div class="quantity"> <ion-icon class="decrease " name="arrow-dropleft-circle"></ion-icon> <span>${item.inCart}</span> <ion-icon class="increase" name="arrow-dropright-circle"></ion-icon> </div> <div class="total">$${item.inCart * item.price},00</div>`; }); productContainer.innerHTML += ` <div class="basketTotalContainer"> <h4 class="basketTotalTitle">Basket Total</h4> <h4 class="basketTotal">$${cart},00</h4> </div>` deleteButtons(); manageQuantity(); }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)