How to customize CategoryTemplate.ProductsInGridOrLines views

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
9 years ago
Hi,
I want to be able to create a custom category template that includes short description. This is be used on a specific category and/or sub category.

I want it in this order top to bottom.
Picture
Product Name
Short description
Review stars
price
add to cart


Is this something  in the CategoryTemplate.ProductsInGridOrLines.cshtml or in the styles.css? Both?

I'm guessing I might have alter the dimensions in CSS?

Thanks Chris
9 years ago
*** NOTE: Following steps are applied to the latest version (3.30) ***

1) These information are not in the "CategoryTemplate.ProductsInGridOrLines.cshtml" file. They are in the "_ProductBox.cshtml" file (in the "\Presentation\Nop.Web\Views\Catalog" folder).

Following is the default order:
- Picture
- Name
- Rating
- Short description
- Old price
- Actual price
- Tax shipping info
- Add to cart button

So that, if you want a simple change, just change the order of the "Short description" and the "Old price/Actual price" block.

2) If you want to create a custom category template. You can do as following steps:
- Copy/paste the "CategoryTemplate.ProductsInGridOrLines.cshtml" file, change its name (ex. CategoryTemplate.ChrisView.cshtml)
- Modify its layout as you want (HTML/CSS/JS codes)
- Go to "Admin" mode
- Choose "System" > "Templates" > "Category Templates"
- Create a new category template (in the "View path" column, type in your custom category template file name - CategoryTemplate.ChrisView)
- Go back to the "Catalog" > "Categories" > "List"
- Create a new category
- Inside the create new category page, scroll down to the "Category template" row, select the category template that you created above
- Save the category and then go to view mode to see your custom layout for the created category :)
9 years ago
Hi ,
Excellent. Thanks.
Still sorting out the layout.
Can I make a alternate version of the "_ProductBox.cshtml" Just for this Category template?
Can't find where reference it in the template file.
Looks like I will also need to make customer CSS to mess with the layout. Seems like I have to do ity on the main sites CSS rather than In line or on the template page.

New at using HTML widgets and ASP so the code is making my eyes water... :)

Thanks Chris

ima9ines wrote:
*** NOTE: Following steps are applied to the latest version (3.30) ***

1) These information are not in the "CategoryTemplate.ProductsInGridOrLines.cshtml" file. They are in the "_ProductBox.cshtml" file (in the "\Presentation\Nop.Web\Views\Catalog" folder).

Following is the default order:
- Picture
- Name
- Rating
- Short description
- Old price
- Actual price
- Tax shipping info
- Add to cart button

So that, if you want a simple change, just change the order of the "Short description" and the "Old price/Actual price" block.

2) If you want to create a custom category template. You can do as following steps:
- Copy/paste the "CategoryTemplate.ProductsInGridOrLines.cshtml" file, change its name (ex. CategoryTemplate.ChrisView.cshtml)
- Modify its layout as you want (HTML/CSS/JS codes)
- Go to "Admin" mode
- Choose "System" > "Templates" > "Category Templates"
- Create a new category template (in the "View path" column, type in your custom category template file name - CategoryTemplate.ChrisView)
- Go back to the "Catalog" > "Categories" > "List"
- Create a new category
- Inside the create new category page, scroll down to the "Category template" row, select the category template that you created above
- Save the category and then go to view mode to see your custom layout for the created category :)
9 years ago
ChrisLudwig wrote:

Can I make a alternate version of the "_ProductBox.cshtml" Just for this Category template?


Yes, you can. You can create an alternative version of the "_ProductBox.cshtml" just for your custom "Category" template.
You can choose one of following options to apply:
1) Create a new theme:
- You can keep the same file name "_ProductBox.cshtml" in order to overrides its default view
- To know how to create a new theme, please search on this forum :)
2) Use current default theme:
- Change the file name (ex. "_CustomProductBox.cshtml") and replace this name to "_ProductBox" in your custom "Category" template file (that copied from "CategoryTemplate.ProductsInGridOrLines.cshtml" file)

ChrisLudwig wrote:

Can't find where reference it in the template file.


Yes, you can find the "_ProductBox" referenced in the "CategoryTemplate.ProductsInGridOrLines.cshtml" file.
Go to line 96, please :)

ChrisLudwig wrote:

Looks like I will also need to make customer CSS to mess with the layout. Seems like I have to do ity on the main sites CSS rather than In line or on the template page.


It base on you. If you want to make your own layout and styles, do it. Otherwise, just do some small changes in the HTML structure (may be CSS).

Good luck :)
7 years ago
ima9ines wrote:

Can I make a alternate version of the "_ProductBox.cshtml" Just for this Category template?


Yes, you can. You can create an alternative version of the "_ProductBox.cshtml" just for your custom "Category" template.
You can choose one of following options to apply:
1) Create a new theme:
- You can keep the same file name "_ProductBox.cshtml" in order to overrides its default view
- To know how to create a new theme, please search on this forum :)
2) Use current default theme:
- Change the file name (ex. "_CustomProductBox.cshtml") and replace this name to "_ProductBox" in your custom "Category" template file (that copied from "CategoryTemplate.ProductsInGridOrLines.cshtml" file)


Can't find where reference it in the template file.


Yes, you can find the "_ProductBox" referenced in the "CategoryTemplate.ProductsInGridOrLines.cshtml" file.
Go to line 96, please :)


Looks like I will also need to make customer CSS to mess with the layout. Seems like I have to do ity on the main sites CSS rather than In line or on the template page.


It base on you. If you want to make your own layout and styles, do it. Otherwise, just do some small changes in the HTML structure (may be CSS).

Good luck :)
5 years ago
how to remove product in grid line of list in nopcommerce theme version 4.10 . I want to show categories without slider and show all categories on home page.

Can anybody help me ?

Regards : Umar
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.