Creating a webshop using OrchardCore.Commerce¶
Orchard Core's Commerce module can be used to create a fully functional webshop in a few simple steps. Check out the numbered steps to learn how to set up a webshop featuring highly customizable products and online payment, and read on to learn about using other key features such as order management, inventory management, promotions, and taxation.
Creating a basic webshop¶
The one-click approach¶
The below steps include manually creating and configuring content types and items. An alternative, albeit less detailed, approach is to simply run the Orchard Core Commerce - Development recipe to get the relevant sample content types and items — this may be quicker, but it also misses out on the explanation of the contents. As such, reading the following points is still recommended.
Step 1 — Install the Commerce module using NuGet¶
Step 2 — Enable necessary features¶
Certain Orchard Core Commerce features, as well as some prerequisite stock Orchard Core features, need to be enabled for the necessary functionality. This can be done under Configuration > Features. These features include the following:
- Orchard Core Commerce - Core: Registers core components of Commerce features.
- Orchard Core Commerce - Payment Provides the basics for online payment.
- Orchard Core Commerce - Payment - Stripe: Provides online payment implementation using Stripe.
- Orchard Core Commerce - Session Cart Storage: Provides shopping cart functionality.
- Widgets: Allows rendering widgets in zones.
- Layers: Allows rendering widgets across pages based on conditions.
- Feeds: Adds feeds capabilities.
- Lists: Adds a content type that can be used as a container.
Using the bulk enable option makes this process swift.
Optionally, enable a few other useful Commerce features as well to get even more out of your webshop. More on these later in the corresponding section, but these include:
- Orchard Core Commerce - Inventory: Provides basic inventory management.
- Orchard Core Commerce - Promotion: Allows specifying discounts and promotions.
- Orchard Core Commerce - Tax: Provides tax-related functionality.
- Orchard Core Commerce - Custom Tax Rates: Enables locally maintaining tax rates.
Step 3 — Create a product content type¶
Products are rather crucial to a webshop, so let's create a Product content type. Any content type that has a
ProductPart and a price-providing part (e.g.
TieredPricePart) attached to it qualifies as a product. For a more technical overview of these parts, follow the links.
Alternatively, running the Orchard Core Commerce - Content - Product recipe also sets up a sample Product type with all the necessary parts attached.
Navigate to Content > Content Types and create a new type. Name it Product, attach
PricePart to it.
It's okay to leave the rest of the settings on default, they can be changed anytime.
Now if you visit the item's page, you can add it to the cart.
A Product with excellent price to value ratio.
Step 4 — Create a Product List¶
Listing the available products is another expected feature for a webshop. This can be done in multiple ways, but let's see a simple one that includes a content type which utilizes the Commerce module's
ProductListPart. Go to Content > Content Types and create a new type with the name Product List. Add
AutoroutePart to it. Listing the products is taken care of by
ProductListPart, which requires no additional configuration, and the basic settings are up to preferences.
This approach only requires using a few parts with no extra configuration steps.
Optionally, edit the
AutoroutePart's configuration to allow setting the Product List as the homepage.
Check Show homepage options. Or don't, up to you.
Listing available Products makes browsing easier for customers.
Step 5 — Create Shopping Cart Widget¶
Shopping without a shopping cart is a difficult task: while it's not outside the realm of possibility, let's make our lives easier by creating one. For this, we're going to need to create Zones, Layers, and finally a Widget.
- Zones: Navigate to Design > Settings > Zones and define the zone where you want the Shopping Cart Widget to be rendered. Make sure to use zones that are also referenced by your Layout. To learn more about Zones, refer to their documentation.
Header, Content, Footer, any zone can be created here. Except for Ozone, that's illegal.
Layers: A Layer is also going to be necessary for the Widget, so if you don't have one set up yet, see the relevant documentation page.
Widget: Widgets are content items that have their stereotype set to Widget. The Commerce module creates a simple Shopping Cart Widget when it's enabled, so we'll just use that. For more extensive documentation about Widgets, see the usual place.
To actually add a Widget, return to the Design > Widgets page. Click the Add Widget button that's within the Zone of your choice, and select Shopping Cart Widget.
Any content type with the Widget stereotype can be added this way, but let's just stick to the shopping cart.
Name the Widget and select the Layer where it should be rendered.
Step 6 — Enable a payment provider (Stripe)¶
Having Products and being able to browse them is great and all, but customers will also need a way to checkout and pay for their cart's content. This is where payment providers come into the picture. For simplicity's sake, we'll use Stripe as the payment provider here. Ensure the Orchard Core Commerce - Payment - Stripe feature is enabled, then go to Configuration > Commerce > Stripe API. The Publishable Key and Secret Key fields need to be filled in for the Stripe Payment form to work on the checkout page, see the links on the settings page for more.
If you don't already have the necessary API keys, follow the links on the page.
With that done, the Stripe Payment form now appears on the checkout page and the purchase can be completed.
This will allow customers to pay to their card's content.
Other useful Commerce features¶
Orders contain all data related to the transaction that triggered their creation. Just like most things in Orchard, Orders are content items, and they are automatically created when a user checks out. They can also be created manually on the dashboard.
Orders include all sorts of information about the transaction, including charges.
To create Orders manually, head to the usual Content > Content Items page and select Order from the New button's dropdown menu.
Products can be added to and removed from any Order manually.
Price Variants Products¶
Products that have
PriceVariantsPart attached to them can have multiple different prices associated with them based on predefined attributes. This is handy when there are variants of the given product and you want to set different prices for each version. These prices are generated based on those Text Product Attribute Fields of the content type that are restricted to predefined values. For a more technical overview, see the part's documentation.
Create a new product type, or edit an existing one, and attach
PriceVariantsPart to it. Then add a new Text Product Attribute Field to it.
Name the field at will, but make sure to choose the right field type.
Next, edit the newly added field's settings, fill out the Predefined values box and tick the Restrict to predefined values checkbox.
While optional, the Default value field might be useful as well.
When creating a new Product with these settings, multiple prices can be specified.
Apart from the base Price, multiple different prices can be provided.
Now the variants can be selected from when viewing the Product.
With these settings, one variant may be chosen and added to the cart. Different settings could allow multiple choices as well.
The module comes with basic tax support capabilities that include specifying gross prices and tax rates on products. These can be utilized by attaching
TaxPart to content types that also have
ProductPart. For a detailed overview of the feature, see its documentation.
TaxPart present, these fields become available in the content item's editor.
Setting discounts for products is also possible by attaching
DiscountPart to a type. This enables specifying discount amounts/percentages, as well as the scale and duration of the discount. Global discounts that apply to all products in the shop are also possible to create by using the
GlobalDiscount stereotype. As previously, see the feature's documentation for details.
Start and end dates can be set for discounts as well.
Basic inventory management capabilities are also present in the Commerce module via the Inventory feature, which not only keeps inventory of products that have
InventoryPart attached, but also includes settings for back ordering and allowed order quantities. Find more details on the feature's documentation page, as well as on the
InventoryPart documentation page.
These inventory-related fields show up in the editor after the
InventoryPart has been attached, along with a checkbox to bypass them entirely if needed.
For a more visual presentation of a simple webshop, check out the relevant recording from the 2023 Orchard Harvest below.