'쇼파파이테마' 태그의 글 목록

쇼파파이테마에 해당하는 글 1건

[쇼피파이] 쇼피파이 테마 2.0 개발을 위한 구조분석 및 이해2021.12.26

[쇼피파이] 쇼피파이 테마 2.0 개발을 위한 구조분석 및 이해

Computer 관심/쇼피파이2021. 12. 26. 11:57

구성

쇼피파이의 큰 구조는 아래와 같다.

- 아나운스먼트 바

- 헤더

- 템플레이트

- 푸터

레이아웃

처음에 실행되는 파일인 theme.liquid 파일을 보면 아래와 같이 {% section %}을 통해 아나운스먼트바, 헤더, 푸터를 불러온다.

{{content_for_header}} liquid 태그는 html <header>태그 사에이 들어가서 스크립트를 불러들이고

{{content_for_layout}} liquid 태그는 는 페이지에 알맞는 템플릿을 불러들이는 역할을 한다.

예를 들면 index페이지에선 index.json템플릿을 불러오고 카트페이지에선 cart.json페이지를 불러오는 식으로 말이다.

theme.liquid가 메인 파일이며 CDN을 설치하고 싶으면 여기 헤더 안에 넣으면 된다.

예를 들면 부트스트랩 설치하고 싶으면 아래의 코드를 layout > theme <head></head>에 사이에 넣는다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

템플레이트

이중 템플레이트는 쇼피파이에 필요한 페이지를 구성하는 JSON/liquid 파일을 말한다. 쇼피파이 쇼핑몰이 필요한 페이지들의 파일 이름이 아래 사진에 보듯 이미 정의가 되어있어서 자신이 만들 페이지명을 확인 하고 만들면 된다.

Json file과 liquid file 중 쇼피파이 2.0에서는 템플레이트를 JSON으로 만들어 템플레이트 내부의 섹션들을 자유롭게 배치 할 수있도록 한다.

아래는 기본적인 템플레이트의 Json파일의 구조이다.

{
"sections":{
    section_name: {
        "type":"",
        "blocks":{
            block_name:{
            "type":"",
            "settings":{}
        },
        "block_order":[],
        "settings":{}
    },
"order":[]
}

새로운 섹션을 추가하면 코드에서도 sections 오브젝트에 섹션이 추가 된다. 또한 order에도 섹션의 배치 순서대로 섹션이 배열에 추가된다.

섹션

아래 사진 처럼 Rich text, collection list 등 template에 넣을 수 있는 요소를 섹션이라 한다. 이러한 섹션은 사용자가 커스터마이즈 하게 제작 할 수도 있다.

다시 한번 코드를 보면 섹션은 아래처럼 섹션의 이름(사용자가 만들수있음), type, settings, blocks, block_order로 구성되 있으며 "type" 은 section의 이름을 넣으면 되고 "order"은 사용자가 정의한 섹션의 이름을 넣어서 순서를 정한다.

{
"sections":{
    section_name: {
        "type":"",
        "blocks":{
            block_name:{
            "type":"",
            "settings":{}
        },
        "block_order":[],
        "settings":{}
    },
"order":[]
}

섹션의 속성들