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 are available. A cart query takes one argument, cartId, and returns information about the cart, including information about available shipping methods.
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:
Then you can send a request to the GraphQL API, and you will receive something like this:
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).
The GraphQL query and results should look like this:
How about other shipping methods?
Magento has a few other shipping methods:
The Flat Rate delivery method works in PWA Studio as well.
I tested the Free shipping delivery method, and it also works.
In-Store delivery is a 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?
Just for test I created a new delivery method called “Custom Delivery.”
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:
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?
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
Frontend developer, Certified Magento Full Stack Developer, writer, based in Poland. He has eight years of professional Software engineering experience. Privately, husband and father. He likes reading books, drawing, and walking through mountains.Read more