Shopware 6：如何在店面做一个简单的列表分页

Question

我有一个自定义插件，它有一个实体

certificate

，它在店面中列出了该实体的所有证书。

问题：我设法创建了列表视图和分页，但是当单击分页按钮时，它们不起作用或去任何地方。

也许我在这里做错了什么。

- CertificateController.php:

<?php declare(strict_types=1);

namespace Certificate\Storefront\Controller;

use Shopware\Core\Framework\Context;
use Shopware\Core\Framework\DataAbstractionLayer\EntityRepository;
use Shopware\Core\Framework\DataAbstractionLayer\Search\Criteria;
use Shopware\Core\Framework\DataAbstractionLayer\Search\Sorting\FieldSorting;
use Shopware\Storefront\Controller\StorefrontController;
use Certificate\Service\ReadingData;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

/**
 * @Route(defaults={"_routeScope"={"storefront"}})
 */
class CertificateController extends StorefrontController
{
    private ReadingData $readingData;
    private EntityRepository $certificateReposiitory;

    public function __construct(ReadingData $readingData, EntityRepository $certificateReposiitory)
    {
        $this->readingData = $readingData;
        $this->certificateReposiitory = $certificateReposiitory;
    }

    /**
     * @Route("/certificate", name="frontend.certificate.certificate", methods={"GET"})
     */
    public function index(Request $request, Context $context): Response
    {
        $searchQuery = $request->query->get('search', '');
        $results = [];

        $criteria = new Criteria();
        $criteria->setOffset(1);
        $criteria->setLimit(25);
        $criteria->addSorting(new FieldSorting('name', FieldSorting::ASCENDING));

        $result = $this->certificateReposiitory->search($criteria, $context);
        $total = $this->certificateReposiitory->search(new Criteria(), $context)->getTotal();
        $pages = ceil($total / $criteria->getLimit());

        if (!empty($searchQuery)) {
            $results = $this->readingData->readData($searchQuery, $context);
        } else {
            $results = $result->getEntities();
        }

        return $this->renderStorefront('@Certificate/storefront/page/certificate.html.twig', [
            'searchQuery' => $searchQuery,
            'results' => $results,
            'pages' => $pages,
            'currentPage' => $request->query->get('page', 1),
            'limit' => $criteria->getLimit(),
            'criteria' => $criteria,
            'total' => $total
        ]);
    }
}

- src/Resources/views/storefront/page/certificate.html.twig:

{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_content %}
    <form action="{{ path('frontend.certificate.certificate') }}" method="GET">
        <div class="form-group md-4">
            <label for="search">Search:</label>
            <input type="text" class="form-control" id="search" name="search" placeholder="Enter your search query"
                   value="{{ searchQuery|default('') }}">
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
    </form>
    
    {% if searchQuery is not empty or results %}
        {% if results %}
            <h2>Certificates</h2>
        {% else %}
            <h2>Search Results:</h2>
        {% endif %}
        {% if results|length > 0 %}
            <div class="row">
                {% for certificate in results %}
                    <div class="col-md-4 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">{{ certificate.name }}</h5>
                                {% if certificate.media is not null %}
                                <a href="{{ certificate.media.url }}" target="_blank" class="btn btn-secondary">Download</a>
                                {% else %}
                                    <a href="{{ certificate.fileName }}" target="_blank" class="btn btn-secondary">Download</a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
                {% block page_actions_pagination %}
                    <div class="cms-element-product-listing-actions row justify-content-between">
                        <div class="col-md-auto">
                            {% sw_include '@Storefront/storefront/component/pagination.html.twig' with {
                                prev_link: currentPage > 1 ? path('frontend.certificate.certificate', {page: currentPage - 1, search: searchQuery}) : null,
                                next_link: currentPage < pages ? path('frontend.certificate.certificate', {page: currentPage + 1, search: searchQuery}) : null,
                                'currentPage': currentPage,
                                'total': total,
                                'limit': limit,
                                'pages': pages,
                                'criteria': criteria,
                                'searchRoute': 'frontend.certificate.index',
                                'searchQuery': searchQuery
                            } %}

                        </div>
                    </div>
                {% endblock %}
        {% else %}
            <p>No results found for "{{ searchQuery }}".</p>
        {% endif %}
    {% endif %}
{% endblock %}

Answer 1

分页需要包含在表单元素中。然后，您可以使用

FormAutoSubmit

插件通过添加

data-form-auto-submit

属性使其提交更改。

<form action="{{ path('frontend.certificate.certificate') }}"
      method="get"
      data-form-auto-submit="true">
    {% sw_include '@Storefront/storefront/component/pagination.html.twig' with {
        prev_link: currentPage > 1 ? path('frontend.certificate.certificate', {page: currentPage - 1, search: searchQuery}) : null,
        next_link: currentPage < pages ? path('frontend.certificate.certificate', {page: currentPage + 1, search: searchQuery}) : null,
        'currentPage': currentPage,
        'total': total,
        'limit': limit,
        'pages': pages,
        'criteria': criteria,
        'searchRoute': 'frontend.certificate.index',
        'searchQuery': searchQuery
    } %}
</form>