Dec 12, 2013

Christmas-ifying Orchard

So it is Christmas, a time to be merry, break out into song for no good reason and drink copious amounts of sickingly warm wine. But it is also when super nerds can make their blogs...snow! Exciting, I know. You should hopefully be able to see my blog snowing at the top. Not very impressively, and although I am no expert, I'm fairly certain snow doesn't fall in perfect circles but hey, I'm lazy. I thought I would write a quick post on how I went about making this pathetic little weather system.

I decided to make it as a widget so that I didn't have to mess around in the theme. It will also make it easy to remove the snow later. So let's go ahead and create a module using the command line:

codegen module Hazza.Christmas

Next we'll create a part that will be attached to a widget and create our snow. Again we will use the command line because nobody can be bothered to remember how to write Orchard parts. You will need the exceptional Code Generation Extensions module by http://www.szmyd.com.pl/blog

codegen part Hazza.Christmas ChristmasPart

We are just going to create a blank part with no properties. If you wanted to add your properties from the command line, you can! Check it out:

codegen part Hazza.Christmas ChristmasPart /Properties:Santa:string,Milk:bool,Cookies:int

Anyway, getting sidetracked there. We now have a part, but what we really want is a widget. We'll create a widget in our migrations. The code will look like this:

public int Create() {
 SchemaBuilder.CreateTable("ChristmasPartRecord", table => table
  .ContentPartRecord()
 );

 ContentDefinitionManager.AlterPartDefinition("ChristmasPart", builder => builder.Attachable());
 return 1;
}

public int UpdateFrom1()
{
 ContentDefinitionManager.AlterTypeDefinition("ChristmasWidget", cfg => cfg
  .WithPart("ChristmasPart")
  .WithPart("WidgetPart")
  .WithPart("CommonPart")
  .WithSetting("Stereotype", "Widget"));

 return 2; 
}

Basically we are creating an empty part (using the .ContentPartRecord() setting, don't forget it when creating parts!) and making it attachable in the Create() method. We are then running a new migration and creating a new Content Type called "ChristmasWidget". The two important things we are doing to our Content Type to make it a widget is attaching the WidgetPart and setting the Stereotype of our Content Type to "Widget". This lets Orchard know that it should show up in the Widgets section. And probably some other important stuff.

Okay so the snow, I decided not to try to explain the JavaScript code on here, but in comments within the code itself. Here is a link to the file on CodePlex where you can have a look through it. Can also download the entire source code there.

There are few little bits and bobs in the CSS. You may have to adapt the module a little for your theme. I'm pretty much using the excellent Wise Words theme, though I think it also worked with TheThemeMachine. I used !important (dangerous, I know) so that I didn't have to mess around in the theme at all. Always nice

So I think that is pretty much it. I doubt I will see many snowy Orchard blogs out there, but would be cool to let me know if you did use it!

Tags: Orchard, Widgets, Javascript

1 Comment

  • Jeff Olmstead said

    Love the snow! Have a client I will have to try that on. One thing in your example code, from another developer, you shouldn't need the ChristmasPartRecord at all, you can just make a ChristmasPart as a ContentPart without an underlying record and avoid the database clutter. I am guessing the codegen module made it for you, but thought I would mention. Anyway, thanks for the fun idea.

Add a Comment