New Shopify Certification now available: Liquid Storefronts for Theme Developers

Shopify Checkout Ui Extension Unable To Get address From ShippingAddress Method

firstideasoft
Shopify Partner
9 0 2

We'll need a function built that block checkout if it's an International Order with a PO Box.

 

For international orders shopify populates DHL Express as a shipping name.

 

IF DHL Express and Address = PO Box in this condition we need to Block Progress of checkout.

 

How to get the ShippingAddress using api in javascript code, First i need to get the address after that am going to validate if address have PO Box .

Am not using react, am using the javascript. It seems there is no proper example for using the Ui Extension Api with javascript.

Here is my code, Am new to using the app with extension, Am not sure my code is correct.

 

import {
  extension,
  } from "@shopify/ui-extensions/checkout";
// Set the entry point for the extension
export default extension("purchase.checkout.delivery-address.render-before", renderApp);

function renderApp(root, api, { extension, buyerJourney }) {
  
  const address = api.shippingAddress();

  // Use the `buyerJourney` intercept to conditionally block checkout progress
  buyerJourney.intercept(({ canBlockProgress }) => {
   
    if (canBlockProgress && address?.address1 && address.address1.length > 30 ) {
      console.log(address);
      console.log(address.city);
      return {
        behavior: "block",
        reason: `Invalid shipping country`,
        errors: [
          {
            // Show a validation error on the page
            message: "Please keep your input under 30 characters.",
            target: '$.cart.deliveryGroups[0].deliveryAddress.address1',
          },
        ],
      };
    }
    return {
      behavior: "allow",      
    };
  });
}
Replies 0 (0)