Hiding and Displaying Gated Content on same CMS type using dynamic fields Completed

Post author
Trevor Harwood

I bashed my head against the wall on this but figured out a solution and wanted to pass it along to hide and show gated content to multiple member types on the same CMS template page using dynamic CMS field.

1) Create new "Membership" CMS
2) Get your Gated content ID
3) Add this ID as a field in your new CMS collection
 - I also recommended adding one with the ! so you can hide elements as well (as in data-ms-content=”!members" )

4) Get https://finsweet.com/attributes/cms-attribute 
- Unfortunately, this is paid currently but maybe Memberstack can integrate something like this

Follow the steps there to add Collection to your Template page > Use Finsweet attribute fix to apply this dynamic attribute to any element.

Use case
- I used this to serve and display a popup and then show or hide specific buttons based on what plan they had all on the same template page.

- Lesson page >> Topic >> Show popup upgrade if member does not match gated content IDs

 

 

Comments

7 comments

  • Comment author
    Jan Löhrmann

    Hi Trevor,
    thanks for sharing!

    I might have a similar issue, where I believe your use case could be a solution:

    I want to use Webflow + Memberstack to build a site, where customers can buy online courses. I created a collection for the 'course-overview' page, where customers should be able to buy the respective course (I don't believe the Webflow ecommerce is a good solution, as they seem to only have "shippable goods" in mind but no digital products). On clicking 'buy' I want to let handle Memberstack/Stripe the checkout. Therefore, I'd create an individual plan in Memberstack for each product. The redirect should then lead to an almost identical collection page, which now contains the course material. This page must also be stored in a user account, so that the customers can come back to that page.

    Here is the problem: My 'course overview' collection page must contain the specific ID for the Memberstack plan, so it needs to be dynamical (depending on the course). Could this be done with the Finsweet-Attributes? Do you see another way to avoid all those indivual Memberstack plans but still to redirect the customer only to the specific course he/she has bought?

    Any help is much appreciated!

    Best
    Jan

    1
  • Comment author
    Trevor Harwood

    Yes, this is same issue as me and yes it is possible with the Finsweet Attributes (if not a little confusing...)

    See this page: https://docs.memberstack.com/hc/en-us/articles/10030013731227-Can-I-add-multiple-data-ms-content-attributes-to-same-element-   

    In your case I would assign each course a Plan ID field in the CMS for each course, and then in your course collection page assign a button where the custom attribute is applied to the checkout button --- The redirects for each plan should be handled by Memberstack when you set it up for each plan signup.

     

    1
  • Comment author
    Trevor Harwood

    Should have added on the redirect page you can just apply the data-ms-content=planid for everything at that point. (I have mine redirect to User Dashboard where there are Divs for every Course with data-ms-content=planid applied so they will only show to those members.

    1
  • Comment author
    Duncan from Memberstack

    Thanks so much for posting this solution!! I very much appreciate it 🙏 (and I know it's going to help a lot of people).

    No pressure, but would you be willing to send me a copy of your project? And/or do you have any screenshots you could share from behind-the-scenes?

    0
  • Comment author
    Jan Löhrmann

    Hi both,
    I think there might be a way around buying the Attributes-License:
    I've let ChatGPT write a custom code (yes, because I'm not fit in JS) which have placed on the collection template page in the "before </body> tag" to dynamically set the value of the checkout-button:

    <script>
      // Define a function to set the 'data-ms-price:add' attribute on buttons
      function setButtonPrice(priceid) {
      // Find all buttons with the combo class 'button buy'
      var buyButtons = document.querySelectorAll('.button.buy');
      
      // Set the 'data-ms-price:add' attribute value on each button
      for (var i = 0; i < buyButtons.length; i++) {
        buyButtons[i].setAttribute('data-ms-price:add', priceId);
        }
      }

      // Wait for the Webflow API to load
      Webflow.ready(function() {

      // Define the price ID from the item
      var priceid = "[PRICED >>>> This is the "Add Field" from Webflow in the page settings]";

      // Set the 'data-ms-price:add' attribute on buttons
      setButtonPrice(priceid);
      });
    </script>

    The PRICEID from the collection is retrieved, so that part works. However, clicking the button states 'Price doesn't exist' and the console of the browser gives me the following error message

    Clicking on the link I'm redirected to Error (memberstack.com)

    Do you have any idea what still might go wrong??

    1
  • Comment author
    Duncan from Memberstack

    Hmmm, I'm afraid that error is too advanced for me. Let's see if Nicolas Scott can help us 🤞

    0
  • Comment author
    Trevor Harwood

    FYI, Webflow finally released this: https://webflow.com/feature/use-cms-data-in-custom-attributes

     

     

    1

Please sign in to leave a comment.