Template Development

What is a Yondo Template?

Included with a Yondo account is a hosted store website. This provides a front-end for your customers to use when browsing your live session listings, video-on-demand and webinar products. A highly customizable template engine provides the web content for this front-end. Every Yondo store uses either a standard template, or a custom installed template. A template is basically a collection of html, css and other standard files you would find on a website.

How do I develop a Template?

Go to the Yondo Partner Network and sign up for a developer account. Here you can create and upload your template, and create a development store to test your template. The editing functions are quite basic, most developers create their template externally and just upload when done.

My template is empty, how do I get started?

Download a Zip of the sample classic template, sample affinity template or sample circular template, and upload it to the files section of your template. This will load the template with the files from the sample template.

Template Structure

A template is made up of template files. These are regular html/liquid files, css, js etc. Templates which require server side rendering have a .liquid extension and use the Liquid template engine.

Root directory /

The root directory contains all of the .liquid files. The names of the .liquid files must match the page to be rendered. See each page section for more information.

Standard template files:

• base.liquid

Pages:

• base.liquid
• cancel-booking.liquid
• checkout.liquid
• checkout-complete.liquid
• dashboard.liquid
• embed-video.liquid
• forgot-password.liquid
• home.liquid
• listing.liquid
• login.liquid
• materials.liquid
• package.liquid
• page.liquid
• profile.liquid
• recording.liquid
• reschedule-booking.liquid
• reset-password.liquid
• search.liquid
• session-archive.liquid
• session-calendar.liquid
• start.liquid
• video-search.liquid
• video.liquid
• webinar-access.liquid
• webinar-attachments.liquid
• webinar-calendar.liquid
• webinar-topic.liquid

Partials:

• custom-fields.liquid
• listing-card.liquid
• portfolio.liquid
• team-member-card.liquid
• video-player-scripts.liquid
• video-player.liquid
• video-purchase-partial.liquid
• video-tab.liquid
• webinar-topic-card.liquid

Assets directory /assets

This contains all of the files you want to reference from within your pages. Things like .css, .less, .js. These files must be in the /assets directory because this is where the asset_url filter references files.

Within the /assets directory you can lay out your files anyway you like, and use sub-directories many levels deep.

.less files

.less files can be used within the /assets directory. They will be processed server side. The sample template uses bootstrap .less files which are compiled dynamically. This allows you to make changes to a few settings in the variables.less to have great impact on your site.

Store varables

.css and .less files within the /assets directory can make use of liquid variables which are pumped into the file from settings related to the store. eg

// assets/style.css
.header {
	background-color: {{ store-header-color }};
}

Current store varables are:

Liquid Markup

Yondo handles most of the standard liqiuid features including:

• Extend (layout / master page). eg {% extends base %} use the base.liquid as the layout/master page.
• Blocks defined in layout page. eg {% block content %} Hello World {% endblock %} fills the content block from the layout page.
• Include (partials / snippets). eg {% include mypartial %} inserts mypartial.liquid into the page.
• For loops.
• If conditions.
• Filters.

More details here: Liquid for Designers

Custom Filters

Yondo has some custom filters which can be used when referencing variables using Liquid.

HTML Filters

• img_tag - takes a URL (relative or absolute) and returns an image tag.
• stylesheet_tag - takes a URL (relative or absolute) and returns a link tag.
• script_tag - takes a URL (relative or absolute) and returns a script tag.
• meta_tags - takes the page name (eg ‘home’, ‘listing’ etc) and returns a series of meta tags used for SEO. This should be added to the <head>.
• local_time - takes a datetime in UTC and returns a script tag which renders the date as the browser’s local time. Requires moment.js.
• from_x - takes a datetime in UTC and returns a script tag which renders the date as a time from now in a human readable format. eg ‘in 5 days’.
• google_analytics_page_view_script_tag - takes Google Tracking Id and and returns Google Analytics script tag.
• google_analytics_event_script_tag - takes Google Tracking Id and return Google Analytics event tracking script tag.

URL Filters

• asset_url - takes a relative reference to a file in the /assets folder and returns a public URL for the file. eg {{ 'css/style.css' | asset_url }} returns a public url for the /assets/css/style.css file. This URL may be served through a CDN for improved speed.

Note: Filters can be chained together. A common usage is like this:
{{ 'css/style.css' | asset_url | stylesheet_tag }} which outputs: <link href='/cdn/1/assets/css/style.css' rel='stylesheet' type='text/css' media='all' />

Money Filters

• money - takes a number and returns a formatted money using the store’s currency symbol. eg ‘$25.00’. Zero is output as ‘Free’.
• money_with_currency - same as money but appends the ISO currency code. eg ‘$25.00 USD’.
• money_with_currency - same as money but drops the currency symbol. eg “25.00’.

JSON Filters

• json - takes the variable and outputs the JSON format. eg 'this is a string variable' or '{ prop: 'value' }'

JSON filter is mostly used for rendering a liquid variable inside a <script> tag to use in javascript. eg:

	<script>
		var listing = {{ listing | json }};
	</script>

Outputs:

    <script>
    	var listing = { name:'sample', price:25 };
    </script>

Template Data

The following data objects are available on different template pages.

Store

This is an object to represent a store. It contains store information about what is the store’s name, logo, header color, alias Url, subdomain Url and setting.

Team Member

This is an object to represent a team member in a store.

Session

This is an object to represent current user’s session. FirstName, LastName, DisplayName and ProfileImage are only shown when a user is logged in.

Listing

This is an object to represent a live session listing. It represents a single class/consultation for a specific duration and price.

Material

This is an object to represent a material attached to a listing. eg worksheet or file download.

Menu

This is an object to represent a custom page.

Paging Information

This is an object to represent paging information for the current result set.

Portfolio

This is an object to represent a portfolio item of a store or a team member.

Portfolio Asset

Site Infomation

This is an object to represent Yondo website details.

Section

This is an object to represent a section provided by a store.

Video

This is an object to represent a video in a store

Video Asset

This is an object to represent a video asset.

File Attachment

This is an object to represent an attachment on a video

Webinar

This is an object to represent a webinar

Webinar Topic

This is an object to represent a webinar topic

Package Object

This is an object to represent a package of 1-to-1 sessions.

Template Pages

This outlines each page in a Yondo store and the properties available to the template.

To view the properties available on a page add .json to the end of the page you are requesting. eg http://yourstore.yondo.com/.json . This can also be used as an API for retrieving data.

Listing

listing.liquid

Contains a single listing provided by a store.

Http Method: GET

Request URL Pattern: /{category}/{name}/{id}

{category}: the name of a category (url safe) {name}: the name of a listing (url safe) {id}: A unique integer identifier of a listing

{category} and {name} are not validated and can essentially contain any string. They are part of the URL for SEO purposes.

Store Landing

home.liquid

The index / home page of a store.

Http Method: GET

Url Pattern: /

Team Member Profile

profile.liquid

Team member’s profile page.

Http Method: GET

Url Pattern: /{displayname}

{ displayname }: an unique display name of a team member

Search Results

search.liquid

Search results page

Http Method: GET

Url Patterns:

• /search?query={query}&page={number}

{query}: keyword used to search listings, videos and webinar topics {number: integer): page number (if page number is not set, it returns the first page of the results)

Checkout Complete

checkout-complete.liquid

Customer Dashboard

dashboard.liquid

Customer’s personal dashboard showing purchases, upcoming/past bookings etc. User must be logged in to access.

Http Method: GET

Url: /dashboard

JSON Endpoint: /dashboard.json

Booking Object

Package Purchase Object

Package Item Object

Liquid Example to redeem package item:

{% for package in packages %}
    Package: {{ package.packageName | escape }} purchased {{ package.purchaseDate | local_time }}
    {% for item in package.items %}
    	{% if item.isBooked == false %}
	    {{ item.listing.image220Url | img_tag:item.listing.title }} 
	    {{ item.listing.title | escape }}
	    <button class="make-booking" data-listing="{{ item.listing.id }}" data-from-package="{{ package.id }}">Book Now</button>    
    	{% endif %}
    {% endfor %}
{% endfor %}
<script src="/bookingplugin.js"></script>

Javascript Example to redeem package when embedded on external site:

<script src="https://yourstore.yondo.com/bookingplugin.js"></script>
<script> 
	// Listing ID and Package Purchase ID must be known. 
	// eg AJAX GET request to https://yourstore.yondo.com/dashboard.json
	var listingId = 1234;
	var fromPackage = 5678;
	bookingcontrol.ShowBookingCalendar(listingId, fromPackage);
</script>

Listing Materials

materials.liquid

Login

login.liquid

Forgot Password

forgot-password.liquid

Reset Password

reset-password.liquid

Package

package.liquid

Landing page for a Package of 1-to-1 sessions.

Http Method: GET

Url: /package/{package-name}/{id}

JSON Endpoint: /package/{package-name}/{id}.json {package-name} is included to be SEO friendly. It can be anything. Only the ID is used.

Custom Page

page.liquid

Video Search

video-search.liquid

Session add to calendar

session-calendar.liquid

Cancel Booking

cancel-booking.liquid

Video on demand

video.liquid

Contains a single video provided by a store.

Http Method: GET

Request URL Pattern: /video/{name}/{id}

{name}: the name of a video (url safe) {id}: A unique integer identifier of a video

{name} are not validated and can essentially contain any string. They are part of the URL for SEO purposes.

Webinar

webinar-topic.liquid

Contains a single webinar topic provided by a store.

Http Method: GET

Request URL Pattern: /webinar/{name}/{id}

{name}: the name of a webinar topic (url safe) {id}: A unique integer identifier of a video

{name} are not validated and can essentially contain any string. They are part of the URL for SEO purposes.

Webinar Access

webinar-access.liquid

Webinar Attachments

webinar-attachments.liquid

Embed Video

embed-video.liquid

Empty Base

empty-base.liquid

Live Session Test

live-session-test.liquid

Recording

recording.liquid

Reschedule Booking

reschedule-booking.liquid

Session Archive

session-archive.liquid

Public API - JSON endpoints

A JSON data feed is made available for all information shown in your Yondo store website. Use this to fetch data from external services.

Accessing the API is simple. Use a http GET request with Accept: application/json header to any public page on your Yondo store website. Alternatively, add .json suffix to any URL on your Yondo store website.

You can browse your store website and when you find the product which you want as JSON data, add .json to the end of the page you are requesting to view the JSON data in your browser. eg http://yourstore.yondo.com/.json .

Note: The JSON endpoint is currently restricted for Cross Origin domains. Speak to our support staff or dev team if you require access to the API from Cross Origin domains.

Resources

Products List (Home)

https://{subdomain}.yondo.com/

This lists all published Products and Team Members.

Example Response (truncated):

{
	"listings": [
		{
			"duration": 30.0,
			"availability": true,
			"materials": [],
			"portfolios": [],
			"teamMember": {
				"profileDescription": "... profile text",
				"country": "United States of America",
				"qualificationsHtml": "",
				"location": "New York, United States of America",
				"bannerImageUrl": null,
				"bookingCountAllTime": 0,
				"bookingCount30Days": 0,
				"id": 1234,
				"firstName": "John",
				"lastName": "Smith",
				"fullName": "John Smith",
				"displayName": "jsmith",
				"url": "/jsmith",
				"profileImageUrl": "..image url",
				"profileThumbUrl": "..image url",
				"profileThumb32Url": "..image url"
			},
			"category": "Consulting",
			"type": "Listing",
			"id": 1234,
			"title": "This is the session title",
			"price": 400.0,
			"image220Url": "..image url",
			"image360Url": "..image url",
			"image580Url": "..image url",
			"url": "/consulting/This-is-the-session-title/1234",
			"descriptionHtml": "... session description",
			"prerequisiteHtml": null,
			"published": true
		}
	],
	"videos": [
		{
			"id": 1234,
			"title": "Double Digit Growth Goals",
			"descriptionHtml": "Lorem ipsum dolor sit amet",
			"author": "John Smith",
			"tags": [
				"Growth",
				"Goals"
			],
			"uploadedDate": "2018-03-15T18:19:09.517",
			"duration": 360,
			"thumbnail220Url": "..image url",
			"thumbnail360Url": "..image url",
			"thumbnail720Url": "..image url",
			"url": "/video/double-digit-growth-goals/1234",
			"rentalPrice": 5.0,
			"rentalPeriod": 2,
			"rentalAvailable": true,
			"subscriptionPrice": 10.95,
			"subscriptionAvailable": false,
			"subscribeAllVideos": true,
			"previewVideoUrl360p": null,
			"fileAttachments": [],
			"published": true,
			"purchasePrice": null,
			"purchaseAvailable": false,
			"availablePurchaseOptions": [
				"rent"
			]
		}
	],
	"webinarTopics": [
		{
			"id": 1234,
			"title": "Growing Your Business",
			"descriptionHtml": "Lorem ipsum dolor sit amet",
			"imageSrc": "..image url",
			"imageThumbSrc": "..image url",
			"duration": 75,
			"price": 0.00,
			"url": "/webinar/growing-your-business/1234",
			"upcoming": [
				{
					"id": 12345,
					"name": "Tech Buzz",
					"startTimeUtc": "2020-12-31T00:00:00Z",
					"maxAttendees": 1000,
					"currentAttendees": 2
				}
			],
			"attachments": []
		}
	],
	"teamMembers": [
		{
			"profileDescription": "... profile text",
			"country": "United States of America",
			"qualificationsHtml": "",
			"location": "New York, United States of America",
			"bannerImageUrl": null,
			"bookingCountAllTime": 0,
			"bookingCount30Days": 0,
			"id": 1234,
			"firstName": "John",
			"lastName": "Smith",
			"fullName": "John Smith",
			"displayName": "jsmith",
			"url": "/jsmith",
			"profileImageUrl": "..image url",
			"profileThumbUrl": "..image url",
			"profileThumb32Url": "..image url"
		}
	]

}

1-to-1 Session detail

https://{subdomain}.yondo.com/{category}/{title}/{id}

This gives detailed data for a single 1-to-1 listing. Get the URL from the url field from the object in the listings array from the Products List.

Example Response (truncated):

{
	"listing": {
		"duration": 30.0,
		"availability": true,
		"materials": [],
		"portfolios": [],
		"teamMember": {
			"profileDescription": "... profile text",
			"country": "United States of America",
			"qualificationsHtml": "",
			"location": "New York, United States of America",
			"bannerImageUrl": null,
			"bookingCountAllTime": 0,
			"bookingCount30Days": 0,
			"id": 1234,
			"firstName": "John",
			"lastName": "Smith",
			"fullName": "John Smith",
			"displayName": "jsmith",
			"url": "/jsmith",
			"profileImageUrl": "..image url",
			"profileThumbUrl": "..image url",
			"profileThumb32Url": "..image url"
		},
		"category": "Consulting",
		"type": "Listing",
		"id": 1234,
		"title": "This is the session title",
		"price": 400.0,
		"image220Url": "..image url",
		"image360Url": "..image url",
		"image580Url": "..image url",
		"url": "/consulting/This-is-the-session-title/1234",
		"descriptionHtml": "... session description",
		"prerequisiteHtml": null,
		"published": true
	},
	"upcomingAvaliability": [
		"2018-08-28T21:00:00Z",
		"2018-08-28T21:30:00Z",
		"2018-08-28T22:00:00Z",
		"2018-08-28T22:30:00Z",
		"2018-08-30T17:00:00Z"
	]
}

Video On Demand detail

https://{subdomain}.yondo.com/video/{title}/{id}

This gives detailed data for a single video on demand title. Get the URL from the url field from the object in the videos array from the Products List.

If the video is free to view without purchasing, the video asset URLs will also be included.

Example Response (truncated):

{
	"video": {
		"id": 1234,
		"title": "Double Digit Growth Goals",
		"descriptionHtml": "Lorem ipsum dolor sit amet",
		"author": "John Smith",
		"tags": [
			"Growth",
			"Goals"
		],
		"uploadedDate": "2018-03-15T18:19:09.517",
		"duration": 360,
		"thumbnail220Url": "..image url",
		"thumbnail360Url": "..image url",
		"thumbnail720Url": "..image url",
		"url": "/video/double-digit-growth-goals/1234",
		"rentalPrice": 5.0,
		"rentalPeriod": 2,
		"rentalAvailable": true,
		"subscriptionPrice": 10.95,
		"subscriptionAvailable": false,
		"subscribeAllVideos": true,
		"previewVideoUrl360p": null,
		"fileAttachments": [],
		"published": true,
		"purchasePrice": null,
		"purchaseAvailable": false,
		"availablePurchaseOptions": [
			"rent"
		]
	}
}

Webinar detail

https://{subdomain}.yondo.com/webinar/{title}/{id}

This gives detailed data for a single webinar topic. Get the URL from the url field from the object in the webinarTopics array from the Products List.

Upcoming webinar sessions are listed in the upcoming field.

Example Response (truncated):

{
	"webinarTopic": {
		"id": 1234,
			"title": "Growing Your Business",
			"descriptionHtml": "Lorem ipsum dolor sit amet",
			"imageSrc": "..image url",
			"imageThumbSrc": "..image url",
			"duration": 75,
			"price": 0.00,
			"url": "/webinar/growing-your-business/1234",
			"upcoming": [
				{
					"id": 12345,
					"name": "Tech Buzz",
					"startTimeUtc": "2020-12-31T00:00:00Z",
					"maxAttendees": 1000,
					"currentAttendees": 2
				}
			],
			"attachments": []
	}
}