Delivery customization stops firing once all are hidden

Solved

Delivery customization stops firing once all are hidden

MatthewGerdan
Shopify Partner
3 0 0

Hi Everyone,

 

Hoping someone can help me out. We are trying to move away from checkout.liquid and scripts.

Currently we have a script that prevents checkout when the address is invalid (po-box) by hiding the shipping options as well as only displaying the free shipping option if there is one.

I have created a function that does this and it mostly works the only issue I have is that once all shipping options are hidden then the function stops firing. Has anyone seen this before? 

 

Or does anyone know another way to prevent checkout based on the address that will work with extensibility?

 

See code below

 
const PAYLOAD = {
  operations: [],
};
 
export function run(input) {
  // Define a type for your configuration, and parse it from the metafield
  /**
  * @type {{
  *  stateProvinceCode: string
  *  message: number
  * }}
  */
  const configuration = JSON.parse(
    input?.deliveryCustomization?.metafield?.value ?? "{}"
  );

  input.cart.deliveryGroups.forEach(group => {

    const eligableForFreeShipping = cartIsEligableForFreeShipping(group.deliveryOptions)
    const addressIsValid = validateAddress(group.deliveryAddress)

    console.log(`addressIsValid = ${addressIsValid} , eligableForFreeShipping = ${eligableForFreeShipping}`)

    group.deliveryOptions.forEach(option => {

      if (
        !addressIsValid
        ||
        (eligableForFreeShipping && Number(option.cost.amount) !== 0)) {

        PAYLOAD.operations.push({
          hide: {
            deliveryOptionHandle: option.handle
          }
        })

      }

    });


  })


  return PAYLOAD;
};
 
class AddressSelector {
  constructor(triggers) {
    this.triggers = triggers.map(trigger => trigger.toLowerCase().trim());
  }
  match(address) {
    const addressFields = [address.address1, address.address2].map(line =>
      line ? line.toLowerCase() : ""
    ).join(" ");
    return this.triggers.some(trigger => addressFields.includes(trigger));
  }
}

const validateAddress = address => {

  let isValid = true

  // Add PO Box and HC Box triggers
  const poBoxTriggers = ["po box", /* ... other triggers ... */];
  const hcBoxTriggers = [["hc", /* ... */], ["box", /* ... */]];

  if (
    new AddressSelector(poBoxTriggers).match(address)
    ||
    (new AddressSelector(hcBoxTriggers[0]).match(address) && new AddressSelector(hcBoxTriggers[1]).match(address))
  ) {
    isValid = false
  }
  console.log(`Address validator return:${isValid}`)
  return isValid

}

const cartIsEligableForFreeShipping = deliveryOptions => deliveryOptions.some(o => Number(o.cost.amount) === 0)

 

11-39-21573-49857.png11-40-26212-90315.png

 

 

Accepted Solution (1)

Liam
Shopify Staff
2873 312 821

This is an accepted solution.

Hi Matthew,

 

Have you looked into using the Checkout Validation API to prevent a checkout when the address is invalid?

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 3 (3)

Liam
Shopify Staff
2873 312 821

This is an accepted solution.

Hi Matthew,

 

Have you looked into using the Checkout Validation API to prevent a checkout when the address is invalid?

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

MatthewGerdan
Shopify Partner
3 0 0

Thanks Liam, that was way easier 

Liam
Shopify Staff
2873 312 821

Great to hear this works for your use case! 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog