This week in Orchard - 11/01/2019
Do you remember the Nwazet Commerce module for Orchard 1.x? Orchard Core Commerce will be the Orchard Core port of that module and this week we will see the current state of this module! But first, take a look at the new structure for the documentation and the other improvements of Orchard Core!
On Orchard Core
The new structure for documentation
When you navigate to the Read The Docs site to check the documentation of Orchard Core, you will meet with a brand new structure.
All the previous docs are under the Reference menu on the top. Here you can see all the modules and their reference documentation. The Key Topics are just explaining core concepts. Explore the new documentation now!
Add culture argument to localization_set filter
This adds an argument for culture in the localization_set filter and defaults to current culture if there are no arguments.
{{ Model.ContentItem.Content.LocalizationPart.LocalizationSet | localization_set: "en" }}New ContentCard Shape to make Flow Editor extensible
Now the ContentCard shapes have been merged to the dev branch of Orchard Core, so you can use this awesome feature! But why ContentCard Shape Needed?
Every widget within FlowPart, BagPart, and WidgetsListPart has Bootstrap card with similar UI which can be dragged or deleted. Unfortunately, these parts add hard-coded alternate for widget editor Widget_Edit__Flow, Widget_Edit__Bag, and Widget_Edit__List just before DisplayAsync hence - none of the custom alternate defined in admin theme for the widget is applied i.e. Widget-WeatherWidget.Edit.liquid (Widget_Edit__WeatherWidget). Due to hard-coded alternates, none of the placement customizations on Content_Edit applies to Flow editor. i.e. having AdminTab in Flow editor. All widgets are framed with a <div> tag, with no ability to customize. This limits the usability of the Form module and makes very cumbersome to create complex forms.
FlowPart, BagPart, WidgetsListPart has the advantage of the free flow page but did not come even close to the usability of Layout in Orchard 1.x and Layout Template. Orchard DisplayMangement is powerful but FlowPart, BagPart, WidgetsListPart not utilizing it to make it extensible. These parts render cards using a hard-coded widget template in javascript, which doesn't honor shape alternates.
How ContentCard Shape Helps?
- Doesn't add any alternates to Content Editor, hence any edit alternates defined for a widget will be displayed in Flow editor.
- Because it's using Orchard DisplayMangement, that means all placement details are applied including Admin Tabs within Flow editor.
- Defines ContentCard_Frame shape and list of alternates that module developers can override in Module or Admin Theme.
- Ability to disable, move or delete the Widgets to create Orchard 1.x like Layout Template.
- Ability to control, expand or collapse by a developer in Module/Admin Theme.
- Rendered 100% from a shape, not using an HTML template inside Javascript.
- Uses ShapeTableProvider to define alternates.
Orchard 1.x layout like UI created with ContentCard shape, using some ContentTypes in BagPart and creating alternates only for ContentCard_Frame shape. Just check out to the dev branch to try out the new editing experience right now!
Add configuration section to setup docs
You can set up your site by providing the configuration parameters via the appsettings.json file. The documentation has been improved with the correct way you can do that.
Default pattern for autoroute and alias
When we add an Alias Part or an Autoroute Part, we don't have to go to the Settings, it will now use a standard pattern.
public class AliasPartSettings{[DefaultValue("{{ ContentItem.DisplayText | slugify }}")]public string Pattern { get; set; } = "{{ ContentItem.DisplayText | slugify }}";}
Demos
Orchard Core Commerce module
Orchard Core Commerce will be an Orchard Core port and partial rewrite of the open source Nwazet Commerce module that was built for Orchard 1.x. Nwazet Commerce was initially built in 2012 by Bertrand Le Roy, loosely based on a commerce sample by Sipke Shoorstra. Now let's see the current state of this module because there are features that you can already try out! First, set up your dev environment:
- Download/clone the module from GitHub.
- Place it under the src/OrchardCore.Modules folder.
- Add the existing project to the solution under src/OrchardCore.Modules in the solution explorer if you're using Visual Studio.
- Add a reference to the module from the OrchardCore.Cms.Web project.
If you are ready, build and run the solution. We set up the site using the Agency recipe for this demo. Now head to Configuration/Features in the admin, where you have to see the following modules. Enable both of them!
- Orchard Core Commerce: Registers the core components used by the Commerce features.
- Orchard Core Commerce Session Cart Storage: Registers session-based shopping cart persistence.
In OrchardCore.Commerce any content type can be a product. It's just the manner of having the Product Part attached to your content type. This part identifies any content item as a product, by its mere presence. It has only an SKU, that describes the most basic product attribute, which can also be used as an alias for the item. You will also find a new Price Part, that just a simple product price that stores the price of the product.
There is also the notion of Product Attribute Field, which adds the ability for a product to be modified with a set of attributes, in particular when added to a shopping cart. Examples of attributes can be shirt sizes (S, M, L, XL), dimensions, etc.
Now let's try these out! Let's say we would like to sell T-shirts in our shop. Create a new content type called T-shirt and add the Title, Common, HtmlBody, Product and Price parts to it. Every product could have different fields, in our case, we will need a size, a message printed on the T-shirt and the color of the T-shirt. Let's add these fields to our content type using the Text Product Attribute Field type.
You can add some predefined values to size and to colors and restrict them. Now let's create a new T-shirt, give it a name and some description and hit Preview.
Here you can see that the users can customize their product using our fields. They can set the size, the quantity, the message, and the color. And at the bottom of the screen, you could see an Add to cart button. Let's fill out these fields and click on this button!
We selected one black T-shirt with a size L and with a custom message. You can update the quantity here that will update the price if you click on the Update button or remove the product from the cart with the Remove button. So, for now, the following features are done:
- Product, price, and inventory parts and/or fields (those were a single part in Nwazet) Note: not all products have a price
- Shopping cart
To do:
- Checkout (probably redesigned around Orchard Workflows)
- Base infrastructure for payment, plus one implementation (Stripe)
- Order content type and management screens (including a redesign and refactoring of the order part)
- Workflow activities
On Lombiq
Searching for performance-intensive codes
Do you write a performance-intensive code? Then help us build the nerdiest .NET thing! Drop us a line to [email protected] and we'll ask a few questions about the challenges you encounter, and in exchange, we'll show you how to make a chip out of your programs!
Orchard in Open Academy
There will be the free Open Academy in Budapest on 22 November for all life long learning developers with no-BS tech talks, where Zoltán Lehóczky, the Co-founder and managing director of Lombiq Technologies Ltd. will talk about Orchard. Come and join the conference if you will be nearby!
This week in Orchard in LinkedIn
From now you could find our This week in Orchard series on LinkedIn, under the Lombiq Technologies Ltd. company account! Share and like these posts there too if you are learning something new reading our weekly recaps!
Orchard Dojo Newsletter
Now we have 101 subscribers of the Lombiq's Orchard Dojo Newsletter! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course.
Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!