Skip to main content

全体構成

デザインテーマは画像、css、jsなどの外部ファイルを除けば1つのソースでショップ全体のページを構成します。ソースはHTMLとBASE Templateタグで構成され、 各ページのコンテンツは {block:IndexPage} などのそれぞれのページであることを判別するif文に相当するタグで囲います。

例)

{block:NotLoadItemsPage}
<html>

	<head>
		<title>{PageTitle}</title>
		{block:IndexPage}
			<!-- トップページのみに出力したいheadコンテンツをここに記述 -->
		{/block:IndexPage}
		{block:NotIndexPage}
			<!-- トップページ以外に出力したいheadコンテンツをここに記述 -->
		{/block:NotIndexPage}
	</head>

	<body>
		<header>
			<h1><a href="{IndexPageURL}">{LogoTag}</a></h1>
			<nav>
				<ul>
					<li><a href="{IndexPageURL}">Home</a></li>
					<li><a href="{AboutPageURL}">About</a></li>
					<li><a href="{ContactPageURL}">Contact</a></li>
				</ul>
			</nav>
			{BASEMenuTag}
		</header>

		{block:IndexPage}
			<!-- トップページのコンテンツをここに記述 -->
		{/block:IndexPage}

		{block:ItemPage}
			<!-- 商品詳細ページのコンテンツをここに記述-->
		{/block:ItemPage}

		{block:AboutPage}
			<!-- Aboutページのコンテンツをここに記述-->
			{ShopIntroduction}
		{/block:AboutPage}

		{PageContents}

		<footer>
			<ul>
				<li><a href="{PrivacyPageURL}">{lang:Privacy}</a></li>
				<li><a href="{LawPageURL}">{lang:Law}</a></li>
			</ul>
			<div class="copyright"><small>© {ShopName} All rights reserved.</small></div>
		</footer>
	</body>
</html>
{block:NotLoadItemsPage}

{block:LoadItemsPage}
	<!-- 商品一覧でajaxで読み込む内容をここに記述 -->
{/block:LoadItemsPage}

上記の例の <header> や <footer> ように、ショップ全体に表示するものは {block:xxx} のタグで囲う必要はありません。 各ページで表示したいコンテンツのみを各タグの中に記述します。

例えばTOPページは {block:IndexPage} というタグになります。 上記以外を示す {block:NotIndexPage} というタグも用意しており、このタグを使うとトップページ以外に表示することができます。

また、各ページに適したコンテンツを表示する {ShopIntroduction} や {PageContents} などのタグも予め用意されています。

詳細は ページ をご覧ください。

商品一覧を実装するにあたり全体に関わるタグ​

1点特殊なタグとして {block:NotLoadItemsPage} と {block:LoadItemsPage} があります。
これは商品一覧(TOPページ、カテゴリページ、商品検索結果ページなど)においてajaxで商品の追加ロードを実現するために必要なもので、
{block:LoadItemsPage} の中にはajaxで取得するHTMLとなる部分を記述します。
{block:NotLoadItemsPage} は上記ではないという意味になり、通常のコンテンツのHTMLはこの中に記述します。

デザインオプションについて​

デザイン編集画面で、テーマ別設定としてデザインオプションを設定する事ができます。 デザインオプションは <head> 内に特殊なmetaタグを記述することで独自の変数を設定することができる機能です。 base

詳しい設定方法はデザインオプションをご覧ください。