How to build a meal management system in Webflow and MS that handles both creation and subscription updates with dynamic pricing? Answered

Post author
Brudson Media

Hey all,

Have a client which has asked me to build a dynamic meal subscription website using Webflow + Memberstack.

They are a meal subscription company.

You choose how many days you want to eat from them and which meal times. So if you chose 1 breakfast meal and 2 dinner meals you would only be allowed to choose that many meals from each category.

Then you choose different meals to create your own plan, get them delivered to your door and you can change the meals/plan as and when you like.

The tricky bit for me is when someone updates their plan as the new meals will have a different price, therefore the user needs to be charged a different amount which is calculated when they select meals.

Not sure if we need a backend

Is this possible? If so, how difficult would it be?

Comments

10 comments

  • Comment author
    A J

    Okay got it, so the choice depends on the user everytime and it may lead to different packages based on what user selects, meaning you can't have fixed plans for this use-case with a fixed pricing.

    Have you considered Stripe for this use-case? I believe they have options for dynamic pricing checkout and it will calculate the total and have a one-time charge for the user probably. Maybe that would help.

    0
  • Comment author
    Brudson Media

    Exactly yes, which for me is the tricky bit as I've only used Memberstack for set tier pricing plans which are more straightforward.

    I've suggested using Stripe but only as the payment gateway. How would it work in your suggestion?

    I also think the available meals can change week to week A J

    0
  • Comment author
    A J

    Yes, Memberstack can handle plans of any recurring type or also handle one-time payments if the plan prices have a fixed set of pricing.

    Since I have not yet dealt with dynamic pricing of this level, I am not sure about the core specifics, but I am guessing you might need to take a look on what Stripe has to offer by going through the documentation and API and see if custom code would help you in this use-case while integrating it with a payment portal.

    0
  • Comment author
    Brudson Media

    Ok thanks for your help. That sounds like it's outside my skillset so will try and find an alternative solution.

    My original idea was to convert Webflow to Shopify as they would have an app but I'm not sure about that either now!

    0
  • Comment author
    Abdullateef Ademoye

    I think you can build this with Webflow and a custom backend (coded) using stripe as payment gateway.

    0
  • Comment author
    Brudson Media

    Yes that would be great

    0
  • Comment author
    Agha Hussain 
    <!--💙MEMBERSCRIPT #6 v0.1💙 CREATE ITEM GROUPS FROM JSON -->
    <script>
    document.addEventListener("DOMContentLoaded", async function() {
      const memberstack = window.$memberstackDom;  // Function to display nested/sub items
      const displayNestedItems = async function(printList) {
        const jsonGroup = printList.getAttribute('ms-code-print-list');
        const placeholder = printList.querySelector(`[ms-code-print-item="${jsonGroup}"]`);
        if (!placeholder) return;    const itemTemplate = placeholder.outerHTML;
        const itemContainer = document.createElement('div'); // Create a new container for the items    const member = await memberstack.getMemberJSON();
        const items = member.data && member.data[jsonGroup] ? Object.values(member.data[jsonGroup]) : [];
        if (items.length === 0) return; // If no items, exit the function    items.forEach(item => {
          if (Object.keys(item).length === 0) return;      const newItem = document.createElement('div');
          newItem.innerHTML = itemTemplate;
          const itemElements = newItem.querySelectorAll('[ms-code-item-text]');
          itemElements.forEach(itemElement => {
            const jsonKey = itemElement.getAttribute('ms-code-item-text');
            const value = item && item[jsonKey] ? item[jsonKey] : '';
            itemElement.textContent = value;
          });      // Add item key attribute
          const itemKey = Object.keys(member.data[jsonGroup]).find(k => member.data[jsonGroup][k] === item);
          newItem.firstChild.setAttribute('ms-code-item-key', itemKey);      itemContainer.appendChild(newItem.firstChild);
        });    // Replace the existing list with the new items
        printList.innerHTML = itemContainer.innerHTML;
      };  // Call displayNestedItems function on initial page load for each instance
      const printLists = document.querySelectorAll('[ms-code-print-list]');
      printLists.forEach(printList => {
        displayNestedItems(printList);
      });  // Add click event listener to elements with ms-code-update="json"
      const updateButtons = document.querySelectorAll('[ms-code-update="json"]');
      updateButtons.forEach(button => {
        button.addEventListener("click", async function() {
          // Add a delay of 500ms
          await new Promise(resolve => setTimeout(resolve, 500));
          printLists.forEach(printList => {
            displayNestedItems(printList);
          });
        });
      });
    });
    </script>

    Can anyone help with this one i added the code but it is not creating the meal
    site Link: https://fitpak.webflow.io/user-dashboard

    On clicking of add meal button there is a popup of form block
    In console it is giving this error:
    {"data":null}

    Do i need to setup something on memberstack?
    I'm new to memberstack

    0
  • Comment author
    A J

    Hey Agha Hussain, along with the above code you also need to add this memberscript for the complete setup.

    Once you adapt this as per your use-case, ideally the meal name and calories should be visible on Member JSON as well as the user dashboard in the site. Hope this helps.

    0
  • Comment author
    Agha Hussain

    A J Thanks its working now but is there any way it show meal instantly as the user added currently it is showing after you reload the page.

    Check here:
    https://fitpak.webflow.io/user-dashboard

    0
  • Comment author
    A J

    Hey Agha Hussain, for better setup, I would suggest clone this webflow template in your workspace and you can clone the elements and copy paste all the code used here.

    If the setup is customized as of now in the site and you don't want to copy paste the code, you can compare what's missing from the site and have the cloned one as reference. There are chances the site is missing some scripts which you can find in the cloneable template.

    In case adding the script as is, is not rendering the real-time experience, you might want to explore and tweak the scripts a bit to adapt to the pop-up flow that the site has like adding a delay or if possible you can keep the setup as is without the pop-up. The setup approach depends on your requirements and feel free to tweak things up to fit it as well. Hope this helps.

    0

Please sign in to leave a comment.