Posted by: Max Chen | in Mezzanine | 1 year, 11 months ago |

Mezzanine--如何在Mezzanine中加入Subscribe功能

原本想加入此功能, 搜尋的是Mezzanine Subscribe, django-subscribe, 使用上沒深入研究, 至少也不是能直接Installed APP就可以輕易使用的.

後來發現了此Youtube頻道, JustDjango Build an email subscription form with Django and Mailchimp

看來之後, 讓我找到在Mezzanine官方上的第三方插件, mezzanine-mailchimp.

pip install mezzanine-mailchimp

2.Install the app in your Mezzanine project by adding mezzanine_mailchimp to the list of INSTALLED_APPS in your project's settings.py.

3.Configure Api key and List id in:

localhost:8000/admin/conf/setting/

Fields: "Mailchimp Api Key" and "Mailchimp list id".

4.將其提供的templates load進你想要放Subscribe的位置 subscribe_form是其提供的html

我想放在登入按鈕的下面, 因此放入user_panel.html裡面

5.修改suscriber_form.html 似乎原作者使用的版本與我的版本不符合, 因此作以下修改 (1)為了將admin多出來的欄位, 都可以正確的使用到, 需要將TEMPLATE_ACCESSIBLE_SETTINGS加入 ,'MAILCHIMP_LIST_ID','MAILCHIMP_API_KEY','MAILCHIMPFORM_SUSCRIBER_ACTION_FROM','MAILCHIMPFORM_SUSCRIBER_TITLE','MAILCHIMPFORM_EMAIL_FIELD_NAME','MAILCHIMPFORM_SUBMIT_BUTTON','MAILCHIMPFORM_HIDDEN_FIELD_NAME'

一開始在setting中是直接採用預設的, 需要將原本所有預設的值也一併複製過去

完成後, suscriber_form.html修改為以下

```
{% load i18n mezzanine_tags accounts_tags %}
<form class="" action="{{ settings.MAILCHIMPFORM_SUSCRIBER_ACTION_FROM }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
    <div class="">
        <h3>
            {{ settings.MAILCHIMPFORM_SUSCRIBER_TITLE }}
        </h3>
        <div class="">

            <div style="position: absolute; left: -5000px;" aria-hidden="true">
                <input type="text" name="{{ settings.MAILCHIMPFORM_HIDDEN_FIELD_NAME }}" tabindex="-1" value="">
            </div>

            <input type="email"  value="" name="{{ settings.MAILCHIMPFORM_EMAIL_FIELD_NAME }}" class="email" id="mce-EMAIL" placeholder="Email" required>
            <input type="submit" value="{{ settings.MAILCHIMPFORM_SUBMIT_BUTTON }}" name="subscribe" id="mc-embedded-subscribe" class="button">
        </div>
    </div>
</form>
```

如此一來, 你就可以看到你在admin填入的資訊正確顯示了