Eat Clean Meal Prep

Choose your meal customizer

For this aspect of the site the design team and I did some planning to figure out how we wanted the end result to look, the options that we needed to provide and how the final output would be. It took a lot of back and forth and getting a better understanding of the functionality request to come to a final decision on how the form would work.

After getting the functionality and options squared away the design created the mockups for the client to approve and after approval I went forward with building the form. I first figured out how I wanted to build out the form. I decided to go with Gravity Forms to help save on time because it would make the showing and hiding options based on what was selected a bit quicker. I also knew it would make adding new options go a lot faster as well. After making that decision I moved on to build out the form. I always start by adding all the fields without the conditional logic and once they’ve all been added I add in the conditional logic afterwards. I find that it helps build out the conditional logic faster because I don’t have to go back and fix mistakes that may have happened when adding fields and what not. 

Once the form was built and all the conditional logic had been added I had to add html and javascript for the final result that was at the bottom of the form that would let the user know which meal plan would work best for them based on the options they chose from above, which included an add to cart button. Initially the add to cart button was going to add the meal plan to the cart but at the time of build I wasn’t able to have that functionality so we opted for a View your Meal Plan that would take the user to the product page. To get the View Plan button working  I initially tried to do it through the submission area of the Gravity Forms which after the first few I realized it would take too long to add all of them so I switched to using PHP to generate the link based on the options the user chose. It was a long  if statement that first figured out which tab the user clicked one Individual or Family Meals and it would supply the base link for the URL that it would point to. From there every option had a different value that was appended to the URL that I started with and at the end of the if statement it would return the final link with all the options the use chose so when they went to the product page it would be exactly the same and they could change the options from there if they wanted to. It was a lot of work but once it was done and working it was so rewarding to see all the options get added correctly and link how we needed it to.

Configure Subscription Products

The design team really didn’t like the default look and feel of the product pages you got with WooCommerce so they consulted with me to ensure that the design they had in mind could be done. I assured them it could. I would just need to find a plugin that would account for the desired functionality. I was able to find it then it was time to build out the products. I started with their Classic and Plant Based Meal Plans because they were virtually the same but offered different breakfast options and had different proteins for the meals. The checkmarks made adding options easier since I didn’t need to update pricing for very version of the product; it would instead just add the amount of the new selection. And to make matters even easier I built the Classic Meal Plan first duplicated and made some minor changes to make it the Plant-Based Meal Plan. I did the same build for the Family Meal Plans  but not as many options were needed. After that was all said and done when building the Choose Your Meal Plan product I could select options from the URL so I could make sure the desired outcome would happen and I was very happy to find out that would work.