Magento 템플릿 제작 과정

Magento는 완전한 모듈화 모델을 바탕으로 구축된 것으로 당신의 인터넷 상점에 무한한 확장성과 유연성을 가져다 줍니다.이 장에서 우리는magento 주제를 어떻게 개발하는지 소개한다.

청크(Blocks) 및 레이아웃(Layout)

Magento 이전에 당신은 이미 다른 전자상거래 프로그램을 사용한 적이 있을 것이다.따라서 시작하기 전에 우리는 당신이 이전의 경험에 따라 얻은 모든 기대를 버리기를 바랍니다. 이것은 당신이 새로운 언어를 배워야 한다는 것을 의미하지 않고 모든 업무 절차를 바꿔야 한다는 것을 의미하지 않습니다. 단지 새로운 기교를 배워서Magento의 주제를 개발해야 합니다.이 공구들을 파악하고 항상 그들을 주의하면 너는 이런 구조를 좋아하게 될 것이다.이제 소개를 시작하겠습니다.

패브릭 블록(Structural Blocks)

컨텐츠 청크(Content Blocks)

레이아웃(Layout)

 

심리 지도를 세우다

블록과 레이아웃의 의미를 더욱 잘 이해하기 위해 여기에 심리지도공들이 참고하도록 제공한다.

장방형 블록의 윤곽을 상상한다(그림1 Diagram1).

현재 전체 블록의 윤곽이 채워진다고 상상

현재 두 블록을 상상하고 그들의 윤곽이 겹쳐진다

현재 세 개의 블록을 상상하고 윤곽이 겹쳐진다

그리고 네 개를 상상해...Diagram 1

그리고 Magento 쇼핑몰의 첫 페이지 줄임말: Diagram2

위의 미리 보기 그림을 보면 몇 부분으로 분할되고 두 가지 방식으로 분할될 수 있다.
Diagram 3
Diagram 4

 
네가 방금 세운 사고 지도는 너에게 개념과 진실 블록 사이의 평행적인 비교를 주었다. 나는 네가 완전히 멍청할지도 모른다는 것을 안다. 내가 설명해 줄게.
개념적인 측면에서 볼 때 그림2의 구조는 구조 블록이다.그들은 내용 블록의 부모 블록이다. 그들은 내용 블록이 한 인터넷 쇼핑몰 페이지에 표시되는 지역 위치를 정하는 데 도움을 준다(그림3).이러한 구조 블록의 존재 형태는 페이지 눈썹 구역, 왼쪽 난간, 오른쪽 난간...등등은 인터넷 상점의 시각 구조를 만드는 데 도움이 된다.l
다른 한편, 내용 블록은 개념적으로 구조 블록을 장식하는 독립된 색깔의 블록이다.한 인터넷 쇼핑몰 내용에서 그들이야말로 진정한 내용이다.내용 블록은 페이지 내의 모든 기능 특성(예를 들어 분류 목록, 표시와 제품 라벨 등)을 대표하고 템플릿 파일로 생성(x)HTML을 부모 구조 블록에 삽입한다.
레이아웃 Layout
레이아웃은 내용 블록을 구조 블록에 분배하는 도구이다.레이아웃은 XML 텍스트 파일로 존재합니다. 레이아웃을 수정하면 블록을 이동하고 템플릿을 내용 블록으로 분배하여 구조 블록의 라벨을 만들 수 있습니다.사실 레이아웃 파일의 도움을 통해 인터넷 상점의 페이지마다 보이는 레이아웃을 수정할 수 있다.레이아웃에 대한 더 많은 정보는 아래의 연결을 참고하십시오
레이아웃 소개 Layouts
마젠토에서 너는 더 이상 레프트가 필요 없어column.ext 이 템플릿 파일은 모든 기능성 기초 요소를 관리함으로써 템플릿을 관리합니다.일부 레이아웃 명령을 불러오거나 마운트 해제해서 인터넷 상점의 페이지를 제어할 수 있습니다.

한 걸음 한 걸음 테마 Theme 만들기

다음은 Magento 테마를 만드는 모든 도구입니다.

템플릿 Templates

레이아웃 Layouts

블록 블록스

스킨 스킨스(images, CSS and block-specific Javascript)

 
인터넷 쇼핑몰의 템플릿을 만들려면 다음과 같은 절차를 밟아야 한다.

1단계: 시스템 캐시 시스템 캐치 닫기

관리 인터페이스 Administration Panel(http://yourhost.com/admin) 그런 다음 System -> Cache Management.'All Cache'에서'Disable'을 선택하고 저장합니다.이렇게 하면 페이지에 대한 수정을 충실하게 보여줄 것이다.

2단계: 인터넷 쇼핑몰에서 사용할 수 있는 모든 구조 유형을 확인합니다

다음과 같은 목록을 만들 수 있습니다.

메인 페이지는 세 개의 칸 구조인three column structure를 사용합니다.

분류 목록 페이지는 오른쪽 열 two column structure that includes a right colum을 포함하는 두 개의 열 구조를 사용합니다.

고객 페이지는 왼쪽 열 two column structure that includes a left colum을 포함하는 두 개의 열 구조를 사용합니다.

뼈대 템플릿 Skeleton template
위의 목록을 완성하면 모든 구조 유형에 HTML 태그를 만들고 뼈대 템플릿인 Skeleton template로 저장할 수 있습니다 app/design/frontend/your_interface/your_theme/template/page/.
skeleton template 예:
Upon scanning through the sample skeleton template above, you will notice a PHP method called =$this->getChildHtml()?> inside each presentational markup. This is the way Magento loads structural blocks into skeleton templates and hence is able to position all the contents of the structural blocks within a store page.
Each getChildHtml calls on a name as in =$this->getChildHtml('header')?> , and these names are ways by which each structural blocks are identified in the layout. Skeleton templates are assigned to the store through the layout.
 

3단계: 기능성에 따라 HTML 잘라내기 (X)

뼈대 템플릿을 만든 후,skeleton templates, 모든 내용의 나무 블록에 템플릿을 만들어야 합니다
각 기능에 대해 HTML 태그를 수정(X)해야 합니다.예를 들어 미니카트 영역을 설계하면 이 영역의 라벨은 자신의 템플릿 파일이 됩니다.다른 제품 라벨, 로그인 구역 등도 마찬가지다.이 기능들은Magento가 제공했기 때문에 기존의 템플릿 탭을 참고하여 자신의 태그 논리를 만들면 됩니다.
그럼 템플릿은 어디에 저장할까요?
인터넷 상점의 모든 페이지의 전문 표시는 하나의 템플릿 그룹을 통해 이루어지고, 그룹의 모든 페이지는 하나의 모듈의 기능을 설명한다.웹 페이지에서 수정하고 싶은 것을 찾기 위해서
템플릿, 템플릿 경로의 알림을 열 수 있습니다.통과:
Diagram 5
1. 관리 페이지 관리자로 이동하여 System -> Configuration 2.인터넷 쇼핑몰을 선택하십시오 (웹사이트/store selector를 통해) 3.페이지를 새로 고친 후 'Developer' tab을 선택한 다음 Template Path Hints에서 'Yes' 를 선택하십시오.다 한 후에 프론트 데스크톱으로 돌아가서 페이지를 새로 고치면 모든 템플릿 목록의 경로를 볼 수 있습니다.경로를 통해 관련 템플릿을 수정하면 됩니다.

4단계: 당신의 디자인에 맞게 레이아웃을 바꿉니다.

그러면 레이아웃 파일은 어디에 있습니까?
여기 있다app/design/frontend/your_interface/your_theme/layout/.템플릿 파일과 마찬가지로 레이아웃 파일도 모든 모듈을 기반으로 저장하여 템플릿 알림에 따라 쉽게 수정할 수 있습니다.먼저 템플릿 프롬프트를 활성화하고 수정할 페이지를 새로 고치고 템플릿 프롬프트의 템플릿 경로를 찾습니다.예를 들어 미니 카트를 이동하려면 템플릿 경로 (ex: app/design/frontend/default/default/checkout/cart/sidebar.phtml) 를 참고하여 테마 폴더의 첫 번째 폴더 이름 (글꼴이 가중된 것) 으로 레이아웃 파일을 찾으십시오.그래서 이 예에서 우리는'checkout'을 찾아야 한다.mini cart의 위치를 수정하려면 xml을 사용하십시오.
기본 레이아웃 VS 레이아웃 업데이트(Layout Updates)
모두 두 가지 레이아웃이 있습니다. 기본값 (default) 과 업데이트 (updates).기본 레이아웃default layout ((page.xml) 은 자신이나 거의 모든 페이지에 기본적으로 적용되는 레이아웃입니다.다른 모든 레이아웃 파일은 레이아웃 업데이트 Layout Updates, 즉 모든 기본 레이아웃을 기반으로 하는 레이아웃입니다.
골격 템플릿 (skeleton template) 을 예로 들어 봅시다. 기본 레이아웃에서 당신은 이미 세 개의 칸 구조로 설정되어 있습니다. 즉, 기본적으로 거의 모든 페이지가 세 개의 칸 구조입니다.그러나 제품 페이지에는 세 개의 칸이 필요하지 않습니다. 제품 페이지에 대해 말하자면 오른쪽 칸을 포함하는 두 칸의 구조가 필요합니다.이 점을 실현하기 위해서 기본 레이아웃을 막론하고 catalog를 열어야 합니다.xml 파일, 레이아웃 명령을 수정합니다.이것이 바로 레이아웃 업그레이드(updating a layout)입니다.
Example way of assigning skeleton template