Skip to content

Instantly share code, notes, and snippets.

@thilo
Last active October 16, 2018 00:43
Show Gist options
  • Save thilo/7b894f8d7bc6540500be to your computer and use it in GitHub Desktop.
Save thilo/7b894f8d7bc6540500be to your computer and use it in GitHub Desktop.
Embedding cobot plans on your website with JavaScript

README

How it works

The example in example.html will display the list of plans when you copy and paste the code into a file named example.html and open it in a browser.

To show your plans instead of the demo space plans change the value of data-space-id from try to the subdomain of your space.

Using on your existing website

If you want to use the example for your own website copy everything between the first <body> tags and the last <script> part from the example.html into your own website.

The coments in example.html explain what each part does.

<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment