Query, filter and render products

Get all products

@{
    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

@{
    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

@{

    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

@{
    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

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

@{
    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.

var productResponse = category.ProductsRecursive(
    new ProductQuery() { 
        OrderBy = OrderBy.TitleAsc
    }
);#

Default options is TitleAsc, All options available are

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

Meta Filters

Example Coming soon