script>
import {ref} from '@nuxtjs/composition-api';
import {useProduct, useCart} from '~/composables';
import {SfImage, SfTile, SfHeading, SfPrice, SfSelect, SfAddToCart} from '@storefront-ui/vue';
import productGetters from '~/modules/catalog/product/getters/productGetters';
export default {
components: {
SfTile,
SfImage,
SfHeading,
SfPrice,
SfSelect,
SfAddToCart
},
setup() {
const searchHandler = ref('');
const product = ref([]);
const prodDetail = ref([])
const quantity = ref('')
const {
getProductList,
getProductDetails,
} = useProduct();
const {
addItem,
load,
isInCart,
error
} = useCart()
const buttonHandler = async () => {
const productList = await getProductList(
{
filter: {
sku: {
eq: searchHandler.value.toString()
}
}
}
)
const productDetail = await getProductDetails(
{
filter: {
sku: {
eq: searchHandler.value.toString()
}
}
}
)
prodDetail.value = productDetail.items
product.value = productList.items
console.log(product.value[0], 'product list')
console.log(prodDetail.value[0], 'product detail')
}
// add to cart handler
const addToCartHandler = async () => {
const productValue = await addItem({
product: prodDetail.value,
quantity:quantity.value
})
console.log(error,"error in composable")
console.log(productValue,'product added to the cart')
console.log(quantity, 'quantity of the product')
}
// get product handler
const productHandler = async () => {
await load
console.log(isInCart(),"cart values")
}
return {
searchHandler,
product,
productGetters,
buttonHandler,
prodDetail,
addToCartHandler,
SfImage,
SfTile,
SfHeading,
SfPrice,
SfSelect,
SfAddToCart,
getProductDetails,
getProductList,
quantity,
productHandler
}
}
}
</script>
I am trying to implement add to cart functionality here, but getting `useCart/addItem Error:
Product Type undefined not supported in add to cart yet`
The error I really don't know what is happening here. I'm also getting undefined in the console. I am adding simple products, but i think the error is about type, but don't know how to resolve this issue.