Display elements & pricing based on customfield & countryfield Answered

Post author
webflow pro guy

Hey everyone, is it possible to display elements based on customfield=specific value?

I know you can show or hide depending on if the field is empty or not, but cant find any info about hiding / showing if a custom value matches a specific value.

I redirect people to a pricing page after sign up, and would like to show different pricing blocks depending on their 'country' field at sign up.

Eg, user signs up from canada, pricing element for canada = show, but pricing for USA = hide.

Looked into metadata conditional visibility but i dont think i can attach this metadata via the sign up form on the frontend?

Thanks for any advice!

Comments

6 comments

  • Comment author
    Shadi null

    It's possible to display/hide items based on a customfield's data!

    But it's something you're gonna have to use rey to help you with.

    I did something similar, mine basically checks if a person offers the services that a project requires, and if it does, it allows them to place a bid, if they dont have that service mentioned in a specific custom field, then they are not able to place a bid 🙂

    To give you a lead,

    Ask rey to write you a JS, where the goal is to check the users custom field id (insert your id here) content, if the custom field value =canada (for example) then show element with ID canada-checkout-portal and hide all other payment portals, if the field custom value ="usa" then show element with ID usa-checkout-portal and hide all other payment portals.

    Or just have all payment portals hidden by default, so the code only has to show the one required

    0
  • Comment author
    webflow pro guy

    Wow Shadi null you never fail to amaze me!

    At first I thought you were referring me to a contractor / memberstack expert but was surprised to see its an AI bot - I didnt even know this existed 🙂

    Will give it a go and let you know if it all works out.

    Thanks again for your time and the value you regularly add to this group

    0
  • Comment author
    Chukwudi Onyekwere

    Hello,

    First, thanks Shadi null for coming through as usual.

    webflow pro guy Here's a code snippet that should work for you. You can modify it where necessary to suit your scenario.

    <script>
    document.addEventListener("DOMContentLoaded", async function() {
    window.$memberstackDom.getCurrentMember().then((member) => {
    if (member.data) {
    var msLocation= member.data["customFields"]["location"];
    var canadaDiv = document.getElementById("canadaDiv");
    var usaDiv = document.getElementById("usaDiv");
    if (msLocation == "canada") { // Check for custom field Location content
    canadaDiv.style.display = "block"); // show the Canada Pricing Div
    usaDiv.style.display = "none"); // hide the USA Pricing Div
    }
    else {
      canadaDiv.style.display = "none"); // hide the Canada Pricing Div
    usaDiv.style.display = "block"); // show the USA Pricing Div
    }
    }
    });
    });
    </script> 
    0
  • Comment author
    webflow pro guy

    Hey Chukwudi Onyekwere

    I modified the code you sent to fit my use case / custom fields but its not working on the live site.

    Im testing with a logged in user that has the correct custom field filled but the code isnt dynamically showing / hiding content.

    <script>
    document.addEventListener("DOMContentLoaded", async function() {
    window.$memberstackDom.getCurrentMember().then((member) => {
    if (member.data) {
    var msCountry= member.data["customFields"]["country"];
    var dollarcheckout = document.getElementById("dollarcheckout");
    var poundcheckout = document.getElementById("poundcheckout");
    if (msCountry == "UK") { // Check for custom field Country content
    poundcheckout.style.display === "block"; // show the UK Pricing Div
    dollarcheckout.style.display === "none"; // hide the USA Pricing Div
    }
    else {
    poundcheckout.style.display === "none"; // hide the UK Pricing Div
    dollarcheckout.style.display === "block"; // show the USA Pricing Div
    }
    }
    });
    });
    </script>

    Could you take a look at my code please?

    0
  • Comment author
    Shadi null

    Correct me if I'm wrong, but should the lines that say

    style.display === "block";

    Actually be

    style.display = "block";

    Same for the none sections

    0
  • Comment author
    Chukwudi Onyekwere

    You're right, Shadi 🤦. Thank you so much for spotting that, I've corrected that in my code. Please webflow pro guy, make that correction as well. If the persists, please share your website URL so I can assist you

    0

Please sign in to leave a comment.