|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
</head> |
|
<body> |
|
<!-- Template for plans change this to match your needs. {{word}} and [%word%] will be filed with information from your plans. |
|
To find how the template tags work you can read it here: https://mustache.github.io/mustache.5.html. |
|
You can use all attributes of a plan that are documented in our API docs here: https://www.cobot.me/api-docs/plans#show-plan-details --> |
|
<script id="planTemplate" type="text/html"> |
|
<tr class="plan"> |
|
<td class="plan-name">{{name}}</td> |
|
<td> |
|
{{#cycle_costs}} |
|
<p class="price">{{display_price_per_cycle}} {{currency}} for {{cycle_duration}} Month |
|
{{#time_passes}} |
|
</br/><span class="sessions"> |
|
{{#included_per_timespan}} |
|
{{included_per_timespan}} {{name}} included per {{included_timespan}}.<br /> |
|
{{/included_per_timespan}} |
|
</span> |
|
{{/time_passes}} |
|
</p> |
|
{{/cycle_costs}} |
|
</td> |
|
<td> |
|
{{#time_passes}} |
|
<p class="extra_price"> |
|
{{extra_display_price}} {{currency}} per {{name}} {{#discounts_available}}(bulk discounts available){{/discounts_available}} |
|
</p> |
|
{{/time_passes}} |
|
</td> |
|
<td class="plan-description"> |
|
{{description}} |
|
</td> |
|
<td class="cancelation period"> |
|
{{#cancellation_period}} |
|
{{cancellation_period}} days |
|
{{/cancellation_period}} |
|
</td> |
|
{{=[% %]=}} |
|
<td> |
|
<a class="plan-link" href="[%url%]" target="_blank">Sign up for [%name%]</a> |
|
</td> |
|
[%={{ }}=%] |
|
</tr> |
|
</script> |
|
<!-- end of plan template --> |
|
|
|
<p id="welcome"> |
|
<!-- This will be filled with the welcome text. Remove if you don't want to show this --> |
|
</p> |
|
<table id="plans" data-space-id="try"> |
|
<tr> |
|
<th></th> |
|
<th>Price</th> |
|
<th>Extra Passes</th> |
|
<th>Include Features</th> |
|
<th>Cancelation Period</th> |
|
</tr> |
|
<!-- This will be appended with the list of your plans according to the template above. Change the data-space-id attribute to include your subdomain e.g. try from try.cobot.me --> |
|
</table> |
|
</body> |
|
<!-- we use jquery for dom manipulation --> |
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> |
|
<!-- script to handle the provided templates --> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.0/mustache.min.js" type="text/javascript" charset="utf-8"></script> |
|
<!-- script to parse the markdown formating information in your welcome text, if you don't add that you can remove that--> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown.js/0.5.0/markdown.min.js" type="text/javascript" charset="utf-8"></script> |
|
<!-- script to query the information about your space and fill in the templates --> |
|
<script type="text/javascript"> |
|
var CobotFb = { |
|
|
|
renderPlans: function(){ |
|
var $plans = $('#plans'); |
|
var planTemplate = $('#planTemplate').html(); |
|
var space_id = $plans.data('space-id'); |
|
var space_url = "https://www.cobot.me/api/spaces/" + space_id; |
|
var plans_url = "https://" + space_id + ".cobot.me/api/plans"; |
|
var plans_req = $.getJSON(plans_url); |
|
var space_req = $.getJSON(space_url); |
|
|
|
|
|
$.when(space_req) |
|
.fail(function(space_error){console.log('Error getting space', space_error);}) |
|
.done(function(space){ |
|
// welcome text |
|
if($.trim(space.description).length > 0){ |
|
$('#welcome').html(markdown.toHTML(space.description)); |
|
}; |
|
}); |
|
|
|
$.when(space_req, plans_req) |
|
.fail(function(){console.log('Error getting plans');}) |
|
.done(function(space_resp, plans_resp){ |
|
var space = space_resp[0]; |
|
var plans = plans_resp[0]; |
|
|
|
var display_gross = function(){ |
|
return space.price_display == "gross"; |
|
}; |
|
|
|
var gross_price = function(price){ |
|
var tax_multiplier = (1 + parseFloat(space.tax_rate) / 100); |
|
return (Math.round(tax_multiplier * parseFloat(price)) * 100) / 100.0; |
|
}; |
|
|
|
var price_to_display_price = function(price){ |
|
if(display_gross()){ |
|
return gross_price(price); |
|
} else { |
|
return price; |
|
} |
|
}; |
|
|
|
var has_cycle_costs = function(plan){ |
|
return parseFloat(plan.price_per_cycle) > 0 |
|
} |
|
|
|
$.each(plans, function(){ |
|
this.time_passes = this.time_passes.sort(function(a, b){ |
|
return parseFloat(a.price_in_cents) > parseFloat(b.price_in_cents) ? 1 : -1 |
|
}); |
|
// no hidden plans |
|
if(!this.hidden){ |
|
this.cycle_costs = function(){ |
|
return has_cycle_costs(this); |
|
}; |
|
this.extra_display_price = function(){ |
|
var price = price_to_display_price(this.price_in_cents / 100); |
|
return(price); |
|
}; |
|
this.discounts_available = function(){ |
|
return this.discounts.lenght > 0; |
|
}; |
|
this.display_day_pass_price = price_to_display_price(this.day_pass_price); |
|
this.display_price_per_cycle = price_to_display_price(this.price_per_cycle); |
|
|
|
this.url = space.url + '/users/new?plan_id='+ this.id; |
|
var planHtml = Mustache.to_html(planTemplate, this); |
|
$plans.append(planHtml); |
|
} |
|
}); |
|
}); |
|
} |
|
}; |
|
$(CobotFb.renderPlans); |
|
</script> |
|
</html> |
