カスタマイズダウンロード 版 の 新 バージョン(2.13.3 ~)マニュアル レスポンシブ Web デザインのヘッダー 部 グローバルメニューは 右 上 の 3 本 線 アイコン に 格 納 され ます クリックすると メニュー 項 目 が 展 開 します 上 部 メニューはそれぞれ テキスト から 左 上 のアイコン( 画 像 )に 切 り 替 わります 管 理 画 面 でのブロック 配 置 ヘッダー ログイン グローバルナビ 2つのブロックはソースコードに 埋 め 込 ん でいますので 配 置 しないでください 上 部 メニュー(ポップアップ)の 変 更 方 法 (1)CSS common.css ヘッダー 上 部 ポップアップ (2)メニュー 項 目 の 増 やし 方 と 削 除 data/smarty/templates/default/header.tpl メニュー 項 目 を 削 除 する 場 合 左 記 の1と2を 削 除 する ポップアップを 表 示 させず 直 接 リンクを 設 定 する 場 合 1 <script> 内 if (!$.contains($(".popup_mypage")[0], event.target)) { $(".popup_mypage").slideup("200"); 2 <header> 内 <!-- MY ページ --> <li class="nav_btn mypage"> 2を 削 除 しただけでは ポップアップ 外 側 クリックで 閉 じる 動 作 が 行 われない <a onclick="location.href='<!--{$smarty.const.top_urlpath-->mypage/'"><img src="<!--{$tpl_urlpath-->img/icon_header/ico_white_mypage. png" alt="my ページ " /><div class="txt">my ページ </div></a> <span class="no_popup"><div class="popup popup_mypage"></div></span>
スマホ 用 メニューバーの 色 変 更 1 html/user_data/packages/default/img/icon_header 上 記 フォルダにアイコンが 入 っています 2 data/smarty/templates/default/header.tpl 画 像 名 ( 色 )を 変 更 します ico_white_logout.png ico_blue_logout.png 3 html/user_data/packages/default/css/responsive_nav.css /* ナビメニューバーの 背 景 色 と 高 さ */.mean-container.mean-bar { background: #0c1923; height:45px; /* 印 */.mean-container a.meanmenu-reveal { color: #fff; /* 3 本 線 */.mean-container a.meanmenu-reveal span { background: #fff; 背 景 色 :#DFEFFF 印 :#0071BE 3 本 線 :#0071BE 背 景 色 :#D9F0E6 印 :#0071BE 3 本 線 :#0071BE 背 景 色 :#0c1923 印 :#F5D417 3 本 線 :#F5D417 /* メニュー 項 目 の 文 字 色 */.mean-container.mean-nav ul li a { color: #333; /* メニュー 項 目 のオンマウス 時 の 文 字 色 */.mean-container.mean-nav ul li a:hover { color: #fff; /* メニュー 項 目 の 背 景 色 */.mean-container.mean-nav { background-color: #eee; /* メニュー 項 目 のオンマウス 時 の 背 景 色 */.mean-container.mean-nav ul li:hover { background-color:#ccc;
グローバルナビゲーション(メニュー 項 目 デザイン) 商 品 カテゴリーが 自 動 的 に 表 示 されます スタイルシートを 2 種 類 用 意 しています globalnav-1.css data/smarty/templates/default/site_frame.tpl ------------- <!-- グローバルメニュー --> <link rel="stylesheet" href="<!--{$tpl_urlpath-->css/globalnav-1. css" type="text/css" media="all" /> ------------- globalnav-2.css frontparts/bloc/global_nav ------------- <!-- グローバルメニュー --> <link rel="stylesheet" href="<!--{$tpl_urlpath-->css/globalnav-2. css" type="text/css" media="all" /> ------------- <!-- メニュー 項 目 の 作 成 例 --> <a href="#">1 階 層 </a> <ul class="global_nav_menu_sub"> <a href="#">2 階 層 </a> <a href="#">2 階 層 </a> <a href="#">2 階 層 </a> <ul class="global_nav_menu_sub"> <a href="#">3 階 層 </a> <ul class="global_nav_menu_sub"> <a href="#">4 階 層 </a> <a href="#">4 階 層 4 階 層 4 階 層 4 階 層 4 階 層 </a> <ul class="global_nav_menu_sub"> <a href="#">5 階 層 </a> <a href="#">5 階 層 </a> <a href="#">5 階 層 5 階 層 5 階 層 5 階 層 5 階 層 5 階 層 </a> </ul> </ul> <a href="#">3 階 層 </a> <a href="#">3 階 層 </a> </ul> <a href="#">2 階 層 </a> <ul class="global_nav_menu_sub"> <a href="#">3 階 層 </a> </ul> </ul> <!-- メニュー 項 目 の 作 成 例 --> data/smarty/templates/default/frontparts/bloc/ global_nav.tpl 作 成 例 を 記 述 しています メモとして 保 存 した 後 削 除 してください 商 品 カテゴリーの 1 階 層 の 数 が 多 い 場 合 は メニューバー の 領 域 からはみ 出 してしまいます その 時 は 読 み 込 みのソースコードを 削 除 して 左 記 を 参 考 にコードを 記 述 してください 削 除 するコード ----- <!--{include file="`$smarty.const.template_ REALDIR`frontparts/bloc/globalnav_tree_1.tpl" children=$arrtree treeid="" display=1--> -----
グローバルナビゲーション( 商 品 カテゴリーの 商 品 数 表 示 ) システム 設 定 >パラメーター 設 定 GLOBAL_MENU_NUM グローバルナビのカテゴリ 商 品 件 数 の 表 示 (true: 表 示 する, false: 表 示 しない, 1:1 階 層 のみに 表 示, 2:2 階 層 以 下 に 表 示 ) 値 :true すべての 階 層 に 表 示 されます 値 :1 1 階 層 のみに 表 示 されます 値 :2 2 階 層 以 下 に 表 示 されます
カスタマイズダウンロード 版 の 新 バージョン(2.13.3 ~)マニュアル レスポンシブ Web デザインの 商 品 を 表 示 するブロック デザイン 管 理 >レスポンシブ Web デザイン> 商 品 表 示 ブロックの 設 定 以 下 のブロックの 表 示 パターンを 変 更 することができます おすすめ 商 品 ピックアップ 商 品 新 商 品 最 近 チェックした 商 品 PC 表 示 スマホ 表 示 表 示 パターン 1 フリック 機 能 : 稼 働 フリック 機 能 : 非 稼 働 表 示 パターン 2 表 示 パターン 3 フリック 機 能 を 実 現 するため に jquery プラグインの flipsnap.js(version 0.6.2) http://hokaccha.github.io/jsflipsnap/ を 利 用 しています サポートしているブラウザ (Mobile)は 下 記 の 通 りです ios Safari (ios4+) Android Browser (Android 2.1+) Android Firefox Mobile 9.0+ Android Opera Mobile 11.50+ Window8 IE10+
カスタマイズダウンロード版の新バージョン 2.13.3 マニュアル レスポンシブ Web デザインの商品詳細ページ その他の画像 サブ情報として登録した画像 規格画像をオンマウスすると メイン画像が入れ替わります クリックすると 拡大画像が表示されます スマホ画面 規格が２つ設定されている場合 メイン画像とその他の画像 サ ブ画像 が一緒にフリック機能 で表示されます 規格画像がフリック機能で表示さ れます 規格が 1 つ設定されている場合 規格が設定されていない場合
マトリクス 表 示 にその 他 の 商 品 情 報 を 表 示 システム 設 定 >パラメーター 設 定 で 次 の 項 目 の 表 示 非 表 示 を 設 定 できます 通 常 価 格 ポイント 商 品 コード 在 庫 数 一 度 に 購 入 できる 数 規 格 画 像 確 認 リンク 左 図 はすべて 表 示 した 場 合 です 左 図 のように パラメータ 設 定 でプルダウン 形 式 を 設 定 し た 場 合 は 商 品 情 報 は 表 示 されません システム 設 定 >パラメーター 設 定 CLASS_PULL_TABLE (true: テーブル 表 示 ラジオボタン false: プルダウン 形 式 )
テンプレートファイル(detail.tpl)の 記 述 detail.tpl の 記 述 detail_template フォルダの 中 に PC 表 示 用 スマホ 表 示 用 のテンプレートが 入 っています ファイル 名 は PC _pc_ スマホ _sphone_ で 区 別 しています それぞれの 端 末 でアクセスした 時 に 表 示 される 仕 組 みに なっています (ブラウザ 幅 の 伸 縮 では 確 認 できません ので 実 際 の 端 末 で 確 認 してください) タブレットでのアクセスは PC 表 示 になります data/smarty/templates/default/products/ detail.tpl では 次 のような 記 述 で 各 テンプレートファイルを 読 み 込 んでいます <!-- PC メイン 画 像 --> <!--{include file="`$smarty.const.template_realdir`products/detail_template/detail_pc_image.tpl"--> 読 み 込 みコードの 位 置 を 入 れ 替 えるなどして レイアウトを 変 更 することが 可 能 です
カスタマイズダウンロード 版 の 新 バージョン(2.13.3 ~)マニュアル レスポンシブ Web デザインの 商 品 ステータスのテキスト 表 示 商 品 一 覧 ページ 商 品 詳 細 ページ システム 設 定 >マスターデータ 管 理 mtb_status が 反 映 されます システム 設 定 >マスターデータ 管 理 mtb_status_image は 無 視 されます 画 像 登 録 は 不 要 システム 設 定 >パラメーター 設 定 STATUS_IMAGE_TEXT の 値 を true に 設 定 すると 通 常 の 画 像 表 示 に 戻 ります
カスタマイズダウンロード 版 の 新 バージョン(2.13.3 ~)マニュアル レスポンシブ Web デザインの 規 格 画 像 を 現 在 のカゴの 中 で 表 示 規 格 を 選 択 し カゴに 入 れる ボタンをクリックすると 現 在 のカゴの 中 のページで 規 格 画 像 を 表 示 します 規 格 画 像 が 登 録 されていないときは 通 常 のメイン 画 像 が 表 示 されます 入 力 内 容 のご 確 認 ページでも 表 示 されます
カスタマイズダウンロード版の新バージョン 2.13.3 マニュアル レスポンシブ Web デザインのカテゴリごとのランキング 商品一覧ページに ランキング ブロックを配置したとき カテゴリー内のランキングを表示することができます 左図の例では ベッド カテゴリーの中の すのこベッド カテゴリーを 開いた時に そのカテゴリの中のランキングが表示されて います 商品登録画面で 下図のようにカテゴリーを設定した商品 となります 親カテゴリー ベッド でもランキングを表示したい場合は 商品登録の際 商品カテゴリに親カテゴリを含める必要があります 商品一覧ページでも すべての商品のランキングを表示したい場合は システム設定 パラメーター設定 RANKING_CATEGORY の値を false に設定します