ShopEngine과 WooCommerce Store용 Gutenberg 통합

드디어 기다림 끝! ShopEngine은 이제 Gutenberg 블록 편집기 와 호환됩니다. 이전에는 Elementor 창을 통해서만 ShopEngine 위젯에 액세스할 수 있었습니다.

그러나 이제 ShopEngine은 그 이상을 사용할 수 있습니다. Elementor를 통해 ShopEngine 위젯에 액세스하는 것 외에도 Gutenberg에서 WooCommerce 스토어용 ShopEngine을 사용할 수 있습니다. 그러나 Gutenberg에서는 이러한 위젯이 블록으로 표시됩니다.

사실 Elementor 위젯과 Gutenberg 블록의 기능은 동일합니다. 그렇다면 차이점은 어디에 있습니까? 차이점은 응용 프로그램에 있습니다. Elementor 위젯의 경우 출력을 보려면 지정된 영역에 위젯을 끌어다 놓아야 했습니다. 그러나 Gutenberg 블록의 경우 블록을 클릭하기만 하면 작업이 완료됩니다.

구텐베르크 개요:

WordPress 사용자는 Gutenberg 라는 용어에 익숙해야 합니다. WordPress 블록 편집기라고도 하는 WordPress 콘텐츠 편집기입니다. 오늘날 Gutenberg는 사용 편의성으로 인해 WordPress 사용자들 사이에서 가장 인기 있는 WordPress 편집기입니다. 많은 WordPress Gutenberg 플러그인도 타사 개발자로부터 사용할 수 있습니다.

이전에는 사람들이 다른 WordPress 편집기인 "클래식 편집기"를 사용하는 데 더 익숙했습니다. 구텐베르크의 등장 이후로 사람들은 클래식 편집기보다 블록 편집기를 더 많이 수용하게 되었습니다. Gutenberg의 전문 분야는 블록 기반 콘텐츠 입니다.

단락, 이미지 또는 버튼에 관계없이 이러한 각 요소는 블록입니다. 클래식 편집기와 달리 이 블록 기반 콘텐츠 편집기를 사용하면 더 많은 제어로 콘텐츠를 조작할 수 있습니다. 이 블록 편집기의 가장 좋은 점은 타사 개발자가 사용자 정의 블록을 포함할 수 있다는 것입니다.

그리고 이것이 바로 우리가 이 유익한 블로그에서 집중할 것입니다. 이제부터 ShopEngine의 많은 기능이 WooCommerce용 Gutenberg에서 마음대로 사용할 수 있을 것입니다. Gutenberg에 있는 ShopEngine의 사용자 정의 블록을 확장하기 전에 WooCommerce 용으로 ShopEngine을 Gutenberg와 통합 한 이유를 설명하겠습니다.

ShopEngine을 Gutenberg와 통합해야 하는 이유:

ShopEngine은 처음에 Elementor 전용으로 설계되었습니다. 즉, Elementor만을 위한 WooCommerce 페이지를 구축할 수 있습니다. 하지만 지금은 앞서 언급했듯이 ShopEngine이 Gutenberg와 통합된 후 한 단계 더 발전했습니다.

그렇다면 WooCommerce를 위해 ShopEngine을 Gutenberg와 통합하게 된 이유는 무엇입니까? 이 질문에 답하기 위해 데이터 조각을 제시하겠습니다.

gutenstats.blog에 따르면 Gutenberg는 지금까지 7,600만 개의 활성 설치를 받았습니다. 게다가 지금까지 구텐베르그로 작성된 게시물 2억 6450만 개.

이 데이터 조각은 우리가 ShopEngine의 범위를 Gutenberg로 확장한 이유를 누구에게나 납득시키기에 충분하다고 생각합니다. 수백만 명의 사람들이 콘텐츠 개발을 위해 Gutenberg를 배포하고 있으며 ShopEngine이 제공하는 매력적인 기능을 놓치지 않기를 바랍니다.

ShopEngine이 Gutenberg와 통합된 몇 가지 이유:

Gutenberg가 단순한 콘텐츠 편집자가 아니라는 점을 강조하겠습니다. Gutenberg 프로젝트는 가까운 장래에 블록 편집기를 전체 사이트 편집 도구 로 바꾸는 것을 목표로 합니다.

아이디어는 Gutenberg 편집기를 사용하여 WooCommerce 사이트의 100%를 디자인할 수 있도록 하는 것입니다. 이렇게 되면 구텐베르그에 대한 수요가 급증할 가능성이 있다. 따라서 ShopEngine을 WooCommerce용 Gutenberg와 통합할 가치가 있습니까?

• Gutenberg를 사용하면 콘텐츠를 포함하기 위해 단축 코드를 사용할 필요가 없습니다. 대신 블록을 배포하여 필요한 페이지 요소를 추가할 수 있습니다.
• Gutenberg는 호환성 문제가 없으므로 개발자는 플러그인에 Gutenberg 지원을 쉽게 통합할 수 있습니다.
• Gutenberg는 가벼운 코드를 출력하며 빠른 로딩 도구이기도 합니다.

구텐베르크의 주목할만한 ShopEngine 블록:

ShopEngine 블록에 대해 설명하기 전에 ShopEngine에는 65개 이상의 위젯 , 13개 이상의 모듈 및 Elementor 사용자를 위한 WooCommerce 쇼핑 페이지용 무수히 많은 템플릿 이 포함되어 있음을 분명히 하겠습니다. ShopEngine을 WooCommerce용 Gutenberg와 통합한 후 이제 Gutenberg에서 45개 이상의 ShopEngine 블록에 액세스할 수 있습니다.

WooCommerce 스토어용 템플릿을 구축하기 위해 선택한 페이지 유형에 따라 Gutenberg 블록이 그에 따라 표시됩니다. 또한 빠른 보기, 변형 견본, 제품 비교 및 ​​위시리스트와 같은 모듈에 액세스할 수 있습니다.

WooCommerce 스토어용 Gutenberg의 ShopEngine 블록 중 일부를 살펴보겠습니다.

제품 제목:

제품 제목 블록은 특정 제품의 단일 페이지에 표시됩니다. 단일 페이지 유형을 선택하여 템플릿을 작성한 후 사이드바에서 제품 제목 블록을 클릭하기만 하면 됩니다.

그 직후에 제품 제목이 페이지에 나타납니다. 오른쪽 사이드바에서 제목 태그, 정렬, 색상 및 타이포그래피를 수정할 수 있습니다.

상품 목록:

제품 목록에는 WooCommerce 스토어에서 판매하는 모든 유형의 제품이 표시됩니다. 제품 목록 블록은 단일, 쇼핑, 결제 및 장바구니 페이지를 포함한 모든 유형의 페이지에 나타납니다. 페이지 유형을 선택한 후 팝업 또는 사이드바에서 제품 목록을 클릭합니다.

표시할 제품의 제품 카테고리를 선택했는지 확인하세요. 오른쪽 사이드바에서 제품 목록의 다양한 요소를 선택하고 사용자 지정할 수 있습니다. 페이지당 상품 수, 태그, 판매 배지 표시/숨기기, 할인율 등을 선택할 수 있습니다.

제품 설명:

단일 페이지 템플릿을 생성하면 제품 설명 블록이 사이드바에 표시됩니다. 페이지에 제품 설명을 표시하려면 제품 설명 블록을 클릭하십시오. 설명을 사용자 정의하고 타이포그래피, 색상, 정렬 등을 수정하여 스타일을 지정할 수도 있습니다.

체크아웃 결제:

Elementor의 Checkout Payment 위젯과 마찬가지로 Checkout Payment 블록 은 Gutenberg에서 작동합니다. 결제 페이지의 템플릿 빌드로 이동하면 "결제 결제" 블록을 볼 수 있습니다. 그런 다음 WooCommerce 스토어에 필요한 만큼 체크아웃 결제 블록을 추가할 수 있습니다.

콘텐츠 스타일, 지불 방법, 버튼 등을 변경할 수 있는 옵션이 있습니다. 체크박스 위치, 버튼 색상, 타이포그래피, 테두리 등을 조정할 수 있습니다.

아카이브 제품:

보관된 제품 페이지에는 게시된 모든 제품이 한 곳에 있습니다. WooCommerce용 Gutenberg에서 아카이브 페이지용 템플릿을 만들려면 왼쪽 사이드바로 이동하여 제품 아카이브 블록 을 클릭하십시오. 인벤토리의 모든 제품이 차례로 표시됩니다.

아카이브 제품 페이지는 레이아웃, 콘텐츠, 페이지 매김, 등급 등을 포함한 풍부한 세그먼트를 자랑합니다. 이 페이지에는 제품 제목, 제품 이미지, 제품 가격, 제품 설명, 제품 바닥글 등과 같은 많은 요소가 포함되어 있습니다.

카트 테이블:

장바구니 테이블에는 제품 이름, 가격, 수량, 소계 및 총액을 포함하여 선택한 제품의 모든 세부 정보가 표시됩니다. ShopEngine의 장바구니 테이블 블록 을 사용하면 WooCommerce 장바구니 페이지의 장바구니 테이블을 통해 구매자에게 제품과 관련된 모든 정보를 보여줄 수 있습니다.

콘텐츠를 사용자 정의하고 장바구니 테이블의 다양한 요소를 스타일화하기 위해 오른쪽 사이드바에 매개변수가 표시됩니다. 제품 머리글 및 바닥글 색상, 테두리 색상, 텍스트 색상을 조정할 수 있을 뿐만 아니라 제목, 가격, 수량, 총계 등을 포함한 콘텐츠 섹션을 조정할 수 있습니다.

최근 본 제품:

ShopEngine의 최근 본 제품 블록 을 사용하면 사용자가 WooCommerce 스토어에서 최근에 검색하거나 본 제품을 선보일 수 있습니다. 최근 본 상품은 쇼핑 페이지, 상품 페이지, 장바구니 페이지 등에 표시할 수 있습니다.

다른 블록과 마찬가지로 오른쪽 사이드바에서 최근에 본 제품과 관련된 매개변수를 확인할 수 있습니다. 매개변수를 활용하여 표시할 제품 수 지정, 판매 배지 표시/숨기기, 열 및 행 간격 설정, 제품 이미지 높이 조정 등을 할 수 있습니다.

감기:

그렇다면 ShopEngine을 WooCommerce용 Gutenberg와 통합하려는 움직임에 대해 어떻게 생각하십니까? WooCommerce 스토어용 Gutenberg에서 ShopEngine 블록을 배포한 경험에 대해 알려주십시오.

WooCommerce를 위한 Gutenberg 통합에 대해 긍정적이거나 부정적인 피드백을 제공할 수 있습니다. 또한 통합 프로세스를 간소화하기 위해 귀하의 제안을 받아 주시면 감사하겠습니다. 그러나 ShopEngine과 Gutenberg의 통합 작업은 아직 진행 중입니다. 곧 프로젝트가 완료됩니다.