FileMaster

Edit File: Header.vue

<template>
  <div class="am-cat__header-inner">
    <div class="am-cat__back-btn">
      <AmButton
        v-if="props.backBtnVisibility"
        :prefix="arrowLeft"
        category="secondary"
        :type="btnType"
        :size="btnSize"
        @click="goBack"
        @keydown.enter="goBack"
      >
        {{props.btnString}}
      </AmButton>
    </div>
    <div
      v-if="props.cartBtnVisibility"
      class="am-cat__cart-btn"
    >
      <span class="am-cat__cart-number">
        {{props.cartItemsNumber}}
      </span>
      <AmButton
        aria-label="Go to cart button"
        category="secondary"
        :type="btnType"
        :size="btnSize"
        :round="true"
        :icon-only="true"
        :icon="iconCart"
        @click="goToCart"
      >
      </AmButton>
    </div>
  </div>
</template>

import {
  defineComponent
} from "vue"
import {useStore} from "vuex";
// * import composable
import {
  useRemoveLastCartItem,
} from '../../../../assets/js/public/cart'

let props = defineProps({
  btnString: {
    type: String,
    default: ''
  },
  btnType: {
    type: String,
    default: 'plain'
  },
  btnSize: {
    type: String,
    default: 'mini'
  },
  backBtnVisibility: {
    type: Boolean,
    default: true
  },
  cartBtnVisibility: {
    type: Boolean,
    default: false
  },
  cartItemsNumber: {
    type: Number,
    default: 0
  }
})

let arrowLeft = defineComponent({
  components: {IconComponent},
  template: `<IconComponent icon="arrow-left"></IconComponent>`
})

let iconCart = defineComponent({
  components: {IconComponent},
  template: `<IconComponent icon="cart"/>`
})

let emits = defineEmits(['goBack', 'goToCart'])

function goBack() {
  emits('goBack')
}

const store = useStore()

function goToCart() {
  useRemoveLastCartItem(store)

emits('goToCart')
}
</script>

&__back-btn {
      width: 100%;
    }

&__cart {
      &-btn {
        position: relative;

.am-icon-cart {
          font-size: 24px;
        }
      }

&-number {
        position: absolute;
        top: -6px;
        left: -6px;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        line-height: 1;
        border-radius: 50%;
        background-color: var(--am-c-error);
        color: var(--am-c-cat-main-bgr);
      }
    }
  }
}

// Public
.amelia-v2-booking #amelia-container {
  @include catalog-header;
}

// Admin
#amelia-app-backend-new #amelia-container {
  @include catalog-header;
}
</style>

Back