如何在10月CMS中传递由Ajax过滤的集合

时间:2018-05-06 12:26:17

标签: ajax laravel twig octobercms

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时,表格中的每个字段都会正确显示。

更重要的是,当我在$this->products方法中转储onFilterProducts()时,我正在获得正确的过滤集合,但该集合未被传递给应该更新的部分。

所以问题是:我如何从Ajax请求传递产品来更新部分。

2 个答案:

答案 0 :(得分: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>

以及您的产品/产品列表部分。请更正您的代码

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

答案 1 :(得分:1)

由于您尝试使用$this->products传递产品,因此您将在产品中获得结果,并且您已尝试过此

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

因此,它会首先在结果中找到filterproducts变量,然后在products中找到filterproducts

因此,您必须通过products代替filterproducts。你必须用

替换这一行

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

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

所以你必须做这个改变&#34;改变产品代替partial/product/products-listing.htm

中的产品&#34;
{% if products|length %}
    {% for record in products %}
        {% partial "product/product-row" record = record %}
    {% endfor %}
{% else %}
    {{ 'There are no Products that match the criteria'|_ }}
{% endif %}

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