便利な Optimizely CMS Web コンポーネント |バルトシュ・セクラ

ご存知かどうかはわかりませんが、アドオンで使用できる便利な Web コンポーネントのセットがあります。顧客/パートナーは、ボタン、入力、タイポグラフィなどの共通要素を再利用できるようにするよう何度も求めてきました。ただし、コンテンツ セレクターやイメージ ピッカーなどのより複雑な要素を再利用できるようにすることも非常に便利です。

特別なセットアップやブートストラップを必要とせずに、非常に簡単に使用できるはずです。

現時点では利用可能なコンポーネントはほんのわずかですが、将来的にはさらに多くのコンポーネントが追加される予定です。

• 最適化ボタン
• 入力を最適化する
• 最適化チェックボックス
• 最適化-タイポグラフィー
• optimizely-content-tree – ボタンとして表示され、コンテンツ ツリーのダイアログを開き、選択したコンテンツ リンクを保存します。

作成可能です

optimizely-xxx

宣言的にも命令的にも。

だから両方とも

"h1" text="Hello world">

そして
const optiTypography = document.createElement("optimizely-typography");
optiTypography.tag= "h1";
optiTypography.text = "Hello world";
window.body.appendChild(optiTypography );

許容されます。
たとえば。これは、テスターがいくつかのコンテンツ項目を生成するために使用する単純な管理モードのプラグインです。


これは非常に迅速に作成されたシンプルな内部ツールですが、コンテンツ リンクを手動で入力する必要があるため、使用するのが非常に困難です。コントロールは少し見苦しく、あまりユーザーフレンドリーではありません。
Web コンポーネントを使用すると簡単に改善できます。以下に更新されたコードを示します。




class="container">
    
    

        
"result">
        
class="formField">
            "caption" text="Root id">
            "content-tree">
        
        
class="formField">
            "caption" text="Count">
            "count-input" value="10">
        
        
class="formField">
            "caption" text="Truncate parent">
            "truncate-checkbox">
        
        
class="formField">
            "caption" text="Generate images">
            "truncate-generate-images">
        
        
class="formField">
            "caption" text="Also create notification">
            "truncate-create-notification">
        
        "generate" buttonStyle="highlight" text="Generate">
    

>
    const data = {
        count: 10
    };

    document.getElementById("content-tree").addEventListener("onNodeSelected", (event) => {
        data.root = event.detail.contentLink;
    });

    document.getElementById("count-input").addEventListener("onChange", (event) => {
        data.count = event.detail;
    });

    document.getElementById("truncate-checkbox").addEventListener("onChange", (event) => {
        data.truncateParent = event.detail;
    });

    document.getElementById("truncate-generate-images").addEventListener("onChange", (event) => {
        data.generateImages = event.detail;
    });

    document.getElementById("truncate-create-notification").addEventListener("onChange", (event) => {
        data.createNotification = event.detail;
    });

    document.getElementById("generate").addEventListener("onClick", () => {
        var result = document.getElementById("result");
        result.innerHTML = "Command in progress...";

        var formData = new FormData();
        Object.keys(data).forEach(key => {
            formData.append(key, data[key]);
        });

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                result.innerHTML = xhr.responseText;
            }
        }
        xhr.open("post", "/NewsGeneratorPlugin/Generate");
        xhr.setRequestHeader("Accept", "application/json");
        xhr.send(formData);
    });


そして、それは次のようになります:


ご覧のとおり、イベントの添付は非常に標準的です。カスタム スタイルはなく、すべてがデフォルトの optimizely スタイルシートから継承されます。
Web コンポーネントを使用するには、Web コンポーネントを手動で登録する必要があります。
@Html.Raw(Html.RegisterOptimizelyWebComponents())

または、すでに登録されている CommonLayout.cshtml を使用します (「 Optimizely CMS に管理モード アドオンを追加する方法）