Documentation

Theme Tweaks For Bootstrap 3

In this document we’ll explain how to set up the theme tweak to display the product “Extra Options” for Kee Subscriptions in your Neto theme.

Bootstrap 3 Features

Some features of our snippet:

  • Show your auto-delivery option separate from your other extra options (if available)
  • Automatically display discount percentage (if available)
  • Automatically selects the cheapest option
  • Retain selected option when selecting different product variation

Example of the auto-delivery box without the theme tweak.

Example of the auto-delivery box with the Keesubscriptions theme tweak.

Bootstrap 3 Installation Instructions

  1. Download our snippet file

Download Bootstrap 3 Code Snippet

2. Place the file in your theme as:

templates/products/includes/keesubscriptions.template.html

3. Identify where in your product template you want to place the auto delivery box.

Important: this position must be a “variation specific” template like header.template.html or buying_options.template.html

4.Paste the following line where you want the box to show up:

[%load_template file:”products/includes/keesubscriptions.template.html”%][%END load_template%]

5. Find your existing [%extra_options%] tag

“templates/products/includes/buying_options.html”) and add the highlighted lines around the *select_option parameter:

Copy-paste from below:

[%if "Auto-delivery Auto-Delivery Auto Delivery" not like [@[email protected]]%]

// ... code

[%/if%]

6. Go to Content Zones

(from Webstore) Add a new content zone called “Keesubscriptions-How”.

This is the text for “How auto delivery works”. You can write your own description or copy and paste the text below, make sure you put it under the Source Code section:

Select the frequency and your items will be delivered to you as often as you prefer. 

Auto Delivery isn't a contract, you are free to cancel anytime.

7. You’ll also need to add a condition around the [%extra_options%]

as it will show only the header title “Extra Options” with no options (if no other options are provided)

[%set [@[email protected]] %][%trim%]

[%extra_options id:'[@[email protected]]'%]

[%/ param%][%param *number_option%][@[email protected]][%/ param%]

[%param *text_option%][@[email protected]][%/ param%]

[%param *select_option%][%if "Auto-delivery Auto-Delivery Auto Delivery" not like [@[email protected]] %][@[email protected]][%/if%][%/ extra_options%]

[%/trim%][%/set%]




[%if [@[email protected]] ne '' %]

[%extra_options id:'[@[email protected]]'%]

// ... code

[%/ extra_options%]

[%/if%]

8. (Optional) The snippet automatically selects the most discounted subscription option, or if there are no discounts, the first subscription option.

To disable this, find the line that contains “autoSelect” in keesubscriptions.template.html and change “true” to “false”:

KeeSubportal on My Account page

1. Go to custom customer fields

(from all settings and tools) and create “Keesubscriptions” for misc3, field type = text, if misc3 is taken use another misc.

2. Go to Custom Sales Order Fields

(from all settings and tools) and create “Keesubscriptions” for misc4, field type = text, if misc4 is taken use another misc.

3. Edit customer template

Go to templates/customer/template.html and find the parent div of id=”orders”

4. Insert Code Snippet

Below the parent div of id=”orders” place the following code, if you used a different misc to set up “Keesubscriptions” in step two, replace the two fields with the proper misc:

<div class="keesubportal-meta">

   <meta name="keesubs-cancel" content='[@[email protected]]'/>

   <meta name="keesubs-cancel-misc" content='misc3'/>

   [%thumb_list type:'orders' limit:'9999'%]

       [%param *body%][%if [@[email protected]]%]

         <script

           class="keesubs-subscription"

           type="application/json"

           data-order-id="[@[email protected]]"

           data-date-placed="[@[email protected]]"

           >

           [@[email protected]]

         </script>

       [%/if%][%/param%]

   [%/thumb_list%]

</div>




<div id="keesubportal" class="col-xs-12"></div>




[%SITE_VALUE id:'footer_javascript'%]

<script type="text/javascript" src="https://s.keesubscriptions.com/keesubportal.js"></script>

[%/SITE_VALUE%]

Note: if you are using any other misc fields – please let us know at [email protected].