เพิ่ม Realtime Database

import { defineStore } from 'pinia'

import {
  ref,
  set,
  onValue
} from 'firebase/database'

import {
  db,
  realtimeDB
} from '@/firebase'

import { useAccountStore } from '@/stores/account'

export const useUserCartStore = defineStore('user-cart', {
  state: () => ({
    items: [],
    checkout: {}
  }),
  getters: {
    /* เพิิ่ม user, cartRef */
    user (state) {
      const accountStore = useAccountStore()
      return accountStore.user
    },
    cartRef (state) {
      return ref(realtimeDB, `carts/${this.user.uid}`)
    }
  },
  actions: {
    loadCart () {
      if (this.user.uid) {
        // เพิ่ม realtime dabase ให้กับตะกร้าสินค้า
        onValue(this.cartRef, (snapshot) => {
          const data = snapshot.val()
          this.items = data || []
          console.log('data', data)
        })
      } else {
        // ถ้าเป็น guest = ใช้ localstorage
        const cartItem = localStorage.getItem('cart-item')
        if (cartItem) {
          this.items = JSON.parse(cartItem)
        }
      }
    },
    async addToCart (productData) {
      const itemIndex = this.items.findIndex(
        item => item.name === productData.name
      )
      if (itemIndex >= 0) {
        this.updateQuantity(itemIndex, this.items[itemIndex].quantity + 1)
      } else {
        productData.quantity = 1
        this.items.push(productData)
      }

      // ทำการเพิ่มของเข้า cart ลง realtime database
      await set(this.cartRef, this.items)
      localStorage.setItem('cart-item', JSON.stringify(this.items))
    },
    async updateQuantity (index, quantity) {
      this.items[index].quantity = parseInt(quantity)
      // ทำการเพิ่มจำนวนของเข้า cart ลง realtime database
      await set(this.cartRef, this.items)
      localStorage.setItem('cart-item', JSON.stringify(this.items))
    },
    async removeItemInCart (index) {
      this.items.splice(index, 1)
      // ทำการ update cart หลังลบ product ใน cart แล้ว
      await set(this.cartRef, this.items)
      localStorage.setItem('cart-item', JSON.stringify(this.items))
    },
  }
})

import { defineStore } from 'pinia'

import {
  ref,
  onValue
} from 'firebase/database'

import { realtimeDB } from '@/firebase'

export const useEventStore = defineStore('event', {
  state: () => ({
    alert: false,
    data: {},
    banner: {} // เพิ่ม object banner
  }),
  actions: {
    loadBanner () {
      const bannerRef = ref(realtimeDB, 'banner')
      onValue(bannerRef, (snapshot) => {
        this.banner = snapshot.val()
      })
    },
  }
})

<script setup>
import { ref, onMounted } from 'vue'

import { useEventStore } from '@/stores/event'

const eventStore = useEventStore()

onMounted(() => {
  eventStore.loadBanner()
})
</script>

<template>
  <div class="max-w-screen-xl mx-auto">
    <!-- เพิ่มส่วนแสดง banner ออกมา  -->
    <div v-if="eventStore.banner.display" class="w-full">
      <a :href="eventStore.banner.link" target="_blank">
        <img class="w-full" :src="eventStore.banner.imageUrl">
      </a>
    </div>

    <slot></slot>
  </div>
</template>