How to access drupal 8 views index fields?

Public

I needed to access drupal 8 views index (search api) fields, this is how I accomplish:

First we have to create a views template:

- [base template name]--[view machine name]--[view display id].html.twig
- [base template name]--[view machine name]--[view display type].html.twig (recommended)
- [base template name]--[view display type].html.twig
- [base template name]--[view display type]--[view machine name]--[view display id].html.twig
- [base template name]--[view machine name].html.twig
- [base template name].html.twig

for instance if
views-view-unformatted--search_view--page_search_view.html.twig (OK)
views-view--search_view--page_search_view.html.twig (OK and recommended)

Get raw version
php
  1. // If starts with a specific views DISPLAY like: "unformatted" see: views-view-unformatted--search_view--page_search_view.html.twig
  2. // Let's get nid of first row! (as long as ID (nid) exists in views field UI.
  3. // rows[0].content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ nid }}']|striptags|trim //< "34"
  4. // rows[1].content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ nid }}']|striptags|trim //< "35"
  5. // this is a real example of how code would look like:
  6.  
  7. <div class="search-page">
  8. {% include "@molecules/search-header.twig" with {
  9. phrase: view.args[0],
  10. results: view.total_rows,
  11. browse_link: '/browse',
  12. }%}
  13.  
  14. <div class="ga-row">
  15. <div class="ga-col ga-col-lg-8 ga-col-lg-centered ga-p-bottom-xxx-lg">
  16. <div class="search-results">
  17. <div class="search-results__items">
  18. {% for row in rows %}
  19. {% set nid = row.content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ nid }}']|striptags|trim %}
  20. {% set title = row.content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ title }}'] %}
  21. {% set body = row.content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ body }}'] %}
  22. {% set changed = row.content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ changed }}'] %}
  23. {% include "@molecules/search-result-card.twig" with {
  24. item: {
  25. url: path('entity.node.canonical', {'node': nid}),
  26. title: title,
  27. description: body,
  28. date: changed
  29. }
  30. }%}
  31. {% endfor %}
  32.  
  33. </div>
  34. </div>
  35.  
  36. </div>
  37. </div>
  38. <div class="ga-row">
  39. <div class="ga-col ga-col-lg-centered">
  40. {% if pager %}
  41. {{ pager }}
  42. {% endif %}
  43. </div>
  44. </div>
  45. </div>
  46.  
  47. // Disadvantage: is that unfortunately when you have NO RESULTS views do not recognize this template! (keep in mind!)
  48.  
  49. /**
  50.  * The other solution I recommend if you want to custom fields and no results is to use:
  51.  * [base template name]--[view machine name]--[view display type].html.twig for instance: views-view--search_view--page_search_view.html
  52.  * rows[0]['#rows'][0]['#view'].style_plugin.render_tokens[1]['{{ nid }}']|striptags|trim //< "34"
  53.  * rows[0]['#rows'][0]['#view'].style_plugin.render_tokens[1]['{{ nid }}']|striptags|trim //< "35"
  54.  * see example:
  55.  */
  56.  
  57. <div class="search-page">
  58. {% include "@molecules/search-header.twig" with {
  59. phrase: view.args[0],
  60. results: view.total_rows,
  61. browse_link: '/browse',
  62. }%}
  63.  
  64. <div class="ga-row">
  65. <div class="ga-col ga-col-lg-8 ga-col-lg-centered ga-p-bottom-xxx-lg">
  66. <div class="search-results">
  67. <div class="search-results__items">
  68. {% for row in rows[0]['#rows'] %}
  69. {% set nid = row['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ nid }}']|striptags|trim %}
  70. {% set title = row['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ title }}'] %}
  71. {% set body = row['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ body }}'] %}
  72. {% set changed = row['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ changed }}'] %}
  73. {% include "@molecules/search-result-card.twig" with {
  74. item: {
  75. url: path('entity.node.canonical', {'node': nid}),
  76. title: title,
  77. description: body,
  78. date: changed
  79. }
  80. }%}
  81. {% endfor %}
  82.  
  83. </div>
  84. </div>
  85.  
  86. </div>
  87. </div>
  88. <div class="ga-row">
  89. <div class="ga-col ga-col-lg-centered">
  90. {% if pager %}
  91. {{ pager }}
  92. {% endif %}
  93. </div>
  94. </div>
  95. </div>
  96.  
  97. // See how a bit different is to access fields? It was very tricky! but with this allows you to custom when NO RESULTS! so this is good! if you are looking into this!.