Solved

Removing a profile property from Custom Preferences Page

  • 20 June 2022
  • 5 replies
  • 167 views
tabish
Rank
Userlevel 1
Badge +3

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.

icon

Best answer by BrownieDev 20 June 2022, 23:00

View original

5 replies

BrownieDev
Rank
Userlevel 1
Badge +2

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. 

 

 

tabish
Rank
Userlevel 1
Badge +3

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?

BrownieDev
Rank
Userlevel 1
Badge +2

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>

 

tabish
Rank
Userlevel 1
Badge +3

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

tabish
Rank
Userlevel 1
Badge +3

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!

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.