How I Can Hide Delivery Method Based On The Products In The Cart?

Retired Boards Appdev Functions
, , ,
1

Hi,

i’m creating an Checkout Extensibility/Functions app, using that app merchant can show/hide Delivery Methods based on the product tags. e.g: Shipping, Local Pickup.

i’m able to pick the products tags but i don’t know how to hide the Delivery Method.
i’m trying to achive this using Delivery_customization Shopify function, but it only allows me to Hide the Delivery Options not the Delivery Method.

how i can hide/show Delivery Method as well.

1 Like
2

Hi @shipperhq-dave ,

Thanks for your reply. Actually i was checking if i can hide Delivery Methods like Shipping, Local Pickup etc, not the Shipping methods.

3

Have you had any luck with this?
We’ve used extensions to show/hide the delivery ‘methods’ before, but are now trying to figure out how to show/hide the delivery ‘otpions’ as you are (ie, local pickup vs shipping)

4

Hi
Yes, I found the solution. Actually, we can’t show/hide the Delivery Options. So, for the restriction, I used the Checkout UI Extension. Then, based on product tags, I block the user from continuing if they select a restricted delivery option.

For example, if a user adds a drop-shipping product and selects Local Delivery, I block the user and show an error message.

5

re: block the user from continuing

Hello, AsimTahir1.

Can you explain what function/method you are using to block the user from continuing?

Thank you very much!

6

Hey @DeeDee-TDY ,

You’ve probably found the solution by now. To others’ benefit though, you can use a Shopify Function where you can query the delivery option’s method type (https://shopify.dev/docs/api/storefront/2024-10/enums/DeliveryMethodType) to filter for the relevant handles. Then you can pass the handle to the hide operation. For example, if I only have one deliveryGroup and I want to exclude Shipping, I could do something like:

export function run(input) {
  let toHide = input.cart.deliveryGroups
    .filter(group => group.deliveryOptions &&
      group.deliveryOptions[0].deliveryMethodType == "SHIPPING")
    .flatMap(group => group.deliveryOptions)
    .map(option => /** @type {Operation} */({
      hide: {
        deliveryOptionHandle: option.handle,
      }
    }));
  return {
    operations: toHide
  };
};

Hope this helps!

7

Isn’t that still just hiding the delivery options, not the method selector?
Ie, At checkout it will still prompt you to choose a delivery method on the ‘information’ screen (‘Ship’ or ‘pickup’), but when you choose ship and continue to the shipping screen, there will be no available choices.
Its still that up front ‘method’ radio button i’m trying to avoid.

8

Hey @emalueg , that’s right. I was essentially replying to @DeeDee-TDY whose question was about ‘blocking the user from continuing’. So technically, if you hide the Shipping payment option from all payment groups, then the user is restricted and unable to check out, given they have selected the Shipping delivery method.

I don’t know of a way to disable a delivery method via Functions/Extensions, unfortunately.