食べログ連携の順序
1）対象HTMLに食べログメニュー埋め込み用DOMを追加
2）対象HTMLに食べログメニュー埋め込み用スクリプトを読み込む
食べログメニューの埋め込みDOM設定
下記のように食べログのメニューを埋め込むためのdiv要素を設定します。
また、CMS-MENUクラスとCMS-STORE-IDパラメータを持った要素を設置します。
①
<div class="CMS-MENU" CMS-STORE-ID="150"></div>
→""の中にはCMSの店舗IDを入れて下さい。
これのclassをそれぞれ以下に変更
コースページ
CMS-COURSE-MENU
お料理ページ
CMS-MENU
ドリンクページ
CMS-DRINK-MENU
ランチページ
CMS-LUNCH-MENU
②
html
<html>
<head></head>
<body>
<div class="CMS-MENU" CMS-STORE-ID="150"></div>
</body>
<script src="https://static.ccmphp.com/menu/1.2.0/tabelog.js"></script>
</html>
上記HTMLでの埋め込み後のDOMは以下のようになります。
html
<html>
<head></head>
<body>
<div class="CMS-MENU" CMS-STORE-ID="150">
<div class="rstdtl-menu-lst">
...
</div>
</div>
</body>
<script src="https://static.ccmphp.com/menu/1.2.0/tabelog.js"></script>
</html>
③
CSSでデザインの調整をして下さい。
【コピペセット】
<div class="CMS-MENU" CMS-STORE-ID="150"></div>
<div class="CMS-COURSE-MENU" CMS-STORE-ID="150"></div>
<div class="CMS-DRINK-MENU" CMS-STORE-ID="150"></div>
<div class="CMS-LUNCH-MENU" CMS-STORE-ID="150"></div>
<script src="https://static.ccmphp.com/menu/1.2.0/tabelog.js"></script>
※jsの更新（2022/07/13）
【コースページ制作の際】
<script src="https://static.ccmphp.com/menu/1.0.0/embed.js"></script>
↓
<script src="https://static.ccmphp.com/menu/1.2.0/tabelog.js"></script>
上記に変更することで、コース詳細が出てくるようになります。
※Retty連携は対応してないのであくまで食べログ専用の機能になります。