如何在 October CMS 中传递按 Ajax 筛选的集合

Question

在 10 月的 CMS 中，我有一个页面使用了我的组件：

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>

我的组件如下所示：

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();
    }
}

而 partial/product/products-listing.htm 看起来像这样：

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

情况是，当我第一次来到页面时，所有产品都正确列出。

但是当我总是看到没有符合条件的产品时。

当我转储 $options 时，表单中的每个字段都会正确显示。

此外，当我在 onFilterProducts() 方法中转储 $this->products 时，我得到了正确过滤的集合，但该集合没有传递给应该更新的部分。

所以问题是：如何通过 Ajax 请求更新部分产品。

Answer 1

请对您的组件进行此更改

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


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

请像这样更改您的页面代码

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

以及您的 product/products-listing 部分。请更正您的代码

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

Answer 2

由于您尝试将 products 传递给 $this->products 所以您将在 products 中得到结果并且您已经尝试过这个

{% partial 'product/products-listing' products = filterproducts.products %}

所以它会先在结果中找到filterproducts变量，然后在filterproducts中找到products。

所以你必须通过 products 来代替 filterproducts。您必须将此行替换为

{% partial 'product/products-listing' products = products %}

而且我在 partial/product/products-listing.htm 中又发现了一个错误 。您正在尝试从 product 检索 record。但是您还没有定义 product 呢。

因此您必须在 partial/product/products-listing.htm

中 "change products in place of product " 进行此更改

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

我认为这会对您有所帮助，如果您有任何疑问，请发表评论。

如何在 October CMS 中传递按 Ajax 筛选的集合

How to pass collection filtered by Ajax in October CMS

ajax

twig

laravel

octobercms