Seeking Guidance on Creating Unique Entries for Membership Plans in Webflow with Memberstack Answered

• 

  Chukwudi Onyekwere

  • October 31, 2024 15:19

  Hello,

  Our Member IDs are unique, so you can add the code below to the page your user is redirected to upon signup (e.g., the dashboard) to save unique data to the custom field (assuming the custom field name is path-id). If the custom field already contains data, then nothing happens.

  Remember to replace "prc_IDForGold", "prc_IDForBronze", and "prc_IDForPlatinum" with their respective price IDs from your Memberstack dashboard.

  Feel free to use substrings of the Member ID or modify the entire code as needed.
   

  <script>
  document.addEventListener("DOMContentLoaded", async function () {
      try {
          // Get current member data
          const { data: member } = await window.$memberstackDom.getCurrentMember();
  
          if (member) {
              const planConnections = member.planConnections;
              const pathId = member.customFields && member.customFields['path-id'];
  
              // Define plan ID to name mapping
              const planMap = {
                  "prc_IDForGold": "Gold",
                  "prc_IDForBronze": "Bronze",
                  "prc_IDForPlatinum": "Platinum" // Add other plans as needed
              };
  
              // Find the active plan name from the plan connections
              let activePlanName = null;
              if (planConnections && planConnections.length > 0) {
                  const activePriceId = planConnections
                      .filter(connection => connection.payment)
                      .map(connection => connection.payment.priceId)
                      .find(priceId => planMap[priceId]); // First matching priceId
  
                  if (activePriceId) {
                      activePlanName = planMap[activePriceId];
                  }
              }
  
              // If 'path-id' is empty and we have an active plan, update it
              if (!pathId && activePlanName) {
                  const uniquePathId = `${activePlanName}_${member.id}`; // e.g., Gold_memberID
  
                  // Update the custom field 'path-id' with the unique ID
                  await window.$memberstackDom.updateMember({
                      customFields: {
                          "path-id": uniquePathId
                      }
                  });
                  console.log("path-id updated with:", uniquePathId);
              } else if (!activePlanName) {
                  console.log("No active plan found.");
              }
          }
      } catch (error) {
          console.error('Failed to load Memberstack data:', error);
      }
  });
  </script>

  0
• 

  FireLens Tv

  • November 03, 2024 16:50

  Hello Chukwudi Onyekwere,

  Thank you for your help.

  Here is a well detailed explanation of my project.

  I am currently working on a project that involves creating a contest page using Memberstack, and I would like some assistance to ensure I implement it correctly.

  Project Overview:

  I have created three membership plans in Memberstack, and I want to set up a contest page where users can select a plan, make a payment, and receive a specific number of unique IDs based on their chosen plan. Here are the details:

  1. Membership Plans:

     • Plan 1: 10 unique IDs
     • Plan 2: 20 unique IDs
     • Plan 3: 50 Unique IDs

  2. Unique ID Generation:

     • After a user completes their payment, I want to generate unique IDs for them based on the selected plan. Each member should receive their own set of unique IDs.

  3. Displaying IDs on Dashboard:

     • I would like to display these unique IDs on the member's dashboard page in Webflow after payment is confirmed.

  Could you please provide guidance on the best practices for implementing this functionality? Additionally, any specific documentation or examples related to generating and storing custom fields in Memberstack would be greatly appreciated.

  Thank you for your assistance!

  0
• 

  Chukwudi Onyekwere

  • November 06, 2024 16:54

  Your project sounds exciting!  Here’s a step-by-step guide to help you implement this functionality:

  Step 1: Set Up Membership Plans
  1. **Create Membership Plans**: Ensure you have created the three membership plans in Memberstack:
     - Plan 1: 10 unique IDs
     - Plan 2: 20 unique IDs
     - Plan 3: 50 unique IDs

  Step 2: Payment and Plan Selection
  1. Contest Page Design: Create a contest page in Webflow where users can select their desired membership plan and proceed to payment.
  2. Memberstack Integration: Use Memberstack's attributes to link the payment process to the selected plan. Ensure that the payment button is configured to sign users up for the selected plan.

  Step 3: Unique ID Generation
  1. Custom Script for ID Generation: After payment is confirmed, you will need to generate unique IDs. You can use the JavaScript code below to generate and store the unique IDs in a custom field associated with the user’s profile, feel free to modify it to suit your needs. You can create a custom field in Memberstack to hold these IDs.
  
  

  <script>
  document.addEventListener("DOMContentLoaded", async function () {
      try {
          // Get current member data
          const { data: member } = await window.$memberstackDom.getCurrentMember();
  
          if (member) {
              const planConnections = member.planConnections;
              const pathId = member.customFields && member.customFields['path-id'];
  
              // Define plan ID to name and unique ID count mapping
              const planMap = {
                  "prc_IDForGold": { name: "Gold", count: 10 },
                  "prc_IDForBronze": { name: "Bronze", count: 20 },
                  "prc_IDForPlatinum": { name: "Platinum", count: 50 }
              };
  
              // Find the active plan name and ID count from the plan connections
              let activePlan = null;
              if (planConnections && planConnections.length > 0) {
                  const activePriceId = planConnections
                      .filter(connection => connection.payment)
                      .map(connection => connection.payment.priceId)
                      .find(priceId => planMap[priceId]);
  
                  if (activePriceId) {
                      activePlan = planMap[activePriceId];
                  }
              }
  
              // If 'path-id' is empty and we have an active plan, generate unique IDs
              if (!pathId && activePlan) {
                  const uniquePathIds = Array.from({ length: activePlan.count }, () => 
                      `${activePlan.name}_${member.id}_${Math.random().toString(36).substr(2, 9)}`
                  );
  
                  // Update the custom field 'path-id' with the unique IDs as a comma-separated string
                  await window.$memberstackDom.updateMember({
                      customFields: {
                          "path-id": uniquePathIds.join(",")
                      }
                  });
                  console.log("path-id updated with:", uniquePathIds);
              } else if (!activePlan) {
                  console.log("No active plan found.");
              }
          }
      } catch (error) {
          console.error('Failed to load Memberstack data:', error);
      }
  });
  </script>

  
  Step 4: Display Unique IDs on Dashboard
  1. Dashboard Page Design: Create a member dashboard page in Webflow where users can view their unique IDs.
  2. Fetch and Display IDs: Use the data-ms-member="custom-field-id-goes-here" or our API to fetch the stored unique IDs from the custom field and display them on the dashboard.
    

  Documentation and Resources
  - For more information on creating and managing custom fields in Memberstack, you can refer to the Memberstack Documentation.
  - To learn more about using the Memberstack API for updating member data, check out the API Documentation

  By following these steps, you should be able to create a functional contest page that generates and displays unique IDs based on the selected membership plan. If you have any specific questions or need further assistance, feel free to ask! 😊

  0

Please sign in to leave a comment.