Click Here Labs가 Atlas로 구성 가능한 상거래를 잠금 해제한 방법

WP 엔진은 현재 에이전시 파트너 프로그램을 통해 WordPress 에이전시의 가장 큰 협업 커뮤니티를 촉진합니다.

DE{CODE} 2023의 이 온디맨드 세션에서는 WP Engine Agency Partner Click Here Labs가 새로운 Atlas BigCommerce 청사진을 사용하여 Combat Corner의 온라인 상점을 재구성한 방법을 알아봅니다. 또한 BigCommerce Blueprint의 데모를 얻을 수 있으므로 10분 만에 자신만의 Atlas 전자 상거래 사이트를 구축할 수 있습니다!

스피커:

• Click Here Labs의 기술 생산 이사, Jonathan Jeter
• WP Engine의 수석 제품 관리자 Bryan Smith

세션 슬라이드:

성적 증명서:

BRYAN SMITH: 안녕하세요, 여러분. 제 이름은 WP Engine의 수석 제품 관리자인 Bryan Smith입니다. 오늘은 Click Here Labs가 Atlas를 통해 구성 가능한 상거래를 어떻게 실현했는지에 대해 이야기하겠습니다.

오늘 나와 함께한 사람은 Click Here Labs의 기술 생산 이사인 Jonathan Jeter입니다. 그는 그곳에서 팀을 이끌고 있습니다. 그들은 WP Engine 대행사 파트너이며 지난 몇 달 동안 Atlas에 최초의 헤드리스 또는 구성 가능한 상거래 고객을 유치하기 위해 매우 긴밀하게 협력한 파트너입니다.

잠시 후에 해당 사례 연구에 대해 자세히 알아보겠지만 그 전에 컴포저블 개발과 관련된 시장 상태에 대해 조금 이야기하고 싶습니다. 따라서 구성 가능하고 헤드리스 – 여기서는 서로 바꿔서 사용할 수 있습니다. 헤드리스는 종종 컴포저블을 의미합니다.

이러한 사이트의 성능이 뛰어나서 그에 대한 수요가 증가하고 있기 때문만은 아닙니다. 사용자 정의가 가능하고 변화하는 기술 환경과 비즈니스 결과가 자주 변경될 수 있는 끊임없이 변화하는 비즈니스 환경에 빠르게 적응할 수 있습니다. 정적인 속도로 동적인 경험을 제공합니다. 이에 대해서는 오늘 나중에 다룰 것입니다.

또한 플랫폼을 변경하지 않고도 확장할 수 있습니다. 오늘 소개할 사례 연구에서 Click Here Labs의 클라이언트는 실제로 전자상거래 백엔드인 BigCommerce를 유지하고 WordPress를 CMS로 통합하고 이 모든 것을 헤드리스 매장으로 가져올 수 있었습니다. 그러나 이 모든 신기술은 종종 비용이 많이 들 수 있기 때문에 지난 몇 년 동안 Atlas를 사용하여 이러한 방식으로 사이트를 구축할 때 가장 심각한 개발 문제점을 해결하는 데 시간을 보냈습니다.

물론 Atlas는 단순한 호스트 그 이상입니다. 프론트엔드 프레임워크 그 이상입니다. 여기에는 API 계층, 사용자 정의 필드 플러그인, 로컬 개발 앱 등 시작하는 데 필요한 모든 것이 있습니다. 그러나 아마도 가장 중요한 것은 학습 커뮤니티와 지원이 있다는 것입니다.

하지만 이러한 모든 도구를 손끝에서 사용할 수 있으므로 의사 결정에 약간의 피로감이 있다고 비난하지는 않습니다. 손끝에 너무 많은 옵션이 있고 청사진이 필요한 경우 시작하기조차 어려울 수 있습니다.

그래서 우리는 청사진을 개발했으며 이를 통해 필요한 모든 코드 플러그인, 콘텐츠 모델, 유료 구조로 시작 사이트를 설정할 수 있습니다. 10분 이내에 시작하고 실행할 수 있습니다. 새 프로젝트를 시작하는 과정을 간소화할 수 있습니다.

그 외에도 플랫폼과 모범 사례를 배우는 데도 도움이 됩니다. 따라서 다음 프로젝트를 준비할 수 있지만 지금까지 우리가 가지고 있던 청사진은 포트폴리오 또는 블로그 유형 사이트와 같은 더 많은 정적 유형 사이트 사용 사례로 제한되었습니다. 동적인 것은 헤드리스 상점입니다.

이것이 우리가 BigCommerce 청사진을 만든 이유입니다. 여기서 잠시 후에 시연할 이 청사진은 WPGraphQL, Atlas Content Modeler, Faust JS 프레임워크 및 몇 가지 새로운 기능인 Atlas 상거래 블록 플러그인으로 사전 구성되어 제공됩니다. 제품 데이터를 WordPress 편집기로 가져온 다음 BigCommerce API에 연결하는 상거래 커넥터를 통해 BigCommerce에서 WordPress로 데이터를 동기화하고 동기화 상태를 유지할 수 있습니다.

그들로부터 콘텐츠 모델을 구축할 수 있으며 해당 블록의 플러그인을 구동할 수도 있습니다. 그래서 이것이 실제로 어떻게 작동하는지 보여주지 않겠습니까? 데모를 시작하겠습니다…

자, 여기 Atlas 페이지의 WP Engine 포털에 있습니다. 따라서 새 Atlas 앱을 만들 때 청사진에서 시작할 수 있으며 여기에는 몇 가지 옵션이 있습니다. 여기서 우리가 할 일은 오른쪽에 있는 BigCommerce 청사진을 선택하는 것입니다.

또한 여기에서 해당 매장을 미리 보거나 GitHub에서 코드를 볼 수도 있습니다. 해당 청사진을 선택하고 계속을 누릅니다. 따라서 다음 단계는 GitHub 계정에 연결하는 것입니다.

그런 다음 우리가 할 일은 우리의 저장소를 여러분의 저장소로 복제하는 것입니다. 따라서 GitHub 계정, 리포지토리 이름을 선택한 다음 Create App을 누르십시오.

이 과정에서 몇 가지 일이 발생합니다. 먼저 WordPress 사이트를 프로비저닝합니다. Atlas 앱용 Atlas 코드를 빌드합니다. 그런 다음 배포됩니다. 이 과정은 보통 5분 정도 걸리지만 여기서는 속도를 높였습니다.

WordPress 사이트가 구축되면 여기 화면에 표시되는 BigCommerce 커넥터에 연결할 수 있습니다. 구성 화면 – 자격 증명을 입력한 다음 해당 제품 동기화를 시작할 수 있습니다.

그리고 이것을 Atlas 샌드박스 계정과 BigCommerce 샌드박스 계정에 연결했습니다. 그리고 해당 BigCommerce 계정에 있는 제품을 가져올 수 있습니다. 약 13개의 데모 제품이 있습니다.

이 초기 동기화 후에는 실제로 업데이트를 잡기 위해 다시 실행할 필요가 없다는 점에 주목하고 싶습니다. 플러그인은 웹후크와 야간 cron 작업을 지원합니다. 그런 다음 해당 제품 가져오기가 완료되면 이미지도 동기화됩니다.

그럼 제품을 살펴보도록 하겠습니다. 좋습니다. 이제 제품을 로드했습니다. 여기 제품 페이지에서 볼 수 있습니다. 이들은 BigCommerce 사이트의 데모 제품입니다.

이 중 하나의 세부 정보 페이지로 이동하면 여기에 표시되는 것은 제목, 이미지, 설명과 같이 가져온 데이터의 모든 필드입니다. 다 있습니다.

이제 WordPress에 있습니다. 동기화되었습니다. BigCommerce 사이트를 변경하면 즉시 업데이트됩니다.

이제 Atlas Content Modeler로 구축한 콘텐츠 모델을 보여드리겠습니다. 이것은 단지 예일 뿐입니다. 그리고 이것들을 염두에 두십시오. 우리가 어떻게 해왔는지 보여주기 위한 출발점입니다.

이러한 콘텐츠 모델은 헤드리스 스토어프론트의 제품 세부 정보 페이지에 전원을 공급하며 여기에서 잠시 후에 살펴보겠습니다. Atlas Content Modeler를 사용한 콘텐츠 모델링의 유연성을 보여주는 예입니다. 자, 다음으로 앞서 이야기한 상거래 차단 플러그인을 보여드리겠습니다.

WordPress의 블록 편집기에서 홈 페이지로 이동합니다. 여기 최신 제품 쇼핑하기 섹션이 있습니다. 이것은 상거래 블록입니다.

그래서 당신이 할 수 있는 것은 블록 유형, 최신 제품, 인기 제품, 보여주고 싶은 디스플레이 수를 선택할 수 있다는 것입니다. 우리는 거기에 4개를 보여주고 있습니다. 이 모든 것은 BigCommerce 측에서 나옵니다. 다음은 판매 항목을 사용하는 방법에 대한 대안으로 페이지 아래쪽에 있는 또 다른 예입니다.

지금까지 콘텐츠 모델과 블록 플러그인을 살펴보았습니다. 다음은 WordPress 사이트에 설치된 모든 것입니다. 앞에서 언급한 모든 플러그인입니다.

좋아요. 여기 우리는 매장에 있습니다. 이것은 URL에서 볼 수 있는 헤드리스 상점입니다. 페이지에서 제품 블록을 볼 수 있습니다.

그리고 이것은 단순한 상점입니다. 정말 출발점이 될 것입니다. 그런 이유로 저희는 최대한 단순하게 유지하려고 노력했습니다. 다음으로 Shop 페이지로 이동합니다.

여기에서 우리의 모든 제품을 볼 수 있습니다. 따라서 이 페이지는 실제로 콘텐츠 모델인 제품 세부 정보 페이지입니다. 하단에 리뷰를 위한 자리가 있는 것을 볼 수 있습니다. 다음 단계는 이것을 장바구니에 추가하는 것입니다.

그리고 카트가 실제로 머리가 없는 것도 볼 수 있습니다. 이 모든 것이 Atlas 프런트 엔드에 있습니다. 이제 결제를 위해 BigCommerce로 리디렉션합니다. 이 청사진의 목적을 위해 우리는 그것이 가장 타당하다고 느꼈지만 다른 모든 것은 헤드리스 Atlas 프런트 엔드에 있습니다.

여기 우리는 상점으로 돌아갑니다. 다음은 정보 페이지입니다. 다양한 페이지 섹션을 배치하여 수행할 수 있는 작업의 예일 뿐입니다. 따라서 그것을 취하고, 사용하고, 배울 수 있습니다. 이것이 바로 여기서 의도한 바입니다. 신속하게 시작할 수 있도록 하는 것입니다.

좋아요, 그게 다입니다. Click Here Labs가 이 청사진을 가져와 실제 클라이언트 사용 사례를 위해 확장한 방법에 대해 자세히 알아보기 위해 Jonathan에게 전달하겠습니다. 당신에게, 조나단.

JONATHAN JETER: 감사합니다, Bryan. 청사진 확장에 대해 이야기하기 전에 먼저 솔루션 계획에 대해 조금 논의하고 싶었습니다. 매우 유연한 구성 가능한 상거래 솔루션을 시작하기 전에 적절한 부분을 사용할 수 있도록 올바르게 계획했는지 확인하고 싶습니다.

그리고 우리는 항상 API 문서와 기능 요구 사항부터 시작합니다. 따라서 이 경우 BigCommerce의 경우 API 설명서를 검토하여 클라이언트가 매장에서 필요로 하는 모든 기능을 API를 통해 사용할 수 있는지 확인했습니다. 그리고 그렇지 않은 경우, 우리는 이러한 요구 사항을 충족할 방법을 계획해야 했습니다.

따라서 해당 계획의 일부로 각 요구 사항이 충족될 위치를 결정해야 합니다. 맞습니까? 기본 BigCommerce를 통합니까? 워드프레스를 통해서인가요? 구축하고 있는 프런트 엔드 애플리케이션을 통해서입니까, 아니면 타사 앱을 통해서입니까?

이 경우 우리는 몇 가지 결정을 내려야 했고 플랫폼이 매우 유연하기 때문에 여기서 주요 목표는 사이트 속도를 높이고 앞에서 말했듯이 프런트 엔드 애플리케이션의 정적 속도를 얻는 것이었습니다. 그래서 우리는 사이트의 모든 부분, Google이 보게 될 사이트의 모든 구성 요소가 헤드리스 프런트 엔드 애플리케이션에 있는지 확인하고 싶었습니다.

그런 다음 예를 들어 Bryan이 카트에 대해 이야기하고 계정 섹션에 대해 이야기했습니다. 그는 그 다른 것들에 대해 이야기했습니다. 다른 시스템에서 작업할 부분은 무엇입니까? 예를 들어, 이 경우 장바구니, 결제, 고객 계정이 기본 애플리케이션 내에서 수행하도록 결정했습니다.

그런 다음 사이트 콘텐츠 – 우리는 고객이 표준 WordPress 인터페이스를 통해 해당 콘텐츠를 편안하게 추가할 수 있도록 올바르게 분류할 수 있는지 확인하고 싶었습니다. 또한 프런트 엔드에서 다른 방식으로 표시할 수 있도록 WordPress 내부의 일부 데이터를 집계했습니다. 이것은 BigCommerce 자체에서 사용할 수 없었던 것일 수 있으며 타사 응용 프로그램을 고려해야 했습니다.

CRM, 추적, 그런 종류의 데이터가 들어오고 나가는 위치 그리고 마지막으로 계획을 세워야 합니다. 프런트 엔드에 구축할 구성 요소는 무엇이며 어디에서 가져올 것인지 데이터는?

따라서 궁극적인 유연성이란 결정을 내려야 할 것이 많고 기본적으로 Atlas에서 사용할 수 있는 모든 도구를 사용하여 전자 상거래 응용 프로그램을 구축하고 있다는 것을 기억하고 기억해야 한다는 것을 의미합니다. 이 경우에는 해당 저장소를 만들 수 있습니다. 그래서 저는 당신이 무엇을 하고 있는지 이해하기 위해 그 계획을 세우는 것이 매우 중요하다는 것을 강조하고 싶었습니다.

그리고 고객과도 이러한 논의를 하고 이것이 우리가 만들고 있는 것이라고 말합니다. 이것이 네이티브 애플리케이션에 남게 될 것입니다. 이것이 프런트 엔드에 있을 것입니다.

암호로 보호되는 부분(예: 내 계정, 청구 내역 등)은 다시 색인화되지 않는 항목입니다. 따라서 프런트 엔드 애플리케이션에 있는 것이 덜 중요합니다. 따라서 일단 파악하고 청사진을 설정하면 이제 시작할 준비가 된 것입니다.

이제 청사진을 확장하자는 얘기죠? 그래서 거기에 무엇이 관련되어 있습니까? 여기에서 프런트 엔드 애플리케이션이 시작되는 것을 볼 것입니다. 이제 매장을 독특하게 만들고 고객이 해야 할 일을 할 수 있도록 추가 부품을 모두 구축해야 합니다.

예를 들어 BigCommerce에는 컴패니언 제품, 고객 그룹과 같은 API에서 사용할 수 있는 몇 가지 기본 기능이 있습니다. 따라서 클라이언트는 여전히 BigCommerce 기본을 사용하여 이러한 동반 제품을 관리하고, 다양한 고객 그룹을 관리하고, 물건이 판매될 때, 할인 코드 등을 관리합니다.

우리는 그 데이터를 가져와 프런트 엔드에 제시하고 있습니다. 플러그인이 BigCommerce에 설치되어 있는 타사 응용 프로그램도 있었습니다. 맞습니까? 제품 커스터마이저가 있습니다.

그런 다음 다른 위치의 데이터(고려해야 하는 데이터). 그런 다음 이러한 구성 요소를 예를 들어 제품 세부 정보 페이지에 구축할 수 있습니다. 사용자 지정이 있는 제품이 있는 경우 – 색상을 변경할 수 있습니다.

로고를 추가할 수 있습니다. 그런 종류의 일을 할 수 있습니다. 이 사용자 정의 프로그램을 사용하면 그렇게 할 수 있습니다. 따라서 이들은 타사 기능을 기반으로 구축된 다른 부분입니다.

마지막으로 프런트 엔드에 직접 내장된 기능이 있습니다. 예를 들어, 제품 비교 매트릭스 – 그래서 우리는 모두 다른 위치에서 이것을 보았습니다. 세 가지 다른 제품을 비교하고, 다른 속성, 비교 방법, 제품을 판매에 묶을 수 있는 기능, 묶음에 대한 할인을 확인하십시오. 그리고 예를 들어 BigCommerce 네이티브에서 사용할 수 있는 것들이 있지만 어떤 이유로 API가 기능을 수행하지 않습니다.

따라서 파일 업로더는 기본적으로 백 엔드에서 다른 기능을 사용하여 프런트 엔드 내에서 만들어야 하는 것의 예입니다. 이것들은 청사진을 확장하기 위해 구축하는 모든 것입니다. 이들 중 일부는 확장 청사진 또는 브라이언이 곧 여기서 이야기할 프리미엄 청사진에 포함될 것입니다.

브라이언 스미스: 고마워요, 조나단. 이제 Atlas 로드맵을 아주 빠르게 다룰 것입니다. 이를 Now, Next 및 Later 열로 분류했습니다.

Now 열 아래에 전자상거래 관련 Atlas 이니셔티브가 굵게 표시되어 있습니다. 왼쪽 아래에는 BigCommerce 청사진이 있습니다. 실시간으로 누구나 지금 바로 사용해 볼 수 있습니다. 우리는 또한 storefront API에 대해 작업하고 있습니다.

이것은 WordPress, BigCommerce 또는 관심 있는 다른 타사 소스의 콘텐츠를 함께 가져오는 데이터 계층입니다. 그래서 여기에 모든 콘텐츠를 통합하는 방법이 있습니다. 현재 베타 테스트를 진행 중이므로 앞으로 진행되는 자세한 내용을 계속 지켜봐 주시기 바랍니다.

다음에는 Shopify 청사진을 작업할 것입니다. 이것은 우리가 BigCommerce에서 수행한 것과 유사한 통합이지만 이 경우에는 Shopify를 사용합니다. 그런 다음 계속 진행하면서 헤드리스 개인화 및 현지화에 초점을 맞출 것입니다. 우리는 이러한 것들이 역동적인 매장에 정말 중요하다는 것을 알고 있습니다. 그리고 Atlas 상거래 플랫폼과 긴밀하게 통합되도록 하고 싶습니다.

따라서 BigCommerce 청사진을 시작할 준비가 되었다면 지금 무료 Atlas 샌드박스 계정을 열어 사용해 볼 수 있습니다. 이미 Atlas 계정이 있는 경우 청사진도 물론 사용할 수 있습니다. 오늘 가서 사용해 보세요.

다음 프로젝트에서 사용해 보세요. 당신의 생각을 알려주세요. 고마워요, 여러분. 오늘 시간을 내 주셔서 감사합니다. 좋은 하루 되세요.