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 yıl önce
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 yıl önce
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.