0

I'm working on a site in drupal 8 that uses commerce 2. I'm learning as I go with this and feel like I'm missing something on how everything fits together.

I made a view for products, and configured how products display, and used twig templates to add wrappers and classes etc. This seems to work fine, but when it comes to adding any functionality, Twig doesn't seem to be the place to do it. The config options in Drupal cover layouts and CSS classes but are very complex.

This is confusing when you need to make the markup a certain way. In my case I need to add the following in a horizontal row:

  1. number of results found
  2. Select dropdown to filter results by a taxonomy
  3. Another select for different taxonomy
  4. Free text search box

I need to then style these also so I'd really want to control the markup generated, to some degree. How would I go about implementing this in a view?

5

Below are some guidelines to setting up each of your requirements in a view. Worth noting, in order to display each in the same row, you'll need to customize the view template to combine the exposed filters and the results count from the view header.

  • Number of Results Found
    1. In the Header section (middle column) of the View edit page, click ADD. view header components
    2. If your view has multiple displays, be sure to select whether to apply this to all displays in the view, or just the selected/current one in the FOR section. apply header component to all or just this display
    3. Select "Result summary" and click the ADD AND CONFIGURE HEADER button. result summary header component
    4. Edit/customize your results text with the tokens. If you want to still expose the same text pattern if no results are found, check the checkbox "Display even if view has no result" results text customization
    5. Click APPLY

  • Select dropdowns to filter results by a taxonomy
    1. In the Filter Criteria section (near bottom of left column) of the View edit page, click ADD. views filter criteria
    2. If your view has multiple displays, be sure to select whether to apply this to all displays in the view, or just the selected/current one in the FOR section. apply filter to all or just this display
    3. Find your custom taxonomy field you wish to filter by. Note, if your field is configured to allow multiple term selection, you'll see two instances of the field listed (the field itself, and the field delta). Pick the field itself. taxonomy field filter selection
    4. Click APPLY.
    5. If the field is setup to allow taxonomy terms from multiple taxonomies/vocabularies, select the one you wish to show/filter on. Choose the dropdown option to set the filter as a select element. taxonomy filter config part 1
    6. Check the checkbox to "Expose this filter to visitors, to allow them to change it" filter config part 2
    7. Select the "single filter" format and update the field label to reflect the label you'd like the user to see. Keep the operator as "is one of". In the righ column, Leave the list of terms unselected to automatically show all terms in the filter. filter config part 3
    8. scroll further down the form, and click the REDUCE DUPLICATES option; optionally- click the REMEMBER THE LAST SELECTION option so that users clicking a back button to return to the page will still see the previous selection. filter config part 4
    9. Finally, click apply to save the filter settings.
    10. If the Auto preview option is enabled, you should now see the select filter in the view preview below the view config section (even if there are no results). exposed filter- select taxonomy

  • Free text search box
    1. To setup a free text search box, you'll need to use the "Combine fields filter"; but it can only be applied to search the fields configured in the view. (You can add fields and exclude from display). If your view is setup to "Show Content", you'll need to click the "Settings" for the view Format and select "Force Using Fields" to add fields to the view for filtering/searching. format settings force using fields
    2. Add the fields for searching (title, body, etc) fields for searching
    3. In the Filter Criteria section (near bottom of left column) of the View edit page, click ADD. views filter criteria
    4. If your view has multiple displays, be sure to select whether to apply this to all displays in the view, or just the selected/current one in the FOR section. apply filter to all or just this display
    5. Find and select the "Combine Fields Filter" and click APPLY. combine fields filter option
    6. Check the checkbox to "Expose this filter to visitors, to allow them to change it"
    7. Select the "single filter" format and update the field label to reflect the label you'd like the user to see. Change the operator to "Contains".
    8. scroll further down the form, and click the REDUCE DUPLICATES option; optionally- click the REMEMBER THE LAST SELECTION option so that users clicking a back button to return to the page will still see the previous selection. combine field filter config 1
    9. scroll even further down and multiselect the applicable search fields. combine field filter config 2
    10. Finally, click apply to save the filter settings.
    11. If the Auto preview option is enabled, you should now see the search box in the view preview below the view config section (even if there are no results). view preview with search added

  • Customizing the View Templates
    1. Refer to the "Understanding Views Templates" and "Naming Views Templates" sections of this blog post for a high level rundown of Drupal 8 view templating.
    2. This legacy Views Template listing for Drupal 6 & 7 gives a good rundown of all the various views component templates (view header, view footer, view exposed filters). Most are still applicable in drupal 8, with the .tpl.php file ending swapped out as .html.twig
| improve this answer | |
  • very helpful, thankyou. I've added elements to the header of the view which I've then been able to template using twig debug to get template names & style. – jammypeach Feb 9 '18 at 11:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.