With the JS Implementation there may be cases when you need some extra customization that does not come out of the box. It is easy to hook into events fired by the JS Implementation (or its plugins) and provide your custom JavaScript handlers, use custom CSS or to configure your instance so that your adjustments are possible.

List of common customization:

Custom styling

Out of the box, the JS Implementation and its plugins come pre-styled with some basic default CSS styling. If you wish to change these styles you can override the default classes with your own. Every semantic block has an identifying class name following the same naming convention. The easiest way to look up a specific class for you to override, is to right-click on an element and inspect it in your browser's Development Tools:

Search for CSS classes in DevTools (click to enlarge)

There you can also see which default styles are applied on an element. To change, for example, the background color on the left sidebar, insert this snippet into your site's HTML:

<style>
.twn-starter .twn-starter__left {
  background-color: red;
}
</style>

If your styles are not getting applied it is important to be specific with your CSS selectors, especially if you define your overriding styles in another stylesheet file, as opposed to creating a new <style> tag in your HTML. Competing declarations have different specificity and might not be picked up by the browser. For that reason be sure to include e.g. a parent element's class in your CSS rule. You can also consider prepending your selectors with the root class to contain your changes inside, if there ever was another element with the same class outside the implementation. For JS Implementation .twn-starter, for Recommendations JS .twn-slider__wrapper, for Guided Selling JS .twn-guided-selling and for Suggestions JS .twn-suggestions.

VAT price switcher

It is common for webshops to show two different pricings for products, for example prices with and without VAT that customers can toggle based on their needs. If you do have this price switcher on your site it is possible to show both types of prices in the markup of your product tile, each with different CSS class applied. Based on these classes you may then toggle the visibility.

Example

<html>
  <head>...</head>
  <body class="pricing-vat-included">
    ...
  </body>
</html>

 /* Pricing including VAT */
.pricing-vat-included .price-excluding {
	display: none;
}

.pricing-vat-included .price-including {
	display: block;
}

 /* Pricing excluding VAT */
.pricing-vat-excluded .price-excluding {
	display: block;
}

.pricing-vat-excluded .price-including {
	display: none;
}

/*
 * Do not forget to set the right class on each page load based on the value of your switcher
 */

// Function to toggle between classes
function togglePricing(value) {
  if (value === 'excluding') {
    document.body.classList.remove("pricing-vat-included");
    document.body.classList.add("pricing-vat-excluded");
  } else {
    document.body.classList.remove("pricing-vat-excluded");
    document.body.classList.add("pricing-vat-included");
  }
}

Note that this is just a raw example of a possible solution and it may differ, including the CSS class names, based on the details of your implementation.

📘
If you use Recommendations JS or Guided Selling JS together with the JS Implementation these plugins will by default inherit your product tile, therefore this will apply to them as well.

Price filters

Filters in your filter templates are always linked to only one property. Therefore, if you have a price filter it will only be relevant for one type of price that your feed contains. For your other property simply create another price filter, place it right underneath the first one and add relevant CSS classes in the Advanced options tab in the detail of both filters. Then you will be able to toggle the visibility of the relevant filter together with prices on your product tiles with your switcher.

Suggestions JS

The product suggestions in this plugin do not use the same product tile and it is not possible to add more than the default price in the component's markup. If you wish to show different pricing here you will need to use some custom JavaScript. To make this easier this plugin fires an event when everything is ready:

tweakwiseSuggestions({  
  on: {    
    // You can use this event to manipulate content within suggestions container
    'twn.suggestions.container.open': function () {  
      var shouldChangePricing = ... // Based on your VAT switcher value 
      if (!shouldChangePricing) return;
      
      // Query product suggestion container block
      var block = document.querySelector("[data-suggestion-type='Product']");
      if (!block) return;
      
      // Query product suggestions
      var suggestions = block.getElementsByClassName('twn-product-suggestion');
      // Iterate suggestion elements
      for (var suggestion of suggestions) {
        // Query price element
        var price = suggestion.getElementsByClassName('twn-product-suggestion__price');
        if (!price[0]) return;
        
        price[0].innerHTML = ... + " €"; // Modify element's content
      }
    },  
  }  
});