https://www.sony.jp/share5/js/s5-exhibition.js

1$(function() {
2
3  'use strict';
4
5  // 先行展示のリンクを出すためのmanual config
6  var EXHIBITION_JSON = '/share5/sideinclude/exhibition.jsonp';
7
8  // 「商品詳細」で生成される時の一覧へのリンク
9  var EXHIBITION_URL  = '/store/retail/exhibition/';
10
11  // 外部JSON（./share5/sideinclude/exhibition.jsonp）から
12  // Ajaxであとで取得して保管される。
13  var exhibitionList = [];
14
15  // 強制表示のリスト
16  var forceExhibitionList = [];
17
18  // 「先行展示」出力すべきclass。探して格納
19  var $exhibition = $('body').find('.s5-exhibition');
20
21  // 先行展示の空divが存在したらjsonの取得を実行する。取得できたらhtmlを作成する。
22  if($exhibition.length > 0){
23    $.when(
24
25      $.ajax({
26        url           : EXHIBITION_JSON,
27        scriptCharset : 'UTF-8',
28        dataType      : 'jsonp',
29        type          : 'GET',
30        jsonpCallback : 'manualExhibition',
31        cache         : true
32      })
33
34    ).done(function(json){
35
36      // 取得して格納しておく
37      exhibitionList = json;
38
39      // 読み込んだ後に実行
40      $(window).on('load',function(){
41
42        // 価格jsのステータスが出力されているものを取得して格納する
43        var $apiResponseEl = $('body').find('.s5-price-api-status');
44
45        // 手製jsonpを回す
46        $(exhibitionList).each(function(index, el) {
47          // マッチングようにforceだけ配列にする
48          if ( el.display_force === true ) {
49            forceExhibitionList.push(el.product_code);
50          }
51        });
52
53        // 「先行展示」出力すべきDOMを探す
54        $exhibition.each(function(index){
55
56          if ( _.contains(forceExhibitionList, $exhibition.eq(index).attr('data-s5exhibition-productcode')) ) {
57
58            // 強制表示用の配列に含まれるなら強制でリンクを生成する
59            setExhibition( $(this) );
60
61          } else if ( $exhibition.eq(index).attr('data-s5exhibition-productrelease') === 'unsale' ) {
62
63            // PIDモデルもdom出力しているが、発売日かどうかはdata属性で出力しているのでこれをみてリンクを生成
64            setExhibition( $(this) );
65
66          } else if ( $apiResponseEl.eq(index).attr('data-s5-price-api-status') != null ) {
67            // 価格jsの発売ステータスのnull処理
68
69            if ( /11|12|13|14/.test( $apiResponseEl.eq(index).attr('data-s5-price-api-status') ) ) {
70
71              // st:商品ステータスが以下のものは出す
72              // 11：メール登録
73              // 12：エントリー
74              // 13：受注前(購入導線OFF)
75              // 14：先行予約販売中
76              // storeStyleLink が出力しているものにマッチするかどうかチェック
77              setExhibition( $(this) );
78
79            }
80
81          }
82
83        });
84
85        // 先行体験・展示情報のリンクをレンダリングしたあと、
86        // IEだけ高さ合わせのタイミングが合っていなかった
87        var itemMin = new Lineups( [

88          '.s5-listItem4__includeBox'
89          ], {
90            resize: true
91          } );
92        itemMin.refreshAll();
93
94      });
95
96    });
97  }
98
99  //htmlの作成を行う
100  function setExhibition($el){
101
102    var isAV = !!$el.attr( 'data-s5exhibition-productcode' );
103    // checkEnable()を使ってListとの照合を行なっている。結果は true / false で返却されるので、それを格納する
104    var enable = checkEnable($el.attr('data-s5exhibition-productcode'), exhibitionList);
105    var data = {};
106    data.productcode = [];
107    var productcodeList = [];
108    var templateName = $el.attr('data-s5exhibition-template');
109    var itemCount = 0;
110    //タイトルとテキスト default
111    var title = "";
112    var text = "";
113    var list_text = "";
114    var $html =  getTemplate(templateName);
115    var $html_title = $html.find(".s5-previousExhibition__header");
116    var $html_text = $html.find(".s5-previousExhibition__smallText");
117
118    if(enable && isAV){
119      var productcode = $el.attr( 'data-s5exhibition-productcode' );
120      // 「productcodeが空、productgroupidのみ値あり」の場合がある
121      if (!!productcode && productcode != ""){
122        data.productcode = stringToArray(productcode);
123      }
124    }
125
126    //DOMを作成
127    $.each(exhibitionList, function(index, item) {
128      // jsonから取得したデータ
129      productcodeList = stringToArray( item.product_code );
130      title = "新商品 発売前先行体験・展示";
131      text = "店舗で出来る商品体験　どこよりも早く商品を試せます!";
132      list_text = "先行体験・展示情報はこちら";
133
134      // messageフラグ
135      if(!!item.message && item.message != null){
136        switch(parseInt(item.message)){
137          case 1:
138            if(!item.title){title = '発売前先行展示';}
139            if(!item.list_text){list_text = '発売前先行展示';}
140            break;
141          case 2:
142            if(!item.title){title = '発売前体験・展示';}
143            if(!item.list_text){list_text = '発売前体験・展示';}
144            break;
145          case 3:
146            if(!item.title){title = '発売前展示';}
147            if(!item.list_text){list_text = '発売前展示';}
148            break;
149          default:
150            break;
151        }
152      }
153      //jsonの定義がある場合
154      if(!!item.title && item.title !== ""){ title =  item.title; }
155      if(!!item.text && item.text !== ""){ text =  item.text; }
156      if(!!item.list_text && item.list_text !== ""){ list_text = item.list_text; }
157
158      //jsonとdivタグに指定したプロダクトコードを配列化したものを比較
159      $.each(productcodeList, function(productcodeIndex, row){
160
161        //プロダクトコードが一致したら$htmlに追加する
162        if(data.productcode.indexOf(row) !== -1){
163          //テンプレートに追加したアイテムをカウント
164          itemCount++;
165
166          //テンプレートに応じて内容を変更
167          if(templateName === 'detail'){
168            $html.find(".s5-previousExhibition__itemLists").append(
169              [
170                '<div class="s5-previousExhibition__item">',
171                '<div class="s5-previousExhibition__itemInner">',
172                '<a href="' + item.url +'">',
173                '<div class="s5-previousExhibition__image">',
174                '<img src="' + item.img + '" alt="" width="72" height="54">',
175                '</div>',
176                '<div class="s5-previousExhibition__text">',
177                '<div class="s5-previousExhibition__eyecatcher">' + item.product_name + '</div>',
178                '</div>',
179                '</a>',
180                '</div>',
181                '</div><!-- /.s5-previousExhibition__item -->',
182              ].join('\n')
183            );
184            $html.find(".s5-previousExhibition__header").prepend(title);
185            $html.find(".s5-previousExhibition__smallText").prepend(text);
186            return false;
187          }else if(templateName === "list"){
188            $html.find('.s5-previousExhibition__hedding').append(
189              [
190                '<p class="s5-previousExhibition__header">',
191                '<a class="s5-link s5-previousExhibition__eyecatcher" href="' + item.url + '">' + list_text +'</a>',
192                '</p>'
193              ].join('\n')
194            );
195            return false;

196          }
197        }
198      });
199    });
200    if(itemCount > 0){
201      $el.append($html);
202    }
203  }
204
205  function getTemplate( templateName, templat_title, templat_text){
206    var template = $();
207    var url;
208
209    // if(templateName === 'category-top'){
210
211    //   template = $([
212    //     '<div class="s5-previousExhibition1">',
213    //     '<div class="s5-previousExhibition__inner">',
214    //     '<p class="s5-previousExhibition__header">',
215    //     '新商品 発売前先行体験・展示',
216    //     '<span class="s5-previousExhibition__smallText">店舗で出来る商品体験　どこよりも早く商品を試せます!</span>',
217    //     '<a class="s5-previousExhibition__eyecatcher" href="' + EXHIBITION_URL + '">一覧へ</a>',
218    //     '</p>',
219    //     '<div class="s5-previousExhibition__itemLists">',
220    //     '</div>',
221    //     '</div>',
222    //     '</div>'
223    //   ].join( '\n' ));
224
225    // }
226
227    if(templateName === 'detail'){
228
229      template = $([
230        '<div class="s5-previousExhibition2">',
231        '<div class="s5-previousExhibition__inner">',
232        '<div class="s5-previousExhibition__hedding">',
233        '<p class="s5-previousExhibition__header">',
234        '<a class="s5-link s5-previousExhibition__eyecatcher" href="' + EXHIBITION_URL + '">一覧へ</a>',
235        '<span class="s5-previousExhibition__smallText"></span>',
236        '</p>',
237        '</div>',
238        '<div class="s5-previousExhibition__main">',
239        '<div class="s5-previousExhibition__itemLists">',
240        '</div>',
241        '</div>',
242        '</div>',
243        '</div>'
244      ].join( '\n' ));
245
246    }else if(templateName === 'list'){
247
248      template = $([
249        '<div class="s5-previousExhibition3">',
250        '<div class="s5-previousExhibition__inner">',
251        '<div class="s5-previousExhibition__hedding">',
252        '</div>',
253        '</div>',
254        '</div>'
255      ].join('\n'));
256    }
257    return template;
258  }
259
260  // 「,」カンマまたは「|」パイプ区切りのテキストを配列にする
261  function stringToArray(string){
262    return string.replace( /\s/g, '' ).split( /,|\|/ );
263  }
264
265  //第一引数(divに指定したプロダクトコード)、第２引数(jsonオブジェクト)
266  //productcodeがListに存在する場合,trueを返して、比較処理を終了する。
267  function checkEnable( productcode, list ) {
268    var isProductcode = false;
269
270    if(!!productcode && !!list){
271
272      // productコードはまとめて書いてあるので比較の時はバラバラにする
273      var productcodeArray = productcode.split( /,|\|/ );
274      var listArray = [];
275
276      $.each(list, function(index, item) {
277        listArray = item.product_code.split( /,|\|/ );
278
279        $.each(listArray, function(listArrayIndex, row) {
280          if(productcodeArray.indexOf(row) !== -1){
281            isProductcode = true;
282            return false;
283          }
284        });
285        if(isProductcode){ return false };
286      });
287    }
288      return isProductcode;
289  }
290});