/home/henzagold/oldsite/components/ Current File: //home/henzagold/oldsite/components/Cart.vue
<template>
 <div class="dropdown-btn">
   <a href="#" style="color:#21284e;display: flex;flex-direction: row-reverse" @click="toggle">

      <svg style="width:24px;height:24px" viewBox="0 0 24 24">
        <path fill="currentColor" d="M17,18A2,2 0 0,1 19,20A2,2 0 0,1 17,22C15.89,22 15,21.1 15,20C15,18.89 15.89,18 17,18M1,2H4.27L5.21,4H20A1,1 0 0,1 21,5C21,5.17 20.95,5.34 20.88,5.5L17.3,11.97C16.96,12.58 16.3,13 15.55,13H8.1L7.2,14.63L7.17,14.75A0.25,0.25 0 0,0 7.42,15H19V17H7C5.89,17 5,16.1 5,15C5,14.65 5.09,14.32 5.24,14.04L6.6,11.59L3,4H1V2M7,18A2,2 0 0,1 9,20A2,2 0 0,1 7,22C5.89,22 5,21.1 5,20C5,18.89 5.89,18 7,18M16,11L18.78,6H6.14L8.5,11H16Z" />
      </svg>
     <span class="cart-content" style="position:absolute">

        <span class="count-cart">{{ cartLength }}</span>

      </span>
   </a>
   <div class="dropdown-menu cart-dropdown-menu">
     <div class="close-btn close-dark" @click="toggle">
       <span></span>
       <span></span>
     </div>
     <div v-if="!cartLength">
       <img src="/img/nofound.svg" alt="هنزاگلد-سبد خرید"/>
       <h5 style="text-align: center" class="end">سبد خرید خالی است</h5>
     </div>
     <ul class="cart-items-box scroll-style-7" >
       <template v-for="(item,index) in cartItems">
         <li class="cart-item" v-if="item && item.product" :key="index">
           <div class="img">
             <img v-if="item.product.image" :src="item.product.image.image" :alt="item.product.title">
           </div>
           <div class="content">
             <h6 style="font-size: 12px;margin: 0"><a :href="link(item.product)">{{item.product.title}}</a></h6>
             <h6 style="font-size: 12px">تنوع  :{{ variant(item).title }}</h6>
                <span style="float: left;cursor: pointer;margin-left:10px" @click="removeCartItem(item)">
                  <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M14.12,10.47L12,12.59L9.87,10.47L8.46,11.88L10.59,14L8.47,16.12L9.88,17.53L12,15.41L14.12,17.53L15.53,16.12L13.41,14L15.53,11.88L14.12,10.47M15.5,4L14.5,3H9.5L8.5,4H5V6H19V4H15.5M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19M8,9H16V19H8V9Z" />
                  </svg>
                </span>
             <p>تعداد : {{ item.qty }} </p>
             <p>{{ variant(item).price | price }}</p>
           </div>
         </li>
       </template>
     </ul>
     <div class="cart-items-box">
       <div class="cart-item" v-if="cartLength">
         <span>جمع کل</span>
         <span>{{ checkout | priceUnit }}</span>
       </div>
       <div class="cart-item actions">
         <a href="https://henzagold.com/customer/checkout" class="btn-custom btn-sm secondary" v-if="cartLength">نهایی کردن سفارش</a>

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

<script>
export default {
  name: "cart",
  computed:{
    cartItems() {

      return this.$store.state.cart.items;
    },
    cartLength() {
      return this.$store.state.cart.items.length;
    },

    checkout(){
        let totalPrice=0;


        this.cartItems.forEach((item)=>{
            let variant=item.product.variants.find((varItem)=>{
              return varItem.id==item.vid;
            });
            totalPrice += variant.price*item.qty;

        });

        return totalPrice;
    }
  },
  methods:{
    toggle(e){
      e.preventDefault();
    //  console.log(`%c click`,'color:blue;border:1px solid dodgerblue')
      const submenu = $(".dropdown-menu.cart-dropdown-menu");
      submenu.toggleClass('show');
    },
    link(product){
      return `${process.env.baseUrl}product/${this.$witheSpaceToDash(product.title)}/${product.id}`;
    },
    variant(cartItem)
    {
      return cartItem.product.variants.find( (item)=>{
          return item.id==cartItem.vid;
      });
    },
    removeCartItem(item)
    {
      this.$store.dispatch('cart/remove',item);
    }
  },
  mounted() {
    this.$store.dispatch('cart/init');
      /*-------------------------------------------------------------------------------
       Navigation cart Toggle
       -------------------------------------------------------------------------------*/

      $(".mobile-search>a").on('click', function() {
        $(".mutiple-search").slideToggle('');
      });
  }
}
</script>

<style>
.count-cart {
  background-color: var(--primary-color);

  position: absolute;
  display: inline-block;
  text-align: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  top: -9px;
  left: 15px;
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
}

.scroll-style-7::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
  border-radius: 10px;
}

.scroll-style-7::-webkit-scrollbar
{
  width: 10px;
  background-color: #F5F5F5;
}

.scroll-style-7::-webkit-scrollbar-thumb
{
  border-radius: 10px;

  background-color: var(--primary-color);
}

</style>