Returns the full expanded details of a delivery group and automatically re-renders your component when that delivery group changes.
import {
reactExtension,
Banner,
useDeliveryGroups,
useDeliveryGroup,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const deliveryGroups = useDeliveryGroups();
const {
selectedDeliveryOption,
targetedCartLines,
} = useDeliveryGroup(deliveryGroups[0]);
return (
<Banner>
Selected delivery option:{' '}
{selectedDeliveryOption?.title}
</Banner>
);
}
Returns the full expanded details of a delivery group and automatically re-renders your component when that delivery group changes.
deliveryGroup: DeliveryGroup
export function useDeliveryGroup< ID extends RenderExtensionTarget = RenderExtensionTarget, >(deliveryGroup: DeliveryGroup): DeliveryGroupDetails { const {lines} = useApi<ID>(); const cartLines = useSubscription(lines); return useMemo(() => { if (!deliveryGroup) { throw new DeliveryGroupHookError( 'useDeliveryGroup must be called with a delivery group from the useDeliveryGroups hook', ); } const deliveryGroupDetails = { ...deliveryGroup, selectedDeliveryOption: getSelectedDeliveryOption(deliveryGroup), targetedCartLines: getTargetedCartLines(deliveryGroup, cartLines), }; return deliveryGroupDetails; }, [deliveryGroup, cartLines]); }
Represents the delivery information and options available for one or more cart lines.
The cart line references associated to the delivery group.
The delivery options available for the delivery group.
The selected delivery option for the delivery group.
The type of the delivery group.
Whether delivery is required for the delivery group.
Represents a reference to a cart line.
The unique identifier of the referenced cart line.
Represents a base interface for a single delivery option.
The unique identifier of the delivery option.
The title of the delivery option.
The description of the delivery option.
Represents a reference to a delivery option.
The unique identifier of the referenced delivery option.
The possible types of a delivery group.
'oneTimePurchase' | 'subscription'
Represents a DeliveryGroup with expanded reference fields and full details.
The selected delivery option for the delivery group.
The cart lines associated to the delivery group.
The delivery options available for the delivery group.
The type of the delivery group.
Whether delivery is required for the delivery group.
These line item IDs are not stable at the moment, they might change after any operations on the line items. You should always look up for an updated ID before any call to `applyCartLinesChange` because you'll need the ID to create a `CartLineChange` object.
The merchandise being purchased.
The quantity of the merchandise being purchased.
The details about the cost components attributed to the cart line.
The line item additional custom attributes.
Discounts applied to the cart line.
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
A globally-unique identifier.
The product variant’s title.
The product variant's subtitle.
Image associated with the product variant. This field falls back to the product image if no image is available.
List of product options applied to the variant.
The product object that the product variant belongs to.
Whether or not the product requires shipping.
The selling plan associated with the merchandise.
The image URL.
The alternative text for the image.
The name of the merchandise option.
The value of the merchandise option.
A globally-unique identifier.
The product’s vendor name.
A categorization that a product can be tagged with, commonly used for filtering and searching.
A globally-unique identifier.
The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line.
The price amount.
The ISO 4217 format for the currency.
'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL'
The key for the attribute.
The value for the attribute.
CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation
The code for the discount
The type of the code discount
The money amount that has been discounted from the order
The title of the automatic discount
The type of the automatic discount
The money amount that has been discounted from the order
The title of the custom discount
The type of the custom discount
The money amount that has been discounted from the order
A unique identifier for the bundle line component. This ID is not stable. If an operation updates the line items in any way, all IDs could change.
The merchandise of this bundle line component.
The quantity of merchandise being purchased.
The cost attributed to this bundle line component.
Additional custom attributes for the bundle line component.