Using Razor in Umbraco to display number of products

0
votes

I am using Razor on Umbraco to built a cms website , I have created static pages easily on umbraco , I am having difficulty in creating products sections, as products section will be manage by the client, Product section will have sub products for instance books, accessories. When the user clicks on book section , all the books should be displayed vice versa. Can anyone help me in creating the document types and how to structure the content so that the client can easily add items to the products in content section. And the system should display all the items of that product on the website.

Any example or suggestion will be highly appreciated.

1
razorumbraco

1 Answers

1
votes

The structure of your document types and content nodes should be the same whether you use xslt or razor. Therefore, I recommend you take a look at

  • the built-in razor macros (to see how razor is working - they're quite instructive)
  • the content structure of the starter projects

The question being very broad (!), here a couple of pointers on how to go about setting up your document types and content nodes.

From your description, I see the following document types:

  • Product : an actual product, a book, an accessory, etc..
  • ProductCategory : a category of products, books, accessories, shoes, video games, ...
  • ProductSection : a document type to group one or rather several ProductCategories

Of course you'll need to add the appropriate properties to each document type (Name, description, price, picture, etc)

Create a (first) empty template for each of those document types and associate them (usually done automatically when you create a new document type).

Also, you should constrain the document types allowed as child nodes: Products should not have any child nodes, ProductCategories should only have Products as child nodes, and ProductCategories should only be allowed to be in ProductSections. You may change this later on, but I think it helps to be as restrictive as possible so that the client does not insert Product nodes all over the place.

Head over to the content section of Umbraco and create some nodes: a ProductSection node at the root, add a child node (only ProductCategory should be allowed), and add some Products. You may add several ProductCategories and several Products for each category.

Your content tree may look something like:

  • Contents
    • Products ProductSection
      • Books ProductCategory
        • ASP.NET with C# Product
        • C# in Depth Product
      • Accessories ProductCategory
        • Coffee mug Product

Every node corresponds to a web page, and the structure of these nodes will be visible in the urls.

Now start to fill in the templates - begin with the ProductSection : Loop through all child nodes of type ProductCategory and display a link to them - voilà the navigation through all your categories. Continue with the template for ProductCategory : Display title and description/picture etc. of the current category. Then add a list of links to all child products. Finish with the Product template.

That's about it...

2 tips on properties:

  • Never create a property for the order (of products within a category for example) - you should use the order of the nodes in the content tree.
  • If possible, don't create properties parent-child, but again use the hierarchy of the content nodes (as described with ProductCategory and Product)