My role does not involve JavaScript development; instead, I focus on connecting the APIs I've created to front-end code written in Vue.js by a third party. Currently, I am struggling to determine the hierarchy between parent and child elements when accessing the 'shopping cart' to send details to a server. The flow of actions is as follows:
- A. Select a concession
- B. Choose an item to add to the cart
- C. Proceed to the cart
- D. Checkout
The following code snippet represents the Product Card section:
<template>
<div class="flex flex-col flex-wrap justify-center items-center w-1/3 px-12">
<img :src="require(`../../assets/images/` + backgroundImg)" :alt="product.id">
<h5 class="font-bold text-lg mt-2">{{ product.title }}</h5>
<p class="text-15px text-gray-500 ">{{ product.short }}</p>
<p class="text-15px text-gray-500 px-8">{{ product.long }}</p>
<p class="text-base font-bold">${{ formatPrice(product.price) }}</p>
<Button @click.native="$emit('add-cart', product)" msg="Add to Cart" class="bg-seafoam rounded-md lg:text-sm lg:px-8 text-white mt-1"></Button>
</div>
</template>
<script>
import Button from '../Button.vue';
export default {
name: 'ProductCard',
components: {
Button
},
props: {
product: Object
},
data() {
return {
backgroundImg: this.product.image,
}
},
methods: {
formatPrice(value) {
let val = (value/1).toFixed(2)
return val.toLocaleString("en", {useGrouping: false, minimumFractionDigits: 2,})
}
}
}
</script>
In the Product List code below, various sections such as Menu Heroes, Cart Heroes, and Checkout Heroes are managed:
<template>
...
Next, we have the Cart List code where the items in the cart and their total prices are displayed:
<template>
...
The Cart Widget Code consists of a widget showing the number of items in the cart along with the total price:
<template>
...
Below is the code for cart cards displaying information about each item in the cart:
<template>
...
Lastly, the Checkout code handles contact and delivery information needed for placing an order:
<template>
...
</template>
<script>
...
</script>
I am looking to access items stored in the cart in order to make a POST call to the server. However, I'm facing challenges in achieving this. Any guidance would be greatly appreciated.
Just to clarify, the 'Product' object contains properties such as id, title, short description, long description, price, and a default quantity of 1.