CS-Cart.jp開発者ドキュメント
  • はじめに
  • Getting Started
    • CS-Cart開発者向け注意事項
    • CS-Cartの構成
    • デバッグ方法
  • コア
    • Hooks
    • コントローラー
      • Pre&Post コントローラー
    • データベース
      • データベースの構造と命名規則
      • データベース・プレイスホルダー
      • 他のデータベースへの接続
    • ショップフロント
      • ブロック
      • blockメインスキーマ—
      • Dynamic Objects
      • ajaxリクエストの使用方法
      • 特別なCSSセレクター
      • マイクロフォーマット Microformats
      • 通知システム
      • ツールチップ
    • 設定
    • コア関数
    • イベントの通知
    • 言語変数
    • スキーマー
  • アドオン開発
    • フック
      • PHPフック
      • テンプレートフック
    • アドオンチュートリアル
      • 「Hello World」チュートリアル
      • Advanced Add-on チュートリアル
      • 商品リスト、詳細ページのカスタムテンプレートを作成
      • 支払方法の開発
    • アドオンの管理プロセス
    • Add-on スキーマー
      • アドオンの互換性
      • 他のアドオンとの競合・依存設定
    • APIの拡張
    • スキーマーの拡張
    • アドオンのディレクトリ構造
    • アドオンの言語変数
    • .poファイルによる言語ファイルの作成
  • テーマ開発
    • テーマ開発の概要
    • テーマの複製
    • レイアウトの管理
    • トップパネルとヘッダー
    • テーマを使用したショップの設定の変更
    • CSS
    • テーマの言語変数
    • メディアファイル
    • 親テーマ
    • スタイルとビジュアルエディター
    • レイアウトエディター
    • テンプレート
  • デバッグ
    • デバッガー
    • ファイルエディター
GitBook提供
このページ内
  • ファイルの編集方法:
  • ファイルエディターの利用方法
  1. デバッグ

ファイルエディター

ファイルエディタは.../design/themes/theme_nameディレクトリ以下に置かれているファイルを管理するのに役立ちます。

HINT

ファイルエディタはJavascriptベースです。ファイルエディターを利用する場合は、お使いのブラウザでJavascriptを有効にしてください。

ファイルの編集方法:

  • 管理パネルのデザイン > ファイルエディターへ移動します。

  • 左のパネルから目的のディレクトリとファイルを選択します。このパネルは_.../design/themes/theme_name_ディレクトリの構造を示しています。

  • コードの部分を編集したら、_【変更を保存】_をクリックします。

<画像>

警告

現在使用されているテーマのファイルが表示されているかどうかを確認してください。ほかのテーマを編集したい場合は、デザイン > テーマから選択してください。

ファイルエディターは、ストアフロントのテンプレートをその場で編集することが可能です。

ストアフロントで目的の要素を選択し、要素の右上のアイコンをクリックしてテンプレートの内容を編集します。

ソースコードは強調されていますので、テンプレートの構造を調べることはとても簡単です。保存された変更はストアフロントでそのまま確認することができます。

HINT

設定にある自動キャッシュ再構築の設定をオンにすることを忘れないでください。これにより変更後すぐにデータがキャッシュされ変更をすぐに見ることができます。

ファイルエディターの利用方法

ファイルエディタの使用の一例として、商品のカテゴリページでカートへ追加要素の場所を変更する例を見てみましょう。

<画像>

templates > blocks > list_templates > products_list.tplをファイルエディタを開き、下記の行を探し、コードから削除してください:

<>

  • 同じファイルで<div class=”float-left product-item-image center”> クラスを持つ要素を探し、画像のように正確に以前のコードをペーストします:

<>

  • float-right rightを<div class=”float-right right add-product”>から削除し、<div class=”add-product”>に変更します。

  • 【変更を保存】をクリックします。

  • 変更が正確に変更されたことを確認するためにストアフロントのカテゴリーページを開きます。

前へデバッガー

最終更新 7 か月前