산화 eShop에 대한 무한 스크롤 목록 구축 - 기본 사항

키 테이크 아웃

산화 eShop 또는 산화 eSales는 고도로 사용자 정의 가능하고 확장 가능한 전자 상거래 플랫폼입니다. 이 튜토리얼은 전통적인 페이지 매김을 대체하여 기사 목록에 대한 무한 스크롤을 구현하는 새로운 산화 모듈 확장을 만들기위한 단계별 안내서를 제공합니다. 튜토리얼의 첫 번째 부분은 새로운 모듈 확장에 대한 적절한 폴더 구조의 생성을 포괄하고 Metadata.php로 작업하여 필요한 컨트롤러를 확장하고 기존 템플릿을 새 템플릿으로 바꾸고 새 모듈 구성 옵션을 추가합니다. . 또한 백엔드 언어 파일로 작업하여 모듈 설정의 디스플레이 이름을 만들고 모듈 설정의 텍스트와 새로운 모듈 컨트롤러에서 작동하는 방법을 설명합니다. 튜토리얼의 두 번째 부분은 모듈 URL을 올바르게 가져 오는 방법, 산소 템플릿 엔진 작업, 새 템플릿의 컨텐츠 추가, Infinite Scrolling의 실행을 처리하기 위해 JavaScript를 추가하는 것을 포함하여 새 템플릿 작업에 중점을 둘 것입니다. 기사 목록에서 및 데이터베이스보기 업데이트 및 모듈 활성화. 튜토리얼은 산화 eShop에 대한 일부 작업 경험을 가정하고 새로운 모듈 확장을 개발하기 위해 백엔드 구현에 중점을 둡니다. 다음 부분은 템플릿을 사용자 정의하고 무한 스크롤을위한 워크 플로우를 처리하기 위해 JavaScript를 추가하는 필수 프론트 엔드 구현에 대한 자세한 내용을 설명합니다.

공식적으로 산화 ESALES로 알려진 산화 eShop

는 온라인 비즈니스의 모든 세그먼트에 최적화 된 강력하고 확장 가능한 전자 상거래 표준 플랫폼입니다. 내 "9-5"작업의 대부분을 산화로 지출하는 개발자 로서이 전자 상거래 시스템은 사용자 정의 및 확장이 매우 쉽다는 것을 알았습니다.

산화를 처음 접했거나 자신의 온라인 비즈니스를위한 간단하지만 효과적인 플랫폼을 찾고 있다면,
• > 산화 ESALES에 대한 Matthew Setter의 시리즈를 읽는 것이 좋습니다. 산화 시스템 이 2 부 튜토리얼에서는 전통적인 페이지 매김 대신 기사 목록에
인피니트 스크롤
• 를 구현하는 새로운 산화 모듈 확장을 생성 할 것입니다. 이 기사에서 나는 나중에 산소 발달을 겪을 때 작업 과정을 가속화하는 데 도움이 될 수있는 개인적인 경험을 공유하려고합니다.
여기에 당신이 달성 할 것입니다.
• 전체 소스 코드는 시리즈의 끝에서 사용할 수 있습니다.
튜토리얼은 다음 영역을 다룹니다 1 부 :
새로운 모듈 확장을위한 적절한 폴더 구조 생성 metadata.php로 작업 :
• 필요한 컨트롤러를 확장하십시오 기존 템플릿을 새 템플릿으로 바꾸십시오 새 모듈 구성 옵션을 추가하십시오.
새 모듈 컨트롤러와 함께 작동합니다
• 2 부 :
  새로운 템플릿 작업 :
  모듈 URL을 올바르게 가져 오는 방법 산화 템플릿 엔진 작업을 요약하십시오 새 템플릿의 컨텐츠 추가 기사 목록에서 무한 스크롤의 실행을 처리하기 위해 JavaScript 추가. 데이터베이스보기 업데이트 및 모듈 활성화
• 참고 : 산화 eShop을 사용하여 일부 작업 경험
가 있다고 가정합니다 (위의 링크 된 Matthew의 기사를 참조하십시오). 따라서 산화의 기본 개념에 대한 설명은 많지 않습니다.
산화 모듈 폴더 구조 먼저해야 할 가장 중요한 작업은 표준 폴더 구조를 만드는 것입니다.
{your_web_root}/Oxid/Modules/로 이동하십시오 aho_infinitescroll이라는 새 폴더를 만들고 후속 폴더/파일을 만듭니다.
참고 : 새 모듈 이름 지정의 모범 사례는 공급 업체/개발자/그룹의 이름과 모듈 기능을 결합하는 것입니다. 팀 협업을위한 새로운 모듈의 공급 업체와 기능을 즉시 공개하는 데 도움이됩니다.

따라서 공식은 다음과 같습니다 공급 업체 이름

밑줄

기능

• 즉 : sitepoint_infinitescroll
  공급 업체 이름은 개발자 이름 또는 그룹 이름으로 대체 할 수 있습니다. 그것은 당신에게 달려 있습니다.
  • 메타 데이터 작업 <.> 메타 데이터 .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.

  값 확장은 새 모듈이 확장 될 특정 코어/컨트롤러 클래스를 지정합니다. 이 경우 Alist.php,/Oxid/Application/Controllers에 위치한 Alist.php가됩니다.
  • 값 템플릿은 새로운 모듈의 등록 된 템플릿을 모두 저장하는 배열입니다. 쉽게 팀 협업을 위해 대체 할 템플릿의 동일한 폴더 구조를 작성하는 것이 좋습니다. 템플릿의 항목과 값은 모두 파일 이름 확장자를 포함해야합니다 .tpl

    .

  참고 : 새 템플릿의 이름을 지정하는 올바른 방법은“ 모듈 이름 _ 기존 템플릿 이름”입니다. 즉 : aho_infinitescroll_list.tpl

  • 우리는 현재 새 템플릿 파일을 비워두고 파일 메타 데이터를 계속 남겨 둡니다. 항목 템플릿 바로 다음에 설정이라는 배열을 삽입하십시오 :

    값 설정은 새 모듈의 모든 구성 옵션을 등록 할 수있는 장소입니다. 그룹은 항상 모듈의 ID와 동일한 값을 가지고 있습니다.
    • value :이 새로운 설정은 목록의보기 유형을 관리하는 데 도움이됩니다. 이 튜토리얼의 범위에서 기본값을 line 로 설정하고 끝까지 계속 사용합니다.
    우리가 모듈을 처음으로 활성화 할 때이 설정은 두 개의 테이블
    • oxconfig
    및

    oxconfigdisplay 에 삽입됩니다. 산화는 값 모듈을 자동으로 삽입합니다. 자동으로 발생하므로 매우 편리합니다.

  당신은 다른 가능한 인수에 대한 자세한 내용을 읽으려면 확장 메타 데이터 의이 온라인 문서를 따라갈 수 있습니다.
  다음으로, 우리는 백엔드 번역을 살펴 봅니다. 백엔드 번역 추가
  마지막 섹션에서는 새 모듈의 설정을 추가했습니다. 이제 번역 작업을 수행 할 시간입니다.

  파일을 열어주십시오.

  <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>

  구성 옵션에 대한 번역 추가 옵션 _module _ setting_column_name에 대한 번역을 추가하려면 구문. 구성 옵션 help_shop_module _ setting_colum_name에 대한 도움말 텍스트를 추가하려면 구문 텍스트를 추가합니다.

  위의 코드 라인은 아래 그림과 같이 출력을 초래합니다. 나중에 모듈을 활성화하면 텍스트 상자에 줄을 입력하십시오.
  파일 aho_infinitescroll/out/admin/de/aho_infinitescroll_lang.php 파일에 대해서도 동일하게하십시오. Value Deustch가있는 변수 $ slangname을 할당하고 언어를 전문으로하는 사람이 모든 텍스트를 독일어로 번역하거나 영어와는 다른 한, 차이를 볼 수있는 한, gibberish를 거기에 넣게하십시오. 새로운 컨트롤러와 협력 aho_infinitescroll/controllers/aho_infinite_alist.php를 열고 다음 줄을 추가하십시오.

  이 새로운 컨트롤러는 몇 가지 일을합니다

  metadata.php에서 정의한 $ _sthistemplate의 값을 aho_infinitescroll.tpl로 변경하십시오. 여기에서 템플릿 이름 만 지정하면됩니다. 따라서 템플릿 이름은 고유해야합니다. 시스템이 올바른 템플릿을 빠르게 찾는 데 도움이됩니다.
  함수 렌더링은 새로운 템플릿 이름을 반환하는 것만으로도 렌더링됩니다.

  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.

  getViewTypElist 함수는 메타 데이터에 정의 된 데이터 열의 값을 반환합니다. 템플릿 aho_infinitescroll.tpl 은이 값을 사용하여 기사 목록에 적용되는 뷰 유형을 결정합니다.

  확장 클래스의 이름은 AHO_INFINITESCROLL_ALIST_PARENT입니다. 공식은 모듈 컨트롤러 이름 _ 부모입니다

  확장하는 데 필요한 클래스를 찾는 팁
  일반적으로 어떤 클래스를 확장 해야하는지 알아야합니다. 현재보기에서 어떤 클래스가 실행 중인지 쉽게 찾을 수있는 방법이 있습니다. 파일/application/views/ {Theme_name }/tpl/layout/page.tpl 파일을 찾아보고 파일 상단에 다음 줄을 삽입하십시오.

  • 위의 줄은 현재 뷰에서 사용되는 핵심 클래스를 인쇄하는 데 도움이됩니다. Ajax 요청을 수행하는 핵심 클래스를 감지하려면 Chromedev 도구로 작업하는 노력이 조금 더 필요합니다.

    결론 지금까지, 우리는 새로운 모듈 확장을 개발하기 위해 단계별 백엔드 구현을 거쳤습니다. 현재, 우리는 관리 대시 보드에서 무엇을 할 것인지 확인하기 위해 모듈을 활성화 할 수 있습니다. 문제가 발생하면 여기에 의견을 남겨 주시기 바랍니다. 당신을 도와주기 위해 최선을 다하겠습니다.
  다음 부분은 템플릿을 사용자 정의하고 무한 스크롤을위한 워크 플로우를 처리하기 위해 JavaScript를 추가하는 필수 프론트 엔드 구현에 대한 자세한 내용을 설명합니다.
  • 산화 eShop에서 무한 스크롤 목록 구축에 대해 자주 묻는 질문 산화 eShop에서 무한 스크롤을 사용하는 목적은 무엇입니까?
    Infinite 스크롤은 브라우저 스크롤 막대가 스크롤링을 페이지 하단으로 방지하는 것을 방지하는 웹 디자인 기술입니다. 대신 콘텐츠. 산화 eShop의 맥락 에서이 기술은 사용자가 페이지를 아래로 스크롤함에 따라 제품을 지속적으로 표시하여 제품의 원활한 탐색 및 탐색을 통해 사용자 경험을 향상시킬 수 있습니다.
  . Infinite 스크롤은 전자 상거래 웹 사이트의 성능을 어떻게 향상 시키는가?

  Infinite 스크롤은로드 시간을 줄임으로써 전자 상거래 웹 사이트의 성능을 크게 향상시킬 수 있습니다. 모든 제품을 한 번에로드하는 대신 사이트를 속도를 늦출 수있는 Infinite Scroll은 처음에 특정 수의 제품을로드 한 다음 사용자가 계속 스크롤함에 따라 더 많이로드합니다. 이것은 현장 속도를 향상시킬뿐만 아니라 사용자 참여와 유지를 향상시킵니다.

  PHP를 사용하여 산화 eShop에서 무한 스크롤을 구현할 수 있습니까?

  산화 eShop에서 무한 스크롤 구현 PHP를 사용하여 조작하는 것과 관련이 있습니다. Ajax 호출 및 페이지 매김 시스템. AJAX 요청을 처리하고 제품 목록을 업데이트하려면 목록 컨트롤러 및 제품 목록 템플릿의 기능을 수정해야합니다. 상세한 단계와 코드 스 니펫은 기사에서 찾을 수 있습니다.

  산화 eShop에서 무한 스크롤을 사용하는 데있어서의 잠재적 인 단점이 있습니까?
  무한 스크롤은 사용자 경험을 향상시킬 수 있지만 그렇지 않을 수 있습니다. 모든 유형의 전자 상거래 웹 사이트에 적합합니다. 예를 들어, 웹 사이트에 중요한 링크가있는 바닥 글이있는 경우 무한 스크롤이 사용자가 바닥 글에 도달하기가 어려울 수 있습니다. 또한, Infinite Scroll은 특정 제품이나 페이지로 이동하려는 사용자에게 때때로 혼란 스러울 수 있습니다.

  산화 eShop을 제외하고 다른 전자 상거래 플랫폼에서 무한 스크롤을 사용할 수 있습니까?

  예, 예, 예, 무한 스크롤은 사용자 정의 코딩을 지원하는 다양한 전자 상거래 플랫폼에서 구현할 수 있습니다. 그러나 구현 프로세스는 플랫폼의 아키텍처 및 코딩 언어에 따라 다를 수 있습니다. 특정 플랫폼의 문서를 참조하거나 전문 개발자의 도움을 구하는 것이 좋습니다.

  Infinite Scroll은 SEO에 어떤 영향을 미칩니 까? Ajax를 통해로드 된 올바르게 크롤링 및 색인 컨텐츠. 그러나 이는 사용자를위한 무한 스크롤 버전과 함께 검색 엔진 용 사이트의 페이지에 입은 버전을 구현하여 완화 할 수 있습니다.
  전자 상거래 웹 사이트에 PHP가 권장됩니까?
  PHP는 A입니다. 유연성, 확장 성 및 견고성으로 인해 전자 상거래 웹 사이트에 인기있는 선택. 광범위한 데이터베이스를 지원하며 산화 ESHOP을 포함한 다양한 전자 상거래 플랫폼과 호환됩니다. 그러나 프로그래밍 언어의 선택은 특정 요구 사항과 전문 지식에 따라 달라져야합니다.

  무한 스크롤에 대한 몇 가지 대안은 무엇입니까?

  무한 스크롤에 대한 대안에는 Pagination 및 "More"버튼이 포함됩니다. Pagination은 콘텐츠를 별도의 페이지로 나누는 반면 "더 많은로드"버튼을 사용하면 사용자가 더 많은 콘텐츠를 수동으로로드 할 수 있습니다. 이러한 옵션 간의 선택은 웹 사이트의 디자인과 사용자 선호도에 따라 다릅니다. 산화 eShop에서 무한 스크롤의 모양과 느낌을 사용자 정의 할 수 있습니까?

  무한 스크롤의 모양과 느낌은 CSS를 사용하여 사용자 정의 할 수 있습니다. 로딩 표시기, 제품 목록 및 기타 요소의 스타일을 웹 사이트 디자인과 일치시키기 위해 수정할 수 있습니다.

위 내용은 산화 eShop에 대한 무한 스크롤 목록 구축 - 기본 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!