> 웹 프론트엔드 > JS 튜토리얼 > API 및 JSON을 사용한 Shopify Liquid REPL

API 및 JSON을 사용한 Shopify Liquid REPL

PHPz
풀어 주다: 2024-09-04 07:02:32
원래의
371명이 탐색했습니다.

Shopify Liquid REPL with API & JSON

정말 신난다 ? 내 새 웹사이트 Shopify Liquid REPL을 공유하려고 합니다.

최근 Shopify REPL(Read-Eval-Print-Loop)에 대한 Taylor Page의 게시물을 보고 사이트를 검토하게 되었습니다. 웹사이트의 출력을 확인한 후 API를 통해 입력된 JSON 데이터를 통합하는 새 버전을 만들었습니다. 이제 API를 추가하지 않고도 직접 JSON 데이터를 사용할 수 있습니다. 이번 업데이트에서는 liquid.browser.min.js와 함께 HTML, CSS, JavaScript를 사용했습니다. 지금까지 모든 것이 잘 작동하고 있습니다. Tom Blanchard님, Polaris와 React를 사용하여 훌륭한 사이트를 만드셨는데, 저는 업데이트를 위한 참고 자료로 사용했습니다.

? 다음은 몇 가지 핵심 사항입니다.

  • ? 단순 데이터: 변수와 같은 단순 데이터를 사용하는 경우 바로 사용할 수 있습니다.
  • ? 복잡한 데이터: 제품, 컬렉션, 사용자 등과 관련된 데이터를 사용하는 경우 JSON 코드를 추가해야 합니다.
  • ? 테스트 API: 사용할 수 있는 더미 테스트 사용자 API를 포함했습니다.
  • ? 기타 테스트 API: Fake Store API에서 다른 테스트 API를 찾을 수 있습니다.

? 사용 방법:

  1. API 또는 JSON이 있는 경우 'JSON 추가' 버튼을 클릭하고 데이터를 추가한 후 팝업을 닫으세요.
  2. input.liquid 필드에 Liquid 코드(예: 루프용 제품)를 추가하고 루프에 제품 제목을 포함합니다.
  3. 그러면 출력 상자에 모든 제품 이름이 표시됩니다.

그렇습니다! 궁금한 점이 있으신 분은 언제든지 DM주세요 ?.
Taylor와 Tom에게 감사드립니다. Shopify REPL 게시물을 공유해주셔서 귀하의 게시물이 제가 이 웹사이트를 만드는 데 영감을 주었습니다.

Shopify Liquid REPL ? : http://liquid-repl.mycodemagic.com

위 내용은 API 및 JSON을 사용한 Shopify Liquid REPL의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿