[JSON Template] 404-template Designing (1-3)

1. wrap our template using "tag" attribute

 

tag attribute

- By default, when Shopify renders a section, it wrapped in a <div> element with a unique 'id' attribute.

- If you don't want to use <div>, then you can specify which kind of HTML element to use with the 'tag' attribute.

the following are the accepted values

- article

- aside

- div

- footer

- header

- section

 

 

여기서 시작 (1-2 내용)

<h1>{{ section.settings.title }}</h1>
<p>{{ section.settings.subtext_title }}</p>

{% schema %}
  {
    "name": "Template-404",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "default": "404",
        "label": "404 Heading Title"

      }, {
        "type": "text",
        "id": "subtext_title",
        "default": "The page you were looking for does not exist",
        "label": "404 Subtext Title"
      }
    ]
  }
{% endschema %}

여기서 

"tag": "section",

을 추가하면서 section tag를 이용해  해당 파일의 section을 감쌀 것이다. 

이 때, tag attribute의 schema setting은 wrapper of JSON template 와 비슷하다고 볼 수 있다. 

 

여기서 class를 section tag에 넣고싶다면, attribute를 이용함으로써 적용시킬 수 있다.

 

class attribute

- when shopify render a section, It's wrapped in an HTML element with a class of shopify-section.

we can add to that class with the 'class attribute'.

 

여기서 

"class": "flex items-center justify-center text-center py-7 h-screen",

을 추가해 주었다. 

 

리엑트와는 다르게 바로 "class" 속성에   css를 적용해서 적은것이다.

 

여기서 py는 padding y 이며, h (height)는 viewport로 지정한 것이다. 

 

결과물

원래 있떤 글이 이렇게 중간으로 배치된 것을 볼 수 있었다.

 

이제 디자인을 해 볼건데, 

<div>를 쓰고 

<div class="max-w-md">

: max width medium 

 

내부에 

<div class="text-5xl font-bold my-4">

: text size : 5xl

: font-weight : bold

: margin y(세로) :4 만큼 주었다.

 

 

{{ section.settings.title }}

그리고 내부에 schema 에 있는 정보를 가지고 왔다.

 

그럼 코드는 아래와 같다. 

<div class="max-w-md">
  <div class="text-5xl font-bold my-4">
    {{ section.settings.title }}
  </div>
</div>

 

 

똑같이 subtext도 디자인 해 줄 것이다.

<div class="my-4">

<div>로 margin y를 4만큼 주고, 그 내부에

<p class="text-base md:text-xl leading-normal">

<p>에 text base라는 이름의 class 를 medium  size screen을 적용한 후,

- text-size : xl

- align height : leading-normal 을 적용하고난 뒤 똑같이 setting으로 부터 subtext_title을 가져온다. 

{{ section.settings.subtext_title }}

 

 

그럼 최종 코드는 이와 같다. 

<div class="max-w-md">
  <div class="text-5xl font-bold my-4">
    {{ section.settings.title }}
  </div>
  <div class="my-4">
    <p class="text-base md:text-xl leading-normal">
      {{ section.settings.subtext_title }}
    </p>
  </div>
</div>

 

그럼 전체 총 나의 코드는

<div class="max-w-md">
  <div class="text-5xl font-bold my-4">
    {{ section.settings.title }}
  </div>
  <div class="my-4">
    <p class="text-base md:text-xl leading-normal">
      {{ section.settings.subtext_title }}
    </p>
  </div>
</div>

<h1>{{ section.settings.title }}</h1>
<p>{{ section.settings.subtext_title }}</p>

{% schema %}
  {
    "name": "Template-404",
    "tag": "section",
    "class": "flex items-center justify-center text-center py-7 h-screen",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "default": "404",
        "label": "404 Heading Title"

      }, {
        "type": "text",
        "id": "subtext_title",
        "default": "The page you were looking for does not exist",
        "label": "404 Subtext Title"
      }
    ]
  }
{% endschema %}

 

이렇게 되었는데, 여기서 홈페이지를 보면 

두개가 되어있음. 그래서 

<h1>{{ section.settings.title }}</h1>
<p>{{ section.settings.subtext_title }}</p>

를 지웠다. 

 

결과물

---

여기서 이제 '다시 홈으로'가는 버튼을 만들어 볼 것이다. 

 <div class="my-4">
    <a href="{{}}"></a>
  </div>

를 만들어주고 

{
        "type": "text",
        "id": "button_label"

      }

schema에 일단 label을 적용해줄 객체를 만들어서 

위의 <a> 안에 적용시킬 것이다. 

 <div class="my-4">
    <a href="">{{ section.settings.button_label }}</a>
  </div>

그리고  나머지 default와 label을 객체에 넣어주면  다음과 같은 코드이고, 

{
        "type": "text",
        "id": "button_label",
        "default": "Back to HomePage!",
        "label": "Button Label"

      }

 

 

이렇게 버튼 형태는 완성이 되었다. 

 

 

이제 href 에 들어갈 값을 설정할 것이다. 

schema -> settings에 또다른 객체를 하나 만들어준다.

{
        "type": "url",
        "id": "button_url",
        "label": "Button URL"
      }

이때,  url이 set되었는지 체크할 것이기 때문에 따로 default attribute는 넣지 않는다. 

 

이제  Button URL이 blank인지 아닌지를 체크하는 로직을 넣을것이다. 

 {%- if section.settings.button_url == blank -%}
      {%- assign shop_url = shop.secure_url -%}
    {%- else -%}
      {%- assign shop_url = section.settings.button_url -%}
    {%- endif -%}

- if you set the value of button_url using the theme editor, this condition will use that value.

- if you haven't set it using the customizer page or a theme editor, then the value of shop url will be the shop url of the Shopify store.

 

이제 비워놨던 곳을 채워주면

<a href="{{ shop_url }}">

 

최종 코드는 이렇게 된다.

<div class="max-w-md">
  <div class="text-5xl font-bold my-4">
    {{ section.settings.title }}
  </div>
  <div class="my-4">
    <p class="text-base md:text-xl leading-normal">
      {{ section.settings.subtext_title }}
    </p>
  </div>
  <div class="my-4">
    {%- if section.settings.button_url == blank -%}
      {%- assign shop_url = shop.secure_url -%}
    {%- else -%}
      {%- assign shop_url = section.settings.button_url -%}
    {%- endif -%}
    <a href="{{ shop_url }}">{{ section.settings.button_label }}</a>
  </div>
</div>


{% schema %}
  {
    "name": "Template-404",
    "tag": "section",
    "class": "flex items-center justify-center text-center py-7 h-screen",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "default": "404",
        "label": "404 Heading Title"

      }, {
        "type": "text",
        "id": "subtext_title",
        "default": "The page you were looking for does not exist",
        "label": "404 Subtext Title"
      }, {
        "type": "text",
        "id": "button_label",
        "default": "Back to HomePage!",
        "label": "Button Label"

      }, {
        "type": "url",
        "id": "button_url",
        "label": "Button URL"
      }
    ]
  }
{% endschema %}

 

이제 브라우저로 가서 해당 버튼을 누르니

 

홈으로 돌아오는 것을 볼 수 있었다. 

 

 

이제 버튼에 스타일을 적용시켜 볼 것이다. 

<a href="{{ shop_url }}" class="px-4 inline py-2 text-base font-medium shadow bg-purple-600 hover:gb-purple-800 text-white">{{ section.settings.button_label }}</a>

설명)

- padding x(가로) : 4

- inline

- padding y : 2

- font-size : base

- font-weight : medium

 - shadow

- background - purple- shadow: 600

- hover : background-purple-shadow:  800 

- text-color: white