How to customize CategoryTemplate.ProductsInGridOrLines views

Posted: June 06, 2014 at 12:30 PM Quote #124244
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
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: June 09, 2014 at 3:03 AM Quote #124329
*** 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 :)
This post/answer is useful
2
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
ima9ines.com - Let's contribute to the community :)

Kind Regards,
Tuấn Đỗ (ima9ines)

Skype support account - tuan_da2

FREE plugins
http://ima9ines.com/en/nopcommerce-plugins-free
http://www.nopcommerce.com/marketplace.aspx?vendor=61573
Posted: June 11, 2014 at 4:42 PM Quote #124565
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 :)
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: June 12, 2014 at 8:01 AM Quote #124627
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 :)
This post/answer is useful
1
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
ima9ines.com - Let's contribute to the community :)

Kind Regards,
Tuấn Đỗ (ima9ines)

Skype support account - tuan_da2

FREE plugins
http://ima9ines.com/en/nopcommerce-plugins-free
http://www.nopcommerce.com/marketplace.aspx?vendor=61573
Posted: May 17, 2016 at 11:02 PM Quote #167892
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 :)
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: October 08, 2018 at 10:54 AM Quote #212928
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 post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Passion
Premium support services
  • Dedicated premium support services provided by core developers are intended for persons who run mission critical websites, work on projects with tight deadlines, or want to get dedicated support.
Professional services
  • Want to open a new store? Want to take your store to the next level? Need a custom extension? We can customize nopCommerce to fit your store perfectly. Request a quote to get started.
eCommerce CONFERENCE 2018
Learn more