javascript 期：32：20180129 - no34。周辺店铺情报に「もっと见る」追加

Posted 2021-05-04

// 201801xx - no34.周辺店舗情報に「もっと見る」追加
// https://gnavi-work.gnavi.co.jp/jira/browse/MIKAMEI_PDCA-357

(function($, util) {

  window.issue332 = {

    $listWrap: $('#js-inductionSurroundingShopList-component'),
    moreFlag: false,

    start: function(pattern) {
      var that = this;
      var ajaxCheckcount = 300;

      // 既存のinductionSurroundingShopList.jsのajaxがsuccessするまで待機
      setTimeout(function() {
        if (ajaxCheckcount--) {
          if ($('.js-abopt010-2--area').length) {
            // 一旦既存の要素を削除
            that.$listWrap.empty().addClass('section issue332');
            // AB用に再構築
            that.request(pattern);
          } else {
            that.start(pattern);
          }
        }
      }, 100);
    },

    request: function(pattern) {
      var that = this;

      // 以下、既存のinductionSurroundingShopList.jsの丸コピ
      // ※追加、修正あり。別途コメント: addFunc
      var renderInductionSurroundingShopList = {
        $component: $('#js-inductionSurroundingShopList-component'),
        start: function() {
          var url = util.getProp(window, 'GNAVI.Config.Apis.inductionSurroundingShop'),
            myself = this;

          if (!url) return;

          // addFunc: パラメータ追加
          // 現行は最大6件
          // ローカルではなくAPIを叩く時はパラメータを追加して最大13件に
          // url = url + '&limit=13';
          // TODO ABテスト時のみ！実装時はtest_mode削除
          url = url + '&test_mode=1&limit=13';
          // /パラメータ追加

          $.ajax({
            type: 'GET',
            url: this.decode(url),
            dataType: 'json',
            success: function(data) {
              if(data.status && data.shop_list.length) {
                myself.renderDom(data);
              }

              // addFunc: 2度目のajaxがsuccessしてからAB用の処理
              switch (pattern) {
                case 1:
                  that.setMore(data, 'btn');
                  break;
                case 2:
                  that.setMore(data, 'menu');
                  $('.issue332 .button__item').addClass('js-abopt-issue332-link');
                  break;
                case 3:
                  that.setMore(data, 'menu');
                  that.$listWrap.find('.button__item').addClass('-clr-link');
                  $('.issue332 .button__item').addClass('js-abopt-issue332-link');
                  break;
                case 4:
                  that.setMore(data, 'btn', true);
                  break;
                default:
                  break;
              }
              // /2度目のajaxがsuccessしてからAB用の処理
            },
            timeout: 3000
          });
        },
        decode: function(val) {
          return val.split('?')[0] + '?' + $.param(util.createBaseQueryObject(val.replace(/&/g, '&')));
        },
        cut: function(val, params) {
          if(val.length >= params) {
            return val.slice(0, params - 1) + '...';
          }
          return val;
        },
        renderDom: function(res) {
          var answer = '',
            target = $('<div>'),
            that = this,
            template = '<div class="section js-abopt010-2 js-abopt010-2--area">' +
            '<div class="titlebar titlebar--other">' +
            '<div class="titlebar__body">' +
            '<h2 class="heading--default">${area} / ${category}<span class="-normal">のお店</span></h2>' +
            '</div>' +
            '</div>' +
            '<ul class="listGroup">${list}</ul>' +
            '</div>';

          // addFunc: 表示件数の調整
          if (res.shop_list.length === 13) {
            issue332.moreFlag = true;
            // 13件目は表示しないので配列から削除
            res.shop_list.pop();
          }
          // /表示件数の調整

          res.shop_list.forEach(function(value) {

            var labelHtml = value.coupon_url ? '<p><span class="media__label media__label--coupon">クーポン</span></p>' : '';

            answer += '<li class="listGroup__item">' +
              '<a href="' + value.top_url + '?sc_lid=rp-smp_area01" class="listGroup__layout ic-arr-r">' +
              '<div class="listGroup__body">' +
              '<div class="media">' +
              '<div class="media__left">' +
              '<div class="image image--width-100">' +
              '<p class="image__body"><img src="' + value.photo_url + '" alt=""> </p>' +
              '</div>' +
              '</div>' +
              '<div class="media__body">' +
              '<p class="heading--big">' + that.cut(value.name, 30) + '</p>' +
              labelHtml +
              '<p class="text--default">' + value.category_11 + '</p>' +
              '<p class="text--default">' + value.access + '</p>' +
              '</div>' +
              '</div>' +
              '</div>' +
              '</a>' +
              '</li>';
          });

          template = template.replace('${area}', res.area_m)
            .replace('${category}', res.genre_l)
            .replace('${list}', answer);

          that.$component.append(target.html(template));
        }
      };

      renderInductionSurroundingShopList.start();
    },

    // 以下、新規追加。
    setMore: function(data, parts, moremore) {
      var that = this;

      if (data.shop_list.length < 7) return;

      if (parts === 'btn') {
        that.renderBtn(data);
      }

      if (parts === 'menu') {
        that.renderMenu(data);
      }

      $('.issue332').find('.listGroup__item:nth-child(n+7)').addClass('listGroup__item--hide');

      $('.js-shoplist-more').on('click', function(e) {
        e.preventDefault();
        $(this).parent().parent().remove();

        $('.issue332').find('.listGroup__item--hide').each(function() {
          $(this).removeClass('listGroup__item--hide');
          $(this).addClass('listGroup__item--show');
        });

        // パターン4で13件の場合、もっと見るが二度出てくる
        if (issue332.moreFlag && moremore) {
          that.renderMenu(data);
          $('.issue332 .button__item').addClass('js-abopt-issue332-link');
        }
      });
    },

    renderBtn: function(data) {
      var that = this;

      that.$listWrap.append(
        '<div class="button button--normal">' +
        '<div class="button__body">' +
        '<a href="#" class="button__item button__item--normal js-shoplist-more" onclick="sc_count(\'r_smp_more\')">' +
        '<div>' +
        '<p class="text--big"><span>もっと見る</span>' +
        '</p>' +
        '</div>' +
        '</a>' +
        '</div>' +
        '</div>'
      );
    },

    renderMenu: function(data) {
      var that = this;

      that.$listWrap.append(
        '<div class="button button--full">' +
        '<div class="button__body">' +
        '<a href="' + data.more_shops_url + '?sc_lid=rp-smp_r_area01" class="button__item ic-arr-r">' +
        '<div>' +
        '<p class="text--big"><span>もっと見る</span>' +
        '</p>' +
        '</div>' +
        '</a>' +
        '</div>' +
        '</div>'
      );
    },

    setClass: function() {
      var that = this;
      var url = util.getProp(window, 'GNAVI.Config.Apis.inductionSurroundingShop');

      // urlが存在しないか、加盟店（メディア掲載プランには周辺店舗あり）の場合は終了
      if (!url || util.isMemberStore()) return;

      // 件数確認のみ。実装時は不要
      url = url + '&test_mode=1&limit=13';

      $.ajax({
        type: 'GET',
        url: this.decode(url),
        dataType: 'json',
        success: function(data) {
          if(data.status && data.shop_list.length > 6) {
            $('body').addClass('js-issue332-shop-is-valid');
          }
        },
        timeout: 3000
      });
    },

    decode: function(val) {
      return val.split('?')[0] + '?' + $.param(util.createBaseQueryObject(val.replace(/&amp;/g, '&')));
    }

  }

  // localhost・frontendサーバーのみ発火
  util.abtestRun(332);

  // ABテスト対象店舗かは関係なくOptimizelyより前に発火
  window.issue332.setClass();

})(jQuery, util);