Contributor III

Solved

Removing a profile property from Custom Preferences Page

Forum|Forum|4 years ago
June 20, 2022
5 replies
330 views

Hi there,

First, I know that Klaviyo team themselves do not support troubleshooting custom preferences pages, but I hope someone in the community can help.

I have a custom preferences page where, if someone unselects a property, it doesn’t remove it from their profile.

Here’s my code:

<input type="hidden" name="$fields" value="EmailInterests,EmailFrequency,is_b2b,is_personal" />
<input type="hidden" name="$list_fields" value="EmailInterests" />

and

<div class="form-group">
               <label for="purpose" class="col-sm-3 control-label">I am buying for:</label>
               <div class="col-sm-9">
                  <div class="checkbox">
                     <label>
                     <input type="checkbox" name="is_b2b" value="true" {% if person.is_b2b == 'true' or request.POST.is_b2b == 'true' or person.is_b2b == 1 or request.POST.is_b2b == 1 %}checked="checked"{% elif not person.is_b2b and not request.POST.is_b2b %}{% endif %} />
                     Business
                     </label>
                  </div>
               </div>
            </div>
            <div class="form-group">
               <label for="interests" class="col-sm-3 control-label">Interests</label>
               <div class="col-sm-9">
                  <div class="checkbox">
                     <label>
                     <input type="checkbox" name="EmailInterests" value="New Releases" {% if 'New Releases' in person.EmailInterests or 'New Releases' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
                     New Product Releases
                     </label>
                  </div>
                  <div class="checkbox">
                     <label>
                     <input type="checkbox" name="EmailInterests" value="Promotions" {% if 'Promotions' in person.EmailInterests or 'Promotions' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
                     Promotions & Sales
                     </label>
                  </div>
                  <div class="checkbox">
                     <label>
                     <input type="checkbox" name="EmailInterests" value="Blog" {% if 'Blog' in person.EmailInterests or 'Blog' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
                     Latest from the Blog
                     </label>
                  </div>
                  <div class="checkbox">
                     <label>
                     <input type="checkbox" name="EmailInterests" value="Events" {% if 'Events' in person.EmailInterests or 'Events' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
                     Events
                     </label>
                  </div>
               </div>
            </div>

The challenge is that even if someone unchecks and saves, it still doesn’t update the field.

This topic has been closed for replies.

Best answer by BrownieDev

You have 2 inputs with the name of is_b2b, so of course you’re going to get 2 values.

Renaming one of them will fix that.

 <input type="checkbox" id="b2b" name="is_b2b_proxy" value="true"{% if person.is_b2b == 'true' or request.POST.is_b2b == 'true' or person.is_b2b == 1 or request.POST.is_b2b == 1 %} checked="checked"{% elif not person.is_b2b and not request.POST.is_b2b %}{% endif %} />

 <input id="b2bHidden" type="hidden" value="false" name="is_b2b">

Unfortunately disabling the input won’t work the way you want. Disabling the input means it won’t send ANYTHING to the form. You have to specifically send a value to Klaviyo for it to change someone from B2B=True to B2B=False.

<script>
                   form.addEventListener('submit', () => {
               if(document.getElementById("b2b").checked) {
                   document.getElementById('b2bHidden').value = 'true';
               } else {
                   document.getElementById( 'b2bHidden').value='false';
               }
             }
             </script>

BrownieDev

Problem Solver II

That happens because Klaviyo wont set properties to blank values. When unchecked the value is effectively blank so it doesn’t get applied. You have to send a nonblank value instead.

The easiest way to resolve this is to use a radio button or dropdown with Yes and No values.

If you’re like us and want a checkbox then you’re going to have to do some more work.

I created a pair of checkboxes. The first is has visibility equal to hidden, is named after the profile property we are setting is always checked, and the value is set to either checked or unchecked. The second checkbox is not hidden, has a different name and is checked based if that property value == ‘checked’ or not. I created javascript that changes the value of the hidden checkbox to either ‘checked’ or ‘unchecked’ to match the state of the second checkbox. It’s not pretty but it is effective.

tabishAuthor

Contributor III

BrownieDev. Thanks!

I tried a hidden field, but unfortunately, it’s passing both values and the JS I crowdsourced isn’t actually stopping both values from passing.

Intended action wis for it to set to either true or false.

 <input type="checkbox" id="b2b" name="is_b2b" value="true"{% if person.is_b2b == 'true' or request.POST.is_b2b == 'true' or person.is_b2b == 1 or request.POST.is_b2b == 1 %} checked="checked"{% elif not person.is_b2b and not request.POST.is_b2b %}{% endif %} />

 <input id="b2bHidden" type="hidden" value="false" name="is_b2b">

with this JS before submit:

<script>
                   form.addEventListener('submit', () => {
               if(document.getElementById("b2b").checked) {
                   document.getElementById('b2bHidden').disabled = true;
               }
             }
             </script>

but instead of getting a true or false, getting an array inside user profile:

any thoughts on how I can fix this?

BrownieDevAnswer

Problem Solver II

You have 2 inputs with the name of is_b2b, so of course you’re going to get 2 values.

Renaming one of them will fix that.

 <input type="checkbox" id="b2b" name="is_b2b_proxy" value="true"{% if person.is_b2b == 'true' or request.POST.is_b2b == 'true' or person.is_b2b == 1 or request.POST.is_b2b == 1 %} checked="checked"{% elif not person.is_b2b and not request.POST.is_b2b %}{% endif %} />

 <input id="b2bHidden" type="hidden" value="false" name="is_b2b">

Unfortunately disabling the input won’t work the way you want. Disabling the input means it won’t send ANYTHING to the form. You have to specifically send a value to Klaviyo for it to change someone from B2B=True to B2B=False.

<script>
                   form.addEventListener('submit', () => {
               if(document.getElementById("b2b").checked) {
                   document.getElementById('b2bHidden').value = 'true';
               } else {
                   document.getElementById( 'b2bHidden').value='false';
               }
             }
             </script>

tabishAuthor

Contributor III

Gahhhh this isn’t working. I save it and come back to the preferences page and it still shows unchecked.

tabishAuthor

Contributor III

Update! Sorted this out. form wasn’t defined and was throwing a JS error. I went through it. Now the only issue left is that the b2b_proxy always remains true, so dirties up a profile but everything else is working as intended, which is solid!

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials