↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

pagina-produto-ecommerce

eCommerce CSS

E-commerce page

E-commerce page with several functionalities for viewing product images and also the functionality to add products to the cart. A checkout page was also developed using data storage in the browser to save the order information.

Table of contents

Overview

The challenge

Users should be able to:

  • Look through gallery pictures (desktop and mobile) and open a lightbox to see a bigger version of the pictures (desktop).
  • Add products to the cart.
  • Go to the checkout page and finalize the order.

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS Flexbox
  • Desktop-first workflow
  • localStorage

What I learned 

let checkoutAmount = localStorage.amount;
let total = checkoutAmount * 110

console.log(checkoutAmount);

checkoutInfo.innerText = `Camiseta OTR X RAVIOLI Quantidade: ${checkoutAmount}`
checkoutPrice.innerText = `R$ ${total},00`

checkoutButton.innerHTML = `<p>Nos chame no link abaixo</p>
<button class="checkout__botao"><a href="https://wa.me/5547999230603?text=Gostaria%20de%20comprar%20${checkoutAmount}%20camiseta(s)%20da%20ON%20THE%20ROCKS%20pelo%20total%20de%20R$%20${total}."><img src="https://github.com/francopoffo/./assets/img/whatsapp.png" "alt="whatsapp"><a/></button>`

and

images.forEach((image) => {
  image.addEventListener("click", () => {
    const lastImg = document.querySelectorAll(".selected");
    if (lastImg) {
      lastImg[0].classList.remove("selected");
    }
    image.classList.add("selected");
    const selectedImg = document.querySelector(".selected");
    switch (selectedImg.getAttribute("src")) {
      case "./assets/img/camiseta-1.jpg":
        mainThumbnail.src = "./assets/img/camiseta-1.jpg";
        mainThumbnailLightBox.src = "./assets/img/camiseta-1.jpg";
        break;
      case "./assets/img/camiseta-2.jpg":
        mainThumbnail.src = "./assets/img/camiseta-2.jpg";
        mainThumbnailLightBox.src = "./assets/img/camiseta-2.jpg";
        break;
      case "./assets/img/camiseta-3.jpg":
        mainThumbnail.src = "./assets/img/camiseta-3.jpg";
        mainThumbnailLightBox.src = "./assets/img/camiseta-3.jpg";
        break;
      case "./assets/img/camiseta-4.jpg":
        mainThumbnail.src = "./assets/img/camiseta-4.jpg";
        mainThumbnailLightBox.src = "./assets/img/camiseta-4.jpg";
        break;
    }
  });
});

Continued development

My goal now is to continue to develop my skills in this three languages, with the main focus being JavaScript.

Useful resources

Author



↑