WooCommerce Store를 위한 Gutenberg와 ShopEngine 통합

드디어 기다림이 끝났습니다! ShopEngine은 이제 호환됩니다 당신과 함께 구텐베르크 블록 편집기. 이전에는 Elementor 창을 통해서만 ShopEngine 위젯에 접근할 수 있었죠?

하지만 이제 ShopEngine을 그 이상으로 사용할 수 있습니다. Elementor를 통해 ShopEngine 위젯에 액세스하는 것 외에도 다음을 활용할 수 있습니다. WooCommerce 매장을 위한 Gutenberg의 ShopEngine. 그러나 구텐베르크에서는 이러한 위젯이 블록으로 표시됩니다.

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

구텐베르크 개요:

WordPress 사용자로서 용어를 잘 알고 있어야 합니다. 구텐베르크. WordPress 블록 편집기라고도 알려진 WordPress 콘텐츠 편집기입니다. 요즘 Gutenberg는 사용 편의성으로 인해 WordPress 사용자들 사이에서 가장 인기 있는 WordPress 편집기입니다. 많은 WordPress 구텐베르크 플러그인 타사 개발자를 통해서도 사용할 수 있습니다.

이전에는 사람들이 또 다른 WordPress 편집기인 “Classic Editor”를 사용하는 데 더 익숙했습니다. 구텐베르크의 출현 이후 사람들은 클래식 편집기에 비해 블록 편집기를 더 많이 수용해 왔습니다. 전문 분야 구텐베르크는 블록 기반 콘텐츠입니다..

단락, 이미지, 버튼 등 각 요소는 블록입니다. 클래식 편집기와 달리 이 블록 기반 콘텐츠 편집기를 사용하면 콘텐츠를 보다 효과적으로 조작할 수 있습니다. 이 블록 편집기의 가장 좋은 부분은 타사 개발자가 사용자 정의 블록을 삽입할 수 있다는 것입니다.

이제부터 ShopEngine의 수많은 기능을 Gutenberg for WooCommerce에서 마음껏 사용할 수 있게 되므로 이것이 바로 우리가 이 유익한 블로그에 집중할 내용입니다. 더 자세히 설명하기 전에 Gutenberg의 ShopEngine 사용자 정의 블록, 왜 우리가 WooCommerce용 ShopEngine과 Gutenberg 통합.

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

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

그렇다면 우리를 만든 것은 WooCommerce를 위해 ShopEngine을 Gutenberg와 통합? 이 질문에 답하기 위해 다음과 같은 데이터를 제시하겠습니다.

에 따라 Gutenstats.blog, 구텐베르크는 지금까지 7,600만 개의 활성 설치를 받았습니다. 게다가 현재까지 구텐베르그와 함께 작성된 게시물은 2억 6,450만 개에 달합니다.

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

ShopEngine과 Gutenberg의 통합이 필요한 몇 가지 이유:

한 가지 점을 강조하겠습니다. 구텐베르크는 단순한 콘텐츠 편집자가 아닙니다. 구텐베르크 프로젝트는 블록 편집기를 전체 사이트 편집 도구 가까운 미래에.

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

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

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

ShopEngine 블록을 밝히기 전에 ShopEngine에는 다음이 함께 제공된다는 점을 명확히하겠습니다. 65개 이상의 위젯, 13개 이상의 모듈, 그리고 수많은 템플릿 Elementor 사용자를 위한 WooCommerce 상점 페이지용입니다. WooCommerce를 위해 ShopEngine과 Gutenberg를 통합한 후 이제 다음에 액세스할 수 있습니다. 구텐베르크의 45개 이상의 ShopEngine 블록.

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

WooCommerce 매장을 위한 Gutenberg의 ShopEngine 블록 중 일부를 살펴보겠습니다.

제품명:

그만큼 상품명 블록은 특정 제품에 대해 단일 페이지에 표시됩니다. 단일 페이지 유형을 선택하여 템플릿을 만든 후 사이드바에서 제품 제목 블록을 클릭하기만 하면 됩니다.

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

상품 목록:

제품 목록에는 WooCommerce 매장에서 판매하는 모든 유형의 제품이 표시됩니다. 상품 목록 블록은 싱글, 상점, 체크아웃, 장바구니 페이지를 포함한 모든 유형의 페이지에 나타납니다. 페이지 유형을 선택한 후 팝업 또는 사이드바에서 제품 목록을 클릭하세요.

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

제품 설명:

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

결제 결제:

Elementor의 Checkout 결제 위젯처럼, Checkout 결제 차단 구텐베르크에서 일합니다. 다음으로 이동하면 "Checkout Payment" 블록을 볼 수 있습니다. 결제 페이지용 템플릿 구축. 그런 다음 WooCommerce 스토어에 필요한 대로 결제 결제 블록을 추가할 수 있습니다.

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

아카이브 제품:

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

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

카트 테이블:

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

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

최근 본 제품:

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

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

마무리:

그렇다면 우리의 이전에 대해 어떻게 생각하시나요? WooCommerce를 위해 ShopEngine을 Gutenberg와 통합? WooCommerce 매장을 위해 Gutenberg에 ShopEngine 블록을 배포한 경험에 대해 알려주십시오.

WooCommerce의 Gutenberg 통합에 대해 긍정적이거나 부정적인 피드백을 제공하는 것을 환영합니다. 또한 통합 프로세스를 간소화하기 위한 귀하의 제안을 받아주시면 감사하겠습니다. 그러나 우리의 작업은 구텐베르크와 ShopEngine 통합 아직 진행 중입니다. 곧 프로젝트가 완료될 예정입니다.