免責事項：この記事は「バイソン」を対象とはしていません。 その主な対象者は、すべてを「大人のやり方で」やりたいという願望を持っている初心者のウェブマスターですが、これを行う方法については必ずしも十分なアイデアがありません。
だから、それは私がデザインした私の店の最初のページを何らかの形で復活させ、さらに重要なプロモーション、商品などを提示するための通常のツールを手に入れたいという事実から始まりました。
http://www.lookfantastic.com/のような「大規模な」店舗では、これらの同じ動的プロモーションが提示される美しいブロックが作成されています。
もちろん、まず最初に既製のモジュールを
探すために
MagentoConnectを掘り
当てましたが、
Teaserboxだけが見つかりました。これは絶対に私には合わなかったのです。まず、フラッシュ、次に、広告しかできません（商品の説明にのみ切り替えることができます）第三に、ロシア語の碑文が表示されていなかった不明瞭なボタン。
ちょうどそのとき、MxpertsからMagentoの無料モジュールが登場し、
jQuery Toolsを接続できるというメッセージに出会いました。 私はjQuery Toolsに出会ったことがないので、それが何であるかを見ると便利です。 ライブラリの機能に魅了されたと言うことは言うまでもありません。 もちろん、思考はすぐに新しいツールの助けを借りて私のアイデアを実現する方向に働きました。
本格的なモジュールを作成してデバッグするのが面倒で、時間がないので、急いですべてをしましたが、解決策は非常に機能しており、プロモーションのまれな変更により、権利があります。
だから。 Magentoベースのストアが既にインストールおよび構成されていることを前提としています。 私がロシア語で提供する管理パネルのセクションの名前、ローカリゼーションブロックは
niroからインストールされます（
ロシア語のフォーラム （
www.magentocommerce.comを参照））。
まず、MagentoConnectを介して
Mxperts jQueryと
Mxperts jQuery-Toolsの 2つのモジュールをインストールする必要があり
ます 。 すぐに警告します。現在MagentoConnectにあるバージョン（2009年9月9日付けの1.2.5）にはエラーがあります。 オリジナルのjQuery Tools Webサイト（ファイルtools.scrollable.circular-0.5.1.jsおよびtools.scrollable.circular-0.5.1.min.js）から循環プラグインを
ダウンロードし、ディレクトリにモジュールをインストールした後に表示されるバージョンに置き換える必要があります/ js / jquery / jquerytools /。
jQuery Tools Webサイトでは、非常に詳細で明確な
ドキュメントが提供されているため、基本については触れません。 一番下の行は、プロモーションの「ページ」を直接担当する制御構造とブロックを作成する必要があるということです。
これを行うには、管理パネルで静的CMSブロックを作成します。これは、バインディングを担当します（CMS->静的ブロック、[新しいブロックの追加]ボタンをクリックします）。
< div id ="promobox" ><! -- jQuery tools promo box: tabs with autoscroll -- > <!-- tabs work as navigator for scrollable -->
< ul id ="flowtabs" >
< li >< a id ="t1" href ="#" >< span > 1 </ span >< br /> , 1! </ a ></ li >
< li >< a id ="t2" href ="#" > ="#" >< span > 2 </ span >< br /> , 2! </ a ></ li >
< li >< a id ="t3" href ="#" >< span > 3 </ span >< br /> , , 3! </ a ></ li >
</ ul >
<!-- panes -->
< div id ="flowpanes" ><! -- wrapper for scrollable items -- >
< div class ="items" >
{{block type="cms/block" block_id="home-page-promo-01"}}
{{block type="cms/block" block_id="home-page-promo-02"}}
{{block type="cms/block" block_id="home-page-promo-03"}}
</ div >
</ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
便利なようにブロックを呼び出し、識別子（たとえば、home-page-promo）を設定し、ステータスを[有効]に設定して保存します。 コードからわかるように、ここでは、プロモーションページとページバインド用のナビゲーションシステムのブックマーク（ショートカット）について説明します。
次に、プロモーションページを作成します（テキストから推測できるように、識別子はhome-page-promo-XXになります）。
home-page-promo-01：
< div >
< div style ="background: #F0F1F2; color:black" >
< h2 > Forget about scrollbars </ h2 >
< p > The purpose of this library is to make it extremely easy to add
scrolling functionality to a website. Whenever you wish to scroll HTML
elements in a visually-appealing manner, this is the only library you
need. The main design goals of this library are to provide < em > visual
customization </ em > functionality and < em > programmability </ em > . Here are some
example scenarios where you would benefit from using the library: </ p >
< ul >
< li > Home pages, like this one right here </ li >
< li > Product catalogues </ li >
< li > News tickers </ li >
< li > Custom select boxes in forms </ li >
< li > Image galleries </ li >
< li > Video playlists </ li >
< li > All kinds of navigational systems </ li >
</ ul >
< p > The first version of the library was released on January 3, 2008.
Since then, this tool has come a long way and it is now a stable and
mature product. </ p >
</ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
home-page-promo-02：
< div >
< div style ="background: #F0F1F2; color:black" >
< h2 > Extendable architecture </ h2 >
< p > Just like other tools this tool can be extended with plugins.
Currently available plugins include: </ p >
< ul >
< li >< a href ="http://flowplayer.org/tools/scrollable.html#circular" > circular </ a >
makes an infinite loop from the Scrollable items so they
continue cycling back to the beginning once the last item is reached. </ li >
< li >< a
href ="http://flowplayer.org/tools/scrollable.html#autoscroll" > autoscroll </ a >
makes the scrolling behaviour automatic and is highly
configurable. </ li >
< li >< a
href ="http://flowplayer.org/tools/scrollable.html#navigator" > navigator </ a >
provides navigation buttons for switching between pages in
Scrollable. </ li >
< li >< a
href ="http://flowplayer.org/tools/scrollable.html#mousewheel" > mousewheel </ a >
enables mousewheel support for Scrollable. </ li >
</ ul >
< p > You can also write < a
href ="http://flowplayer.org/tools/using.html#plugins" > your own
plugins </ a > . Another way to alter the default behaviour is the ability to
make your < a
href ="http://flowplayer.org/tools/demos/scrollable/easing.html" > own
animation effects </ a > . There is lots of room for experimentation! </ p >
</ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
home-page-promo-03：
< div >
< div style ="”background: #F0F1F2; color:black" >
< h2 > Rich yet simple </ h2 >
< ul style ="font-size: 12px" >
< li > Horizontal and vertical scrolling. </ li >
< li > Scrolling using navigational buttons, API calls, keyboard
arrow keys, and the mouse scroll wheel. </ li >
< li > The number of items scrolled at once is customizable. </ li >
< li > The navigational buttons are setup without a single line of
JavaScript. </ li >
< li > Tabbed navigation like this one can be setup without any
programming. </ li >
< li > Programmatic actions are available, such as: < samp > next </ samp > ,
< samp > prev </ samp > , < samp > nextPage </ samp > , < samp > prevPage </ samp > , < samp > seekTo </ samp > ,
< samp > begin </ samp > , and < samp > end </ samp > . </ li >
< li > Dynamic addition and removal of Scrollable items. </ li >
< li > The ability to customize the scrolling experience with < samp > onBeforeSeek </ samp >
and < samp > onSeek </ samp > listeners. </ li >
</ ul >
</ div >
</ div >
* This source code was highlighted with Source Code Highlighter .
各要素の中に、あなたの心が望むものを何でも置くことができます。 任意のhtmlマークアップ。 たとえば、記事の最後にある実例では画像のみを使用しています。
CSSを実行する時間です。
コードにコメントがありますが、cssテーブルを提供します。
/* Promobox styles */
#promobox {
width: 560px;
height: 290px;
margin: 0;
padding: 0;
}
/* */
#flowtabs {
float: right;
/* dimensions */
width:172px;
height: 0 !important;
margin:0 !important;
padding:0;
/* IE6 specific branch (prefixed with "_") */
_margin-bottom:-2px;
}
/* */
#flowtabs li {
margin:0;
padding:0;
text-indent:0;
list-style-type:none;
}
/* < a > - */
#flowtabs li a {
background:#fbfaf6;
display:block;
height: 50px;
width: 168px;
padding:18px 0 0 4px;
margin:1px 0 1px 0;
border-left: 5px solid #fbfaf6;
/* font decoration */
color:#000;
text-align:left;
text-decoration:none;
}
#flowtabs li a span { text-transform:uppercase; font-weight:bold; }
/* */
#flowtabs a.current { cursor:default; border-left: 5px solid #59111e; }
/* – */
#flowpanes {
background: #fff;
width:388px;
height:290px;
/* from html */
position:relative;
overflow:hidden;
}
/* */
#flowpanes div {
display:none;
color:#e65505;
background: #fff;
padding: 0 10px 0 0;
/* from html */
float:left;
display:block;
width:378px;
height: 290px;
cursor:pointer;
font-size:14px;
}
#flowpanes div h2 { color:#e65505; }
/* */
#flowpanes .items {
height:20000em; /* – - */
position:absolute;
clear:both;
margin:0;
padding:0;
}
* This source code was highlighted with Source Code Highlighter .
それでは、jQueryライブラリ自体とそのプラグインをセットアップします。 [システム]-> [構成]-> [jQuery]に移動します。
[有効]の値を[はい]に設定します。 Minified and GzippedもYesに設定することをお勧めします（もちろん、デバッグする予定がない場合、何か問題が発生した場合）。 jQueryのインストールの正確性を確認できるすばらしい項目もあります：jQuery機能チェック。 [はい]に設定した場合、設定を保存し、検索フィールドでストアのメインページを更新すると、新しいテキストが表示されます。 これが発生した場合、jQueryライブラリがインストールされ、正しく機能していることを意味します。
このポイントに戻らないようにするには、jQuery Script1ブロックを[はい]の有効ステータスに設定し、次のコードをjQuery-Codeに入れます。
// #flowplanes . circular navigator
jQuery( "#flowpanes" ).scrollable( {
vertical : true , // ,
size : 1, //
clickable : false
// , ..
}).circular().mousewheel(400).navigator( {
// id #flowtabs
navi : "#flowtabs" ,
// , <a> ( «» )
naviItem : 'a' ,
// "current" <a>
activeClass : 'current'
}).autoscroll( {
//
autoplay : true ,
interval : 5000
//
});
* This source code was highlighted with Source Code Highlighter .
[準備完了]パラメーターを[はい]に設定します。
次に、jQueryツールを構成します（システム->構成-> jQueryツール）。 なぜなら 現時点では、他のプラグインは使用していません。ただし、Scrollable、ライブラリ自体、目的のモジュールはアクティブのままで、他のプラグインはすべて無効にしています。
有効化されたFlowplayer：いいえ
jQuery-Tools有効：
はい縮小およびGzip圧縮：
はいタブ：いいえ
スライドショープラグイン：いいえ
履歴プラグイン：いいえ
ツールチップ：いいえ
スライド効果：いいえ
動的位置決めプラグイン：いいえ
スクロール可能：
はい円形プラグイン：
はい自動スクロールプラグイン：
はいNavigatorプラグイン：
はいマウスホイールプラグイン：
はいオーバーレイ：いいえ
ギャラリープラグイン：いいえ
アップル効果：いいえ
公開：いいえ
Flashembed：いいえ
このセクションの変更を保存します。
これで最後のタッチが残ります-メインページにストラップブロックを表示します。 これを行うには、Magentoのページビュー設定を変更する機能を利用しました。 CMS->ページ管理->ホームページに移動します。
実際には、Contentブロックに静的ブロックの呼び出しタグを挿入します。
{{block type="cms/block" block_id="home-page-promo"}}その後、どこでも間違いを犯していない場合は、最初のページにプロモーションモジュールのあるブロックが表示されます。これは
lookfantastic.comの同様のブロックよりも劣るだけでなく、私の意見では、動きのダイナミクスが原因です。彼よりも優れています。
上記のすべての作業を
http://lecompre.ruで行います。 サーバーがそれに耐えられることを本当に願っています（これは別の頭痛の種で、通常の最適化には至りませんでした）。 巨大なリクエスト-リソースは最近水泳に投入され、非常に活気に満ちているので、特にそれに浸らないでください。 まあ、デザインにあまり注意を払ってはいけません。デザイナーにはまだお金がありません。
どんな質問にも喜んでお答えします。
_________
テキストは
Habraで準備されます