Hello all,
I have the below code that returns the variantId from the cart, I would like to retrieve the following information
from graphql, i have been unsuccessful in doing this, any guidance would be much appreciated as I have been struggling with for a few days.
I am extremely new to shopify and extensions in general, so any help
Thank you
query MyQuery {
productVariant(id: "gid://shopify/ProductVariant/43833627836572") {
id
title
price
inventoryItem {
unitCost {
amount
}
}
}
}
import React from 'react';
import { ScrollView, Button, Navigator, Screen, useApi, reactExtension } from '@shopify/ui-extensions-react/point-of-sale';
const SmartGridModal = () => {
const api = useApi();
console.log(api)
const printCartDetails = () => {
const { customer, lineItems } = api.cart.subscribable.initial;
// Print customer information and tags
console.log('Customer Information:', customer);
// Print each line item detail
console.log('Line Items:');
lineItems.forEach((item, index) => {
console.log(`Item ${index + 1}:`, item);
});
};
const onButtonPress = (type, title, amount) => {
const { lineItems } = api.cart.subscribable.initial;
// Create discount objects for each line item considering the quantity
const discounts = lineItems.map((item) => {
const discountAmount = item.quantity * 10;
return {
lineItemUuid: item.uuid,
lineItemDiscount: {
type: 'FixedAmount',
title: 'Wholesale Discount',
amount: discountAmount.toString(),
},
};
});
// Apply discounts to each line item
api.cart.bulkSetLineItemDiscounts(discounts);
api.toast.show('Discount applied to each item');
// Print cart details to console
printCartDetails();
};
return (
<Navigator>
<Screen name='Discounts' title='Available Discounts'>
<ScrollView>
<Button title='Apply $10 Wholesale Discount' onPress={() => onButtonPress('FixedAmount', 'Wholesale Discount', '10')} />
</ScrollView>
</Screen>
</Navigator>
);
};
export default reactExtension('pos.home.modal.render', () => {
return <SmartGridModal />;
});
