Başlangıç ​​için JavaScript Alışveriş Sepeti Eğitimi

İçindekiler:

1. Giriş
2. Vanilya JavaScript Kullanarak Alışveriş Sepeti Kodlama
3. Alışveriş Sepeti Oluşturma
4. Öğeleri Sepete Ekleme ve Kaldırma
5. Toplam Tutarı Güncelleme
6. Satın Alma İşlemi
7. Sonuç ve Özet

İçindekiler

1. Giriş

2. Vanilya JavaScript Kullanarak Alışveriş Sepeti Kodlama

2.1 HTML ve CSS İşlemleri

2.2 JavaScript ile Çalışmaya Başlama

3. Alışveriş Sepeti Oluşturma

3.1 HTML Yapısını Oluşturma

3.2 CSS ile Tasarımı Ayarlama

4. Öğeleri Sepete Ekleme ve Kaldırma

4.1 Ürünleri Listeleme

4.2 Ürünleri Sepete Ekleme

4.3 Sepetten Ürün Kaldırma

5. Toplam Tutarı Güncelleme

5.1 Toplam Tutarı Hesaplama

5.2 Toplam Tutarı Güncelleme

6. Satın Alma İşlemi

6.1 Sepeti Satın Alma

6.2 Teşekkür Mesajı Gösterme

7. Sonuç ve Özet

Giriş

Bu makalede, sıfırdan JavaScript kullanarak bir alışveriş sepeti oluşturmanın nasıl yapılacağını öğreneceksiniz. Vanilya JavaScript kullanarak, bir web sitesinde alışveriş sepeti işlevselliği eklemek önemli bir adımdır ve bu makalede adım adım ilerleyeceğiz. İlk olarak, HTML ve CSS yapılarını oluşturacak ve ardından JavaScript ile bu yapıyı etkileşimli hale getireceğiz.

Vanilya JavaScript Kullanarak Alışveriş Sepeti Kodlama

Alışveriş sepetini kodlarken, birkaç önemli adım izlememiz gerekiyor. İlk olarak, HTML yapılarını ve CSS tasarımlarını oluşturuyoruz. Daha sonra, JavaScript'i kullanarak bu yapıları işlevsel hale getiriyoruz.

HTML ve CSS İşlemleri

Alışveriş sepeti için HTML yapısını oluşturmak için birkaç temel elemente ihtiyacımız var. Sepet öğelerini listeleyecek bir div ve her öğe için bir div oluşturacağız. Ayrıca, her öğe için bir ürün adı, fiyatı, miktarı ve kaldırma butonu gibi içerikler içerecekler. Bunların yanı sıra, toplam tutarı gösterecek bir başlık ve satın alma işlemini gerçekleştirecek bir düğme ekleyeceğiz.

Bu yapıyı oluşturduktan sonra, CSS kullanarak tasarımları ayarlayabiliriz. Öğeleri düzgün bir şekilde hizalamak ve sepetin daha estetik bir görünüm kazanmasını sağlamak için kendini ayarlayan bir düzen kullanacağız.

JavaScript ile Çalışmaya Başlama

JavaScript kullanarak alışveriş sepetini işlevsel hale getirmek için bazı önemli adımları izlememiz gerekiyor. İlk olarak, web sayfamızın tamamının yüklendiğinden emin olmalıyız. Bunu yapmak için, DOMContentLoaded olayını dinlemek için bir DOMContentLoaded etkinleyicisine ihtiyacımız var. Bu etkinleyici, sayfa tamamen yüklendiğinde tetiklenecektir.

DOMContentLoaded olayını dinledikten sonra, alışveriş sepetini işleyecek ana fonksiyonumuzu oluşturabiliriz. Bu fonksiyon, kullanıcının alışveriş sepetine öğe eklemesine, çıkarmasına veya miktarını güncellemesine olanak tanıyacak.

Alışveriş sepetini işlemek için kullanacağımız bir dizi fonksiyon olacak. Bu fonksiyonlar, sepete ürün eklemek, ürün çıkarmak, miktarı güncellemek, toplam tutarı hesaplamak ve satın alma işlemini gerçekleştirmek için kullanılacak. Bu fonksiyonlar, HTML elementlerini seçmek, içeriğini güncellemek ve kullanıcının yaptığı değişikliklere yanıt vermek için kullanılacaktır.

Alışveriş sepeti işlevselliğini kodladıktan sonra, tamamen işlevsel bir alışveriş sepeti oluşturmuş olacaksınız. Kullanıcılar, sepete öğeler ekleyebilecek, miktarlarını güncelleyebilecek, öğeleri çıkarabilecek ve satın alma işlemini tamamlayabilecekler.

Alışveriş Sepeti Oluşturma

Alışveriş sepetini oluşturmak için HTML yapılarını ve CSS tasarımlarını ayarlamanız gerekiyor. HTML'de bir sepet container'i ve içerisine ekleyeceğiniz ürünlerin listesi için bir <ul> veya <div> oluşturmalısınız. Her bir ürün için, ürün adını, fiyatını, miktarını ve kaldırma düğmesini içeren bir kart oluşturmanız gerekecek. CSS ile bu yapıları düzenleyebilir ve sepetinize istediğiniz görünümü verebilirsiniz.

HTML Yapısını Oluşturma

İlk adım olarak, HTML yapısını oluşturmanız gerekiyor. Alışveriş sepeti için bir div elementi oluşturun ve bu div içine ürünlerinizin listesini ekleyin. Her ürün için, ürün adını, fiyatını, miktarını ve kaldırma düğmesini içeren bir div oluşturun. Ayrıca, toplam tutarı göstermek için bir başlık da eklemeniz gerekecek.

<div class="cart-container">
  <h2>Alışveriş Sepeti</h2>
  <ul class="cart-items">
    <li class="cart-item">
      <div class="item-details">
        <h3 class="item-name">Ürün Adı</h3>
        <p class="item-price">Fiyat: 19.99 TL</p>
        <input type="number" class="item-quantity" value="1">
        <button class="remove-button">Kaldır</button>
      </div>
    </li>
  </ul>
  <p class="total-price">Toplam Tutar: 19.99 TL</p>
  <button class="purchase-button">Satın Al</button>
</div>

Bu HTML yapısı, temel bir alışveriş sepetini temsil etmektedir. Sepetteki her bir ürün için bir li elementi oluşturulmuştur. Bu element, ürün detaylarını içeren bir div içermektedir. Ürün adı, fiyatı, miktarı ve kaldırma düğmesi bu div içinde yer almaktadır. Toplam tutar ve satın alma düğmesi de aynı div içinde bulunmaktadır.

CSS ile Tasarımı Ayarlama

CSS kullanarak alışveriş sepetini tasarımını ayarlayabilirsiniz. Sepet container'i ve içerisindeki öğelerin stilini belirleyebilirsiniz. Örneğin, öğelerin arasındaki boşluğu ayarlama veya düğmelerin görünümünü özelleştirme gibi işlemleri yapabilirsiniz.

.cart-container {
  width: 100%;
  padding: 20px;
  background-color: #f1f1f1;
}

.cart-items {
  list-style-type: none;
  padding: 0;
}

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
}

.item-details {
  flex-grow: 1;
}

.item-name {
  font-weight: bold;
  margin: 0;
}

.item-price {
  margin: 5px 0;
}

.item-quantity {
  width: 50px;
  margin-right: 10px;
}

.remove-button {
  background-color: #ff0000;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.total-price {
  font-weight: bold;
  margin-top: 10px;
}

.purchase-button {
  background-color: #008000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Bu CSS kodları, alışveriş sepetinin stilini belirlemektedir. .cart-container sınıfı, sepetin genel özelliklerini tanımlar. .cart-items sınıfı, ürün listesinin stilini belirler. .cart-item sınıfı, her bir ürünün stilini belirler. .item-details sınıfı, ürün ayrıntılarının stilini belirler. .item-name, .item-price, .item-quantity, .remove-button, .total-price ve .purchase-button sınıfları ise ilgili elementlerin stilini belirler.

Öğeleri Sepete Ekleme ve Kaldırma

Alışveriş sepetine öğe eklemek ve kaldırmak için JavaScript kullanacağız. Bunun için birkaç adımı takip etmeliyiz.

Ürünleri Listeleme

Öncelikle, HTML sayfamızdaki ürünleri listeleyeceğiz. Bu işlemi JavaScript kullanarak yapacağız. İlk olarak, tüm ürünleri temsil eden bir dizi oluşturacağız.

const products = [
  { name: "Ürün 1", price: 19.99 },
  { name: "Ürün 2", price: 29.99 },
  { name: "Ürün 3", price: 9.99 },
];

Bu dizi, ürünlerin adı ve fiyatını içeren nesneler içermektedir. Daha sonra, bu ürünleri listelemek için bir fonksiyon oluşturacağız.

function listProducts() {
  const productList = document.getElementById("product-list");

  products.forEach((product) => {
    const listItem = document.createElement("li");
    listItem.textContent = `${product.name} - Fiyat: ${product.price} TL`;

    productList.appendChild(listItem);
  });
}

Bu fonksiyon, product-list id'sine sahip bir <ul> elementini seçer ve her bir ürünü liste olarak ekler. forEach döngüsü, her bir ürün için bir <li> oluşturur ve ürün adıyla birlikte fiyatını da içeren bir metin içeriğini ayarlar. Son olarak, oluşturulan <li> öğesini <ul> elementine ekler.

Bu fonksiyonu çağırarak ürünleri listelemek için aşağıdakini yapabilirsiniz:

listProducts();

Ürünleri Sepete Ekleme

Şimdi, kullanıcının bir ürünü sepete eklemesine izin veren bir fonksiyon oluşturacağız. Bu fonksiyon, kullanıcının seçilen ürünün bilgilerini alacak ve sepete ekleyecektir.

<h2>Ürünler</h2>
<ul id="product-list"></ul>
<button id="add-to-cart-button">Sepete Ekle</button>

const addToCartButton = document.getElementById("add-to-cart-button");

addToCartButton.addEventListener("click", function () {
  const selectedProduct = products[0]; // Seçili ürünü alın, buradaki örnekte ilk ürünü alıyoruz.

  addToCart(selectedProduct);
});

function addToCart(product) {
  const cartItem = createCartItem(product);
  const cartItemsContainer = document.getElementById("cart-items-container");

  cartItemsContainer.appendChild(cartItem);
}

Bu fonksiyon, bir ürün nesnesini alacak ve sepete eklemek için createCartItem fonksiyonunu çağıracaktır. Oluşturulan sepet öğesini cart-items-container id'sine sahip bir elemente ekleyecektir.

Ürünlerden Kaldırma

Kullanıcının bir ürünü sepetteki listeden kaldırabilmesi için bir fonksiyon oluşturacağız. Bu fonksiyon, seçilen ürünü sepetten bulacak ve sepet listesinden kaldıracaktır.

function removeFromCart(product) {
  const cartItemsContainer = document.getElementById("cart-items-container");
  const cartItems = cartItemsContainer.getElementsByClassName("cart-item");

  for (let i = 0; i < cartItems.length; i++) {
    const cartItem = cartItems[i];
    const productName = cartItem.getElementsByClassName("product-name")[0].textContent;

    if (productName === product.name) {
      cartItemsContainer.removeChild(cartItem);
    }
  }
}

Bu fonksiyon, sepetin çocuklarını sorgulayacak ve seçilen ürün adıyla eşleşen sepet öğesini sepetten kaldıracaktır.

const removeFromCartButton = document.getElementById("remove-from-cart-button");

removeFromCartButton.addEventListener("click", function () {
  const selectedProduct = products[0]; // Seçili ürünü alın, buradaki örnekte ilk ürünü alıyoruz.

  removeFromCart(selectedProduct);
});

Toplam Tutarı Güncelleme

Sepetimizin toplam tutarını güncellemek için bir fonksiyon oluşturacağız. Bu fonksiyon, sepetin her bir öğesini alacak, fiyatı ve miktarı çarparak öğe toplamını hesaplayacak ve tüm öğelerin toplamını ekrana yazdıracaktır.

function updateTotalPrice() {
  const cartItemsContainer = document.getElementById("cart-items-container");
  const cartItems = cartItemsContainer.getElementsByClassName("cart-item");
  let totalPrice = 0;

  for (let i = 0; i < cartItems.length; i++) {
    const cartItem = cartItems[i];
    const price = parseFloat(cartItem.getElementsByClassName("product-price")[0].textContent);
    const quantity = parseInt(cartItem.getElementsByClassName("product-quantity")[0].value);

    totalPrice += price * quantity;
  }

  const totalPriceElement = document.getElementById("total-price");
  totalPriceElement.textContent = `Toplam Tutar: ${totalPrice.toFixed(2)} TL`;
}

Bu fonksiyon, sepet öğelerini sorgular ve her bir öğe için fiyatı ve miktarı alarak öğe toplamını hesaplar. Ardından, total-price id'sine sahip bir elementin içeriğini günceller.

Sepetimizdeki öğelerin fiyatını ve miktarını güncelledikten sonra, updateTotalPrice fonksiyonunu çağırarak toplam tutarı güncelleyebilirsiniz.

Satın Alma İşlemi

Son olarak, kullanıcının alışverişi tamamlamasını sağlamak için bir fonksiyon oluşturacağız. Bu fonksiyon, kullanıcının tüm ürünleri satın alma işlemine tabi tutacak ve bir onay mesajı verecektir.

function purchase() {
  const cartItemsContainer = document.getElementById("cart-items-container");

  while (cartItemsContainer.firstChild) {
    cartItemsContainer.firstChild.remove();
  }

  updateTotalPrice();

  alert("Satın alma işlemi tamamlandı. Teşekkür ederiz!");
}

Bu fonksiyon, sepet öğelerini sepetten kaldıracak, toplam tutarı güncelleyecek ve kullanıcıya bir onay mesajı verecektir.

const purchaseButton = document.getElementById("purchase-button");
purchaseButton.addEventListener("click", purchase);

Bu kod, 'Satın Al' düğmesine bir tıklama olay dinleyicisi ekler ve işlevi purchase olarak tanımlar.

Sonuç ve Özet

Bu makalede, JavaScript kullanarak bir alışveriş sepetinin nasıl oluşturulacağını adım adım öğrendiniz. HTML, CSS ve JavaScript kullanarak bir alışveriş sepetinin temel yapılarını oluşturduk ve sepete öğeler eklemek, kaldırmak, miktarını güncellemek ve satın alma işlemi yapmak için fonksiyonlar oluşturduk. Ayrıca, sepetin toplam tutarını güncelledik ve kullanıcıya bir onay mesajı verdik.

Bu makalede öğrendikleriniz, JavaScript kullanarak alışveriş sepetleri oluştururken kullanabileceğiniz temel becerileri içermektedir. Daha karmaşık bir alışveriş sepeti oluşturmak isterseniz, bu temel becerileri kullanarak özelleştirmeler yapabilirsiniz.

Bağlantılar:

• GitHub'da Kod