4개월 동안 Shopify 주제의 맞춤형 제작을 느낀 일과 디자인에 대해서.

개시하다

약 4개월 동안 실제 프로젝트에서 쇼피파이의 테마 맞춤 제작을 진행했기 때문에 되돌아봤다.
디자인에 대한 기술도 있지만 더듬으면서 자신에게 좋은 디자인이라고 생각했기 때문에 참고가 되었으면 좋겠습니다.

4개월 한 느낌.

장점

첫인상은 쇼피파이의 컬렉션(상품의 그룹화 기능)이 우수하고 UI도 좋아 이용자가 쉽게 이용할 수 있다는 것이다.1년 전에 EC-CUBE를 써봤는데 Shopify가 쓰기 편한 것 같아요.
문서는 기본적으로 영어이며, 현재 일본어 대응도 진행 중이다.지지도 두터운 인상을 준다.

결점

하지만 개발자로서의 소감은 몇 가지 힘들다.

SCSS와 같은 CSS 사전 프로세서는 사용하기 어려움

독특한 템플릿 언어의 리퀴드 학습 비용

assets 산하에 단독 디렉터리를 추가할 수 없음

잠깐만...응, 나는 어떤 기술이든 결점이 있다고 생각해서 허락해.
이 같은 문제를 해결하기 위해 GatsbyJS 등 프레임워크와Shopify Storefront API를 전면 언어로 사용하는 방법도 있지만 이렇게 되면 호환되는 앱이 적어지는 것은 나쁜 점이 있는 것 같다.하지만 신경을 쓰는 디자인과 진정한 활용테마 사용자 정의을 보면 맵기 때문에 개인적으로 전위적인 비즈니스를 해볼 가치가 있다고 생각합니다.
그 밖에

즐겨찾기 기능

선물 배송

포인트 관리

예약 판매

등의 기능을 설치하는 데 상당히 시간이 걸린다.Shopify의 '응용 프로그램 (Word Press가 말한 플러그인)' 을 통해 이런 문제를 해결하려면 운용 비용이 상상을 초월할 것이다.자세한 조사는 없었지만 대부분 예매표 방식의 인상이었다.따라서 가져오고자 하는 기능을 사전에 조사하고 응용 프로그램을 선택하는 것부터 운용 비용을 계산해야 한다고 생각합니다.

설계 정보

그럼 소감은 여기까지 하고 다음은 디자인에 관한 이야기입니다.
이번에는 노동시간을 삭감하기 위해 요구에 가장 가까운 요금 주제를 바탕으로 맞춤형 제작을 진행한다.또 기본 주제의 영향 범위가 넓어 원칙적으로 편집하지 않고 이번에 추가된 부분과 분리해야 한다는 점을 의식해 코딩했다.

카탈로그

별다른 변화는 없을 것 같지만, 후술한 자바스크립트webpack.config.js와 package.json와 src 디렉터리를 컴파일하기 위해 따로 추가되었습니다.

src
 ├─ assets # CSSやJavascriptや画像など
 ├─ config # テーマの設定
 ├─ layout # サイト共通レイアウトの大枠
 ├─ locales # 翻訳の定義と内容
 ├─ sections # テーマエディタから編集可能な共通パーツの定義
 ├─ snippets # ページに組み込むパーツの定義
 ├─ src # JavaScriptファイル群
 └─ templates # 各ページのレイアウト雛形
  - config.yml # Theme Kitの設定
  - package.json # JavaScript用
  - webpack.config.js # JavaScript用

각 목록의 상세한 설명은 아래의 보도가 매우 알기 쉽기 때문에 추천합니다.
https://www.non-standardworld.co.jp/23013/

개발 환경

Shopify는 주제 변경을 모니터링하고 자동으로 업로드하는 명령줄 도구 "Shopify Theeme Kit"를 제공합니다.
https://shopify.github.io/themekit/
변경 감시하는 왓치 외에도 브라우저의 사용자 정의 화면에서 변경된 내용을 주제로 한 다운로드 명령 등이 준비돼 있어 서슴지 않고 가져와야 한다.이 외에도 명령행 도구가 있는 것 같지만, Theme Kit 때문에 특별히 불편함을 느끼지 않았다.
Shopify Theeme Kit를 사용할 때 로컬로 저장config/settings_data.json하면 브라우저 측면의 사용자 정의 화면에 설정된 저장 내용이 무시됩니다.
커버 대책config.yml에 추가ignore_files:- config/settings_data.json의 기술을 추가하고 감시 대상에서 삭제하는 것을 권장합니다.

구성 요소

어셈블리의 개념이 있는지 모르겠지만 가능한 한 각 기능과 부품을 분리해서 설명하고 싶으니 Vue를 사용하십시오.js의 SFC 스타일을 구성하는 파일 구성입니다.제가 간단한 예를 소개하겠습니다.
각 페이지에 사용되는 주 제목으로 구성된 파일은 다음과 같다.
snippets/page-header.liquid

{% style %}
.c-page_header {
  background: #333;
  /* ~~~ */
}
{% endstyle %}

<div class="c-page_header">
  <h2>{{ title }}</h2>
</div>

{{ title }} 다음 호출 원본 파일로 전달됩니다.
호출할 파일

{% render 'page-header', title: section.settings.title %}

{% schema %}
  {
    "name": "Blog pages",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "ページタイトル"
      }
    ]
  }
{% endschema %}

위 파일로 구성된 페이지의 사용자 정의 화면 설정 페이지 제목을 snippets/page-header.liquid에 전달합니다.
주의점은 이 SFC와 유사한 방법은SCSS 등을 사용할 수 없기 때문에 코드의 분할과 CSS의 이해성은 절충이다.
[추기]
위 SFC 스타일의 파일로 구성되어 있으면 바디 탭에서 css를 읽을 수 있기 때문에 W3C의 파리 데이터 검사에서 아래의 Error가 나타납니다.선기술{% style %}을 통해 초기 표시의 편차 등이 발생하지 않지만 엄격한 인코딩이 필요할 때 주의하십시오.Error: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

CSS 처리 정보

Shopify는 공식적으로 Sass 사용을 추천하지 않습니다.
https://www.shopify.jp/blog/partner-theme-sass-depricated
그럼에도 Gulp 등을 사용해 로컬에서 컴파일해도 문제없고, SCSS 등을 사용하려면 각자 준비하면 된다.
이번에는 앞에서 말한 바와 같이 구성 요소로 처리된 liquid 파일에 CSS가 기술되어 있기 때문에 SCSS를 사용하지 않았습니다.괴롭습니다.
파일 전체에 사용되는 공통 CSS는 기본 주제와 달리 제작assets/style.css.liquid하고 layout/theme.liquid에서 순수 CSS를 읽습니다.(설명량이 적어 SCSS 컴파일 환경을 준비하는 것이 번거롭다)
layout/theme.liquid

{{ 'style.css' | asset_url | stylesheet_tag }}

JavaScript 처리 정보

각 페이지에서 공통적으로 사용되는 스크립트는 주제의 루트에 생성된 src 디렉토리의 하위 JavaScript 파일 그룹에 각각 기술되어 있습니다.웹팩assets의 부하를 script.js로 설정하여 컴파일합니다.
그래서 자바스크립트를 쓸 때 웹팩의 왓치와 쇼피파이의 테마인 왓치를 동시에 진행해 개발했다.

최후

많은 경우 브라우저가 입력하고 선택한 값에 따라 디스플레이를 변경해야 한다. 점점 커지는 코드를 보면서 나는 흐리멍덩하게 4개월을 겨우 참았다.그럼에도 불구하고 기존 코드를 파괴하지 않고 개발한 경험과 학습이 많았기 때문이라고 생각합니다.
다음에 Shopify 사건을 하려고 한다면, 나는 일부 틀과 상점 앞 API를 사용하여 머리 없는 비즈니스를 실현하고 싶다.