How to adjust Memberstack to show each interest and membership plan in separate divs on the user profile? Answered

• 

  A J

  • December 01, 2024 02:29

  Hey ilyas el megarbi, I was testing this use-case out for you. And I have come with a custom code solution as a workaround for both the requirements.

  1. To show the interests field in separate divs, you can make use of the following code:

  <script> 
  document.addEventListener('DOMContentLoaded', () => { window.$memberstackDom.getCurrentMember().then(({ data: member }) => { 
  if (member) { 
  let interests = member.customFields.REPLACE_YOUR_CUSTOM_FIELD_ID.split(','); 
  const container = document.getElementById('REPLACE_MAIN_DIV_ID'); // Have a unique ID for the main div container which will have all interests in them 
  interests.forEach((item) => { 
  const div = document.createElement('div'); 
  const textBlock = document.createElement('span'); 
  textBlock.textContent = item; 
  div.appendChild(textBlock); 
  div.classList.add('REPLACE_DIV_CLASS_FOR_STYLING'); // I have some styling enabled for the div element via a class 
  container.appendChild(div); 
  }); 
  } 
  }); 
  }); 
  </script>

  Make sure to replace custom ID / element ID / element class in appropriate places where I have written in all caps in the code as 'REPLACE...'.

  By adapting the code to target the elements that you have on the site, it should populate the interests in separate divs as you want.

  ---

  2. To show the current member's plans in separate divs, you can make use of the following code:

  <script> 
  window.$memberstackDom.getCurrentMember().then((member) => { 
  if (member.data) { 
  const currentPlanContainer = document.getElementById('REPLACE_MAIN_DIV_ID'); // Have a unique ID for the main div container which will have all plans in them 
  
  const planConnections = member.data["planConnections"]; 
  if (planConnections && planConnections.length > 0) { 
  const planA = "REPLACE_PLAN_ID"; 
  const planB = "REPLACE_PLAN_ID"; 
  const planC = "REPLACE_PLAN_ID"; 
  
  planConnections.forEach(connection => { 
  const div = document.createElement('div'); 
  const textBlock = document.createElement('span'); 
  let planText = ""; 
  
  if (connection.planId === planA) { 
  planText = "Plan A"; 
  } else if (connection.planId === planB) { 
  planText = "Plan B"; 
  } else if (connection.planId === planC) { 
  planText = "Plan C"; 
  } else { 
  planText = "No plans" 
  } 
  
  textBlock.textContent = planText; 
  div.appendChild(textBlock); 
  div.classList.add('REPLACE_DIV_CLASS_FOR_STYLING'); // I have some styling enabled for the div element via a class 
  currentPlanContainer.appendChild(div); 
  }); 
  } 
  } 
  }) 
  </script>

  Make sure to replace custom ID / element ID / element class in appropriate places where I have written in all caps in the code as 'REPLACE...'.

  Once you do that, you can get results as shown in the screenshot. Hope this helps.
  

  0
• 

  Chukwudi Onyekwere

  • December 01, 2024 02:38

  Thanks, A J for sharing. I've also added a little modification to your code in #2 just in case ilyas el megarbi wants to check for PriceIDs too.

  <script> 
  document.addEventListener("DOMContentLoaded", function () { window.$memberstackDom.getCurrentMember().then((member) => { 
  if (member.data) { 
  const currentPlanContainer = document.getElementById('REPLACE_MAIN_DIV_ID'); // Unique ID for the main div container 
  
  const planConnections = member.data.planConnections; 
  if (planConnections && planConnections.length > 0) { 
  const planA = "REPLACE_PLAN_ID_A"; 
  const planB = "REPLACE_PLAN_ID_B"; 
  const planC = "REPLACE_PLAN_ID_C"; 
  const priceA = "REPLACE_PRICE_ID_A"; 
  const priceB = "REPLACE_PRICE_ID_B"; 
  const priceC = "REPLACE_PRICE_ID_C"; 
  
  planConnections.forEach(connection => { 
  const div = document.createElement('div'); 
  const textBlock = document.createElement('span'); 
  let planText = ""; 
  
  // Check for Plan IDs 
  if (connection.planId === planA) { 
  planText = "Plan A"; 
  } else if (connection.planId === planB) { 
  planText = "Plan B"; 
  } else if (connection.planId === planC) { 
  planText = "Plan C"; 
  } 
  
  // Check for Price IDs 
  if (connection.payment && connection.payment.priceId) { 
  if (connection.payment.priceId === priceA) { 
  planText += " (Price A)"; 
  } else if (connection.payment.priceId === priceB) { 
  planText += " (Price B)"; 
  } else if (connection.payment.priceId === priceC) { 
  planText += " (Price C)"; 
  } 
  } 
  
  // Display "No plans or prices" if none of the IDs match 
  if (planText === "") { 
  planText = "No plans or prices"; 
  } 
  
  textBlock.textContent = planText; 
  div.appendChild(textBlock); 
  div.classList.add('REPLACE_DIV_CLASS_FOR_STYLING'); // Apply styling via a class currentPlanContainer.appendChild(div); 
  }); 
  } 
  } 
  }).catch(() => { 
  console.error('Failed to load Memberstack data.'); 
  }); 
  });
  </script>

  0
• 

  ilyas el megarbi

  • December 01, 2024 02:46

  A J Chukwudi Onyekwere thanks a lot for the help, it worked.

  0

Please sign in to leave a comment.