오랫만에 쓰는 기록

그동안 작업해왔던것들을 기록해볼려고 합니다.

 

저는 쇼피파이라는 플랫폼을 이용하는 업체에 다니고 있으며 대표님이 커스터마이징하고 싶은 것들을 수정해주고 있는 개발자입니다.

 

처음 쇼피파이라는것을 알고 기본 도메인 및 페이지 업체 전용 사용 언어(liquid) 등을 사용하는데에 익숙해 질 필요가 있다고 생각했습니다.

 

간단하게 표도 구축해보고 쉽게 표도 구축할수 있도록 도와주는 스키마도 있었으며 빠르고 잘 편집할려면 페이지 빌더 도움을 받아 제작하기로 했다.

 

구동방법은 아직도 잘 이해는 못하고 있지만 응용으로 다 해결하고 있는상황이다. 

 

첫번째 난관 쇼피파이는

처음으로 Theme.liquid 파일을 읽어 시작하며 {{ content_for_header }} 그리고

index.liquid 파일을 읽어 {{ content_for_index }} 가 있어야 동작이 된단다. 근데.. 요 정의를 어디서하지? 

이해할려해도 이해가 안되서 많이 답답했다. 해결은 아직도 못했다. 찾고 싶다.

전역변수를 두는 곳에 있다는데 다른작업하면서 찾기 버거웠다.. 변명이다..

 

이제 변경했던것을 정리해보자

 

메인페이지를 커스터마이징 하는데 요소를 없에는 중 중첩되어있는 요소중 하단으로 이동하는 아이콘을 제거하였다.

 

이후 공통으로 쓰고 있는 해더부분 메인에서만 안보이도록 하고 싶었다. 메인페이지였을때 유일한 것을 찾아야되는데 id로 찾다가 title로 찾아 바꾸었다. 

 

이후 프로모션 등급 등을 이용해야되서 엡을 구매하고 특별등급만 접속할수 있는 페이지를 만들고 싶어 파파고로 열씸히 번역해가며 문의를 했다. 그 결과 해법은 고객의 테그로 분류를 하여 접속할수 있게 자바스크립트를 만들었다. 논리는 이러하였다.  빌더 엡으로 이동해 수정을 한다. 페이지에 liquid로 고객의 테그를 받아와 <div>테그에 아이디를 주고 고객테그를 입력한다. 자바스크립트로 돌아가 <div>의 아이디를 찾아 내부 택스트를 다 가져와 그 중 특정택스트가 포함되어 있는지 확인한다. 특정 태그가 안되면 페이지 이동을 하게 만들고 아니면 <div>의 display:'None';을 해 숨기고 페이지를 보여준다.

 

이번에는 상세페이지의 카운트다운을 만드는것이였다. 다행이 빌더에 포함되어 있었고 난 그 데이터를 감시해 이벤트를 만들려고 하였다. 결과는 데이터를 어떻게 가져오는가? 그런데 그냥 빌더 쪽에서 사용하는 JS 함수가 있을것 같아 받을려고 하였는데 그건 안된다고 하여 view는 빌더에게 맏기고 내부기능은 직접 조작하였다. 이것 때문에 CSS에 대해서 조금 공부를 한것 같다. 에니메이션에 대해서도 조금은 이해를 하였다. 명령법은 아직까지 해깔리고 재대로 코드를 작성한줄알았는데 적용이 안되고 난리도 아니였다. 

 

이제 여러개의 컬랙션페이지 여러개의 상품상세페이지를 만들 차래다. 요건 의외로 금방? 끝났는데 빌더에서 페이지를 만들때 연동시킬 컬랙션이나 상품들을 미리 정할수 있어서 링크를 타고갈때 정보를 알아서 받아오고 뿌리더라...난 그것도 모르고 주변개발자들에게 물어봐 <from>테그도 찾아보고 AIP를 어떻개 받을수 있을까 고민을 아주 많이 했었다.

정말 해결은 되었지만 그 매커니즘을 알고싶다... {{ content_for_index }}요것도... 

 

페이스북 인스타그램 연동 / 페이스북 shop 만들기 이니시스 연동 등 다양하게도 경험하였다. 

 

그 외 컬랙션페이지를 수동으로는 어떻개 수정하는지도 배우고 전역글꼴변경 조금의 liquid숙련도가 올라간거 같다.

 

그러나 이대로 됬다고 해서 넘어갈일이 아니니 좀 더 만져보고 개발자연습용 페이지도 만들었으니 거기서 연습을 많이 해야겠다.