thilo/example.html

## readme.md

      
    Raw
  

              readme.md
            
          
    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.

  
## example.html
<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>
	<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>