사용자 정의 부품

작은 위젯에는 저장 페이지에 동적 또는 정적 내용을 추가하는 Magento2 기능이 있습니다.

부품 작성

새 부품 단계:
1. widget.xml 파일에 작은 위젯 선언
2. widget.xml 파일에 작은 부품 매개변수 추가
3. 부품 검사
4. 작은 부품에 대한 블록 클래스 만들기
5. 작은 부품의 템플릿 파일 만들기
6. 프런트엔드 디스플레이 확인

widget.xml 파일에 작은 위젯 성명하기

etc/widget.xml 파일에서 이름, 설명 및 블록 클래스와 같은 작은 부품 기본 정보 정의
Karabiner/Widget/etc/widget.xml

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
        <label>New Widget</label>
        <description>This is a New Widget</description>
        <parameters>
            ...
        </parameters>
        <containers>
            ...
        </containers>
    </widget>
</widgets>

module.xml 파일의 Magento_Widget 에 종속성을 추가해야 합니다.
Karabiner/Widget/etc/module.xml

...
<sequence>
    <module name="Magento_Widget" />
</sequence>
...

widget.xml 파일에 작은 위젯 매개 변수 추가

다음 필드 유형을 매개변수로 사용할 수 있습니다.
텍스트
선택
다중 선택
막다
다음 예제에서는 텍스트 및 선택 필드가 추가되었습니다.
Karabiner/Widget/etc/widget.xml

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
        ...
        <parameters>
            <!-- テキスト -->
            <parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">　
                <label>Label</label>
            </parameter>
            <!-- セレクト -->
            <parameter name="size" xsi:type="select" visible="true" required="true" sort_order="20"> 
                <label translate="true">Size</label>
                <options>
                    <option name="s" value="S">
                        <label>S</label>
                    </option>
                    <option name="m" value="M" selected="true">
                        <label>M</label>
                    </option>
                    <option name="l" value="L">
                        <label>L</label>
                    </option>
                </options>
            </parameter>
        </parameters>
    </widget>
</widgets>

부품 검사

캐시 지우기 명령 실행php bin / magento cache：flush 후

   Admin panel > Content > Pages > Homepage(または任意のページ) > Edit

컨텐트 탭에서 부품 삽입 아이콘 을 클릭합니다.

부품에 대한 블록 클래스 작성

블록 클래스는 템플릿 파일에 데이터를 제공하는 클래스입니다.
이러한 유형의 $_template = "widget/test.phtml 템플릿 파일 위치 설정
Karabiner/Widget/Block/Widget/Test.php

namespace Karabiner\Widget\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Test extends Template implements BlockInterface
{
    protected $_template = "widget/test.phtml";
}

부품에 대한 템플릿 파일 작성

프런트엔드에 작은 부품 데이터를 표시하는 템플릿을 작성합니다.
Karabiner/widget/view/frontend/templates/widget/test.phtml

<?php
/** \Karabiner\Widget\Block\Widget\Test $block */
?>
<h3><?= $block->escapeHtml($block->getData('title')) ?></h3>
<h3><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></h3>

프런트엔드에서 표시 확인

다음 명령을 사용하여 Magento 캐시를 제거합니다.

php bin/magento cache:flush

이제 작은 위젯이 전면에 표시됩니다.