メールマガジンApp

メールマガジンAppについて

メールマガジンの配信を希望するお客様へ、無料でメールマガジンを配信することができるAppです。 ショップで購入したことがあるお客様に配信ができる機能ですが、ショップページに登録フォームを設置することで、まだ購入したことがないお客様もメールマガジンに登録することができます。

タグ一覧

ブロック

if(条件を満たす場合に表示)

タグ説明
{block:AppsMailMagazine}「メールマガジン App」をインストールしている

変数

タグ説明
{MailMagazineSubscribeTag}「メールアドレス入力欄」と「登録ボタン」を表示する

対応が必要な箇所一覧

いずれかの任意のページ（少なくとも一箇所） ※トップページへの設置を推奨しますが、設置箇所は自由です。

実装方法

ページに「メールマガジンApp」の変数を追加します。 メールマガジン登録フォームだとわかるように見出し、もしくは説明文などを追加してください。

{block:AppsMailMagazine}
    <div>
        メールマガジンを受け取る
        {MailMagazineSubscribeTag}
    </div>
{/block:AppsMailMagazine}

以下のHTMLが展開されます。

<div>
    メールマガジンを受け取る
    <form class="mailMagazineSubscribe_form">
        <div class="x_mailMagazineSubscribe_field mailMagazineSubscribe_field">
            <input class="x_mailMagazineSubscribe_input mailMagazineSubscribe_input" type="email" id="email" maxlength="255" placeholder="info@example.com" required>
            <button class="x_mailMagazineSubscribe_submit mailMagazineSubscribe_submit" type="button">登録</button>
        </div>
        <div class="x_mailMagazineSubscribe_confirm mailMagazineSubscribe_confirm"></div>
    </form>
</div>

メールアドレスを入力して「登録」ボタンをクリックすると、登録処理の結果によって下記のテキストが表示されます。

処理結果テキスト
成功確認メールを送信しました。\nメール内のリンクから登録完了してください。
失敗登録処理に失敗しました。\n時間をおいてからもう一度お試しください。

成功時は以下のHTMLが展開されます。

<div>
    メールマガジンを受け取る
    <form class="mailMagazineSubscribe_form">
        <div class="x_mailMagazineSubscribe_field mailMagazineSubscribe_field" style="display: none;">
            <input class="x_mailMagazineSubscribe_input mailMagazineSubscribe_input" type="email" id="email" maxlength="255" placeholder="info@example.com" required>
            <button class="x_mailMagazineSubscribe_submit mailMagazineSubscribe_submit" type="button">登録</button> 
        </div>
        <div class="x_mailMagazineSubscribe_confirm mailMagazineSubscribe_confirm">確認メールを送信しました。\nメール内のリンクから登録完了してください。</div>
    </form>
</div>

失敗時は以下のHTMLが展開されます。

<div>
    メールマガジンを受け取る
    <form class="mailMagazineSubscribe_form">
        <div class="x_mailMagazineSubscribe_field mailMagazineSubscribe_field" style="display: none;">
            <input class="x_mailMagazineSubscribe_input mailMagazineSubscribe_input" type="email" id="email" maxlength="255" placeholder="info@example.com" required>
            <button class="x_mailMagazineSubscribe_submit mailMagazineSubscribe_submit" type="button">登録</button>
        </div>
        <div class="x_mailMagazineSubscribe_confirm mailMagazineSubscribe_confirm">登録処理に失敗しました。\n時間をおいてからもう一度お試しください。</div>
    </form>
</div>

登録処理中はbutton要素にdisabled属性が付与されます。

<div>
    メールマガジンを受け取る
    <form class="mailMagazineSubscribe_form">
        <div class="x_mailMagazineSubscribe_field mailMagazineSubscribe_field">
            <input class="x_mailMagazineSubscribe_input mailMagazineSubscribe_input" type="email" id="email" maxlength="255" placeholder="info@example.com" required>
            <button class="x_mailMagazineSubscribe_submit mailMagazineSubscribe_submit" type="button" disabled>登録</button>
        </div>
        <div class="x_mailMagazineSubscribe_confirm mailMagazineSubscribe_confirm"></div>
    </form>
</div>

デザインマーケットで販売するテーマを作る時の注意点

  • 「メールマガジンApp」をインストール済み、未インストールのどちらのケースでもデザインが崩れないように実装してください
  • 「メールマガジン登録フォーム」とわかるような見出し、もしくは説明文をつけてください

動作のチェック

動作確認するには下記項目を参考にしてください。

  • 「メールマガジンApp」が、インストールされていない場合、メールマガジン登録フォームが表示されないこと
  • 「メールマガジンApp」が、インストールされている場合、メールマガジン登録フォームが表示されること
    • テキストやボタンの視認性がよいこと
    • 「登録」ボタンを押した後に結果メッセージが表示されること
← お知らせバナーAppFAQ →