帶有 ajax 和 Ext Cart 的 TYPO3 過濾器

Question

我有以下任務要掌握：我有一個帶有在線商店的 TYPO3 單傳呼機。 商店是用擴展推車制作的。 現在我必須創建一個過濾器功能，如果產品分配了 TYPO3 sys_category，則可以過濾它們。 僅此一項不會有很大的挑戰，但它會變得復雜。 該商店一次只顯示 10 個產品，在其他產品之間切換，使用 jquery 分頁。 分頁正在處理一個包含 10 個產品的容器 div。 這意味着當我使用過濾器時，我必須重建 container-div 和產品。 最重要的是，每次重新加載頁面時，都會有一個視頻與內容重疊。 所以我必須使用ajax來重建container-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
}

查詢：

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 擴展 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);
    }
}

鏈接到頁面（用於 Livedemo） https://medieval-crafts.redspace.dev/

由於更容易開發，介紹視頻被禁用。

Answer 1

我需要類似的東西，並從谷歌得到了這個懸而未決的問題。 為了進一步參考，我將發布我的過濾 cart_products 的解決方案（沒有 ajax 部分）。

先決條件：我自己的擴展（例如sitepackage）

然后擴展ProductController：ext_localconf.php

$GLOBALS['TYPO3_CONF_VARS']['SYS']['Objects'][\Extcode\CartProducts\Controller\ProductController::class] = ['className' => \MyVendor\MySitepackage\Controller\ProductController::class];

類/控制器/ProductController.php

<?php
namespace MyVendor\MySitepackage\Controller;

class ProductController extends \Extcode\CartProducts\Controller\ProductController
{
    protected function getCategoriesFromSettings()
    {
        $result = [];
        if ($this->settings['categoriesList']) {
            $ids = explode(',', $this->settings['categoriesList']);
            foreach ($ids as $id) {
                $result[] = $this->categoryRepository->findByUid($id);
            }
        } else {
            $result = $this->categoryRepository->findAll();
        }
        return $result;
    }

    public function listAction(int $currentPage = 1): void
    {
        if ($this->request->hasArgument('cat')) {
            $this->settings['categoriesList'] = $this->request->getArgument('cat');
        }
        parent::listAction($currentPage);
        $this->view->assign('categories', $this->getCategoriesFromSettings());
    }
    
}

然后將類別選擇添加到模板（假設您可以在模板副本中執行此操作，因為您以這種方式配置購物車） Resources/Private/Partials/Product/List/*.html

<ul>
  <li>
    <f:link.page>All</f:link.page>
  </li>
  <f:for each="{categories}" as="cat">
    <li>
      <f:link.action arguments="{cat: cat.uid}">{cat.title}</f:link.action>
    </li>
  </f:for>
</ul>

清除緩存，轉儲自動加載，你就完成了。

TYPO3 11.5.9，購物車產品 4.0.3，購物車 8.2.3