Documentation

Theme Tweaks For Bootstrap 4

In this document we’ll explain how to set up the theme tweak to display the product “Extra Options” for Keesubscriptions in your Maropost Commerce Cloud theme.

Bootstrap 4 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
  • Install self-service portal
Auto Delivery Box Without Theme Tweak

Example of the auto-delivery box without the theme tweak.
Note: you have to have set up a product to have a subscription to see this.

Exmaple With The Keesubscriptions Theme Tweak

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

Bootstrap 4 Installation Instructions

1. Download our snippet file

Download Bootstrap 4 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 (templates > headers > template.template.html) or buying_options.template.html (templates > products > includes > 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%]

In the example screenshot this would be in the buying_options.template.html file, just before the buying-options form tag:

<form class="buying-options">

Note: If the width doesn’t come out to the full column of the parent column, then it’s likely that the [%load…] tag has been placed within one of the column’s rows, instead of beside.

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 [@name@]%]

// ... code                                            

[%/if%]

6. Go to Content Zones

In the Maropost Commerce Cloud dashboard, navigate to: Webstore > Content Zones > Add. 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.

Save!

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

In the buying_options template (products/templates/buying_options.template.html). Add this condition as otherwise it will show only the header title “Extra Options” with no options (if no other options are provided).

Extra Option Condition 
[%set [@extra_options_not_AD@] %][%trim%]

[%extra_options id:'[@SKU@]'%]

[%param *number_option%][@name@][%/ param%]

[%param *text_option%][@name@][%/ param%]

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

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




[%if [@extra_options_not_AD@] ne '' %]

[%extra_options id:'[@SKU@]'%]

// ... 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”:

existing [%extra_options%] tag

Now you’re all set!

Once you set up auto delivery options for your products you will be able to see auto delivery on the product detail page.

Next step

Note: If you are using any other misc fields – please let us know at hello@keesubscriptions.com.