マイページのコンテンツの出力部分をカスタマイズする


赤い枠で囲ったコンテンツの出力部分のデザインを変更します。

コンテンツの出力部分はシステムから出力されており、標準設定では修正出来ないようにしています。


テンプレートファイルの編集を行うために下記の手順を行います。

※マイページID:bryonをベースにして話を進めます。


cms
└── soyshop
    └── webapp
        └── src
            └── mypage
                └── bryon
                    └── pages
                        ├── ErrorPage.html
                        ├── LoginPage.html
                        ├── LogoutPage.html
                        ├── TopPage.html
                        ├── address
                        │   ├── ConfirmPage.html
                        │   ├── EditPage.html
                        │   └── IndexPage.html
                        ├── campaign
                        │   └── IndexPage.html
                        ├── download
                        │   ├── DetailPage.html
                        │   └── IndexPage.html
                        ├── edit
                        │   ├── CompletePage.html
                        │   ├── ConfirmPage.html
                        │   └── IndexPage.html
                        ├── favorite
                        │   └── IndexPage.html
                        ├── mail
                        │   ├── DetailPage.html
                        │   └── IndexPage.html
                        ├── message
                        │   ├── CompletePage.html
                        │   ├── ConfirmPage.html
                        │   ├── IndexPage.html
                        │   └── detail
                        │       ├── CompletePage.html
                        │       ├── ConfirmPage.html
                        │       └── IndexPage.html
                        ├── notice
                        │   └── IndexPage.html
                        ├── order
                        │   ├── DetailPage.html
                        │   └── IndexPage.html
                        ├── password
                        │   ├── CompletePage.html
                        │   └── IndexPage.html
                        ├── point
                        │   └── IndexPage.html
                        ├── profile
                        │   └── IndexPage.html
                        ├── register
                        │   ├── CompletePage.html
                        │   ├── ConfirmPage.html
                        │   ├── IndexPage.html
                        │   └── tmp
                        │       ├── CompletePage.html
                        │       └── IndexPage.html
                        ├── remind
                        │   ├── CompletePage.html
                        │   ├── InputPage.html
                        │   └── ResetPage.html
                        ├── review
                        │   ├── DetailPage.html
                        │   └── IndexPage.html
                        └── withdraw
                            ├── CompletePage.html
                            └── IndexPage.html

上記のパスはシステムから出力されるコンテンツ部分のHTMLファイルが格納されているディレクトリになります。

太文字で示したpagesディレクトリ毎コピーして、

/ルート/ショップID/.template/mypage/pagesとなるように貼り付けします。


pagesディレクトリを貼付け後、pagesディレクトリのディレクトリ名をマイページID(今回はbryon)に変更します。

※例 ショップIDがshop、マイページIDがbryonの場合

shop
└── .template
    └── mypage
        ├── bryon
        │   ├── ErrorPage.html
        │   ├── LoginPage.html
        │   ├── LogoutPage.html
        │   ├── TopPage.html
        │   ├── address
        │   │   ├── ConfirmPage.html
        │   │   ├── EditPage.html
        │   │   └── IndexPage.html
        │   ├── campaign
        │   │   └── IndexPage.html
        │   ├── download
        │   │   ├── DetailPage.html
        │   │   └── IndexPage.html
        │   ├── edit
        │   │   ├── CompletePage.html
        │   │   ├── ConfirmPage.html
        │   │   └── IndexPage.html
        │   ├── favorite
        │   │   └── IndexPage.html
        │   ├── mail
        │   │   ├── DetailPage.html
        │   │   └── IndexPage.html
        │   ├── message
        │   │   ├── CompletePage.html
        │   │   ├── ConfirmPage.html
        │   │   ├── IndexPage.html
        │   │   └── detail
        │   │       ├── CompletePage.html
        │   │       ├── ConfirmPage.html
        │   │       └── IndexPage.html
        │   ├── notice
        │   │   └── IndexPage.html
        │   ├── order
        │   │   ├── DetailPage.html
        │   │   └── IndexPage.html
        │   ├── password
        │   │   ├── CompletePage.html
        │   │   └── IndexPage.html
        │   ├── point
        │   │   └── IndexPage.html
        │   ├── profile
        │   │   └── IndexPage.html
        │   ├── register
        │   │   ├── CompletePage.html
        │   │   ├── ConfirmPage.html
        │   │   ├── IndexPage.html
        │   │   └── tmp
        │   │       ├── CompletePage.html
        │   │       └── IndexPage.html
        │   ├── remind
        │   │   ├── CompletePage.html
        │   │   ├── InputPage.html
        │   │   └── ResetPage.html
        │   ├── review
        │   │   ├── DetailPage.html
        │   │   └── IndexPage.html
        │   └── withdraw
        │       ├── CompletePage.html
        │       └── IndexPage.html
        ├── bryon.html
        └── bryon.ini



ディレクトリのコピーとディレクトリ名の変更が終了したら管理画面を開きます。




サイト管理 > テンプレート管理を開き、アプリケーションページテンプレート一覧にアプリケーションテンプレートのリンクが表示されていることを確認した上でアプリケーションテンプレートのページを開く。



マイページのアプリケーションテンプレート一覧にIDがbryonのマイページコンテンツが表示されていれば、コンテンツの箇所のテンプレートのカスタマイズの準備が出来たことになります。


テンプレートはサーバに上がっているファイルを直接修正、もしくは管理画面からの修正となります。

今回紹介しました機能は非推奨ですので、テンプレート内で使用しているsoy:idの説明はありません。


編集するのであれば、

コードの色付き表示のエディタでサーバにあるファイルを直接開いて編集することをおすすめします。

Brackets(エディタ)

Tweet Follow @saitodev
戻る

操作方法の追加リクエスト

リクエスト受け付けは終了しました

SOY CMS/Shopの読み物

SOY Shop開発秘話

開発元で働いていた時に発表したスライドです。

売りたいものがあるならば、まずはネットショップのCMSを開発しましょう from Tsuyoshi Saito