1. Conditional Filtering Box
GDC Training Portal

Conditional Filtering Box

Function


Selete the different combinations of conditions can display the different results.
选择不同的筛选选项组合,会展示出不同的符合条件的结果。


Example Display

  • インタビュー

    村井一成 Kazunari Murai

    00004,10002,20006,30015,30018,40001,40002,40004,40007

  • インタビュー

    伊東薫 Kaoru Ito

    00004,10002,20005,30017,40001,40002,40003,40004,40006

  • インタビュー

    藤島哲 Satoshi Fujishima

    00008,10001,20003,30008,40006

  • インタビュー

    石戸谷英紀 Hidetoshi Ishitoya

    00008,10001,20003,30008,40002,40004,40006,40007

  • インタビュー

    佐藤大道 Hiromichi Sato

    00004,10001,20001,30003,40002,40004,40006,40007

  • インタビュー

    平塚毅 Tsuyoshi Hiratsuka

    00004,10001,20003,30009,40001,40002,40004,40006,40007

  • インタビュー

    大風真也 Kazunari Murai

    00004,10001,20003,30009,40002,40004,40007

  • インタビュー

    松田知道 Tomomichi Matsuda

    00004,10001,20002,30006,40002,40004,40006,40007

  • インタビュー

    栗田佳幸 Yoshiyuki Kurita

    00007,10001,20002,20004,30010,30011,40002,40005,40006,40007

  • インタビュー

    米満卓哉 Takuya Yonemitsu

    00007,10001,20003,30010,40002,40004,40005,40007

  • インタビュー

    武島雄二Yuji takeshima

    00007,10001,20003,30009,40002,40004,40006,40007

  • インタビュー

    西方豊美Toyomi Nishikata

    00007,10001,10002,20007,20002,30005,30016,40002,40004,40006

  • インタビュー

    河原祐己 Yuki Kawahara

    00001,10001,10002,10003,20002,20011,20007,30001,30008,30016,40002,40004,40006

  • インタビュー

    森内克幸 Katsuyuki Moriuchi

    森内克幸 Katsuyuki Moriuchi

  • インタビュー

    森本修二Shuji Morimoto

    00003,10002,20010,30019,40001,40002,40006

  • インタビュー

    槙聡志 Satoshi Maki

    00004,10002,20006,30015,30018,40004,40007

  • インタビュー

    畠山重正 Shigemasa Hatakeyama

    00008,10001,20001,30003,40007,40006,40001,40005

  • インタビュー

    髙橋淳 Atsushi Takahashi

    00002,10001,20001,30002,40007,40006,40001,40005

  • インタビュー

    山田明宏 Akihiro Yamada

    00002,10001,20001,30002,40007,40006,40001,40005,40003


How to use?

  • Steps

    1. Add rC-58- HTML to page, copy below code in content. / 在页面内添加rC-58-HTML这个DPL,并将以下代码复制到content内

    2. Copy JS_DynamicFilters file from 'connect/ja_JP/Group A/IBG_CubitronII/Resources_SiteArea/WorksMagazine_SiteArea/JS_DynamicFilters' to local related SiteArea. / 将JS_DynamicFilters这个文件夹从'connect/ja_JP/Group A/IBG_CubitronII/Resources_SiteArea/WorksMagazine_SiteArea/JS_DynamicFilters' 这个路径拷贝到当前网页当地的相对路径内

    3. Update the Code. / 修改copy的代码

        ① Prepare this 2 json data: dynamicFilters  and mappingList. / ① 联系客户方准备两个josn文件,dynamicFilters和mappingList

        ② Update the loadPageModule to local file in below code line 180. / ② 将下方代码180行的loadPageModule 参数设置为已copy的JS_DynamicFilters文件夹路径

        ③ Update the text content as local request. / ③ 按照当地需求更新文字内容

    4. Create rG-57-Column below the rC-58-HTML, and create content for it. Add corresponding id in span label in each content body box, like: / 在HTML的DPL下方创建rG-57-Columns这个DPL,在输入每个Column内容的时候,添加以下代码,span中的文本表示该项对应的筛选值,可从json文件中获知

        '<p dir="ltr"><span class="MMM--tag-hidden MMM--isVisuallyHidden">00004,10002,20006,30015,30018,40001,40002,40004,40007</span></p>'

HTML CODE:

<style>
.MMM--fancyDropDiv .MMM--fancyDropAnchor .MMM--fancyDropLabel {
    width:-webkit-calc(100% - 62px);
    width:-moz-calc(100% - 62px);
    width:-ms-calc(100% - 62px);
    width:-o-calc(100% - 62px);
    width:calc(100% - 62px);
}
.noResAlert {
     text-align: center;
}
</style>
<div class="js-dynamicFilters">
  <ul class="MMM--columnList MMM--columnList_mc3">
      <li>
          <div class="MMM--columnPanel">
            <div>
              <label>title1</label>
          </div>
          <div>
            <select name="Benefit" class="MMM--selectInput js-fancyDropDown" >
                      <option value="" selected>select</option>
                  </select>
          </div>
          </div>
      </li>
      <li>
          <div class="MMM--columnPanel">
            <div>
              <label>title2</label>
          </div>
          <div>
            <select name="Brand" class="MMM--selectInput js-fancyDropDown" >
                      <option value="" selected>select</option>
                  </select>
          </div>
          </div>
      </li>
      <li>
          <div class="MMM--columnPanel">
            <div>
              <label>title3</label>
          </div>
          <div>
            <select name="Product_Category" class="MMM--selectInput js-fancyDropDown" >
                      <option value="" selected>select</option>
                  </select>
          </div>
          </div>
      </li>
      <li>
          <div class="MMM--columnPanel">
            <div>
              <label>title4</label>
          </div>
          <div>
            <select name="Product_Name" class="MMM--selectInput js-fancyDropDown" >
                      <option value="" selected>select</option>
            </select>
          </div>
          </div>
      </li>
      <li>
          <div class="MMM--columnPanel">
            <div>
              <label>title5</label>
          </div>
          <div>
            <select name="Prefecture" class="MMM--selectInput js-fancyDropDown" >
                      <option value="" selected>select</option>
                  </select>
          </div>
          </div>
      </li>
  </ul>

  <div class="js-filterResult">
  </div>
</div>
<script>
var dynamicFilters = [
  // need add json data
];
var mappingList = {
  // need add json data
}
loadPageModule('JS_DynamicFilters file path');
</script>
<script type="text/html" id="js-zeroResultTemplate">
    <div class="noResAlert MMM--gapTopMed MMM--gapBottomMed MMM--contentWrapper ">    
      <div class="MMM--hdg MMM--hdg_4  MMM--contentWrapper_padded">
             <div class="MMM--hdg MMM--hdg_4  MMM--contentWrapper_padded">
              Add error message here
             </div>
        </div>
  </div>
</script>
<script type="text/html" id="js-loadMoreTemplate">
    <div class="MMM--loadMore-button  js-loadMore MMM--isVisuallyHidden">        
           Load More                          
    </div>
</script>

更改地区
中国大陆 - 中文