[カラーミーショップ] フリーページでコンポーネントを作ってテンプレートで使い回す

フリーページの内容を、テンプレート(共通・トップ・カテゴリ・商品・検索結果など)の好きな場所に呼び出すための裏技。

別にHTMLコードである必要はなく、たとえばjsコードを置いておくこともできるので、使い方次第では便利です。

フリーページをincludeする

カラーミーテンプレートはsmartyで作られているので、「 {include file =””} 」という関数を使ってページテンプレートを呼び出すことができます。

共通テンプレートでは必須タグ( {include file = $file_name} )なので、見たことがある人も多いと思います。

お気づきの通り、指定のフリーページをテンプレート上でincludeすれば、好きな場所で呼び出すことができます。そのためにフリーページのfile_nameを知る必要があります。

file_nameを探る

file_nameを知る方法は至って簡単で、フリーページに変数を表示させてやればOKです。試しにフリーページ1番に下のようなコードを書いてテストしてみます。

フリーページ編集画面(ソース)

ページを表示させてみると、「file:1/free1.tpl 」と表示されました。これがフリーページのfile_nameです。

あとはテンプレートの好きな位置で「 {include file =”file:1/free1.tpl”} 」と書いてやれば、フリーページ1番の内容が表示されるようになります。

試しにフリーページを下記のように編集し、共通ヘッダーの上で読み込んでみます。

フリーページ編集画面2

つづいて、「共通」テンプレートのヘッダー上あたりに「include file=”file:1/free1.tpl”」を書きます。プレビューしてみると以下の画面。

トップページのプレビュー画面

できました。

file:1 とは何か

file_nameで表示された「file:1」という番号は何かというと、ショップでインストールしたデザインテンプレートがナンバリングされたディレクトリ名です。

初期状態で入っているデザインテンプレートがfile:1。他のテンプレートをインストールしたり、複製したりするとfile:2,file:3と順番にディレクトリが分けられていきます。

ページ上で$file_nameを表示させてみれば分かりますが、全てのページテンプレートは「file:15/top.tpl」や「file:4/product.tpl」のように、ディレクトリごと(デザインテンプレートごと)に分けられています。

ディレクトリを変数にする

部品としてのフリーページを多用する場合など、file_nameにregex_replace を使ってディレクトリ名を変数化すれば呼び出しも簡単になります。

regex_replaceは、正規表現で置き換えする場合に使用する関数です。詳しくは「preg_replaceをsmartyで使うときはregex_replace

  {* file_name の/xxxxx.tpl から前を消す  *}
  { assign var="dir" value="$file_name|regex_replace: "/\/(.*?)\\.tpl/" :""}

  {* free5.tpl をincludeする *}
  {include file="$dir/free5.tpl"}

ミフネWEB

EC(ネットショップ)を専門としたWEBサイト制作事務所です。 対応ASP : カラーミーショップ / らくうるカート / BASE / Shopify 等

シェアする