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>'


<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>

Conditional Filtering Box

Function

Example Display

How to use?

Steps