php – TYPO3 Filter with ajax and Ext Cart-ThrowExceptions

Exception or error:

I have following task to master:
I have a TYPO3 one pager with a online-shop. The shop is made with the extension cart. Now I have to make a filter functionality that allows to filter the products if they have a TYPO3 sys_category assigned. This alone wouldn’t be big of a challenge, but it gets complicated. The shop only displays 10 products at a time, switching between the other products with an jquery pagination. The pagination is working on a container-div that includes 10 products. That means that I have to rebuild the container-div and the products when I use the filter. On top of that there is a Video overlapping the content every time you reload the page. So I have to use ajax to rebuild the container-div.

The problem that I’m facing now is, that my ajax call always returns an empty value and I cant figure out why. Can someone please help me?

Typoscript:

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 Filter

<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 extending cartproduct 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);
    }
}

Link to the Page (for Livedemo)
https://medieval-crafts.redspace.dev/

The intro-video is disabled due to easier development.

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *