Show Category Images of Selected category

Hi All,

What I want to do is show the category title and the image for that category. I have found the categorynavigation.cshtml which with some alterations might help.

Can anyone help me:

1) Firstly, only show sub items from a specific category
2) Show the images of that sub category on the screen.

The aim is to show a carosel scroller with the categories at the top on all the pages so they can jump to them. Take a look at http://www.mat-johnson.net/nopSite/c/11/jewellery that shows the categories at the top of the grid. I want the images from all the sub collections (daisy ring etc) to be displayed.

Really struggling on this one

Cheers

Mat

matjohnson wrote:
call _categoryService.GetAllCategoriesByParentCategoryId( categoryId )
matjohnson wrote:
Take a look at how its done in CatalogController.Category
Basically you create a viewmodel with the properties you want (like id, name, picturemodel etc)
Get all the subcategories (see 1) and in a loop fill a list of viewmodels

            model.SubCategories = _categoryService
                .GetAllCategoriesByParentCategoryId(categoryId)
                .Select(x =>
                {
                    var subCatName = x.GetLocalized(y => y.Name);
                    var subCatModel = new CategoryModel.SubCategoryModel()
                    {
                        Id = x.Id,
                        Name = subCatName,
                        SeName = x.GetSeName(),
                    };

                    //prepare picture model
                    int pictureSize = _mediaSettings.CategoryThumbPictureSize;
                    var categoryPictureCacheKey = string.Format(ModelCacheEventConsumer.CATEGORY_PICTURE_MODEL_KEY, x.Id, pictureSize, true, _workContext.WorkingLanguage.Id, _webHelper.IsCurrentConnectionSecured());
                    subCatModel.PictureModel = _cacheManager.Get(categoryPictureCacheKey, () =>
                    {
                        var pictureModel = new PictureModel()
                        {
                            FullSizeImageUrl = _pictureService.GetPictureUrl(x.PictureId),
                            ImageUrl = _pictureService.GetPictureUrl(x.PictureId, pictureSize),
                            Title = string.Format(_localizationService.GetResource("Media.Category.ImageLinkTitleFormat"), subCatName),
                            AlternateText = string.Format(_localizationService.GetResource("Media.Category.ImageAlternateTextFormat"), subCatName)
                        };
                        return pictureModel;
                    });

                    return subCatModel;
                })
                .ToList();

in you razor view just loop the list and create the appropriate Html

Thanks for that.

So, for part 2. If I create a new ActionResult in the catalog controller, and a view based on that I will allow me to grab the info out?

On part 1, I'm not sure how to call that method from razor.

Is this what you want: on a category page (say jewelery) show all the sub-categories (pendent, rings etc) in a carousel ? then you already have the info, simply add this to CategoryTemplate.ProductsInGridOrLines.cshtml in your theme

@if (Model.SubCategories.Count > 0)
{
foreach( var cat in Model.SubCategories )
{
          ... image & title html
}      
}

Excellent, that does what I want it to.

Now, is there a way to specify the parent category for this? Maybe call a function to view this infirnation and pass through the category ID I require?

when you are in the Category view you already have the id (Model.Id)

Yep, so how would I be able to do

var x = getmodelbyid(model.id)
for
....
next

What would I need to substitute getmodelbyid with in order to make sure that on each page it loops through the jewellery collection items?

Don't think I completely understand what you want to accomplish ;-) Do you want to have a carousel on EVERY page (not only on Category pages)?

:)

On that page, I want to display a carosell of the sub types (so cufflinks, chains etc).

When the user clicks on chains, I want it to retain the same carosell on that page. So, if I can pass through the category id and force it to show the options below jewellery no matter if they are on the cufflinks chains etc pages, that carosell, should always display the sub items

makes sense, I think it's best to create a separate view, something like this (btw, untested ;-)

In CategoryTemplate.ProductsInGridOrLines.cshtml add

@Html.Action( "carousel" , new { CategoryId = Model.Id } )

You need a new view model

public class CarouselModel
{
   public int Id { get; set; }
   public string Name { get; set; }
   //etc
}

In CategoryController add an action.

public ActionResult Carousel( int categoryId )
{
   var category = _categoryService.GetCategoryById( categoryId ) ;
   IList< Category > subCategories ;
   if ( category.ParentCategoryId == 0 )   // top level
   {
      subCategories = _categoryService.GetAllCategoriesByParentCategoryId( categoryId ) ;
   }
   else
   {
      subCategories = _categoryService.GetAllCategoriesByParentCategoryId( category.ParentCategoryId ) ;
   }
   var model = new List< CarouselModel >() ;
   foreach(var cat in subCategories )
   {
      var m = new CarouselModel() ;
      m.Id = cat.Id ;
      //etc
      model.Add( m ) ;
   }
   return View( model ) ;
}

You'll also need a view Carousel.cshtml (with @model IList<CarouselModel>() ) where you write out your html to show title & image

hth,
KJ