搜尋

首頁 >後端開發 >php教程 >為氧化ESHOP建立無限的滾動列表 - 基礎知識

為氧化ESHOP建立無限的滾動列表 - 基礎知識

Christopher Nolan
Christopher Nolan原創
2025-02-20 10:45:09174瀏覽

為氧化ESHOP建立無限的滾動列表 - 基礎知識

鑰匙要點

    >教程的第二部分將重點關注與新模板一起工作，包括如何正確獲取模塊URL，使用氧化模板引擎，為新模板添加內容，添加JavaScript來處理無限滾動的執行在文章列表中，更新數據庫視圖並激活模塊。 該教程在氧化ESHOP上具有一些工作經驗，並著重於開發新模塊擴展的後端實現。下一部分將介紹有關基本前端實現的詳細信息，該實現包括自定義模板，並添加JavaScript來處理無限滾動的工作流程。 >
  • 正式稱為氧化ESALES的
    • > 是一個強大而可擴展的電子商務標準平台，可針對在線業務的每個部分進行優化。作為開發人員將我的大部分“ 9到5”任務與氧化物一起使用，我發現該電子商務系統非常容易自定義和擴展。
  • 如果您是氧化的新手或正在為自己的在線業務尋找簡單但有效的平台，我建議您閱讀 Matthew Setter在氧化ESALES上的系列文章，該系列提出了標準實現以開始的標準實現使用氧化系統。
在這兩個部分的教程中，我們將創建一個新的氧化模塊擴展名，將無限滾動

實現到文章列表而不是傳統分頁。在本文中，我試圖分享我的個人經驗，如果您以後遇到任何氧化劑開發，可能會幫助您加快工作過程。 這是您將要實現的。

>

整個源代碼將在系列結束時可用。

這些教程將涵蓋以下領域：

第1部分：

  • 為新模塊擴展創建適當的文件夾結構。
  • >使用metadata.php to：
    • 延長了必要的控制器。
      • >用新模板替換現有模板。
      • 添加一個新的模塊配置選項。
    • >
  • >如何使用後端語言文件來創建顯示名稱並幫助模塊設置的文本。
  • 與新的模塊控制器一起工作。

第2部分：

  • 使用新模板：
      >
    • >如何正確獲取模塊URL。
    • 回顧一下使用氧化模板發動機。
    • 添加新模板的內容。
  • >
    • 添加JavaScript以處理文章列表中無限滾動的執行。
    • 更新數據庫視圖並激活模塊。
>

注意：我假設您有氧化eShop的一些工作經驗（如果沒有，請參見上面鏈接的Matthew的文章）。因此，對於氧化的基本概念，不會有太多解釋。

>

氧化模塊文件夾結構

您首先要做的最重要的任務是創建標准文件夾結構。

    請轉到{your_web_root}/氧化/模塊/
  • >
    • 創建一個名為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.
>注意：

命名新模塊的最佳實踐是將供應商/開發人員/組的名稱與模塊的功能結合在一起。它有助於立即揭示團隊協作新模塊的供應商和功能。
因此，公式可以如下：
>

供應商名稱 underscore 功能

  • 即：sitepoint_infinitesCroll

>供應商名稱可以用開發人員名稱或組名稱代替。取決於您。

>使用metadata.php

> 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和標題是強制性變量。特別是，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.
  • >

    該值擴展指定新模塊將擴展的特定核心/控制器類。在這種情況下，它將是Alist.php，位於/氧化/application/。

    • 值模板是一個數組，它存儲了新模塊的所有註冊模板。建議我們創建要替換的模板的相同文件夾結構，以便於團隊協作。請注意，模板的項目和值都需要包括文件名擴展名.tpl

  • >注意：

    >

    命名新模板的正確方法是“
      模塊名稱
    • _舊模板名稱” 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相同的值。

  • >
    • 值：此新設置有助於管理列表的視圖類型。在本教程的範圍內，我將默認值設置為
  • line

    >並繼續使用直到結束。 當我們首次激活模塊時，將此設置插入兩個表

    oxconfig
    • 和>。氧化劑將自動插入值模塊：AHO_INFINITESCROLL中

    Oxmodule （Table Oxconfig）和 >您可以按照此擴展元數據的在線文檔了解更多有關其他可能的參數的信息。 > 接下來，我們查看後端翻譯。

    添加後端翻譯 在上一節中，我們添加了新模塊的設置。現在是時候進行翻譯了。
請打開文件AHO_INFINITESCROLL/OUT/ADMIN/EN/AHO_INFINITESCROLL_LANG.PHPAND添加以下幾行。

>

>語法要添加配置選項的翻譯shop_module _ setter_column_name。

>語法要添加配置選項的幫助文本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，並讓專門從事語言的人將所有文本轉換為德語，或者只是將Gibberish放入其中，只要它與英語不同，以便您可以看到差異。

    >

    與新控制器一起工作

    請打開AHO_INFINITESCROLL/CONTRORTERS/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函數將返回在gphp中定義的數據列的sinfinitesCrolllistType的值。模板AHO_INFINITESCROLL.TPL將利用此值來確定將用於文章列表的哪種視圖類型。

    • 您可以注意，擴展類的名稱是AHO_INFINITESCROLL_ALIST_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中使用無限滾動的目的是什麼？內容。在氧化ESHOP的背景下，該技術可用於在用戶向下滾動頁面時連續顯示產品，從而通過允許無縫導航和探索產品來改善用戶體驗。

    >無限滾動如何改善電子商務網站的性能？無需立即加載所有產品，這可以放慢站點的速度，而是無限滾動最初加載一定數量的產品，然後隨著用戶繼續滾動而加載更多的產品。這不僅可以提高站點速度，還可以提高用戶的參與度和保留率。

    >我如何使用PHP？

    Ajax調用和分頁系統。您需要修改列表控制器和產品列表模板中的功能，以處理AJAX請求並更新產品列表。可以在文章中找到詳細的步驟和代碼段。

    >

    >是否存在在氧化eShop中使用無限滾動的潛在缺陷？適用於所有類型的電子商務網站。例如，如果您的網站有一個具有重要鏈接的頁腳，則無限滾動可能會使用戶難以與頁腳聯繫。另外，對於想要導航到特定產品或頁面的用戶，無限捲軸有時會感到困惑。

    我可以在其他電子商務平台中使用無限滾動，除了氧化eShop？無限滾動可以在支持自定義編碼的各種電子商務平台中實現。但是，實現過程可能會因平台的體系結構和編碼語言而有所不同。建議參考特定平台的文檔或向專業開發人員尋求幫助。

    >無限滾動如何影響seo？

    無限滾動可能會影響SEO，因為搜索引擎可能無法造成SEO通過AJAX正確爬網和索引內容。但是，可以通過為搜索引擎實現分頁版本以及用於用戶的無限滾動版本來緩解這種情況。

    是為電子商務網站推薦php嗎？

    由於其靈活性，可擴展性和魯棒性，因此對電子商務網站的流行選擇。它支持各種數據庫，並且與包括氧化ESHOP在內的各種電子商務平台兼容。但是，編程語言的選擇應取決於您的特定要求和專業知識。

    無限滾動的替代方案是什麼選擇？分頁涉及將內容分為單獨的頁面，而“加載更多”按鈕允許用戶手動加載更多內容。這些選項之間的選擇取決於您的網站的設計和用戶的喜好。

    >

    >如何自定義氧化eShop中無限捲軸的外觀？您可以修改加載指示燈，產品列表和其他元素的樣式，以匹配您的網站的設計。

    我可以禁用氧化eShop中某些頁面的無限滾動嗎？可以選擇在氧化ESHOP中的某些頁面上禁用無限滾動。這可以通過修改列表控制器和產品列表模板中的條件來完成。

以上是為氧化ESHOP建立無限的滾動列表 - 基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript css ajax print Array define if for while include register continue using class number function default this display column table database SEO Translate Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：使用Laravel和Git部署您的網站下一篇：使用Laravel和Git部署您的網站

相關文章

看更多