Ad

How To Pass Collection Filtered By Ajax In October CMS

- 1 answer

In October CMS I have page which uses my component:

title = "products"
url = "/filter-products/:category_slug?"
layout = "default"
is_hidden = 00

[filterproducts]

==

{{ form_ajax('onFilterProducts', { update: {'product/products-listing': '#partialProducts'} }) }}
    {% partial 'products-filters' %}
{{ form_close() }}


<table id="partialProducts">
    {% partial 'product/products-listing' products = filterproducts.products %}
</table>

My component looks like this:

class FilterProducts extends ComponentBase
{
    /** @var Collection */
    public $products;


    /**
     * @return array
     */
    public function componentDetails(): array
    {
        return [
            'name' => 'Filter Products',
            'description' => 'Filter Products',
        ];
    }

    public function onRun()
    {
        $this->products = $this->prepareProductsCollection();
    }


    public function onFilterProducts()
    {
        $this->products = $this->prepareProductsCollection();
    }

    public function prepareProductsCollection()
    {
        $options = post('filter', []);

        return $this->filterProducts($options);
    }

    /**
     * @param array $options
     *
     * @return \Illuminate\Database\Eloquent\Builder[]|Collection|\October\Rain\Database\Builder[]
     */
    protected function filterProducts(array $options = [])
    {
        /** @var \October\Rain\Database\Builder $query */
        $query = Product::query()->isActive();

        if (!empty($options)) {
            // do some filtering …
        }

        return $query->get();
    }
}

And partial/product/products-listing.htm looks like this:

{% if products|length %}
    {% for record in product %}
        {% partial "product/product-row" record = record %}
    {% endfor %}
{% else %}
    {{ 'There are no Products that match the criteria'|_ }}
{% endif %}

The case is that when I come to page for the first time, all products are listed properly.

But when I can always see the There are no Products that match the criteria message.

When I dump $options every field from form is properly displayed.

What is more, when I dump $this->products in the onFilterProducts() method I am getting properly filtered collection, but that collection is not being passed to partial which should be updated.

So the question is: how can I pass the products from Ajax request to update the partial.

Ad

Answer

Please Do this changes to your component

public function onRun()
{
    $this->products = $this->page['products'] = $this->prepareProductsCollection();
}


public function onFilterProducts()
{
    $this->products = $this->page['products'] = $this->prepareProductsCollection();
}

and please change your page code like this

<table id="partialProducts">
    {% partial 'product/products-listing' %}
</table>

and also in your product/products-listing partial. please correct your code

{% if products|length %}
    {% for record in products %}
    {% partial "product/product-row" record = record %}
    {% endfor %}
{% else %}
    {{ 'There are no Products that match the criteria'|_ }}
{% endif %}
Ad
source: stackoverflow.com
Ad