How to create nopcommerce a-z product list page with all products

Hi

I am trying to build a page listing all the products in A-z order and what I have done for it,

1. created a category (Product list A-Z)
2. included all the category mapping with all the products to the above category.
3. on that category all products are showing but in a default order,


what I want

1. all products in one page list, there should not be any pagination.
2. All Products would listed A-Z order and it should shows heading "Name starts with A" and then listed products upto "Name started with: Z" and then listed products.
3. default display per page should include all products or just show all
4. View As only "List"
5. Filter by attributes would devided in the page as mentioned earlier.

Product list A-Z is a custom view page as I have mention above but other categories should show as default view.

Please find the sample example it should looks like
http://postimg.org/image/g4bo6gzoz/
http://postimg.org/image/g4bo6gzoz/

Many thanks

Hi

Thanks everyone for viewing this post, I have solved this problem through the steps below


1. Create a category template (CategoryTemplate.ProductsInLine.cshtml) for "Product A-Z list" page (copy existing template content into it) into View/Catalog directory
2. Add this category template name entry into database table "CategoryTemplate"
3. Add a new Catalog "Product A-Z list" from nop Admin and select newly added category template from the dropdown list
4. Create a new view "_ProductBoxCustomList.cshtml" (copy from _ProductBox.cshtml and change) into View/Shared directory
5. Make the changes on the view template files "_ProductBoxCustomList.cshtml" and "CategoryTemplate.ProductsInLine.cshtml" for your requirements
6. don't forget to map products in this newly created Product A-Z" category frpm admin edit product ->  Category Mapping (Tab) -> add new record -> select new category and "update " button


Thanks

Nice, elegant solution! Thanks for sharing...

Would you mind elaborating a bit on Step 5? How did you implement this actual logic into ProductBoxCustomList.cshtml and CategoryTemplate.ProductsInLine.cshtml? (Maybe a little code might clarify this a bit?)

Appreciated!

You most welcome,

For my requirements I needed to make this page as list view a-z product list which is custom from the default view. in my case
I have made changes on the listed below files and places, I am working on NopCommerce 3.5

1. New Category Template (View/Catelog/CategoryTemplate.ProductsInLines.cshtml): Using same "@model CategoryModel" same as the other default Templste
    a. Remove default grid view and make only ViewMode as list.(sorting product list in work by default)
    b. Inside the product list foreach listed products in seperate group.
    c. make sure you are calling new view that you have create for this category.
      
                

    <div class="item-box">
                        @*@Html.Partial("_ProductBox", product) old view*@
      @*New view is being assigned*@
                        @Html.Partial("_ProductBoxCustomList", product)
                    </div>

2. New _ProductBoxCustomList.cshtml this also copy of default _ProductBox.cshtml (View/Shared): calling same "@model ProductOverViewModel"
    
   a. make the changes you need here e.g. remove product title, add cart button etc.

Let me know if you need anything more to explain

Final list page looks like

That helps a ton, thank you.

Yeah, we're looking to do the exact same thing as you did (we're also using 3.50) where we offer the product list grouped by letter. Your final screenshot looks amazing.

Pardon if I missed it, but where are you doing the logic for separating according to actual first letter (and the custom headings above each)?

Is this just a modification to the grouping done within LINQ?

Thanks again!

Hi

Find the sort group of the products list code here, you would add this into "View/Catelog/CategoryTemplate.Productsinline.cshtml" and modify this, I am using foreach loop to check through and put into different group.

        @Html.Widget("categorydetails_before_product_list", Model.Id)
        @{ 
            String letter = "";
            // number array string to check the first letter of number string
            String[] letterNumber = { "1", "2", "3", "4", "5","6", "7", "8", "9" };
            
           
           }
        @*product list*@
        @if (Model.Products.Count > 0)
        {
          
            @*list mode*@
            <div class="product-list">
                @foreach (var product in Model.Products)
                {
                    
                    if (letter == "")
                    {
    
                        bool foundMatch = false;
                        letter = @product.Name.Substring(0, 1);
                        <span> </span>

                                foreach (String number in letterNumber)
                                {

                                    if (number == letter)
                                    {
                                        foundMatch = true;
                                    }                       
                                }

                                // check if it start with number then change heading other wise letter 
                                if (foundMatch == true)
                                {
                                    <h2 style="background-color:#a1a9a2; padding:10px;">Name start with: 0-9</h2>
                                }
                                else
                                {
                                    <h2 style="background-color:#a1a9a2; padding:10px;">Name start with: @product.Name.Substring(0, 1)</h2>
                                }

                    }
                    else
                    {
                        // if first letter still number then put those in same group. otherwise new group
                        bool foundMatch = false;
                        string lastletter = "";
                        string newLetter = "";
                        bool IsLastLetterNumber = false;
                         
                      // get first letter of the product string
                        if ((letter != @product.Name.Substring(0, 1)))
                        {
                            lastletter = letter;
                            letter = product.Name.Substring(0, 1);
                            newLetter = product.Name.Substring(0, 1);

                            foreach (String number in letterNumber)
                            {

                                if (number == letter)
                                {

                                    foundMatch = true;
                                }

                            }
                            // check last letter is a number ? if it is number then put in same group 
                            foreach (String number in letterNumber)
                            {

                                if (number == lastletter)
                                {

                                    IsLastLetterNumber = true;
                                }

                            }

                            if (foundMatch == true)
                            {
                                if (IsLastLetterNumber == false)
                                {
                                    <span style="padding:2px 0px 20px 2px;"><a href="#toTop" rel="" class="toTop">Back to top</a>  </span>
                                    <h2 style="background-color:#a1a9a2; padding:10px; margin-top: 20px">Name start with: 0-9</h2>

                                }

                            }
                            else
                            {
                                <span style="padding:2px 0px 20px 2px;"><a href="#toTop" rel="" class="toTop">Back to top</a>  </span>
                                <h2 style="background-color:#a1a9a2; padding:10px; margin-top: 20px">Name start with: @product.Name.Substring(0, 1)</h2>
                            }


                        }
                    }

                    <div class="item-box">
                        @*@Html.Partial("_ProductBox", product)*@
                        @Html.Partial("_ProductBoxCustomList", product)
                    </div>
                }
            </div>       
        
           
        }

Let me know if anything confusing
Cheers

Much appreciated!!

I'll test it out over the next week and report back.

Thanks again!!

Worked beautifully - first time.

Very, very much appreciated.

Thanks again!!

you welcome, glad that worked well.

Hello!

I am trying to add in Category page (product list) more information than title and price.

For example, I need to add for each product item the manufacturer that is linked to each product.

Could someone help me?