10 Nov 2020 by Karol Kielecki

Saleor 2.11: Invoicing API, Storefront SDK, App Installation Support

Welcome to the new release, Saleor 2.11. We've introduced some exciting new key features. Let's take a look at what the latest version has to offer.

In the previous release, Saleor 2.10, we added multi-warehouse, permission groups, and a new checkout—so now we are excited to show you what Saleor 2.11 is bringing!

A full summary of changes in Saleor 2.11 is available in the following changelogs:

Saleor documentation has been updated. Read the latest version here.


Essential changes

Saleor API

  • Apps: we’ve extended external app support. Learn how to write an app in Saleor here.
  • Integrations: we’ve added a new payment gateway Adyen.
  • Checkout: we’ve updated our checkout process, adding an additional confirmation step.
  • Permissions: we’ve added a MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES permission. Learn more here.

Saleor Storefront

  • SDK: use the SDK as a standalone package.
  • Translations: we've added React Intl integration.
  • Auth: a new Saleor Auth API in the SDK with JWT token handling. Here’s an example of useAuth stateful hook, which may retain information about the user and handle its authentication for your app:
const {
  user,
  authenticated,
  token,
  tokenRefreshing,
  tokenVerifying,
  loaded,
  registerAccount,
  resetPasswordRequest,
  signIn,
  signOut,
  refreshSignInToken,
} = useAuth();

Additionally, we have added some simple hooks to obtain basic information about products:

const { data, current, loading } = useProductDetails({});
const { data, current, loading, next, pageInfo } = useProductList({
  first: 10,
});

Similarly, you may also use useCollectionDetails, useCollectionList, useCategoryDetails, useCategoryList, useCategoryAncestorsList, useCategoryChildrenList. If you want to use the SDK in a non-react environment, we have prepared distinct classes accessible from the API, which contains the same methods:

const authMethods = saleorAPI.auth;
const productsMethods = saleorAPI.products;
const collectionsMethods = saleorAPI.collections;
const categoriesMethods = saleorAPI.categories;

Saleor Dashboard

  • Metadata: we’ve added metadata editing. Learn more here.
  • Apps: we’ve created a new Apps section in the dashboard, dedicated to managing external applications. More info later in the article.

New features in Saleor 2.11

Invoicing API and plugin

Our new invoicing API allows you to generate invoices using the tools you want. You can build and integrate your own favorite invoicing integrations through Saleor’s plugin architecture. Alternatively, you can simply use our plugin to create outstanding invoices straight out of the box!

How does it work?

Go to the Orders tab in your dashboard. Click on the order you would like to generate an invoice for, this will open the order details page. Click Generate in the Invoices window on the bottom right. Et voila, you have a beautiful invoice!

How to generate an invoice

How to generate an invoice

Here’s an example of an invoice using the built-in plugin:

An example of an invoice

An example of an invoice

Saleor SDK

We’ve released the long-awaited Saleor SDK. It’s a framework-agnostic JavaScript SDK that allows you to create custom storefronts seamlessly with GraphQL.

The package contains objects and helpers to integrate your website with Saleor easily. You can find the installation instructions and basic usage information in the readme section of the following GitHub repository.

Take a look at this example of Saleor Storefront, which already uses Saleor SDK.

App Installation Support

We decided to create a dashboard interface for app installation using a manifest JSON file and a new section in the dashboard dedicated to managing apps.

Previously in Saleor Dashboard, we had the following sections responsible for apps and webhooks: ServiceAccount and Webhooks.

You can now find a new dedicated Apps section on the main dashboard page. Apps.local includes the previous ServiceAccount and Webhooks sections, where you can also manage tokens and webhooks. In Apps, you can manage your installed apps. There is also an API that allows you to fetch all data of registered extensions from Saleor.

The apps section

The apps section

Export CSV

We've finally released the export tool that will help you to manage your products. You can select a subset of the product catalog and a set of fields and export the data to a CSV file.

How does it work?

Go to the Products page in the dashboard, then select the chosen products and click export.

CSV export tool

CSV export tool

You can find more information in our documentation here. We aim to deliver the final version of the tool, including the import tool, in the next release - Saleor 3.0.


Product management improvements

URL slug customization

From now on, you can edit slugs for products, categories, and collections in the Search Engine Preview section.

URL slug customization

URL slug customization

Default product variants

We’ve added an option to set a default variant in the product page.

A default variant

A default variant

Manual variant ordering

You can change the order of your variants in the product page.

Manual variant ordering

Manual variant ordering

Scheduled product availability

We’ve introduced some changes to product visibility options. You can now set a separate Available for purchase date so that the product can be viewed but not yet purchased.

Visibility

Taxes

We’ve added an option to override the product type’s tax rate. The option is available in the product page under the Taxes section.

Taxes


Future features

Multi-channel / Multi-currency (Saleor 3.0)

The progress on the multi-channel and multi-currency features is smooth, but it requires a lot of effort. We’ve already implemented the API and views for creating channels in the dashboard.

Storefront translations

We initially aimed to release support for storefront translations in version 2.11. We had to delay this as we needed to concentrate our resources on the multi-channel and multi-currency features.

Next.js integration

We’re working on bringing the best features of Next.js 10 into Saleor’s Storefront. Stay tuned for more information on server-side rendering, internationalization, image optimization, import splitting, and other performance improvements enabled by Next.js.

Saleor Roadmap

You can follow our roadmap here.


Community

If you are looking for more info on modifying your storefront, check the following Spectrum thread. It will help you to find all necessary files that can be modified.

Also, a huge thank you to our community member, Cyberdemic, for writing all this information down in one place!

Thank you!

As always, a big thank you to all our contributors and community members for their work and support. We much appreciate your input and feedback. If you have any questions, please feel free to reach us on Spectrum or Twitter.

Cheers! The Saleor Team


Related Articles:

— Share