Making Search Results show up in grid instead of list

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
13 年 前
Hello,

I've just launched a site and the search results show up in a list, and there is nowhere in the backend to change it to show up as a grid.

According to this forum post: https://www.nopcommerce.com/boards/t/4486/how-to-make-search-page-display-in-grids.aspx, what you need to do is:
"have a look at asp:ListView in search.ascx
you could compare the code in this file to the code in templates/categories/ProductsInGrid.ascx"

So, I am looking at the page Search.ascx and comparing it to ProductsInGrid.ascx.

It seems that the important code in Search.ascx is this:
  <div class="product-list1">
     <asp:ListView ID="lvProducts" runat="server" OnPagePropertiesChanging="lvProducts_OnPagePropertiesChanging">
                <LayoutTemplate>
                    <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
                </LayoutTemplate>
                <ItemTemplate>
                    <div class="item-box">
                        <nopCommerce:ProductBox2 ID="ctrlProductBox" Product='<%# Container.DataItem %>'
                            runat="server" />
                    </div>
                </ItemTemplate>
            </asp:ListView>
        </div>

In order to change it to show up as a grid, should the change be this:
    <div class="product-grid">
      <asp:DataList ID="dlProducts" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
        RepeatLayout="Table" ItemStyle-CssClass="item-box">
        <ItemTemplate>
          <nopCommerce:ProductBox1 ID="ctrlProductBox" Product='<%# Container.DataItem %>'
            runat="server" />
        </ItemTemplate>
      </asp:DataList>
    </div>

Or this (with the <layoutTemplate> line added):
    <div class="product-grid">
      <asp:DataList ID="dlProducts" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
        RepeatLayout="Table" ItemStyle-CssClass="item-box">
        <LayoutTemplate>
                    <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
                </LayoutTemplate>
        <ItemTemplate>
          <nopCommerce:ProductBox1 ID="ctrlProductBox" Product='<%# Container.DataItem %>'
            runat="server" />
        </ItemTemplate>
      </asp:DataList>
    </div>

Any responses are appreciated!
11 年 前
Hi djacobs,

I just ran into this in v2.65.  What you need to do is the following:

1. Copy Nop.Web\Views\Catalog\Search.cshtml to your theme.

2.  On Nop.Web\Themes\<your theme name>\Views\Catalog\Search.cshtml Substitute:

<div class="product-list">
                    @*list mode*@
                    <div class="product-list">
                        @foreach (var product in Model.Products)
                        {
                            <div class="item-box">
                                @Html.Partial("_ProductBox", product)
                            </div>
                        }
                    </div>
</div>


With:

<div class="product-grid">
                    @(Html.DataList<ProductOverviewModel>(Model.Products, 3,
                        @<div class="accented item-box">
                            @Html.Partial("_ProductBox", @item)
                        </div>
                    ))
</div>              
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.