Shipping methods in PWA Studio

Shipping methods in PWA Studio

Shipping methods are essential for each web store owner, and one of the most frequently asked questions about PWA Studio is:

Does PWA Studio support all of the shipping methods available in the Magento backend?

I did a small investigation, and I would like to show you how shipping methods are rendered on the PWA Studio storefront.

Firstly, take a look at the GraphQL queries to see what data about delivery methods is available. A cart query takes one argument, cartId, and returns information about the cart, including information about available shipping methods.

Loading...

Let’s try to get a cart. You need to have the ID of the cart so you can add a product to the cart on the Storefront and grab its ID from one of the GraphQL queries:

Shipping methods in PWA Studio

Then you can send a request to the GraphQL API, and you will receive something like this:

Shipping methods in PWA Studio

As you can see, there is only one method, called “Flat rate.” Let’s enable another one in the Magento backend and check if it will work or not. Let’s use the Table Rate shipping method.

If you are not familiar with table rates in Magento, take a look at this guide https://docs.magento.com/user-guide/shipping/shipping-table-rate.html

I enabled the Table Rate delivery method and uploaded a tablerates.csv file that contains one new entry, which says that the cost of shipping to Poland is 20 USD.

After that, I added the product to the cart, and I went to the checkout. I filled out the shipping address form. I chose an address in Poland. After that, I can select the Table Rate shipping method (the best way).

Shipping methods in PWA Studio

The GraphQL query and results should look like this:

Shipping methods in PWA Studio

How about other shipping methods?

Magento has a few other shipping methods:

  1. Flat rate
  2. Free shipping
  3. In-Store Delivery
  4. UPS
  5. USPS
  6. FedEx
  7. DHL

Flat rate

The Flat Rate delivery method works in PWA Studio as well.

Free shipping

I tested the Free shipping delivery method, and it also works.

In-Store Delivery

In-Store delivery is relatively new functionality in Magento itself, so the fact that there is no support for this shipping method cannot be surprising. There is information in the official PWA Studio Roadmap that this functionality should be covered in 2021.

UPS, USPS, FedEx, DHL

I haven’t checked these methods yet. Maybe you already have? If yes, let me know in the comments or in a private message. I would really appreciate that!

Custom shipping methods

What about custom shipping methods? Will GraphQL return them, and will they be displayed in PWA Studio?

Shipping methods in PWA Studio

Just for test I created a new delivery method called “Custom Delivery.”

figure

You can find the Magento 2 module containing this delivery method on my Github.

After that, I checked Venia Storefront, and the Custom Delivery method is visible there:

figure

Customizations

The good news is that custom shipping methods appear on the Storefront. If you wanted to have something more involved, you would have to add a few customizations. There are visible only radio buttons and names for each shipping method. Unfortunately, we don’t have an interface to extend/customize shipping methods this time as developers. Of course, you can overwrite core files and do anything you need, but you would be continuously growing your technical debt if you did things this way.

There is a feature request created in the PWA Studio Community backlog on GitHub within which an interface for extending delivery methods should be added. You can see progress here: https://github.com/magento/pwa-studio/issues/2842

Maybe you would like to contribute?

Summary

Shipping methods are available for PWA Studio through GraphQL queries, and they are displayed on the storefront. Custom shipping methods also are shown as well. The main problem is that there is no interface to extend shipping methods on the storefront, and because of that, customizations can be hard.

Did you like it? Share!

Each share supports and motivates me to create new content. Thank you!

About the author

Marcin Kwiatkowski

Certified Magento Full Stack Developer, based in Poland. He has 7 years of professional Software engineering experience. Privately, husband, father, and DIY enthusiast.

Read more

You may also like