Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BD-2916 Add form inputs example response #7190

Merged
merged 2 commits into from
Apr 12, 2024
Merged

BD-2916 Add form inputs example response #7190

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e829b99
BD-2916 Add form inputs example response
rachel-feinberg Apr 9, 2024
b8af48b
Update _docs/_api/endpoints/preference_center/post_create_preference_…
rachel-feinberg Apr 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 172 additions & 1 deletion _docs/_api/endpoints/preference_center/post_create_preference_center.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,10 @@ Refer to the following Liquid tags that can be included in your HTML to generate

{% endraw %}

## Example response
## Example responses

### Create preference center

{% raw %}
```
{
Expand All @@ -99,4 +102,172 @@ Refer to the following Liquid tags that can be included in your HTML to generate
```
{% endraw %}

### Form inputs
rachel-feinberg marked this conversation as resolved.
Show resolved Hide resolved

{% raw %}
```
<!doctype html>
<html lang="en">
<head>
<meta name="robots" content="noindex" />
<title>Email Preferences</title>
<script type="text/javascript">
window.onload = () => {
const globalUnsubscribed = '{{subscribed_state.${email_global}}}' == "unsubscribed";
const globalSubscribedValue = '{{subscribed_state.${email_global}}}' == "opted_in" ? "opted_in" : "subscribed";
const idStates = [
// input format: [API_ID, '{{subscribed_state.${API_ID}}}' == "subscribed"][]
['3d2ae07a-f2ff-4318-bdff-e394f2d3a4ec', '{{subscribed_state.${3d2ae07a-f2ff-4318-bdff-e394f2d3a4ec}}}' == 'subscribed'],['7d89bdc3-4aa1-4592-8b8a-4c8b7161c875', '{{subscribed_state.${7d89bdc3-4aa1-4592-8b8a-4c8b7161c875}}}' == 'subscribed'],['5444d32e-2815-4258-964c-b9690d4ccb94', '{{subscribed_state.${5444d32e-2815-4258-964c-b9690d4ccb94}}}' == 'subscribed']
];

const setState = (id, subscribed) => {
document.querySelector(`#checkbox-${id}`).checked = subscribed;
document.querySelector(`#value-${id}`).value = subscribed ? "subscribed" : "unsubscribed";
};
const setGlobal = (unsubscribed) => {
document.querySelector(`#checkbox-global`).checked = unsubscribed;
document.querySelector(`#value-global`).value = unsubscribed ? "unsubscribed" : globalSubscribedValue;
idStates.forEach(([id]) => {
document.querySelector(`#checkbox-${id}`).disabled = unsubscribed;
});
};

idStates.forEach(([id, state]) => {
setState(id, state);
document.querySelector(`#checkbox-${id}`).onchange = ((e) => {
setState(id, e.target.checked);
});
});
setGlobal(globalUnsubscribed);
document.querySelector(`#checkbox-global`).onchange = ((e) => {
setGlobal(e.target.checked);
});
};
</script>
<style>
body {
background: #fff;
margin: 0;
}
@media (max-width: 600px) {
.main-container {
margin-top: 0;
width: 100%;
}
.main-container .content .email-input {
width: 100%;
}
}
</style>
</head>
<body class="vsc-initialized" style="margin: 0" bgcolor="#fff">
<div
class="main-container"
style="
background-color: #fff;
color: #333335;
font-family:
Sailec W00 Medium,
helvetica,
arial,
sans-serif;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
width: 600px;
padding: 15px 0 5px;
"
>
<div class="content" style="margin-left: 20px; margin-right: 20px">

<div>
<h1
style="color: #3accdd; font-size: 27px; font-weight: 400; margin-bottom: 40px; margin-top: 0"
align="center"
>
Manage Email Preferences
</h1>
<p class="intro-text" style="font-size: 14px; margin-bottom: 20px" align="center">
Select the emails that you want to receive.
</p>
</div>

<form action="{{ preference_center_submit_url }}" method="post" accept-charset="UTF-8">
<div>
<h3 style="font-size: 15px; margin-bottom: 15px; margin-left: 5px; margin-top: 40px">
Email Address: <span class="displayed-email" style="font-weight: 400">{{${email_address}}}</span>
</h3>
</div>
<div class="subscription-groups-holder" style="margin-bottom: 20px"><div class="row" style="border-top-width: 1px; border-top-color: #dddde2; border-top-style: solid; background-color: #fff; padding: 15px 10px 14px;border-bottom: 1px solid rgb(221, 221, 226);">
<label style="color: #27368f; cursor: pointer; font-size: 15px; font-weight: 700;">
<input type="checkbox" id="checkbox-3d2ae07a-f2ff-4318-bdff-e394f2d3a4ec" class="sub_group" style="margin-right: 4px;">
<input type="hidden" name="{% form_field_name :subscription_group 3d2ae07a-f2ff-4318-bdff-e394f2d3a4ec %}" id="value-3d2ae07a-f2ff-4318-bdff-e394f2d3a4ec" />
Sub Group 1
</label>
<p class="subscription-group" style="font-size: 13px; line-height: 1.4em; min-height: 20px; padding-right: 20px; margin: 0 0 3px 23px;">

</p>
</div>
<div class="row" style="border-top-width: 1px; border-top-color: #dddde2; border-top-style: solid; background-color: #fff; padding: 15px 10px 14px;border-bottom: 1px solid rgb(221, 221, 226);">
<label style="color: #27368f; cursor: pointer; font-size: 15px; font-weight: 700;">
<input type="checkbox" id="checkbox-7d89bdc3-4aa1-4592-8b8a-4c8b7161c875" class="sub_group" style="margin-right: 4px;">
<input type="hidden" name="{% form_field_name :subscription_group 7d89bdc3-4aa1-4592-8b8a-4c8b7161c875 %}" id="value-7d89bdc3-4aa1-4592-8b8a-4c8b7161c875" />
Sub Group 2
</label>
<p class="subscription-group" style="font-size: 13px; line-height: 1.4em; min-height: 20px; padding-right: 20px; margin: 0 0 3px 23px;">

</p>
</div>
<div class="row" style="border-top-width: 1px; border-top-color: #dddde2; border-top-style: solid; background-color: #fff; padding: 15px 10px 14px;border-bottom: 1px solid rgb(221, 221, 226);">
<label style="color: #27368f; cursor: pointer; font-size: 15px; font-weight: 700;">
<input type="checkbox" id="checkbox-5444d32e-2815-4258-964c-b9690d4ccb94" class="sub_group" style="margin-right: 4px;">
<input type="hidden" name="{% form_field_name :subscription_group 5444d32e-2815-4258-964c-b9690d4ccb94 %}" id="value-5444d32e-2815-4258-964c-b9690d4ccb94" />
Sub Group 3
</label>
<p class="subscription-group" style="font-size: 13px; line-height: 1.4em; min-height: 20px; padding-right: 20px; margin: 0 0 3px 23px;">

</p>
</div>
</div>

<div class="unsub-all" style="cursor: pointer; font-size: 13px; margin-bottom: 20px" align="center">
<label>
<input type="checkbox" id="checkbox-global" />
<input
type="hidden"
id="value-global"
name="{% form_field_name :email_global_state %}"
/>
<i> Unsubscribe from all of the above types of emails </i>
</label>
</div>

<div>
<input
class="save"
type="submit"
value="Save"
style="
background-color: rgb(71, 204, 163);
color: #fff;
cursor: pointer;
display: block;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 200px;
margin: 0 auto 20px;
padding: 12px;
border-style: none;
"
/>
</div>
</form>
</div>
</div>
</body>
</html>
```
{% endraw %}

{% endapi %}