ウィジェット - カードタイプと同じ用途で使用する – KARTEサポートサイト

ウィジェットでカードタイプと同じ用途で使用したい場合の使用例について、下記のようなレイアウトのものを元に説明します。

カード型雛形(PC/モバイル兼用)

ビジュアルタブ内の表示位置を中央に選択してください。

HTML

<div class="karte-temp-whole" krt-if="state==1">
    <div class="karte-temp-inner">
        <div class="karte-temp-close karte-close karte-temp-hover" krt-if="#{close_use}"></div>
        <a class="karte-temp-link" href="#{link}">
            <div class="karte-temp-mainvisual">
                <img src="#{mainvisual}" alt="#{mainvisual_alt}">
            </div>
            <div class="karte-temp-wrap">
                <div class="karte-temp-title">#{title}</div>
                <div class="karte-temp-description">#{description}</div>
                <div class="karte-temp-image">
                    <img src="#{image}" alt="#{image_alt}">
                </div>
                <div class="karte-temp-btn karte-temp-hover">#{btn_text}</div>
            </div>
        </a>
    </div>
</div>

krt-if="state==1"の記述が重要です。ステートが1つの場合でも必ず指定してください。
要約すると、ステートが1に等しい時にそのDOMを表示するという記述になります。
「ステートの設定」で指定したステートがstateに該当するので、ステート切り替えに応じて表示が替わります。

VARIABLESで設定した変数は、#{変数名}という指定方法にしてください。

CSS

.karte-temp-whole {
    min-width: 100%;
    min-height: 100%;
}

任意設定です。適切なスタイルを適用してください。

Script

widget.show();

setTimeout(function(){widget.show()}, Number('#{show_interval * 1000}'));
if("#{auto_close}" === "true" && Number("#{show_interval}") < Number("#{hide_interval}")){
    setTimeout(function(){widget.hide()}, Number('#{hide_interval * 1000}'));
}

widget.show();を実行することで、ウィジェットが表示されるようになりますが、設定しないとウィジェットは表示されません。
これまでのカードタイプでは表示タイミングを調整できませんでしたが、ウィジェットでは表示タイミングの調整が可能です。
setTimeout()内でwidget.show();を実行すると、表示タイミングを調整することができます。

setTimeout()の使用について
テンプレートによっては、VARIABLES内の「隠し」にチェックが入っており、デフォルトでは「ビジュアル」表示されていない場合があります。チェックをオフにしてからご使用ください。