Drupal 8+Commerce 2产品视图：如何横向展示搜索过滤器？

Hey there! I totally get where you're coming from—Drupal 8 + Commerce 2 can feel like a maze when you're figuring out how all the pieces fit together, especially when you need precise control over markup that the default config just doesn't handle easily. Let's break down exactly how to get those filter elements (result count, two category dropdowns, and search box) laid out horizontally with full markup control:

Step 1: Enable Template Debugging (Critical!) #

First, make sure template debugging is turned on so you can target the exact template for your product view's exposed filters. Edit your site's settings.php file and add/uncomment these lines:

$config['system.theme']['debug'] = TRUE;
$config['twig.config']['debug'] = TRUE;
$config['twig.config']['auto_reload'] = TRUE;
$config['twig.config']['cache'] = FALSE;

Clear your site's cache after this—now when you inspect your filter form in the browser's dev tools, you'll see HTML comments listing all available template suggestions for the exposed form.

Step 2: Create a Custom Exposed Form Template #

Your product view has a machine name (e.g., product_catalog if you named it that). Use the template suggestion from the debug comments to create a custom template for just this view's filters:

1. Copy the core views-exposed-form.html.twig file from core/modules/views/templates/
2. Paste it into your active theme's templates/ directory
3. Rename it to match the specific suggestion, like views-exposed-form--product-catalog.html.twig

Step 3: Rewrite the Template for Horizontal Layout & Custom Markup #

Open the new template file and replace its contents with something like this—customize the widget keys and classes to match your actual filter fields:

{# Custom exposed form template for product catalog view #}
<div class="product-filters-container">
  <div class="product-filters-row">
    {# Result count display #}
    <div class="filter-item filter-result-count">
      {% if view.total_rows > 0 %}
        {{ 'Showing @current of @total products'|t({'@current': view.result|length, '@total': view.total_rows}) }}
      {% else %}
        {{ 'No products found'|t }}
      {% endif %}
    </div>

    {# First category dropdown (replace field_category_1 with your filter's machine name) #}
    {% if widgets.field_category_1 %}
      <div class="filter-item filter-category-primary">
        {{ widgets.field_category_1.content }}
      </div>
    {% endif %}

    {# Second category dropdown (replace field_category_2 with your filter's machine name) #}
    {% if widgets.field_category_2 %}
      <div class="filter-item filter-category-secondary">
        {{ widgets.field_category_2.content }}
      </div>
    {% endif %}

    {# Free text search box (replace search_api_fulltext with your search filter's machine name) #}
    {% if widgets.search_api_fulltext %}
      <div class="filter-item filter-search">
        {{ widgets.search_api_fulltext.content }}
      </div>
    {% endif %}
  </div>
</div>

• Use the template debug comments to get the exact widget keys (they match your filter fields' machine names)
• Add any custom classes you want here—this gives you full control over the markup structure

Step 4: Add CSS for Horizontal Styling #

Now add custom CSS to your theme (either in css/custom.css or via the theme's settings) to make the filters stack horizontally:

.product-filters-row {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 0;
}

.filter-item {
  display: flex;
  flex-direction: column;
  min-width: 160px;
}

.filter-item label {
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.filter-item select,
.filter-item input[type="text"] {
  padding: 0.6rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 0.9rem;
}

Adjust the spacing, colors, and layout to match your site's design—since you control the classes, you can style every element exactly how you want.

Step 5: Clear Cache & Test #

After saving the template and CSS, clear your Drupal cache one more time. Your filters should now be arranged horizontally, with full markup control that you can tweak anytime without fighting Drupal's default config.

Quick Tips #

• If you need to modify filter labels or add extra logic (like hiding a filter for certain roles), you can use a preprocess function in your theme's .theme file:

  function MYTHEME_preprocess_views_exposed_form(&$variables) {
    // Change the label of the primary category filter
    if (isset($variables['widgets']['field_category_1'])) {
      $variables['widgets']['field_category_1']['content']['#title'] = t('Product Type');
    }
  }
  

• Always double-check the widget keys from template debug—using the wrong key will make that filter disappear!

内容的提问来源于stack exchange，提问作者jammypeach