useCartProduct

This hook is used to get the cart product data.

props	Type	Description	Example
openProduct	Function	Opens the product page	<button onClick={openProduct}>Open Product</button>
title	String	Product title	'T shirt Yasi'
isFreeGift	Boolean	Is the product a free gift	false
imageUri	String	Product image url	'https://cdn.shopify.com/image.jpg'
variationText	String	Product variation text	'XL / blue'
salePrice	String	Product sale price	'Rs. 60'
regularPrice	String	Product regular price	'Rs. 35'
unitRegularPrice	String	Product unit regular price	'Rs. 35'
unitSalePrice	String	Product unit sale price	'Rs. 30'
onRemoveItem	Function	Removes the product from the cart	<button onClick={onRemoveItem}>Remove Item</button>
removeLoading	Boolean	loading state of the remove item	false
onSale	Boolean	Is the product on sale	true
quantity	Number	Product quantity	1
__appmakerCustomStyles	Object	Custom styles	{button: { backgroundColor: '#ee3d63', }}
onQuantityChange	Function	Updates the product quantity	<button onClick={onQuantityChange}>Update Quantity</button>
quantityLoading	Boolean	loading state of the quantity change	false
itemSavingsAmount	String	Product savings amount	'40'
itemSavingsWithCurrency	String	Product savings with currency	'Rs. 40'
regularPriceWithCurrency	String	Product regular price with currency	'Rs. 35'
variantLineItemRegularPriceWithCurrency	String	Product variant line item regular price with currency	'Rs. 70'
variantLineItemSalePriceWithCurrency	String	Product variant line item sale price with currency	'Rs. 60'
discountTitle	String	Product discount title	'Discount'
currencyHelper	Function	Currency helper function	currencyHelper(200 , 'INR' ) // Rs. 200
variantTitle	String	Product variant title	'XL / blue'
lineItemTotalPrice	String	Product line item total price	'30'
variant	Object	Shopify Product variant
increaseQuantity	Function	Increases the product quantity	<button onClick={increaseQuantity}>Increase Quantity</button>
decreaseQuantity	Function	Decreases the product quantity
canRemoveItem	Boolean	Can the product be removed	true
canUpdateQuantity	Boolean	Can the product quantity be updated	true
lineItemRegularPrice	string	Product line item regular price	'70'
lineItemRegularPriceWithCurrency	String	Product line item regular price with currency	'Rs. 70'
lineItemSubTotalPriceWithCurrency	String	Product line item sub total price with currency	'Rs. 30'
hasDiscount	Boolean	Does the product have a discount	true
hasSavings	Boolean	Does the product have savings	false
lineItemDiscountCodes	Array	Product line item discount codes	[ 'APP' ]
isLineItemFree	Boolean	Is the product line item free	false
sku	String	Product sku	'sku-123'
customAttributes	Array	Product custom attributes	[{ key: '_appmaker', value: 'true' }]

Usage:

import { useCartProduct } from '@appmaker-xyz/shopify';

const CartCard = (props) => {
  const {
    title,
    imageUri,
    regularPrice,
    isFreeGift,
    onSale,
    quantity,
    onRemoveItem,
    removeLoading,   
    decreaseQuantity,
    openProduct,
    currencyHelper,
  } = useCartProduct(props);
  return (
    <div>
      <h1>{title}</h1>
      <img src={imageUri} />    
      <text>{currencyHelper(regularPrice,'INR')}</text>  // Rs. 200
      <button onClick={openProduct}>Open Product</button>  
    </div>
  );
};