Facing an Issue While Creating a Shopify Checkout UI Extension
I created a simple Checkout UI Extension for the EZ Delivery shipping service.
Now, my task is to update the total price when someone selects my shipping method. However, I am facing some challenges in implementing this functionality.
Can you please help? This is Shopify checkout Ui react js extension
import React, { useState } from "react";
import {
reactExtension,
BlockStack,
Checkbox,
Select,
Text,
Banner,
useApplyCartLinesChange,
useCartLines,
} from "@shopify/ui-extensions-react/checkout";
export default reactExtension("purchase.checkout.shipping-option-list.render-after", () => (
<Extension />
));
function Extension() {
const [isEZDeliverySelected, setIsEZDeliverySelected] = useState(false);
const [checked, setChecked] = useState({
sameday: false,
nextday: false,
priority: false,
});
const [selectedTimeframe, setSelectedTimeframe] = useState("");
const [loading, setLoading] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
const updateCartLines = useApplyCartLinesChange();
const cartLines = useCartLines();
console.log("updateCartLines", updateCartLines);
console.log("cartLines", cartLines);
const deliveryOptions = {
sameday: 23.5,
nextday: 18.5,
priority: 85.0,
};
const handleDeliveryCheck = (option) => {
const updatedCheckedState = {
sameday: option === "sameday",
nextday: option === "nextday",
priority: option === "priority",
};
setChecked(updatedCheckedState);
};
const handleEZDeliveryChange = (isChecked) => {
setIsEZDeliverySelected(isChecked);
};
return (
<BlockStack spacing="loose">
{loading && <Text>Loading... Please wait.</Text>}
{errorMessage && <Banner status="critical" title={errorMessage} />}
<Checkbox checked={isEZDeliverySelected} onChange={handleEZDeliveryChange}>
EZ Delivery as a shipping service
</Checkbox>
{isEZDeliverySelected && (
<>
<Text size="medium" emphasis="strong">
Choose Your Delivery Option:
</Text>
<Checkbox
onChange={() => handleDeliveryCheck("sameday")}
checked={checked.sameday}
>
Same Day Delivery - ${deliveryOptions.sameday}
</Checkbox>
<Checkbox
onChange={() => handleDeliveryCheck("nextday")}
checked={checked.nextday}
>
Next Day Delivery - ${deliveryOptions.nextday}
</Checkbox>
{checked.nextday && (
<Select
label="Select Timeframe"
options={[
{ label: "8 AM - 12 PM", value: "8-12" },
{ label: "12 PM - 4 PM", value: "12-4" },
{ label: "4 PM - 8 PM", value: "4-8" },
]}
onChange={setSelectedTimeframe}
value={selectedTimeframe}
/>
)}
<Checkbox
onChange={() => handleDeliveryCheck("priority")}
checked={checked.priority}
>
Top Priority Delivery - ${deliveryOptions.priority}
</Checkbox>
</>
)}
</BlockStack>
);
}
