# Query, filter and render products

## Get all products

```cshtml
@{
    var productResponse = _catalog.GetAllProducts();
    
    <div class="products">
        @foreach (var product in productResponse.Products)
        {
            var images = product.Images;
            
            <div class="products__card">
                @if (images.Any())
                {
                    <img src="@images.First().Url" alt="@product.Title" loading="lazy"/>
                }
                <a href="@product.Url">
                    <h4>@product.Title</h4>
                </a>
                <p>@product.Price.WithVat.CurrencyString</p>
            </div>
        }
    </div>
}
```

## Get category products

```cshtml
@{
    var category = _catalog.GetCategory();
    var productResponse = category.Products();
    //var productResponse = category.ProductsRecursive();
    
    <div class="products">
        @foreach (var product in productResponse.Products)
        {
            var images = product.Images;
            
            <div class="products__card">
                @if (images.Any())
                {
                    <img src="@images.First().Url" alt="@product.Title" loading="lazy"/>
                }
                <a href="@product.Url">
                    <h4>@product.Title</h4>
                </a>
                <p>@product.Price.WithVat.CurrencyString</p>
            </div>
        }
    </div>
}

```

## Pagination

```cshtml
@{

    int page = int.TryParse(Context.Request.Query["page"], out page) ? page : 1;
    
    var category = _catalog.GetCategory();
    var productResponse = category.Products(new ProductQuery()
    {
        Page = page,
        PageSize = 20
    });

    <div class="products">
        @foreach (var product in productResponse.Products)
        {
            var images = product.Images;
            
            <div class="products__card">
                @if (images.Any())
                {
                    <img src="@images.First().Url" alt="@product.Title" loading="lazy"/>
                }
                <a href="@product.Url">
                    <h4>@product.Title</h4>
                </a>
                <p>@product.Price.WithVat.CurrencyString</p>
            </div>
        }
    </div>
    
    @if (productResponse.PageCount > 1)
    {
        <ul>
            @for (var i = 1; i < productResponse.PageCount; i++)
            {
                <li>
                    <a href="?page=@i">@i</a>
                </li>
            }
        </ul>
    }
}
```

## Search

```cshtml
@{
    var searchQuery = Context.Request.Query["q"];
    
    var category = _catalog.GetCategory();
    var productResponse = category.Products(new ProductQuery()
    {
        SearchQuery = searchQuery
    });

    <div class="products">
        @foreach (var product in productResponse.Products)
        {
            var images = product.Images;
            
            <div class="products__card">
                @if (images.Any())
                {
                    <img src="@images.First().Url" alt="@product.Title" loading="lazy"/>
                }
                <a href="@product.Url">
                    <h4>@product.Title</h4>
                </a>
                <p>@product.Price.WithVat.CurrencyString</p>
            </div>
        }
    </div>
}
```

Default Search Fields

```csharp
var defaultFields = new List<EkomSearchField>()
{
    new EkomSearchField()
    {
        Name = "nodeName",
        Booster = "^4.0"
    },
    new EkomSearchField()
    {
        Name = "sku",
        Booster = "^10.0",
        SearchType = EkomSearchType.Wildcard
    },
    new EkomSearchField()
    {
        Name = "title",
        Booster = "^4.0"
    },
     new EkomSearchField()
    {
        Name = "description",
        Booster = "^2.0"
    },
    new EkomSearchField()
    {
        Name = "searchTags",
        Booster = "^2.0"
    },
    new EkomSearchField()
    {
        Name = "id",
        Booster = "^10.0",
        SearchType = EkomSearchType.Exact
    }
};
```

## Filter By Properties

```cshtml
@{
    var searchFilter= Context.Request.Query["search-filter"];

    var propertyFilters = new Dictionary<string, List<string>>();

    if (!string.IsNullOrEmpty(searchFilter.ToString()))
    {
        propertyFilters.Add("propertyAlias", searchFilter.ToString().Split(',').ToList());
    }
    
    var category = _catalog.GetCategory();
    var productResponse = category.Products(new ProductQuery()
    {
        PropertyFilters = propertyFilters
    });

    <div class="products">
        @foreach (var product in productResponse.Products)
        {
            var images = product.Images;
            
            <div class="products__card">
                @if (images.Any())
                {
                    <img src="@images.First().Url" alt="@product.Title" loading="lazy"/>
                }
                <a href="@product.Url">
                    <h4>@product.Title</h4>
                </a>
                <p>@product.Price.WithVat.CurrencyString</p>
            </div>
        }
    </div>
}
```

## Order By

You can pass inn OrderBy Enum object into the ProductQuery to order the products.

<pre class="language-csharp"><code class="lang-csharp">var productResponse = category.ProductsRecursive(
<strong>    new ProductQuery() { 
</strong>        OrderBy = OrderBy.TitleAsc
<strong>    }
</strong>);#
</code></pre>

Default options is TitleAsc, All options available are&#x20;

```
UmbracoSortOrderAsc,
UmbracoSortOrderDesc,
TitleAsc,
TitleDesc,
PriceAsc,
PriceDesc,
DateAsc,
DateDesc,
SkuAsc,
SkuDesc,
NoOrder
```

## Meta Filters

Example Coming soon