Displaying the members current Plan Answered

Post author
Noah Raskin

How can I display the members current Plan?

Use to be something like data-ms-member="membership" and you used to also be able to do things like data-ms-member="membership.amount" to display the price of that plan. I actually think it was ms-member, but either way, I can’t find an attribute to display the members current plan. I’ve tried data-ms-member="plan" and “plans” and other similar things with no luck.

Comments

3 comments

  • Comment author
    Raquel Lopez

    You'll have to use javascript to populate it. Users can have many plans attached to them. So basically you'll have to look for them in the member object

    Thankfully I had this script saved somewhere. This will look for the main plan id, and sets the text into the selector of your choice. Please read the comments so you understand how it works 🙂

    // First declare which plan ids are your main ones, meaning that you're using MemberStack logic to make sure
    // the user does not have these plans at the same time and the user ALWAYS will have one of these assigned

    window.mainPlansIds = [ // Please replace this with your current plan ids
        "pln_123",
        "pln_456",
        "pln_789"
    ];

    // Request MemberStack the user information
    $memberstackDom.getCurrentMember().then(({ data }) => {
        // Checks if member is logged in
        if (data) {
            // Get which of the main plan ids list the user has
            const mainPlan = data.planConnections.find((plan) => {
                return mainPlansIds.includes(plan.planId);
            });
            if (!mainPlan) {
                throw new Error("Plan Id does not exist in main list"); // Stops execution if plan id is not found
            }
            // Request the info of the current plan
            $memberstackDom.getPlan({ planId: mainPlan.planId }).then(({ data }) => {
                const planName = data.name;
                // Proceed with DOM modification using the planName
                $(yourElem).text(planName) // Replace yourElem with your preferred selector
            })
        }
    }).catch((err) => {
        console.error(err);
    });
    0
  • Comment author
    Duncan Hamra

    Yeah, we don't have anyway to do it yet in 2.0 😞 It's on the to-do list though

    0
  • Comment author
    Noah Raskin
    <script>
      const plans = [
        {
          planId: "pln_all-access-qwu600vm",
          price: "$0"
        },
      ];
      
      const planDomElements = {
          planName: ".plan-name",
        planPrice: ".plan-price"
      }

      async function getMemberPlan() {
        try {
          const { data } = await $memberstackDom.getCurrentMember();

          if (!data) {
            throw new Error('No data');
          }

          const currentPlanDetail = plans.find(planDetail => data.planConnections && data.planConnections.some(plan => planDetail.planId === plan.planId));

          if (!currentPlanDetail) {
            throw new Error("Plan Id does not exist in main list");
          }

          return currentPlanDetail;
        } catch (error) {
          console.error(error);
        }
      }

      async function updateDOM(){
        try {
          const currentPlanDetail = await getMemberPlan();

          if(!currentPlanDetail) {
            throw new Error('No current plan found for given plan Ids');
          }

          const { data } = await $memberstackDom.getPlan({ planId: currentPlanDetail.planId });

          const planName = data.name;
          document.querySelector(planDomElements.planName).textContent = planName;
          document.querySelector(planDomElements.planPrice).textContent = currentPlanDetail.price;

        } catch (error) {
          console.error(error);
        }
      }

      updateDOM();
    </script>

     

    Thanks a lot Raquel Lopez! 🙏

    I updated the code in case you’re interested. ES6, separated functions, no jquery, etc. Oh, and you can add “Price” which is cool too. I wanted to show my members the current plan they are on, and what they’re paying for it.

    0

Please sign in to leave a comment.