次のステップは、トップパネルとヘッダーコンテナ内のブロックを作成します。
これらの変更はデフォルトのロケーションで設定します。
編集するには、デザイン > レイアウトセクションに移動します。
デフォルトは最初のロケーション・タブです。
ブロックの編集
通貨や言語のブロックを置き換えることができます。
それを行うには、言語ブロックを通貨ブロックの後へドラッグアンドドロップします。
次に24時間配送ブロックを追加します。
ブロックに新しいグリッドを追加します。特定の場所に新しいグリッドを追加するには、まずヘッダーコンテナにグリッドを追加する必要があります。
トップメニューブロックとグリッドを移動します：
ヘッダーコンテナにマウスポインターをおき、＋ボタンをクリックし、グリッドの追加をクリックします。
開いたウィンドウで横幅16を選択し、ユーザ定義のCSSクラスのフィールドで、top-menu-grid を入力し、[作成]をクリックします。
新しく作成されたグリッドを トップメニューブロックにドラッグアンドドロップします。すると、トップメニュー ブロックを移動した場所に空の16列のグリッドができます。
開いたウィンドウで横幅選択ボックスで「3」を選択し、ユーザー定義のCSSクラスフィールドで_cart-content-grid_を入力し、保存をクリックします。
- カートの内容 ブロックをこのグリッドにドラッグアンドドロップします。
開いたウィンドウの横幅選択ボックスで5を選択し、ユーザー定義のCSSクラスフィールドで_search-block-grid_ と_cart-content-grid_ を置き換えて保存をクリックします。
このグリッドに検索ブロックをドラッグアンドドロップします。
ヘッダー コンテナに空の3列のグリッドができます。これを毎日配送ブロックを作成するために使用します。
空の3列のグリッドのギアアイコンをクリックします。ユーザー定義のCSSクラスフィールドを消して保存します．
＋アイコンをクリックし、ブロックの追加 をクリックします。
開いたウィンドウで ブロックの追加タブに切り替え、HTMLブロックボタンをクリックします。
名前フィールドに「毎日配送」と入力し、コンテンツタブに切り替えます。
コンテンツフィールドの設定で、\</>（ソースコード表示）ボタンをクリックして、フィールドに次のコードをコピーします：
<div class="ty-delivery">
<i class="ty-delivery__icon"></i> Delivery 24/7
</div>
残りのブロックはそのままにしておきます。
例の中にはマイカウントはありませんが、それは重要な機能なのでそのままにします。
結果、以下のようになります：
＜画像＞
トップパネルとヘッダー用のスタイルを作成する
CS-Cartではビジュアルエディタで背景やリンクの色などを変えることが可能です。
管理パネルのビジュアルエディタを開き、デザイン > テーマに移動し、「現在のテーマ」のビジュアルエディターボタンをクリックします。
＜画像＞
トップパネルの背景を変更するには：
ビジュアルエディタの左側のパネルでカスタマイズセクションのドロップダウンメニューから「背景」を選択します。
ビジュアルエディタの左側のパネルでカスタマイズセクションのドロップダウンメニューから「背景」を選択します。
トップパネルセクションを探して、背景色のフィールドをクリックします。
開いたパネルの右下隅に手動で色を定義するための入力フィールドがあります。#573c27 と入力し色を定義します。
背景のグラデーションを定義することもできます。
背景色フィールドのギアアイコンをクリックします。
追加の設定のドロップダウンパネルが表示されます。
ここではグラデーションの2つ目の色を選ぶことができ、トップパネルを透明にするかどうかを選択します。
同様に、ヘッダーの背景色も定義します。例ではこの色は#fbfbfb です。
このセクションを全幅表示の設定をオンに切り替えます。
＜画像＞
全ての変更が適応されたら、保存ボタンをクリックします。開いたウィンドウにスタイルの名前を新たに定義し、[OK]をクリックします。
独自のCSSスタイルを追加する
CS-Cartをインストールした直下のthemes/tutorial/css/ディレクトを開き、
_custom.less_ファイルを作成します。
これはthemes/tutorial/templates/common/styles.tplファイルにインクルードすることができます。
通貨、言語、毎日配達、カートの内容のカスタムスタイルなどをこのファイルに記述します。
通貨ブロックのカスタマイズ
デフォルトでは3つの通貨が表示されています。 画面解像度が小さい場合は、ドロップダウンリストとして表示されます。
＜画像＞
デフォルトでドロップダウンリストを表示するには：
デザイン > レイアウトセクション移動し、通貨ブロックを探します。
このブロックのギアアイコンをクリックして「ブロック設定」タブに切り替えます。
アイテムをドロップダウンリストにする場合は、「ドロップダウン表示を行う最小アイテム数」に1を入力し、保存をクリックします。
管理パネルの一般設定 > 通貨セクションで通貨名と通貨記号を定義することができます。
例でも見たように、通貨記号が使われていないのでテンプレートから削除されます。
通貨記号が定義されているテンプレートを見つけるためには2通りの方法があります：
レイアウトで使用されるクラスを検索
このクラスがFirefoxやChromeのFirebugやDevToolsを使って調べることができます。
HINT
保存されているCSSスタイルはキャッシュされています。キャッシュを自動的にクリアするには、管理パネルの_デザイン > テーマ_セクションにある「キャッシュの自動リビルド」オプションを有効にします。
templates/common/select_object.tplファイルで使用されているty-select-block__a-itemクラスを検索します。
次のコードは、表示する通貨のアイコンを制御します：
{if $items.$selected_id.symbol} ({$items.$selected_id.symbol nofilter}){/if}
この箇所をテンプレートから削除し保存します。
階層を含んだテンプレートを使用する
ブロックのテンプレートはtemplates/blocksに格納されています。通貨ブロックにはcurrencies.tplファイルが使用されています。
さらにapp/schemas/block_manager/blocks.phpスキームに定義されます。
<?php
'currencies' => array(
'content' => array (
'currencies' => array (
'type' => 'function',
'function' => array('fn_block_manager_get_currencies'),
),
),
...
'templates' => 'blocks/currencies.tpl',
'wrappers' => 'blocks/wrappers',
),
ドロップダウンリストに通貨を表示するコード：
<div class="ty-select-wrapper">{include file="common/select_object.tpl" style="graphic" suffix="currency" link_tpl=$config.current_url|fn_link_attach:"currency=" items=$currencies selected_id=$secondary_currency display_icons=false key_name=$key_name}</div>
このコードではcommon/select_object.tplファイルがincludeされています。
これは、通貨のアイコンが定義されているファイルです。
ここで、スタイルを追加します。
トップパネルの全リンクは白です。なので、以下のスタイルを追加してみましょう：
.top-grid a {
color: #fff;
}
top-grid - グリッド設定で変更することができるグリッドのためのカスタムクラス。
ブロックとグリッドのカスタムクラスは、名称にプレフィックスty-がありません。
これは、テンプレート内のクラスとそれらを混同しないようにするのに役立ちます。
例の通貨のテキスト文字は大文字です。
ty-select-block__a-item に対してのみスタイルを追加することは正しくありませんし、言語の表示もまたそうです。
ty-select-block__a-itemがセレクタに配置されたブロックにクラスを使用することをお勧めします。
.top-currencies .ty-select-block__a-item {
text-transform: uppercase;
}
言語ブロックのカスタマイズ
言語名の近くにある矢印を消すには、CSSを使います：
.top-languages .ty-select-block__arrow {
display: none;
}
クイックリンクのスタイルを追加します；
.top-quick-links .ty-text-links__a {
font-size: 12px;
}
「毎日配送」ブロックのカスタマイズ
はじめに、このブロックにアイコンを追加します。
icomoon.io のサービスを使用可能です。アイコンフォントの詳細をご確認下さい。
IcoMoonのアイコンのセットから時計 アイコンを選びます。
＜画像＞
Tutorial theme テーマの_media/fonts/_ ディレクトリにフォントを保存します。
style.cssファイルからcustom.lessファイルへアイコンスタイルを移動し、フォントのパスを更新します。
@font-face {
font-family: 'tutorial';
src:url('../media/fonts/tutorial.eot?-vagbvx');
src:url('../media/fonts/tutorial.eot?#iefix-vagbvx') format('embedded-opentype'),
url('../media/fonts/tutorial.woff?-vagbvx') format('woff'),
url('../media/fonts/tutorial.ttf?-vagbvx') format('truetype'),
url('../media/fonts/tutorial.svg?-vagbvx#tutorial') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="tt-icon-"], [class*=" tt-icon-"] {
font-family: 'tutorial';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.tt-icon-clock:before {
content: "\e601";
}
注意
新しいアイコンフォントを作成する際、アイコンクラス名がテンプレートのアイコンクラス名と一致しないように注意してください。プレフィックスty-icon-を使用しないでください。
🚧 注意
新しいアイコンフォントを作成する際､アイコンクラス名がテンプレートのアイコンクラス名と一致しないように注意してください。
プレフィックスty-icon-を使用しないでください。
deriveryブロックのty-delivery__icon にtt-icon-clock クラスを追加してください。
/* Delivery
========================================================================== */
.ty-delivery {
color: #573c27;
font-size: 12px;
}
.ty-delivery__icon {
color: #8f979a;
font-size: 21px;
vertical-align: middle;
margin-right: 8px;
}
検索フィールドのスタイルを追加します。スタイルのみで、レイアウトは変更しません：
/* Search form
========================================================================== */
input.ty-search-block__input {
border-color: #fad8d3;
color: #979595;
font-size: 12px;
padding-right: 80px;
}
.ty-search-magnifier {
height: auto;
background: #e05b5b;
color: #fff;
top: 1px;
right: -1px;
width: 70px;
bottom: 1px;
font-size: 22px;
}
メインメニューのスタイルを追加します：
/* Main menu
========================================================================== */
.ty-menu__items {
background: none;
}
.ty-menu__item .ty-menu__item-link {
padding: 8px 8px;
color: #573c27;
text-transform: uppercase;
font-size: 13px;
min-height: 0;
margin-right: 10px;
}
.no-touch .ty-menu__item:hover .ty-menu__item-link,
.is-hover-menu .ty-menu__item-link,
.is-hover-menu.ty-menu__item-active .ty-menu__item-link {
background: #e05b5b;
}
.ty-menu__submenu-items {
margin-top: 3px;
border-color: #e05b5b;
}
「カートの内容」ブロックのカスタマイズ
「カートの内容」ブロックはtemplates/blocks/cart_content.tplテンプレートが使用されています。
以下のコードは､表示するカートの内容をコントロールします：
<div id="sw_dropdown_{$dropdown_id}" class="ty-dropdown-box__title cm-combination">
<a href="{"checkout.cart"|fn_url}">
{hook name="checkout:dropdown_title"}
{if $smarty.session.cart.amount}
<i class="ty-minicart__icon ty-icon-basket filled"></i>
<span class="ty-minicart-title ty-hand">{$smarty.session.cart.amount} {__("items")} {__("for")} {include file="common/price.tpl" value=$smarty.session.cart.display_subtotal}</span>
<i class="ty-icon-down-micro"></i>
{else}
<i class="ty-minicart__icon ty-icon-basket empty"></i>
<span class="ty-minicart-title empty-cart ty-hand">{__("cart_is_empty")}</span>
<i class="ty-icon-down-micro"></i>
{/if}
{/hook}
</a>
</div>
これを以下の内容に置き換えてください：
<div id="sw_dropdown_{$dropdown_id}" class="ty-dropdown-box__title cm-combination">
<a href="{"checkout.cart"|fn_url}">
{hook name="checkout:dropdown_title"}
{if $smarty.session.cart.amount}
<span class="ty-minicart-title"><i class="tt-icon-bag"></i><span class="ty-minicart-title__amount">{$smarty.session.cart.amount}</span></span>
<span class="ty-minicart-title__price">{include file="common/price.tpl" value=$smarty.session.cart.display_subtotal}</span>
{else}
<span class="ty-minicart-title empty-cart"><i class="tt-icon-bag"></i></span>
{/if}
{/hook}
</a>
</div>
カートのスタイルを追加します：
/* Cart content
========================================================================== */
.ty-minicart-title {
padding: 5px 23px;
background: #e05b5b;
color: #fff;
font-size: 22px;
vertical-align: top;
position: relative;
}
.ty-minicart-title__amount {
position: absolute;
position: top;
top: -8px;
right: -12px;
font-size: 14px;
color: #fff;
background: #ed1c24;
padding: 0 6px;
border: 1px solid rgba(85, 32, 32, 0.4);
}
.ty-minicart-title__price {
display: inline-block;
vertical-align: top;
padding: 11px 9px 10px;
background: #e05b5b;
color: #fff;
font-size: 14px;
}
.top-cart-content .ty-dropdown-box__title {
padding: 0;
}
最終的に、それらに要素の正しいインデントとスタイルを追加します。
以下はトップパネルとヘッダーのcustom.lessファイルの変更後です:
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'tutorial';
src:url('../media/fonts/tutorial.eot?-vagbvx');
src:url('../media/fonts/tutorial.eot?#iefix-vagbvx') format('embedded-opentype'),
url('../media/fonts/tutorial.woff?-vagbvx') format('woff'),
url('../media/fonts/tutorial.ttf?-vagbvx') format('truetype'),
url('../media/fonts/tutorial.svg?-vagbvx#tutorial') format('svg');
}
[class^="tt-icon-"], [class*=" tt-icon-"] {
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'tutorial';
line-height: 1;
speak: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.tt-icon-bag:before {
content: "\e600";
}
.tt-icon-clock:before {
content: "\e601";
}
.top-grid a {
color: #fff;
}
.top-grid .ty-select-block__a:hover,
.top-grid .ty-select-block__a.open {
background: none;
color: #fff;
}
.ty-select-block__a-item {
font-size: 11px;
}
.top-currencies .ty-select-block__a-item {
text-transform: uppercase;
}
.top-currencies .ty-select-block__arrow {
color: #fff;
}
.top-languages .ty-select-block__arrow {
display: none;
}
.top-quick-links .ty-text-links__a {
font-size: 12px;
}
div.header-grid {
padding-top: 22px;
}
/* Delivery
========================================================================== */
.ty-logo-container {
margin-top: 15px;
}
/* Delivery
========================================================================== */
.ty-delivery {
margin-top: 12px;
color: #573c27;
font-size: 12px;
}
.ty-delivery__icon {
margin-right: 8px;
color: #8f979a;
vertical-align: middle;
font-size: 21px;
}
/* Search form
========================================================================== */
input.ty-search-block__input {
padding-right: 80px;
border-color: #fad8d3;
color: #979595;
font-size: 12px;
height: 42px;
}
.ty-search-magnifier {
top: 1px;
right: 1px;
bottom: 1px;
width: 70px;
height: auto;
background: #e05b5b;
color: #fff;
font-size: 22px;
}
.tygh-header {
border-bottom: 3px solid #e05b5b;
}
/* Main menu
========================================================================== */
.top-menu-grid {
padding-top: 50px;
}
.ty-menu__items {
background: none;
}
.ty-menu__item .ty-menu__item-link {
padding: 8px 8px;
color: #573c27;
text-transform: uppercase;
font-size: 13px;
min-height: 0;
margin-right: 10px;
}
.no-touch .ty-menu__item:hover .ty-menu__item-link,
.is-hover-menu .ty-menu__item-link,
.is-hover-menu.ty-menu__item-active .ty-menu__item-link,
.ty-menu__item.ty-menu__item-active .ty-menu__item-link {
background: #e05b5b;
color: #fff;
}
.ty-menu__submenu-items {
margin-top: 3px;
border-color: #e05b5b;
}
/* Cart content
========================================================================== */
.ty-minicart-title {
padding: 5px 23px;
background: #e05b5b;
color: #fff;
font-size: 22px;
vertical-align: top;
position: relative;
}
.ty-minicart-title__amount {
position: absolute;
top: -8px;
right: -12px;
font-size: 14px;
color: #fff;
background: #ed1c24;
padding: 0 6px;
border: 1px solid rgba(85, 32, 32, 0.4);
}
.ty-minicart-title__price {
display: inline-block;
vertical-align: top;
padding: 11px 9px 10px;
background: #e05b5b;
color: #fff;
font-size: 14px;
}
.top-cart-content .ty-dropdown-box__title {
padding: 0;
}
/* Account
========================================================================== */
.ty-account-info__title {
font-size: 12px;
}
.ty-account-info__user-arrow {
visibility: hidden;
}
.ty-dropdown-box__title:hover,
.ty-dropdown-box__title.open {
background: none;
}
カスタマイズ結果
最後に新しく作成された「Tutorial theme」でのショップフロントがどのように見えるかを確認しましょう：
＜画像＞