Фильтр TYPO3 с ajax и внешней тележкой - PullRequest
0 голосов
/ 13 марта 2020

У меня есть следующая задача: у меня есть один пейджер TYPO3 с онлайн-магазином. Магазин сделан с тележкой-удлинителем. Теперь я должен сделать функциональность фильтра, которая позволяет фильтровать продукты, если им назначена категория sys_category TYPO3. Это само по себе не будет большой проблемой, но это становится сложным. Магазин отображает только 10 товаров за раз, переключаясь между другими продуктами с jquery нумерацией страниц. Разбивка на страницы работает над контейнером div, который включает в себя 10 продуктов. Это означает, что я должен перестроить контейнерный div и продукты, когда я использую фильтр Кроме того, есть видео, перекрывающее контент каждый раз, когда вы перезагружаете страницу. Поэтому мне нужно использовать ajax для перестройки контейнера-div.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что мой вызов ajax всегда возвращает пустое значение, и я не могу понять, почему. Может кто-нибудь помочь мне?

Машинопись:

ajaxFilter = PAGE
ajaxFilter {
    typeNum = 2278002

    config {
        disableAllHeaderCode = 1
        xhtml_cleaning = 0
        admPanel = 0
        debug = 0
        no_cache = 1
    }

    10 < tt_content.list.20.cartproducts_product
}

JQuery:

function filter() {
    var form = $('.filter-wrap form');
    var data = form.serializeObject();
    var url = form.attr("action");

    $.ajax({
        async: "true",
        url: url,
        type: "POST",
        dataType: 'html',
        data: data,
        success: function(data) {
            $("#c20").html(data);
        },
    });
}

HTML Фильтр

<div class="filter-wrap">
    <f:form pageUid="{pid}" extensionName="Cart" pluginName="Products" controller="Product" 
    action="ajaxFilter" method="post" pageType="2278002" additionalAttributes="{onchange: 
    'filter()'}">
        <div class="filter-kategorie filter-radio">
            <div class="filter-radio-title">
                Kategorie
            </div>
            <div class="filter-radio-items">
                <div>
                    <input type="radio" id="kat-alle" name="kategorie" value="0" checked />
                    <label for="kat-alle">Alle</label>
                </div>
                <div>
                    <input type="radio" id="kat-schluesselanhaenger" name="kategorie" value="1" />
                    <label for="kat-schluesselanhaenger">Schlüsselanhänger</label>
                </div>
                <div>
                    <input type="radio" id="kat-kerzenstaender" name="kategorie" value="2" />
                    <label for="kat-kerzenstaender">Kerzenständer</label>
                </div>
                <div>
                    <input type="radio" id="kat-lederwaren" name="kategorie" value="3" />
                    <label for="kat-lederwaren">Lederwaren</label>
                </div>
                <div>
                    <input type="radio" id="kat-schubladengriffe" name="kategorie" value="4" />
                    <label for="kat-schubladengriffe">Schubladengriffe</label>
                </div>
            </div>
        </div>
        <div class="filter-material filter-radio">
            <div class="filter-radio-title">
                Material
            </div>
            <div class="filter-radio-items">
                <div>
                    <input type="radio" id="mat-alle" name="material" value="0" checked />
                    <label for="mat-alle">Alle</label>
                </div>
                <div>
                    <input type="radio" id="mat-metall" name="material" value="7" />
                    <label for="mat-metall">Metall</label>
                </div>
                <div>
                    <input type="radio" id="mat-holz" name="material" value="8" />
                    <label for="mat-holz">Holz</label>
                </div>
                <div>
                    <input type="radio" id="mat-leder" name="material" value="9" />
                    <label for="mat-leder">Leder</label>
                </div>
            </div>
        </div>
    </f:form>
</div>

PHP Расширение корзины XClass Productcontroller

class ProductController extends \Extcode\CartProducts\Controller\ProductController
{
    protected function createDemandObjectFromAjax($kategorie, $material)
    {
        /** @var \Extcode\CartProducts\Domain\Model\Dto\Product\ProductDemand $demand */
        $demand = $this->objectManager->get(
        \Extcode\CartProducts\Domain\Model\Dto\Product\ProductDemand::class
        );

        if ($this->searchArguments['sku']) {
            $demand->setSku($this->searchArguments['sku']);
        }
        if ($this->searchArguments['title']) {
            $demand->setTitle($this->searchArguments['title']);
        }
        if ($settings['orderBy']) {
            $demand->setOrder($settings['orderBy'] . ' ' . $settings['orderDirection']);
        }

        $this->addCategoriesToDemandObjectFromAjax($demand, $kategorie, $material);

        return $demand;
    }

    /**
     * @param \Extcode\CartProducts\Domain\Model\Dto\Product\ProductDemand $demand
     */
    protected function addCategoriesToDemandObjectFromAjax(&$demand, $kategorie, $material)
    {
        $selectedCategories = [$kategorie, $material];

        $categories = [];

        if ($this->settings['listSubcategories']) {
            foreach ($selectedCategories as $selectedCategory) {
                $category = $this->categoryRepository->findByUid($selectedCategory);
                $categories = array_merge(
                    $categories,
                    $this->categoryRepository->findSubcategoriesRecursiveAsArray($category)
                );
            }
        } else {
            $categories = $selectedCategories;
        }

        $demand->setCategories($categories);
    }
    /**
     * action list
     */
    public function ajaxFilterAction()
    {
        $demand = $this->createDemandObjectFromAjax($_POST['kategorie'],$_POST['material']);
        $demand->setActionAndClass(__METHOD__, __CLASS__);

        $products = $this->productRepository->findDemanded($demand);

        $this->view->assign('searchArguments', $this->searchArguments);
        $this->view->assign('products', $products);
        $this->view->assign('cartSettings', $this->cartSettings);

        $this->assignCurrencyTranslationData();

        $this->addCacheTags($products);
    }
}

Ссылка на страницу (для Livedemo) https://medieval-crafts.redspace.dev/

Вводное видео отключено из-за упрощения разработки.

...