Тест на устранение с фильтрами и результатами, показанными на той же странице - PullRequest
Новая
       0

Тест на устранение с фильтрами и результатами, показанными на той же странице

1 голос
/ 19 февраля 2020

В настоящее время работаю над страницей цифровых ресурсов для библиотеки. Эта библиотека использует CMS Drupal, и, как и многие другие библиотеки, имеет цифровую библиотеку с несколькими сетевыми ресурсами, которые связаны между собой. У каждого ресурса цифровой библиотеки есть свой кликабельный значок в виде сетки. Каждый цифровой ресурс является собственным узлом, и они были размещены в представлении. Также на странице цифровой библиотеки размещено отдельное представление, представляющее собой карусель с переменным фокусным расстоянием, внутри которого размещен вид, в котором каждый отдельный фильтр узла ресурсов размещен на каждом слайде карусели.

Первоначальный проект состоял в том, чтобы, как мы надеемся, создать сеточное представление ресурсов (что было достаточно просто) и представить фильтры по одному, как вопросы пользователю, и каждый раз, когда пользователь отвечал на эти вопросы, например В ходе теста ресурсы также будут фильтроваться на той же странице, показывая результаты в режиме реального времени, что в конечном итоге приведет к созданию одной или двух баз данных, которые соответствуют ответам, которые вы дали.

Проблема, как представляется, заключается в том, что Трудно представить, как это можно сделать на одной странице, задавая вопрос, отвечая на вопросы пользователей, удаляя значки ресурсов и переходя к следующему вопросу без проблем. Карусель кажется хорошим решением, за исключением того, что вам нужно вручную выбрать стрелку карусели, чтобы увидеть следующий вопрос. Также в настоящее время, когда вы переходите к следующему слайд-вопросу о карусели слайдов, вы автоматически возвращаетесь к первому вопросу фильтра. Было бы неплохо, если бы при задании вопроса появился следующий последовательный вопрос, вопрос в том, есть ли способ достичь этого? Является ли Flickity правильным и единственным возможным способом для достижения этой цели?

Карусель с викториной для радио-кнопок (Использует Flickity. js) https://flickity.metafizzy.co/

(function ($, Drupal, window, document, undefined) {
     Drupal.behaviors.vplFlicks = {
         attach: function (context, settings) {

if ($("body").hasClass('page-mary-test-view-four')) {
                                                                                                                                
                                                                                                                                $('.view-mary-test-view .views-exposed-form').addClass('four-main');
                                                                                                                                $('.view-mary-test-view .views-exposed-widget').addClass('carousel-cell');
                                                                                                                                $('.view-mary-test-view .views-exposed-widgets').contents().unwrap();

                                                                                                                }
                                                                                                
            $('.four-main').flickity({
                imagesLoaded: true,
                contain: true,
                pageDots: false,
                prevNextButtons: true
            });


    }
    }

})(jQuery, Drupal, this, this.document);

Вывод Drupal Views
Я выбрал «Дети, искусство и отдых», любые радиокнопки, чтобы сузить результаты до двух списков, чтобы код не был слишком перегружен. Вы можете сделать скриншот этой страницы: http://narwhal.vpl.ca/mary-test-view-four?field_audience_tid=1&field_subject_tid=1&field_access_tid=All

<div class="view view-mary-test-view view-id-mary_test_view view-display-id-page_3 view-dom-id-d3b4c318facf5003a03c0019f1ee2344 jquery-once-2-processed">
        
      <div class="view-filters">
      <form class="ctools-auto-submit-full-form ctools-auto-submit-processed jquery-once-2-processed" action="/mary-test-view-four" method="get" id="views-exposed-form-mary-test-view-page-3" accept-charset="UTF-8"><div><div class="views-exposed-form four-main flickity-enabled is-draggable" tabindex="0">
  
      
<div class="flickity-viewport" style="height: 184px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translateX(0%);"><div id="edit-field-audience-tid-wrapper" class="views-exposed-widget views-widget-filter-field_audience_tid carousel-cell is-selected" style="position: absolute; left: 0%;">
                  <label for="edit-field-audience-tid">
            Are you a younger age group?          </label>
                        <div class="views-widget">
          <div id="edit-field-audience-tid" class="form-radios"><div class="form-item form-type-radio form-item-field-audience-tid">
<input type="radio" id="edit-field-audience-tid-all" name="field_audience_tid" value="All" class="form-radio">  <label class="option" for="edit-field-audience-tid-all">- Any - </label>

</div>
<div class="form-item form-type-radio form-item-field-audience-tid">
<input type="radio" id="edit-field-audience-tid-1" name="field_audience_tid" value="1" checked="checked" class="form-radio">  <label class="option" for="edit-field-audience-tid-1">Kids </label>

</div>
<div class="form-item form-type-radio form-item-field-audience-tid">
<input type="radio" id="edit-field-audience-tid-2" name="field_audience_tid" value="2" class="form-radio">  <label class="option" for="edit-field-audience-tid-2">Teens </label>

</div>
</div>        </div>
              </div><div id="edit-field-subject-tid-wrapper" class="views-exposed-widget views-widget-filter-field_subject_tid carousel-cell" style="position: absolute; left: 100%;">
                  <label for="edit-field-subject-tid">
            Which subject makes you the happiest?          </label>
                        <div class="views-widget">
          <div id="edit-field-subject-tid" class="form-radios"><div class="form-item form-type-radio form-item-field-subject-tid">
<input type="radio" id="edit-field-subject-tid-all" name="field_subject_tid" value="All" class="form-radio">  <label class="option" for="edit-field-subject-tid-all">- Any - </label>

</div>
<div class="form-item form-type-radio form-item-field-subject-tid">
<input type="radio" id="edit-field-subject-tid-1" name="field_subject_tid" value="1" checked="checked" class="form-radio">  <label class="option" for="edit-field-subject-tid-1">Art &amp; Recreation </label>

</div>
<div class="form-item form-type-radio form-item-field-subject-tid">
<input type="radio" id="edit-field-subject-tid-2" name="field_subject_tid" value="2" class="form-radio">  <label class="option" for="edit-field-subject-tid-2">Business &amp; Careers </label>

</div>
<div class="form-item form-type-radio form-item-field-subject-tid">
<input type="radio" id="edit-field-subject-tid-3" name="field_subject_tid" value="3" class="form-radio">  <label class="option" for="edit-field-subject-tid-3">Culture &amp; History </label>

</div>
</div>        </div>
              </div><div id="edit-field-access-tid-wrapper" class="views-exposed-widget views-widget-filter-field_access_tid carousel-cell" style="position: absolute; left: 200%;">
                  <label for="edit-field-access-tid">
            Do you have a card?          </label>
                        <div class="views-widget">
          <div id="edit-field-access-tid" class="form-radios"><div class="form-item form-type-radio form-item-field-access-tid">
<input type="radio" id="edit-field-access-tid-all" name="field_access_tid" value="All" checked="checked" class="form-radio">  <label class="option" for="edit-field-access-tid-all">- Any - </label>

</div>
<div class="form-item form-type-radio form-item-field-access-tid">
<input type="radio" id="edit-field-access-tid-1" name="field_access_tid" value="1" class="form-radio">  <label class="option" for="edit-field-access-tid-1">Everywhere for Everyone </label>

</div>
<div class="form-item form-type-radio form-item-field-access-tid">
<input type="radio" id="edit-field-access-tid-2" name="field_access_tid" value="2" class="form-radio">  <label class="option" for="edit-field-access-tid-2">Everywhere for cardholders </label>

</div>
<div class="form-item form-type-radio form-item-field-access-tid">
<input type="radio" id="edit-field-access-tid-3" name="field_access_tid" value="3" class="form-radio">  <label class="option" for="edit-field-access-tid-3">Everywhere for residents </label>

</div>
</div>        </div>
              </div><div class="views-exposed-widget views-submit-button carousel-cell" style="position: absolute; left: 300%;">
      <input class="ctools-use-ajax ctools-auto-submit-click js-hide form-submit" type="submit" id="edit-submit-mary-test-view" name="" value="Apply">    </div></div></div><button class="flickity-prev-next-button previous" type="button" disabled="" aria-label="previous"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg></button><button class="flickity-prev-next-button next" type="button" aria-label="next"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button></div>
</div></form>    </div>
  
  
      <div class="view-content">
      <div class="item-list">    <ul>          <li class="views-row views-row-1 views-row-odd views-row-first">  
          
  <div class="field-image">
    <a href="/digital-library/indigenous-cinema-nfb"><img typeof="foaf:Image" src="/sites/narwhal/public/styles/digital_library/public/db-subject-culture-history.png?itok=-JoSEwzf" alt="Culture and History Subject Icon" title="Culture &amp; History" width="430" height="320"></a>  </div>
    
  <div>        <h3><a href="/digital-library/indigenous-cinema-nfb">Indigenous Cinema at the NFB</a></h3>  </div></li>
          <li class="views-row views-row-2 views-row-even views-row-last">  
          
  <div class="field-image">
    <a href="/digital-library/national-film-board"><img typeof="foaf:Image" src="/sites/narwhal/public/styles/digital_library/public/db-subject-culture-history.png?itok=-JoSEwzf" alt="Culture and History Subject Icon" title="Culture &amp; History" width="430" height="320"></a>  </div>
    
  <div>        <h3><a href="/digital-library/national-film-board">National Film Board</a></h3>  </div></li>
      </ul></div>    </div>
  
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...