javascript Issue30：20180920 - no82。他店铺リンク设置

Posted 2021-05-03

import forEach from 'lodash/forEach'

const cutText = (val, params) => {
  if (val.length > params) {
    return val.slice(0, params - 1) + '…'
  }
  return val
}

export const cutShopName = () => {
  const shopNameDOM = document.querySelectorAll('.issue30 .shop-saw-recently__name a')

  forEach(shopNameDOM, name => {
    const shopName = name
    const cutNum = 24

    shopName.textContent = cutText(name.textContent, cutNum)
  })
}

export const cutShopAccess = () => {
  const shopAccessDOM = document.querySelectorAll('.issue30 .shop-saw-recently__access')

  forEach(shopAccessDOM, access => {
    const shopAccess = access
    const cutNum = 28

    shopAccess.textContent = cutText(access.textContent, cutNum)
  })
}

export default cutText

import { addClass } from '../../../utils/dom'

const addDesignPatternClass = pattern => {
  const shopWrap = document.getElementById('js-often-with-viewed-shop')

  switch (pattern) {
    case 'big':
      addClass(shopWrap, 'issue30--big')
      break
    case 'small':
      addClass(shopWrap, 'issue30--small')
      break
    // no default
  }
}

export default addDesignPatternClass

import forEach from 'lodash/forEach'
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 '../cutText'

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

  title.setAttribute('class', 'often-with-viewed-shop__title')
  title.textContent = `一緒に見られているお店`

  return title
}

const shopNameCut = () => {
  const shopWrap = document.getElementById('js-often-with-viewed-shop')
  // smallは27文字目、bigは30文字目
  const smallCutNum = 27
  const bigCutNum = 30

  return shopWrap.classList.contains('issue30--small') ? smallCutNum : bigCutNum
}

const shopStationCut = () => {
  const shopWrap = document.getElementById('js-often-with-viewed-shop')
  // smallは22文字目、bigは34文字目
  const smallCutNum = 22
  const bigCutNum = 34

  return shopWrap.classList.contains('issue30--small') ? smallCutNum : bigCutNum
}

const shopTemplate = res => {
  // 店舗ページは最大5件表示なので7件目以降は不要
  const shopListCountLimit = 5
  const shopListData = res.data.rcmShopList.slice(0, shopListCountLimit)
  const shopWrap = document.createElement('div')
  const shopList = document.createElement('ul')

  shopList.setAttribute('class', 'often-with-viewed-shop__list')
  shopWrap.appendChild(shopList)

  forEach(shopListData, data => {
    const shopName = cutText(data.shopName, shopNameCut())
    const shopURL = data.shopURL
    const shopStation = cutText(data.shopStation, shopStationCut())
    const shopImg = data.shopImg

    shopList.innerHTML += `
    <li>
      <div class="often-with-viewed-shop__img">
        <a href="${shopURL}" target="_blank"><img src="${shopImg}" alt=""></a>
      </div>
      <div class="often-with-viewed-shop__info">
        <p class="often-with-viewed-shop__name"><a href="${shopURL}" target="_blank">${shopName}</a></p>
        <p class="often-with-viewed-shop__access">${shopStation}</p>
      </div>
    </li>
    `
  })

  return shopWrap
}

const moreTxtTemplate = res => {
  const moreTxt = document.createElement('p')
  const linkURL = res.data.linkURL

  moreTxt.setAttribute('class', 'often-with-viewed-shop__more')

  moreTxt.innerHTML = `<a href="${linkURL}" class="g" target="_blank">お店をもっと見る</a>`

  return moreTxt
}

const renderDOM = res => {
  const shopWrap = document.getElementById('js-often-with-viewed-shop')
  const shopListCount = res.data.rcmShopList.length

  // 0件の場合は枠を出さない
  if (shopListCount <= 0) {
    shopWrap.parentNode.removeChild(shopWrap)
    return
  }

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

const makeUrl = () => {
  const { sid } = shopData()
  const devDomain = () => (isFrontEnv() ? 'dev-8067.gnavi.co.jp/' : '')
  const testDomain = () => (isTestEnv() ? 'test-' : '')

  if (isLocalEnv()) {
    return '../json/_sample/oftenWithViewedShop.json'
  }

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

const oftenWithViewedShop = () => {
  axios
    .get(makeUrl())
    .then(res => {
      renderDOM(res)
    })
    .catch(err => {
      throw new Error(err)
    })
}

export default oftenWithViewedShop

const commonProcessing = () => {
  const issue30ShopWrap = document.getElementById('js-often-with-viewed-shop')

  // 対象ページに存在するはずのDOMがない場合は処理停止（右カラムがない場合）
  if (issue30ShopWrap === null) return

  // 引数による複数指定がIEでしぬ
  issue30ShopWrap.classList.add('aside')
  issue30ShopWrap.classList.add('issue30')
  issue30ShopWrap.classList.add('often-with-viewed-shop')

  // バックエンドでhideされているDOMを表示
  const shopSawRecently = document.getElementById('issue30-shop-saw-recently')
  if (shopSawRecently !== null) shopSawRecently.style.display = 'block'
}

export default commonProcessing

// GitLab Issueのタイトル
// 20180920 - no82.他店舗リンク設置
// GitLab Issue URL
// https://gitlab102.gnavi.co.jp/restaurant/pc-shop/issues/30

import abtestRun from '../abTestRun'
import commonProcessing from './commonProcessing'
import oftenWithViewedShop from './oftenWithViewedShop'
import addDesignPatternClass from './addDesignPatternClass'
import { cutShopName, cutShopAccess } from './cutText'

const issue30 = () => {
  const caseMap = {
    '1': () => {
      addDesignPatternClass('big')
      cutShopName()
      cutShopAccess()
      oftenWithViewedShop()
    },
    '2': () => {
      addDesignPatternClass('small')
      cutShopName()
      cutShopAccess()
      oftenWithViewedShop()
    },
  }

  const init = caseNumber => {
    commonProcessing()

    // patternごとの実装
    caseMap[caseNumber.toString()]()
  }

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

export default issue30