member_update_form
This component renders a contact update form for a specified CRM contact so that a CRM Admin role, who is logged in to the front-end, can update the specified contact’s CRM info or secure zone subscriptions.
This is useful when creating front-end functionality intended for website administrator use when editing CRM contact information is required.
{% component type: "member_update_form" %}
This component is only used for logged in members with the CRM Admin User Role assigned.
Due to GDPR and privacy regulations CRM contact records will only be output by this component if the "Allow listing my contact data in the CMS" option has been enabled in the users CRM record. This option can only be checked by the user during the submission of the "Update Account Form" or a web Form with the "Allow listing my contact data in the CMS" field added to it.
Parameters and Options
member_update_form
This is the name of the entity that needs to be used for the component retrieving function.
<path/to/layout>
If an empty string, nothing will be rendered.
If paramater is not included, the default virtual layout will be rendered (see below).
subscriptions
info
info Renders a form that allows updates to the contact's general CRM info.
If an empty string or not included, no data or layout will be returned.
<ContactID>
If an empty string or not included, no data or layout will be returned.
<yourLiquidVariableName>
Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.
Liquid Output
The below example is the default structure you will get from this Component (with source subscriptions
added to the component to output the secure zone subscription status).
{
"Member": {
"Id": 1442,
"Email": "alextest@test.com",
"FirstName": "Alex",
"LastName": "Smith",
"Address": null,
"City": null,
"State": null,
"ZipCode": null,
"Country": null,
"BillingAddress": null,
"BillingCity": null,
"BillingState": null,
"BillingZipCode": null,
"BillingCountry": null,
"Site": null,
"Phone": null,
"Status": null,
"Notes": null,
"Type": "Consumer",
"IsDataUsingAllowed": false,
"CreatedDateTime": "2022-12-17T02:48:22.582557",
"UpdatedDateTime": "2022-12-17T02:48:22.588027",
"CrmType": "Member",
"IsEmailVerified": true,
"SecureZones": [
{
"Name": "Member Zone",
"LandingPageId": 1971,
"CreatedDateTime": "0001-01-01T00:00:00",
"UpdatedDateTime": "0001-01-01T00:00:00",
"ExpiryDateTime": "9999-01-01T00:00:00",
"Id": "14198",
"IsSubscribed": true
},
{
"Name": "Premium Zone",
"LandingPageId": 2075,
"CreatedDateTime": "0001-01-01T00:00:00",
"UpdatedDateTime": "0001-01-01T00:00:00",
"ExpiryDateTime": "9999-01-01T00:00:00",
"Id": "12989",
"IsSubscribed": false
}
]
}
}
Virtual Layout
info
source
When not using any custom layout and with the source parameter set to info
, the system layout will output a contact update form with the default system fields, eg:
If your site uses Advanced CRM Group fields to extend the CRM Contact info, you can add those fields to this form as well - which you can find the syntax for in the Advanced CRM Group documentation.
<form action="/forms/members/update-member.ashx" method="POST" enctype="multipart/form-data">
<input type="hidden" name="userid" value="{{this.member.id}}"/>
<label for="email">Email</label>
<input type="text" name="email" value="{{this.member.email}}"/>
<label for="firstName">First name</label>
<input type="text" name="firstName" value="{{this.member.FirstName}}"/>
<label for="lastName">Last name</label>
<input type="text" name="lastName" value="{{this.member.LastName}}"/>
<label for="country">Country</label>
<input type="text" name="country" value="{{this.member.Country}}"/>
<label for="state">State</label>
<input type="text" name="state" value="{{this.member.State}}"/>
<label for="city">City</label>
<input type="text" name="city" value="{{this.member.City}}"/>
<label for="address">Address</label>
<input type="text" name="address" value="{{this.member.Address}}"/>
<label for="zipCode">ZipCode</label>
<input type="text" name="zipCode" value="{{this.member.ZipCode}}"/>
<label for="Payment_BillingCountry">Billing Country</label>
{% component type:"countries", collectionVariable:"Payment_BillingCountryList", layout:"" %}
<select id="MemberAccountForm_Payment_BillingCountry" name="Payment_BillingCountry">
<option value="">Please Select</option>
{% for country in Payment_BillingCountryList.items %}
<option value="{{country.Code}}">{{country.DisplayName}}</option>
{% endfor %}
</select>
<label for="Payment_BillingState">Billing State</label>
<input type="text" name="Payment_BillingState" value="{{this.member.BillingState}}">
<label for="Payment_BillingCity">Billing City</label>
<input type="text" name="Payment_BillingCity" value="{{this.member.BillingCity}}">
<label for="Payment_BillingAddress">Billing Address</label>
<input type="text" name="Payment_BillingAddress" value="{{this.member.BillingAddress}}">
<label for="Payment_BillingZipCode">Billing ZIPCode</label>
<input type="text" name="Payment_BillingZipCode" value="{{this.member.BillingZipCode}}">
<label for="phone">Phone</label>
<input type="text" name="phone" value="{{this.member.Phone}}"/>
<label for="site">Site</label>
<input type="text" name="site" value="{{this.member.Site}}"/>
<label for="status">Status</label>
<input type="text" name="status" value="{{this.member.Status}}"/>
<label for="notes">Notes</label>
<input type="text" name="notes" value="{{this.member.Notes}}"/>
<label for="password">Password</label>
<input type="password" name="password">
<script>
(function() {
var inputs = document.getElementById('MemberAccountForm_Payment_BillingCountry');
if (inputs) {
var value = '{{this.member.BillingCountry}}';
var inputsCount = inputs.length;
for (var i = 0; i < inputs.length; i++) {
if (value == (inputs.options[i].value)) {
inputs.options[i].selected = true;
break;
}
}
}
})();
</script>
<input type="submit" value="Save">
</form>
subscription
source
When not using any custom layout and with the source parameter set to subscriptions
, the system layout will output a contact update form with all the available secure zone fields (with currently subscribed zones checked), eg:
<form action="/forms/members/update-subscriptions.ashx" method="POST" enctype="multipart/form-data">
<input type="hidden" name="userId" value="{{this.member.id}}"/>
{% for zone in this.member.securezones %}
<input type="hidden" name="SecureZone[{{zone.id}}][id]" value="{{zone.id}}"/>
<input id="SecureZoneSubscribed_{{zone.id}}" type="checkbox" name="SecureZone[{{zone.id}}][isSubscribed]" value="true" {% if zone.isSubscribed == true %}checked="checked"{% endif %} />
<label for="SecureZoneSubscribed_{{zone.id}}">{{zone.name}}</label>
<label for="SecureZoneExpireDate_{{zone.id}}">Expiry Date</label>
<input id="SecureZoneExpireDate_{{zone.id}}" type="datetime-local" name="SecureZone[{{zone.id}}][expiryDateTime]" value="{{zone.expiryDateTime | date: '%Y-%m-%dT%H:%M'}}">
{% endfor %}
<input type="submit" value="Save">
</form>
Accessing the Data
JSON Output
You can output the full JSON for your component data by referencing the root Liquid object {{this}}
in your module’s layouts, or directly on your page, if using the collectionVariable
parameter in your component tag.
For example:
{% component type: ... collectionVariable: "myData" %}
You can then render the JSON like so:
{{myData}}
For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.
Rendering Property Values
This data is also accessible directly on the Page or Template via a Liquid Collection by adding collectionVariable
to the Component.
An example using collectionVariable
with value "memberData":
{% component type: ... collectionVariable: "memberData" %}
Accessing the member item within the collection we could render a specific value, such as the member's last name: Smith
{{memberData.Member.['LastName']}}