Oxid Eshopの無限のスクロールリストを作成 - 基本

キーテイクアウト

• 酸化eShop、または酸化エサールは、高度にカスタマイズ可能でスケーラブルなeコマースプラットフォームです。このチュートリアルは、記事リストの無限のスクロールを実装し、従来のページネーションを置き換える新しい酸化モジュール拡張機能を作成するための段階的なガイドを提供します。
チュートリアルの最初の部分は、新しいモジュール拡張機能の適切なフォルダー構造の作成をカバーしています。metadata.phpを使用して必要なコントローラーを拡張し、既存のテンプレートを新しいテンプレートに置き換え、新しいモジュール構成オプションを追加します。 。また、バックエンド言語ファイルを操作して表示名を作成し、モジュールの設定のテキストを支援する方法と、新しいモジュールコントローラーの操作方法についても説明しています。
• チュートリアルの2番目の部分は、モジュールURLを適切に取得する方法、酸化テンプレートエンジンの操作、新しいテンプレートのコンテンツの追加、JavaScriptの追加のインフィナイトスクロールの実行を処理するなど、新しいテンプレートの操作に焦点を当てます。記事リストで、データベースビューを更新し、モジュールをアクティブにします。
チュートリアルは、酸化eShopでの実務経験を想定しており、新しいモジュール拡張機能を開発するためのバックエンドの実装に焦点を当てています。次の部分は、テンプレートのカスタマイズと、無限のスクロール用のワークフローを処理するためにJavaScriptを追加することで構成される必須のフロントエンド実装の詳細に説明します。
• 酸化Eshop
は、公式には酸化エサールとして知られていますが、オンラインビジネスのすべてのセグメントに最適化された強力でスケーラブルなeコマース標準プラットフォームです。開発者は、「9対5」タスクのほとんどを酸化して費やしているため、このeコマースシステムは非常に簡単にカスタマイズして拡張できることがわかりました。

酸化を初めて使用している場合、または独自のオンラインビジネスに向けてシンプルだが効果的なプラットフォームを探している場合は、開始するための標準的な実装を考え出したOxid EsalesのMatthew Setterのシリーズを読むことをお勧めします。酸化システムを使用しています。 この2部構成のチュートリアルでは、従来のページネーションではなく記事リストに無限のスクロールを実装する新しい酸化モジュール拡張機能を作成します。この記事では、後で酸化開発に遭遇した場合に作業プロセスをスピードアップするのに役立つ可能性のある個人的な経験を共有しようとします。

ここにあなたが達成するものがあります。

ソースコード全体がシリーズの最後に利用可能になります。 チュートリアルでは、次の領域について説明します パート1：

• 新しいモジュール拡張機能のための適切なフォルダー構造を作成します。
• metadata.phpを使用して：
  
  • 必要なコントローラーを拡張します
  既存のテンプレートを新しいテンプレートに置き換えます
  • 新しいモジュール構成オプションを追加します
  バックエンド言語ファイルを使用して表示名を作成し、モジュールの設定のテキストをヘルプする方法
  新しいモジュールコントローラーで作業します。
• パート2：
• 新しいテンプレートの操作：

モジュールURLを適切に取得する方法

酸化テンプレートエンジンの操作にまとめます。

新しいテンプレートのコンテンツの追加
• javaScriptを追加して、記事リストで無限のスクロールの実行を処理します。
  データベースビューを更新し、モジュールをアクティブ化します
  注：酸化eShopを使用した実務経験
  • があると仮定します（そうでない場合は、上記のマシューの記事を参照）。したがって、酸化の基本概念についてはあまり説明しません。
酸化モジュールフォルダー構造
最初にしなければならない最も重要なタスクは、標準のフォルダー構造を作成することです。
{your_web_root}/oxid/modules/

に移動してください

AHO_INFINITESCROLLという新しいフォルダーを作成し、その後のフォルダー/ファイルが続きます。

注：

新しいモジュールに名前を付けるベストプラクティスは、ベンダー/開発者/グループとモジュールの機能の名前を組み合わせることです。チームコラボレーションのための新しいモジュールのベンダーと機能を即座に明らかにするのに役立ちます。

したがって、式は次のとおりです

ベンダー名

アンダースコア
• 機能

aho_infinitescroll/
|	
|--- controllers/
|		|-- aho_infinite_alist.php 	# A new controller that extends alist.php
|
|--- out/
|	|--admin/
|		|--en/
|			|-- aho_infinitescroll_lang.php 	# Back-end English text.
|		|--de/
|			|-- aho_infinitescroll_lang.php 	# Back-end Deustch text.
|
|	|--css/
|		|--> infinitescroll.css  	# Style for infinite scrolling elements.
|		
|	|--img/
|		|--> ajax-loader.gif     # image indicates the loading status.
|	|--js/
|
|--- translations/
|		|--de/
|			|--> aho_infinitescroll_lang.php  # Front-end Deustch text.     
|		|--en/ 
|			|--> aho_infinitescroll_lang.php  # Front-end English text.
|
|--- views/
|		|-- page/
|			|-- list/
|				|--> aho_infinitescroll_list.tpl  # new template file.
|	
|--- metadata.php  # Define extension name, classes and other infos. 
|--- picture.jpg   # A thumbnail for the module's functionality.

i.e：sitepoint_infinitescroll

ベンダー名は、開発者名またはグループ名のいずれかに置き換えることができます。それはあなた次第です。

metadata.phpの作業 metadata.phpは、あらゆるモジュール開発に不可欠です。このファイルは、モジュール、拡張するクラス、過大評価されるブロック、交換するテンプレート、フロントエンドとバックエンドの両方の側面の設定などの基本的な詳細を提供します。 ファイルMetadata.phpを開き、次のコード行を追加してください。

新しいモジュールの基本情報を挿入したばかりで、すべての要素は用語によって自己記述的です。

IDとタイトルは必須の変数であることに注意してください。特に、IDの値はモジュールのフォルダー名と同じでなければなりません。

サムネイルは、モジュールを視覚的に説明するオプションの要素です。私は通常、絵が千の言葉の価値があると信じているので、見栄えの良いサムネイルを準備します。時には、お気に入りの自己開発モジュールの一部を酸化市場を介して販売することを意図しています。

次に、メールの直後にさらに要素を定義します。

aho_infinitescroll/
|	
|--- controllers/
|		|-- aho_infinite_alist.php 	# A new controller that extends alist.php
|
|--- out/
|	|--admin/
|		|--en/
|			|-- aho_infinitescroll_lang.php 	# Back-end English text.
|		|--de/
|			|-- aho_infinitescroll_lang.php 	# Back-end Deustch text.
|
|	|--css/
|		|--> infinitescroll.css  	# Style for infinite scrolling elements.
|		
|	|--img/
|		|--> ajax-loader.gif     # image indicates the loading status.
|	|--js/
|
|--- translations/
|		|--de/
|			|--> aho_infinitescroll_lang.php  # Front-end Deustch text.     
|		|--en/ 
|			|--> aho_infinitescroll_lang.php  # Front-end English text.
|
|--- views/
|		|-- page/
|			|-- list/
|				|--> aho_infinitescroll_list.tpl  # new template file.
|	
|--- metadata.php  # Define extension name, classes and other infos. 
|--- picture.jpg   # A thumbnail for the module's functionality.

• 値拡張は、新しいモジュールが拡張される特定のコア/コントローラークラスを指定します。この場合、それは/oxid/application/ControllersにあるAlist.phpになります/。

値テンプレートは配列であり、新しいモジュールのすべての登録テンプレートを保存します。簡単なチームコラボレーションのために、交換するテンプレートの同じフォルダー構造を作成することをお勧めします。テンプレートの項目と値の両方がファイル名拡張子を含める必要があることに注意してください

• 注：

  新しいテンプレートに名前を付ける適切な方法は、「

  モジュール名
  • _古いテンプレート名」です i.e：aho_infinitescroll_list.tpl

現時点で新しいテンプレートファイルを空にしたままにし、ファイルMetadata.phpを続行します。アイテムのテンプレートの直後に設定と呼ばれる配列を挿入してください：

<span><span><?php
</span></span><span>
</span><span><span>$sMetadataVersion = '1.0';  # Define version of this file
</span></span><span>
</span><span><span>// An array to store modules' details
</span></span><span><span>$aModule = array
</span></span><span><span>(
</span></span><span>    <span>'id' => 'aho_infinitescroll',
</span></span><span>    <span>'title' => '[AHO] Infinite Scrolling List', 
</span></span><span>    <span>'description' => 'Infinite Scrolling for article list',
</span></span><span>    <span>'thumbnail' => 'picture.jpg',
</span></span><span>    <span>'version' => '1.0.0',
</span></span><span>    <span>'author' => 'Tuan Anh Ho',
</span></span><span>    <span>'url' => '',
</span></span><span>    <span>'email' => 'anhhothai@gmail.com'
</span></span><span><span>);</span></span>

値設定は、新しいモジュールのすべての構成オプションを登録する場所です。グループには常にモジュールのIDと同じ値があります。
値：この新しい設定は、ビューのタイプのリストを管理するのに役立ちます。このチュートリアルの範囲では、デフォルト値を
• 行

  として設定し、最後まで使用し続けます。 初めてモジュールをアクティブにすると、この設定は2つのテーブル

  oxconfig
and
• oxconfigdisplay

  に挿入されます。酸化は、値モジュールを自動的に挿入します：AHO_INFINITESCROLLは列 oxcfgmodule （表Oxconfigdisplay）を値モジュールで挿入します：aho_infinitecroll。自動的に発生するため、これは非常に便利です。 このオンライン拡張メタデータのドキュメントに従って、他の可能な引数について詳しく読むことができます。 次に、バックエンドの翻訳を調べます。

  バックエンド翻訳の追加

最後のセクションでは、新しいモジュールの設定を追加しました。さあ、翻訳を操作する時が来ました。

ファイルを開いてください

構成オプションの翻訳を追加する構文shop_module _ setting_column_name。

構成オプションのヘルプテキストを追加するsyntax help_shop_module _ setting_colum_name。

<span>'extend' => array(
</span>        <span>'alist' => 'aho_infinitescroll/controllers/aho_infinitescroll_alist'
</span>    <span>),
</span>    <span>'templates' => array(
</span>        <span>'aho_infinitescroll_list.tpl' 
</span>            <span>=> 'aho_infinitescroll/views/page/list/aho_infinitescroll_list.tpl'
</span>    <span>)</span>

• 上記のコード行は、下の図のように出力されます。後で、モジュールをアクティブにしたら、テキストボックスに行を入力してください：

ファイルAHO_INFINITESCROLL/OUT/ADMIN/DE/AHO_INFINITESCROLL_LANG.PHPについても同じことをしてください。 Value Deustchを使用して変数$ slangnameを割り当て、言語に特化した人にすべてのテキストをドイツ語に翻訳するか、英語とは異なる限り、違いを確認できます。

新しいコントローラーの操作

AHO_INFINITESCROLL/CONTROLLERS/AHO_INFINITE_ALIST.PHPを開き、次の行を追加してください。

aho_infinitescroll/
|	
|--- controllers/
|		|-- aho_infinite_alist.php 	# A new controller that extends alist.php
|
|--- out/
|	|--admin/
|		|--en/
|			|-- aho_infinitescroll_lang.php 	# Back-end English text.
|		|--de/
|			|-- aho_infinitescroll_lang.php 	# Back-end Deustch text.
|
|	|--css/
|		|--> infinitescroll.css  	# Style for infinite scrolling elements.
|		
|	|--img/
|		|--> ajax-loader.gif     # image indicates the loading status.
|	|--js/
|
|--- translations/
|		|--de/
|			|--> aho_infinitescroll_lang.php  # Front-end Deustch text.     
|		|--en/ 
|			|--> aho_infinitescroll_lang.php  # Front-end English text.
|
|--- views/
|		|-- page/
|			|-- list/
|				|--> aho_infinitescroll_list.tpl  # new template file.
|	
|--- metadata.php  # Define extension name, classes and other infos. 
|--- picture.jpg   # A thumbnail for the module's functionality.

この新しいコントローラーは、いくつかのことをします：

• $ _STHISTEMPLATEの値をAHO_INFINITESCROLL.TPLに変更します。これはMetadata.phpで定義しています。ここでテンプレート名を指定するだけでいいことに注意してください。したがって、テンプレート名は一意でなければなりません。システムが正しいテンプレートをすばやく見つけるのに役立ちます。

• 関数レンダリングは、新しいテンプレート名を返すだけではありません。
  関数getViewTypelistは、Metadata.phpで定義されているデータ列sinfinitescrollListtypeのデータを返します。テンプレートAHO_INFINITESCROLL.TPLは、この値を使用して、記事リストにどのビュータイプが適用されるかを決定します。
• 拡張クラスの名前はAHO_INFINITESCROLL_ALIST_PARENTであることに注意してください。式はモジュールコントローラー名_ parentです
  ヒント
• を拡張するために必要なクラスを見つけるためのヒント
  通常、どのクラスを拡張する必要があるかを知る必要があります。現在のビューでどのクラスが実行されているかを簡単に確認する方法があります。 file /application/views/ {theme_name }/tpl/layout/page.tplを参照し、ファイルの上部に次の行を挿入します。

上記の行は、現在のビューで使用されるコアクラスを印刷するのに役立ちます。 AJAXリクエストを実行するコアクラスを検出したい場合は、Chromedevツールを使用してもう少し努力する必要があります。

結論

• これまでのところ、新しいモジュール拡張機能を開発するために、ステップバイステップのバックエンド実装を行ってきました。現時点では、モジュールをアクティブにして、管理ダッシュボードに何があるかを確認することができます。問題が発生した場合は、ここにコメントを残してください。私はあなたを助けるために最善を尽くします。

次の部分は、テンプレートをカスタマイズし、無限のスクロール用のワークフローを処理するためにJavaScriptを追加することで構成される、本質的なフロントエンド実装の詳細に説明します。

<span><span><?php
</span></span><span>
</span><span><span>$sMetadataVersion = '1.0';  # Define version of this file
</span></span><span>
</span><span><span>// An array to store modules' details
</span></span><span><span>$aModule = array
</span></span><span><span>(
</span></span><span>    <span>'id' => 'aho_infinitescroll',
</span></span><span>    <span>'title' => '[AHO] Infinite Scrolling List', 
</span></span><span>    <span>'description' => 'Infinite Scrolling for article list',
</span></span><span>    <span>'thumbnail' => 'picture.jpg',
</span></span><span>    <span>'version' => '1.0.0',
</span></span><span>    <span>'author' => 'Tuan Anh Ho',
</span></span><span>    <span>'url' => '',
</span></span><span>    <span>'email' => 'anhhothai@gmail.com'
</span></span><span><span>);</span></span>

酸化eshopで無限のスクロールリストを構築することについてよく尋ねる質問

酸化eShopで無限のスクロールを使用する目的は何ですか？

​​

無限のスクロールは、ブラウザスクロールバーがページの下部にスクロールするのを防ぐWebデザイン手法であり、ページが追加で成長します。代わりにコンテンツ。 Oxid Eshopのコンテキストでは、この手法を使用して、ユーザーがページを下にスクロールするときに製品を継続的に表示し、製品のシームレスなナビゲーションと探索を許可することでユーザーエクスペリエンスを向上させることができます。

Infinite Scrollは、eコマースWebサイトのパフォーマンスをどのように改善しますか？ Infinite Scrollは、負荷時間を短縮することにより、eコマースWebサイトのパフォーマンスを大幅に向上させることができます。サイトを遅くすることができるすべての製品を一度にロードする代わりに、Infiniteスクロールは最初に特定の数の製品をロードし、ユーザーがスクロールを続けるにつれてより多くロードされます。これにより、サイトの速度が向上するだけでなく、ユーザーのエンゲージメントと保持が向上します。

PHPを使用して酸化ESHOPに無限のスクロールを実装するにはどうすればよいですか？ Ajaxコールとページネーションシステム。 Ajaxリクエストを処理し、製品リストを更新するには、リストコントローラーと製品リストテンプレートの関数を変更する必要があります。詳細な手順とコードスニペットはこの記事に記載されています。

酸化eShopで無限の巻物を使用することに潜在的な欠点はありますか？すべてのタイプのeコマースWebサイトに適しています。たとえば、Webサイトに重要なリンクがあるフッターがある場合、Infinite Scrollはユーザーがフッターに到達することを困難にする可能性があります。また、特定の製品またはページに移動したいユーザーにとって、無限の巻物が混乱する場合があります。 Infinite Scrollは、カスタムコーディングをサポートするさまざまなeコマースプラットフォームに実装できます。ただし、実装プロセスは、プラットフォームのアーキテクチャとコーディング言語によって異なる場合があります。特定のプラットフォームのドキュメントを参照したり、専門の開発者から助けを求めることをお勧めします。

SEOにどのように影響しますか？ AJAXを介してロードされたコンテンツを適切にクロールし、インデックスコンテンツ。ただし、これは、ユーザー向けの無限のスクロールバージョンと並んで、検索エンジン用のサイトのページングされたバージョンを実装することで軽減できます。PHPはeコマースWebサイトに推奨されていますか？柔軟性、スケーラビリティ、堅牢性のため、eコマースWebサイトに人気のある選択肢があります。幅広いデータベースをサポートし、酸化eShopを含むさまざまなeコマースプラットフォームと互換性があります。ただし、プログラミング言語の選択は、特定の要件と専門知識に依存する必要があります。

無限の巻物に代わるものは何ですか？ページネーションでは、コンテンツを個別のページに分割しますが、「より多くのロード」ボタンにより、ユーザーはより多くのコンテンツを手動で読み込むことができます。これらのオプションの選択は、あなたのウェブサイトのデザインとユーザーの好みに依存します。酸化eShopの無限の巻物のルックアンドフィールをカスタマイズするにはどうすればよいですか？

無限の巻物のルックアンドフィールは、CSSを使用してカスタマイズできます。あなたはあなたのウェブサイトのデザインに一致するように、ロードインジケーター、製品リスト、その他の要素のスタイルを変更できます。 Oxid Eshopの特定のページの無限の巻物を無効にすることを選択できます。これは、リストコントローラーの条件と製品リストテンプレートを変更して、特定のページを除外することで実行できます。

以上がOxid Eshopの無限のスクロールリストを作成 - 基本の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。