Hi Warren,

So would the only option be to keep the # in front of my routes? Could I also create templates in Umbraco for the various sections and use angular to swap the templates?

Thanks

I will give you my scenario which might help:

Currently, I have a Products Document Type and Template. I also have a Products page (Products.cshtml). When the user goes to /products, they will see a search screen with some dropdowns (basically to filter the products) once they click search, they will actually see a list of products. There are also options for viewing all products (no filter). So as you can see, my base page is Products and I want to swap views in and out of that. I also have to keep in mind when the user wants to view a single product, I assume that would be something like /products/product/crayola-crayon-box.

For data access, I was thinking of using something like the web api. The design is sort of a wizard style approach. I still am not sure if I should create templates for each section and just do it that way or the angular approach. I am also curious as to how am I going to display a single product if I do not have a template for every product. My guess is that I have to pass a model into a product page so it renders the correct one. I also would like to have friendly urls when the user clicks on a single product like the one I mentioned above. Does any of this help?

Hello Saied,
OK I understand the scenario a little better now.

I would most likely not do it as a fully native AngularJS SPA in my opinion, I would make all the pages & nodes separate to begin with, so each node/URL has a template/view associated to that URL, this way in case anyone deep links to any of your pages or URLs or is crawled by Google SearchBot that they are able to see/get the content they expect.

Then you can make it a little more funky/interesting by using some AJAX calls be it with vanilla JS, jQuery or whatever to fetch either those URLs and update parts of the DOM to match your needs.

This really depends on architecture & how you want to tackle the problem/task, as there are probably 3 or 4 different ways to do this.

But for me I always break it down into smaller chunks & add bells & whistles on top.

I know this is not a definitive answer but may get you a rough idea on how someone else may approach it.

Cheers,
Warren

Warren,

Thanks for the great advice. I have few other questions just for clarification:

1. Let's say I have 10 products, would you create a template for each product or just one template and pass a model to it? For example, /products/coke and /products/pepsi looks nice but this is using a template for each product and if I do use one template, how would I get the url to append pepsi and coke at the end. I am assuming this is done on the controleller side? I am assuming my url would be something like /products/product/pepsi and /products/product/coke if I used one template (product in this case)
2. If I use one template for a single product, what is the best way to pass a model for that product into the controller?
3. If there aren't many products, let's say 3 to 4 only, do you think it is better to create template for each product so I can have urls like /product/pepsi, /products/coke, /products/drpepper?
4. Also, how do you think I should handle the search on the /products page, that is what the user first sees which is little weird to me because I would expect to see products, but it wasn't designed that way?

Hello Saied,
Yes with Umbraco its possible to have a generic type. In the Umbraco world it is called a Document Type.

In your case you would have a product type that may have fields on it like price, description, image for example. All of these pages/nodes that use the Product document type will also use the same Product template.

The template allows you to grab the current page/node values stored such as the description, price etc that you setup

I recommend taking a look at Umbraco.tv for some tutorials for reference to help you grasp the core concepts of the CMS. Then you can move onto your more complex example.

I hope this helps clears things up for you.

Cheers,
Warren

I actually have looked at umbraco.tv and it helped tremendously and I have read about route hijacking (not sure if I needed), but I am still a bit confused as to how I would generate /products/product/pepsi and /products/product/coke if I have a generic product template under the products node because I will have no pepsi or coke template, they are basically parameters in the url that should be passed to the controller to get the proper product to display?

At the root, I have a products template and initially this page will have some dropdowns to search, once you click search, it should show a list of products, when you click on a single product it should show that product, so the tree looks something like:

/products
     /coke
    /pepsi
   /drepper

No,

If it was possible, I would rather have something like /products/pepsi instead of /products/product/pepsi, but if this is not possible that is OK.

Let's assume I have a product template, could I pass a parameter (such as pepsi) in the url to the index method of the ProductController and then render the pepsi product by inheriting from RenderMvcController and using RenderModel?

If I tried to go to /products/product/pepsi, would umbraco think this was a url or throw a 404 or would it use pepsi as the parameter?

I think I am over-complicating it, so in this case do pepsi, coke, 7up each have to be their own template? If this is the case, what if I have many more products, would I have to create a template for each one?

I didn't quite understand the .url part? Can you explain that a little bit?

Warren,

This make a lot of sense now, but correct me if I am wrong, does this assume that my base node is /products and under this node, I will create a pepsi view, coke view and 7up view (which user their own base document type such as product). What if I do not create templates for each product, but query the database depending on the users search? Does this complicate things? or make it easier to have a template/view for each product?

Do you think it would be better to create a view/template for each product using a base document type? Maybe this would make things more manageable for content managers in the future? What do you think?

Saied,
Create a document type called products and check the box create associated template.

Next create another document type called product add the properties to this such as price, description and other properties that you need, again ensure the create template checkbox is ticked.

Go back to the products document type on the second tab for structure ensure that a product node is the type of child nodes that can be created under a products node type.

Then go back to the content section and create your products node along with as many child products as you wish to setup (Pepsi, Coke, 7UP etc...)

If you go back to Settings section & the templates then you can have a piece of Razor code that automatically lists out all child nodes under the products node.

It would look something like this

@foreach(var product in Model.Content.Children){
    <h1>@product.Name</h1>
    <a href="@product.Url">The link to the @product.Name node</a>
}

This will give you a rough starting point to ensure you use only a single template for the three products so it can be reused across all of your product nodes, be it 3 or 300 you create.

Again I hope this is clear & helping you to understand.

Warren,

This helped me out tremendously and helped me to see the light more. Just hope I can convince the bosses to do it this way. They are also using netsuite for product management so I wonder if they would have to manage products in two places now. After following the directions you gave, I did notice something, when I created a product, it created it under http://localhost/pepsi and not http://localhost/products/pepsi. Is there a way to fix this?

For doing the ajax stuff you mentioned, I tried doing:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>





<script type="text/javascript">
    $(document).ready(function () {
        $('#noVehicle').click(function (e) {
            e.preventDefault();
            $('#stuff').load('Home.cshtml');
        });
    });
</script>

but it throws a 403 error Forbidden. The real reason I am doing this is because on the Products link, the first thing the user sees is search dropdowns with a search button. After they click search, I want to get back the list of results and display them on the same template, basically swap it out, but getting this error. I know you mentioned it already, but this seems to be the hardest part?

In your previous post here

The technical part which I know seem to be getting a better understanding of your requirments is a search/filter form that will need to do a POST to an Umbraco SurfaceController in here you will do your logic to return the child nodes of Products (ie Pepsi, Coke, 7UP) that match the search criteria.

Once you have collection of nodes you would most likely return a custom view SearchReuslts.cshtml that will have a model which is a collection/IEnumberable/List of the nodes that match your request.

As each node has it's own URL when you simple do a for-each over your matching product nodes it will be a simple case of adding .url to fetch that particular item in the loop page URL

Do you have any sample code on posting data to a SurfaceController, I assume it is my ProductsController that would inherit from SurfaceController?

Also, can you elaborate on getting a collection of nodes (which object is this?) and you mentioned using a SearchReuslts.cshtml, but what if I wanted to use Products.cshtml and use jQuery to load SearchResults.cshtml? Is that possible?

Thanks for the great help so far.

Hi Warren,

When creating the product nodes, is it possible to store them somewhere else besides the umbraco db?

Hi Saied,
No it is not possible to do that.

You could have a custom property editor (Like textstring, Rich Text Editor etc) that could be some custom picker to a remote collection of products from an external service & store a reference back to that as an alternative.

Ok Thanks,

Do you by chance no why the url that gets generated is /pepsi and not /products/pepsi

It would depend on your node structure.

Most people have the following style:

• Home
  • Products
    • Pepsi
    • Coke

I am guessing you have no home or root node for this site & this would be the reason why. The most top level node is assumed to be the homepage & thus will have a URL of /

Yep, you are correct. My root is both Home and Products. I have taken a certain path and wanted to share it with you to see if you have any advice. Currently my setup is like this:

I have a Products.cshtml and a partial view ProductsFilter.cshtml. The partial view has a controller with an action that posts to a View called SearchResults.cshtml. This view looks like this:

@model ProductFilterModel
@{
    Layout = "../Master.cshtml";
}
<div style="padding-top:85px;">
    <div>@Model.Engine</div>
    <div>@Model.Year</div>
    <div>@Model.Model</div>
    <div>@Model.Make</div>
</div>

The model inherits from RenderModel. Basically, what I am striving for is when I render the products, I am going to have a button that when clicked takes you to that specific product (Is it correct that this would post back to /products as well?). I probably won't do this in Umbraco with the Product template (although I really like that approach) because I don't want to have to manage products in Umbraco and other programs (netsuite), but I am still stuck on how to determine from the post values which products to return (not sure if you can help in that?).

Currently, when go to /products and do a post, it posts back to /products, do you know if it is possible to redirect to a different page, even if it does not exist in Umbraco or display some sort of virtual path? What is happening now is that if I refresh, it wants to post again.

I also was trying to post to redirect to a different page, but I couldn't figure out how to pass my custom model to my view when using one of the RedirectToUmbracoPage methods?

I was debugging the code and noticed each template gets its own id. Do you think one approach would be to take this id and put it in my external products database and then I can use that to determine which products to show when the user searches? This way I can still create product templates and connect them to my external db. Is this doing overthinking it, not sure?

Hope any of this makes sense.

Again, thanks for all the help

Hello Saied,
I will try my best to help you but there is quite a few questions in here for me to understand what you need answering.

Rather than ask lots of different questions. Can we try to deal with one at a time, to help solve your problem/solution.

But from what I can tell it seems like you are going against the grain of Umbraco & the use of it as a CMS. So I would ask you why are you using Umbraco to build this if you are not wanting to use it or have I misunderstood.

Yes, I knew it would be a handful. Well, some of the pages aren't going to be content managed. Pages that would be are blog posts, news, marketing pages, etc. I do like the fact that I can create pages for each product with deep linking (by the way, I just moved the products under the home node and the urls are showing up properly)

The biggest problem with creating a page for each product is users complaining that they now have to manage properties on the umbraco side and in other programs like netsuite (I don't really care though). Assuming that I can add products on the Umbraco side, now I want to figure out how to return the correct products when the user clicks search. I was thinking of a couple scenarios:

1. n my external products db, I could have an umbraco table that just stores the ids of the product pages and I do my query, I could just return those that match. Not sure if this would work?

2. These are products for cars, so depending on which make, model, engine, year you pick, only certain products should show up, so could I also have multiple select lists for make, model, year, engine on the product document type so when the user creates a new product, they can select which vehicles the product applies to and when the user searches, I can compare the values from the post to the values in the Products children nodes to see which ones to display? As far as a coding standpoint, I am not sure how I would do this?

Thanks, Saied