javascript Issue76 - 20190417 - no109。他店铺リンクの情报调整

Posted 2021-05-03

import abtestRun from '../abTestRun'
import changeImgSize from './changeImgSize'
import addDesignPattern from './addDesignPattern'
import emptyOftenWithViewedShop from './emptyOftenWithViewedShop'
import fetchRcmApi from './fetchRcmApi'

const addAccess = pattern => {
  addDesignPattern('-access')
  emptyOftenWithViewedShop()
  fetchRcmApi(pattern)
}

const issue76 = () => {
  const caseMap = {
    '1': () => {
      addDesignPattern('-p1')
      addAccess()
    },
    '2': () => {
      addDesignPattern('-p2')
      changeImgSize()
    },
    '3': () => {
      addDesignPattern('-p3')
      addAccess()
      changeImgSize()
    },
    '4': () => {
      addDesignPattern('-p4')
      addAccess('moveName')
      changeImgSize()
    },
    '5': () => {
      addDesignPattern('-p5')
      addAccess('moveName')
      changeImgSize()
    },
  }

  // 既存APIで描画されるDOMの存在確認はOptimizelyのトリガーにて
  // 自前でやると実行順序が制御できない（既存の描画より先に確認が発火）
  const init = caseNumber => {
    const recentlyShop = document.getElementById('js-shop-saw-recently')
    const oftenWithViewedShop = document.getElementById('js-often-with-viewed-shop')
    // 0件の場合は上記DOMがremoveされているため
    if (!oftenWithViewedShop) return

    oftenWithViewedShop.classList.add('issue76')
    // 「最近見たお店」は初訪問ユーザーでDOMがない場合がある
    if (recentlyShop) recentlyShop.classList.add('issue76')
    // パターンごとの処理
    caseMap[caseNumber.toString()]()
  }

  window.issue76 = { start: init }
  /* eslint no-magic-numbers: 0 */
  abtestRun(76)
}

export default issue76

// 実装になったらotherShopLinkの更新なので
// ABではファイルをまるごとコピー・流用
// TODO: 一部調整あり・実装時は反映

import axios from 'axios'
import isLocalEnv from '../../../utils/isLocalEnv'
import isFrontEnv from '../../../utils/isFrontEnv'
import isTestEnv from '../../../utils/isTestEnv'
import shopData from '../../../utils/shopData'
import cutText from '../../../otherShopLink/cutText'
import moveName from '../moveName'

const shopWrap = document.getElementById('js-often-with-viewed-shop')

const titleTemplate = () => {
  const title = document.createElement('div')

  title.setAttribute('class', 'titlebar titlebar--other')
  title.innerHTML = `
  <div class="titlebar__body"><h2 class="heading--default">よく一緒に見られているお店</h2></div>
  `

  return title
}

const shopTemplate = res => {
  // 店舗ページは最大20件表示
  const shopListCountLimit = 20
  const shopListData = res.data.rcmShopList.slice(0, shopListCountLimit)
  // 文字切り
  const shopNameCutNum = 20
  const shopStationCutNum = 20

  const shopListWrap = document.createElement('div')
  shopListWrap.classList.add('carousel-wrap')

  const shopList = document.createElement('ul')
  shopList.classList.add('listGroup')

  shopListWrap.appendChild(shopList)

  // TODO: 以下、一部調整あり。項目の追加。
  shopListData.forEach(data => {
    const shopName = cutText(data.shopName, shopNameCutNum)
    const category = data.category
    const shopURL = data.shopURL
    const shopStation = cutText(data.shopStation + data.walk, shopStationCutNum)
    const shopImg = data.shopImg
    const budgetLunch = data.budgetLunch !== '' ? data.budgetLunch + '円' : '<span>-</span>'
    const budgetAverage = data.budgetAverage !== '' ? data.budgetAverage + '円' : '<span>-</span>'

    const renderPointType = () => {
      let point = ''

      if (data.pointType !== '0') {
        const map = {
          '1': '貯まる',
          '2': '使える',
          '3': '貯まる・使える',
        }

        point = `<p class="text--small media__point" style="display: none;">${map[data.pointType]}</p>`
      }

      return point
    }

    const pointType = renderPointType()

    shopList.innerHTML += `
    <li class="listGroup__item">
      <a href="${shopURL}" class="listGroup__layout">
        <div class="listGroup__body">
          <div class="media">
            <div class="media__left">
              <div class="image">
                <p class="image__body">
                  <img src="${shopImg}" alt="">
                </p>
              </div>
            </div>
            <div class="media__body">
              <p class="heading--big media__name">${shopName}</p>
              <p class="text--small">${category}</p>
              <p class="text--small media__access">${shopStation}</p>
              <ul class="text--small media__budget">
                <li class="media__budget-lunch">${budgetLunch}</li>
                <li class="media__budget-average">${budgetAverage}</li>
              </ul>
              ${pointType}
            </div>
          </div>
        </div>
      </a>
    </li>
    `
  })

  return shopListWrap
}

const renderDOM = res => {
  shopWrap.classList.add('other-shop-link')

  const shopListCount = res.data.rcmShopList.length

  // 0件の場合は枠を削除
  if (shopListCount <= 0) {
    shopWrap.parentNode.removeChild(shopWrap)
    return
  }

  shopWrap.appendChild(titleTemplate())
  shopWrap.appendChild(shopTemplate(res))
}

// TODO: 以下、一部調整あり。命名・関数 -> 変数
const endpointUrl = () => {
  const { sid } = shopData()
  const devDomain = isLocalEnv() || isFrontEnv() ? 'dev-8067.gnavi.co.jp/' : ''
  const testDomain = isTestEnv() ? 'test-' : ''

  return `https://${devDomain}${testDomain}rcm.gnavi.co.jp/api?frame_id=4&device=sp&shop_id=${sid}&sc_lid=rcm01_r&format=json`
}

const fetchRcmApi = pattern => {
  axios
    .get(endpointUrl())
    .then(res => {
      renderDOM(res)
      if (pattern === 'moveName') moveName()
    })
    .catch(err => {
      shopWrap.parentNode.removeChild(shopWrap)
      throw new Error(err)
    })
}

export default fetchRcmApi

import forEach from 'lodash/forEach'

const moveName = () => {
  const oftenWithViewedShop = document.getElementById('js-often-with-viewed-shop')
  const oftenWithViewedShopName = oftenWithViewedShop.querySelectorAll('.media__name')

  forEach(oftenWithViewedShopName, elm => {
    const name = elm

    name.parentNode.parentNode
      .querySelector('.image')
      .insertBefore(name, name.parentNode.parentNode.querySelector('.image__body').nextSibling)
  })
}

export default moveName