Lelita has recently launched a website project she has been developing over many months - the Easy Sunday Diet. Here's a technical breakdown.

In short the Easy Sunday Diet is an online 13 week course that guides a person through learning what is healthy eating and nutrition. The course includes videos, week-by-week meal plans, over 70 recipes and downloadable shopping lists, all backed by weekly supporting emails. 

On a technical level, it's a platform that allows a visitor to purchase timed access to protected content, adding them to a mailing list for the duration of their membership.

In this post I'll outline how we put the site together and tackled some of the technical challenges.

Framework

It's no surprise to readers of this blog that we used concrete5 to develop this system, specifically version 5.7. It provided the editing features Lelita needed to add and develop the course content, embed videos and continues to provide quick ways to post ongoing structured content like blog posts and further recipes.

composer_recipes.png

Both blog posts and recipes were set up to use the Composer. Attributes were used to store recipe information such as cook time, serve count. 

Styling wise, we used Sass to build our custom theme's styles, using Bourbon Neat for our grids. We put a large focus on mobile appearance as we assessed that for this site more traffic would come from such devices. Analytics has already shown this to strongly be the case!

On some pages we added share links using a technique we've discussed previously. Additionally, we made sure that we included in our theme Open Graph metadata tags for sites such as Facebook to be able to correctly identify recipe and blog post images.

Sharing a recipe page, for example, results in Facebook automatically finding the title and image of the recipe:

metatags.jpg

We are adding OG meta tags to nearly all the websites we build now, to ensure that when website content is shared it looks its best.

Check out the Facebook page for Easy Sunday Diet, to see how the linked articles present.

Permissions

permissions.png

To control access to the protected content (the nutrition guide, meal plans and full recipe archive), advanced permissions in concrete5 were used heavily. 

Not only were they used at a page level, but they were used at the individual block level to customise the experience. Promotional and purchasing related blocks are hidden from logged in members.

In our mind this is one of concrete5's 'killer' features - we can heavily customise individual pages based on the current user, using concrete5's built in controls.

Shop component

Over the last few months we've been assisting with the development of an open/free ecommerce solution for concrete5.7, the Vivid Store. This add-on powers the adding of the membership product to the 'cart' (which doesn't really get seen), the single page checkout and the processing of orders.

On the placement of an order a new user account is created for the customer, with that user account added to a particular user group. That user group then allows access to the protected content. 

To handle credit card payments, we developed our own payment method for the Vivid Store, that handles processing via Pin Payments. As the Vivid Store has a single page checkout, were were able to make the checkout process very streamlined, requiring only two clicks to complete (one for the billing details and one after entering the credit card details). 

product_settings.png

To set up the store to work as a membership system:

  • We created a product in the dashboard for the membership product
  • This product was set to unlimited quantity, no shipping required, with disabled quantity selection
  • Additionally the product was set to create a user account, add the user to a particular user group, and to send the customer directly to the checkout

With these settings in place for a product, the cart isn't displayed, with it being a single click between selecting the product and being presented with the single page checkout screen.

We also customised the receipt emails to match the site branding and meet Australian invoicing requirements. This was a case of copying the email template from the package folder to the top level /applications/mail folder, and using our own HTML code. We were able to use the same responsive email template we used for the weekly emails - the default transaction email cleanly outputs the order details, so it was a 5 minute job to swap them over.

email_example.png

We're very excited about how far Vivid Store has come and we're already developing traditional product based shops using it. We're equally as excited however, about how it also enables the sale of access to protected content. This functionality opens up a wide range of publishing possibilities.

Automatic week tracking

Over the course of the 13 week plan we wanted to highlight what week and then day of the week a members is up to. We didn't want to restrict the access to that content, but simply apply some different styles to the menu and lists of pages.

To determine when a member joined, we only needed three lines of code:

$u = new \User();
$g = Group::getByName('Active Member');
$timeentered = $g->getGroupDateTimeEntered($u);

This time value was then compared against the current time to work out what week they are up to, with that week value being used through the theme and templates to adjust classes on elements. We also calculated what day of the week they were up to, so we could highlight the relevant days on the weekly meal plans.

highlighted_week.png

As is always the case with anything to with programming and dates, It was actually a little more complex than that. 

We needed to work out what day a member was up to relevant to their timezone. We couldn't have the days swapping over based on the server timezone, as that wouldn't line up with someone's actual day.

To work around this we used a little javascript library called jstz to work out a visitor's timezone, getting the browser to store that as a cookie.

Then we used the cookie value to adjust the time and day calculations accordingly. 

The final script to work out the week and week was quite a bit longer - I might post this as a separate post in the future.

Integration with Sendy

A major component of the Easy Sunday Diet concept is the weekly supporting emails that guide a participant through the course, linking to the week's readings and meal guide.

Such email sending is often referred to as a 'drip campaign', where an email list automatically sends timed emails out once a person has subscribed. Although emailing services such as Mailchimp can handle such drip campaigns, we elected to integrate with our already set up Sendy platform.

sendy-logo.jpgIn short, Sendy is a self-hosted email campaign platform, one that integrates with Amazon's SES system to actually send the emails. In Sendy we created an email list, with autoresponder emails corresponding to 7 days, 14 days, 21 days and so on after a subscriber is added.

We wanted to have full control over the appearance of the outgoing emails, and with the costs to send emails via Amazon being trivial (roughly being 10 cents per 1000 emails) it made sense to utilise the platform we already had running.

To automatically add new members to the subscribers list in Sendy, we wrote some code to utilise Sendy's API. This code is triggered on the on_user_enter_group event fired by concrete5 when a user is assigned a user group. 

This meant that regardless of whether we were manually assigning a user group to a user or whether it was the Store component automatically doing this, whenever a customer is assigned a particular user group they are added to the Sendy list behind the scenes.

If you use both Sendy and concrete5 and would like to see this code, let me know and I'll share this code on github.

Video streaming/embedding

In previous projects where we've provided streaming video we've used Amazon's S3 for video storage and serving. This approach works great, but relies on videos being pre-encoded before uploading. We simply wanted to upload directly from our screen recording software (Screenflow) and not have to worry about hosting requirements.

We considered both Youtube and Vimeo for video streaming.

Fairly quickly we had to dismiss Youtube as an option as Youtube's sharing settings are limited to simply having videos as unlisted - there's currently no way to truly make youtube videos a protected asset. 

vimeo.png

Vimeo on the other hand has through its Pro plan the options to lock videos to only be able to be embedded and streamed from a particular website, preventing videos from being viewed anywhere else.

We customised the permissions of Lelita's videos to only be viewable on her website, simplified the player and customised it the Easy Sunday Diet aqua colour.
Then to embed the video it was a simple cut and paste of the embed HTML into concrete5 using an HTML block.

As Vimeo takes care of encoding the video (in multiple formats), has no bandwidth or view limits and provides a seamless cross platform experience, we felt this was very good value.

A complete system

The combination of the the above systems means that Lelita and I have been able to put together a flexible membership platform, utilizing concrete5's permission system to do the majority of the work. Lelita can continue to populate the site with new blog posts and recipes. 

Although we've built membership platforms in the past, we feel that we've been able to put together a very streamlined checkout process, one that is comparable with other systems that are normally custom built for purpose. We have the flexibility to continue to add and edit content, controlling that content with permissions where necessary, and expand the site in the future with further products if the need arises.

It's been a great project to work on, one that showcases Mesuva's skills to develop complex website systems.

Check out the Easy Sunday Diet website and the corresponding Facebook page

-Ryan