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 Kee Subscriptions in your Neto 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
Bootstrap 4 Installation Instructions
Download our snippet file
2. Place the file in your theme as:
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%]
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 [@[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: