fix slider bug, and change the way of cart code

Js/alpine.js

@@ -0,0 +1,72 @@
+document.addEventListener('alpine:init', () => {
+    Alpine.data('manga', () => ({
+        items:[
+            {id:1, name:'lorem2', img:'manga1.jpg', price: 90000},
+            {id:2, name:'lorem2', img:'manga2.jpg', price: 90000},
+            {id:3, name:'lorem2', img:'manga3.jpg', price: 90000},
+            {id:4, name:'lorem2', img:'manga4.jpg', price: 90000},
+            {id:5, name:'lorem2', img:'manga5.jpg', price: 90000},
+            {id:6, name:'lorem2', img:'manga6.jpg', price: 90000},
+            {id:7, name:'lorem2', img:'manga7.jpg', price: 90000},
+            {id:8, name:'lorem2', img:'manga8.jpg', price: 90000},
+        ],
+    }));
+
+    Alpine.store('cart', {
+        items:[],
+        total: 0,
+        quantity: 0,
+
+        add(newItem) {
+            const mangaItem=this.items.find((item)=> item.id === newItem.id);
+            if(!mangaItem){
+                this.items.push({...newItem, quantity:1,total:newItem.price});
+                this.quantity++;
+                this.total+=newItem.price;
+            }else{
+                this.items=this.items.map((item)=>{
+                   if(item.id !==newItem.id){
+                    return item;
+                   } 
+                   else{
+                    item.quantity++;
+                    item.total=item.price*item.quantity;
+                    this.quantity++;
+                    this.total+=item.price;
+                    return item;
+                   }
+                })
+            }
+            console.log(newItem);
+        },
+        remove(id){
+            const cartItem=this.items.find((item)=>item.id === id);
+            if(cartItem.quantity>1){
+                this.items=this.items.map((item)=>{
+                    if(item.id !== id){
+                        return item;
+                    } else {
+                        item.quantity--;
+                        item.total=item.price*item.quantity;
+                        this.quantity--;
+                        this.total-=item.price;
+                        return item;
+                    } 
+                })
+            }else if(cartItem.quantity === 1){
+                this.items=this.items.filter((item) =>item.id !== id);
+                this.quantity--;
+                this.total-=cartItem.price;
+            }
+        }
+    });
+});
+
+const rupiah = (number) => {
+    return new Intl.NumberFormat('id-ID', {
+        style : 'currency',
+        currency : 'IDR',
+        minimumFractionDigits:0,
+    }).format(number);
+};
+

Js/script.js

@@ -1,23 +1,24 @@
 // Tombol ham
 const navbarNav = document.querySelector('.navbar-nav');
 // onclick
-document.querySelector('#hambuger-menu').onclick = ( ) =>{navbarNav.classList.toggle('aktif');
+document.querySelector('#hambuger-menu').onclick = () => {
+  navbarNav.classList.toggle('aktif');
 };
 // deactive
 const hambuger = document.querySelector('#hambuger-menu');
 const sb = document.querySelector('#search-button')
 const sp = document.querySelector('#shopping-cart')
 
 document.addEventListener('click', function (e) {
-    if(!hambuger.contains(e.target)&&!navbarNav.contains(e.target)){
-        navbarNav.classList.remove('aktif');
-    }
-    if(!sb.contains(e.target)&&!searchForm.contains(e.target)){
-       searchForm.classList.remove('aktif');
-    }
-    if(!sp.contains(e.target)&&!spForm.contains(e.target)){
-      spForm.classList.remove('aktif');
-    }
+  if (!hambuger.contains(e.target) && !navbarNav.contains(e.target)) {
+    navbarNav.classList.remove('aktif');
+  }
+  if (!sb.contains(e.target) && !searchForm.contains(e.target)) {
+    searchForm.classList.remove('aktif');
+  }
+  if (!sp.contains(e.target) && !spForm.contains(e.target)) {
+    spForm.classList.remove('aktif');
+  }
 });
 
 
@@ -31,6 +32,14 @@ document.getElementById('exit').addEventListener('click', () => {
   document.getElementById('user-login').classList.add('hide')
 })
 
+// document.getElementById('cta').addEventListener('click', () => {
+//   document.getElementById('modul-buy').classList.remove('hide')
+// })
+
+// document.getElementById('exit2').addEventListener('click', () => {
+//   document.getElementById('modul-buy').classList.add('hide')
+// })
+
 // LOGIN
 
 
@@ -66,50 +75,56 @@ let dots = document.querySelectorAll('.slider .dots li');
 
 let lengthItems = items.length - 1;
 let active = 0;
-next.onclick = function(){
-    active = active + 1 <= lengthItems ? active + 1 : 0;
-    reloadSlider();
+next.click = function () {
+  active = active + 1 <= lengthItems ? active + 1 : 0;
+  reloadSlider();
 }
-prev.onclick = function(){
-    active = active - 1 >= 0 ? active - 1 : lengthItems;
-    reloadSlider();
+prev.click = function () {
+  active = active - 1 >= 0 ? active - 1 : lengthItems;
+  reloadSlider();
 }
-let refreshInterval = setInterval(()=> {next.click()}, 5000);
-function reloadSlider(){
-    slider.style.left = -items[active].offsetLeft + 'px';
-    // 
-    let last_active_dot = document.querySelector('.slider .dots li.active');
-    last_active_dot.classList.remove('active');
-    dots[active].classList.add('active');
-
-    clearInterval(refreshInterval);
-    refreshInterval = setInterval(()=> {next.click()}, 5000);
-
-    
+let refreshInterval = setInterval(() => { next.click() }, 5000);
+function reloadSlider() {
+  slider.style.left = -items[active].offsetLeft + 'px';
+  // 
+  let last_active_dot = document.querySelector('.slider .dots li.active');
+  last_active_dot.classList.remove('active');
+  dots[active].classList.add('active');
+
+  clearInterval(refreshInterval);
+  refreshInterval = setInterval(() => { next.click() }, 5000);
+
+
 }
 
 dots.forEach((li, key) => {
-    li.addEventListener('click', ()=>{
-         active = key;
-         reloadSlider();
-    })
-})
-window.onresize = function(event) {
+  li.addEventListener('click', () => {
+    active = key;
     reloadSlider();
+  })
+})
+window.onresize = function (event) {
+  reloadSlider();
 };
 
 
 
 
 /*=============== SWIPER JS ===============*/
-var swiper = new Swiper(".slide-container", {
+let swiper = new Swiper(".slide-container", {
   slidesPerView: 4,
+
   spaceBetween: 20,
   sliderPerGroup: 4,
   loop: true,
   centerSlide: "true",
   fade: "true",
-  grabCursor: "true",
+
+  autoplay: {
+    delay: 2500,
+    disableOnInteraction: false,
+  },
+
   pagination: {
     el: ".swiper-pagination",
     clickable: true,
@@ -135,3 +150,20 @@ var swiper = new Swiper(".slide-container", {
     },
   },
 });
+
+// let home = document.getElementById('home')
+// let navbar = document.querySelector('.navbar');
+
+// window.addEventListener('scroll', () => {
+//   let scrollTop = window.scrollY;
+//   console.log(scrollTop)
+
+//   if(scrollTop >= home.offsetTop) {
+//     console.log('udh di bawah banh')
+//     navbar.classList.add("hide");
+//   }
+//   if(scrollTop <= home.offsetTop) {
+//     console.log('ini di atas')
+//     navbar.classList.remove("hide");
+//   }
+// })