Customization Guide 1

Transcription

1 Customization Guide 1

2 IS+ Customization Guide 1. Overview IS+ AutoComplete Dropdown Customization Dashboard Configuration.4 General..4 Style...4 Dropdown style Advanced Style Customization CSS Override IS+ Search Results Page Customization Dashboard Configuration CSS Overrides CSS Overrides Examples Advanced Customization using JavaScript ISP_PRODUCTS Documentation JavaScript callback Examples

3 1. Overview InstantSearch+ features are designed to fit your site by inheriting your site's design. In case additional customization is needed, there are a few ways to achieve that: InstantSearch+ Dashboard Configuration Disabling a feature you don't need or adding one you desire to your Premium Search Results Page or AutoComplete Dropdown, might be one click away. We recommend you start by taking a look at InstantSearch+ dashboard sections. Style Customization using CSS overrides Requires HTML and CSS Familiarity Changing the style of your site's premium search results page or AutoComplete Dropdown is possible via CSS overrides. You can change the design of the search results features: colors, fonts etc. This document gives guidelines for the easiest way to do so, and includes specific examples for popular customizations you can implement to your site. HTML Content Customization using IS+ JavaScript Callback Requires Web Development expertise Adding details to your site's premium search results page is possible via a JavaScript callback function. It is called upon the rendering of the InstantSearch+ search results. 3

4 2. IS+ AutoComplete Dropdown Customization 2.1 IS+ AutoComplete Dropdown Dashboard Configuration We recommend you start by taking a look at InstantSearch+ AutoComplete Configuration section. [InstantSearch+ dashboard > AutoComplete tab]. You can preview the changes as you go, using the InstantSearch+ preview- for easy, visual customization. General Define which content will be shown on the dropdown. Change the number and order of products, categories and popular searches suggestions. Disable categories suggestions do not show any categories. Hide product descriptions uncheck if you wish to see the description. Style These settings allow you to change the style of the dropdown content. (Products, categories, popular suggestions and their headers) Text color when drop down appears. Hover text color the color of text after placing the cursor over the product. Hover background gradient top, Hover background gradient bottom the color of product background after placing the cursor over the product. Headers background, Headers text color change the Headers style ("Products", "Categories", "Popular searches") 4

5 Dropdown style Change the style of the dropdown box. Note that you can reset to default at any time. Dropdown layout you can choose between two dropdown layouts, Horizontal dropdown layout: Or a vertical dropdown layout (default): 5

6 Dropdown style- more options Dropdown background color when dropdown appears Width (px) you can change the dropdown box width. Max description characters if you chose to show the description. Border color, Border width (px), Border radius (px) border settings. Shadow color, Shadow horizontal (px), Shadow vertical (px), Shadow blur (px) shadow settings. 6

7 2.1 IS+ AutoComplete Dropdown Advanced Style Customization Additional configuration to your site's AutoComplete Dropdown is possible on InstantSearch+ AutoComplete tab Advanced style section. In the advanced style section you will find additional configurations that allow you to change and add content to the dropdown. (This section also includes the option to add CSS style rules, discussed below.) Advanced style Add a URL of an image that will be shown in the following cases: Ranked Product Badge image the image will be shown next to 'always' ranked products. Default Category thumbnail image to be used when a category does not have an associated image. Default Product thumbnail image to be used when a product does not have an associated image. These settings Require HTML and CSS Familiarity: Bottom HTML Banner add an HTML banner to the bottom of the drop down list with every suggestion. This can be useful for an ongoing promotions, sales, gift cards, or any other banner that you want displayed for any search. For example: <a href="/your-list-goeshere"> Custom CSS - InstantSearch+ allows adding custom CSS. This option is discussed in the next section. 7

8 2.2 IS+ AutoComplete Dropdown Advanced Style Customization- CSS overrides Changing the style of your AutoComplete dropdown is possible via CSS overrides. You can use the rules examples on this document, or create your own CSS rule. After creating the desired rule, paste it in the "Custom CSS" box on InstantSearch+ Dashboard > AutoComplete tab > Advanced setting: 8

9 2.2.1 IS+ AutoComplete Dropdown CSS Overrides Examples This section contains basic CSS rules that can be applied to your AutoComplete dropdown: 1. Change the font style.ui-autocomplete,.as_magento_price,.isp_price_compare_at_price_exist,.as_magento_product_name,.as_magento_product_desc,.as_magento_product_section,.n_b_acp { font-size: 11px!important; font-weight: normal!important; 2. Change the space between items ul.ui-autocomplete.ui-menu-item { margin-top: 5px!important; margin-bottom: 5px!important; 3. Change the "Show-all-results" footer font style li#acp_footer_css:hover { color: #fff; li#acp_footer_acp { font-size: 16px!important; 4. Show SKU.as_magento_product_sku { display: block!important; 5. Change the background color to transparent ul.ui-autocomplete { background-color: transparent!important; 9

10 3. IS+ Search Results Page Customization Disabling a feature you don't need or adding one you desire to your Premium Search Results Page, might be one click away. We recommend you start by taking a look at InstantSearch+ Search Results Configuration section on InstantSearch+ dashboard > Search Results tab. 3.1 IS+ Search Results Page Dashboard Configuration Search page functionality: "Did You Mean" suggestions suggests visitors typo-corrected results. Related Searches don't show associated search terms. Search results sorting allow visitors to sort results by relevancy, price, popularity or arrival date InstantSearch+ Search Box control the appearance of the large InstantSearch+ searchbox at the top of the search results page. Favorite product marking by end-users allow visitors to create a favorites list of products for easy access. Content (blogs, articles, pages) search allow InstantSearch+ to search your site's content and display relevant results. Showing/ hiding information about products: Add to Cart button present visitors Add-to-Cart button within the search results page. Quick View allow immediate product details view from within the search results page.. Sold Out Banner add a sold out banner to out of stock products (requires having Out of Stock sync on) SKU show product SKUs on the search results page. Prices display or hide prices on the search results page. Product description show or hide product descriptions. Color swatch show color swatches instead of color names filters. Badges (Shopify and WooCommerce only) add products badges to your products, based on products tags. The tag will be added to the top left corner. You can modify badges using custom CSS, extra details below. 10

11 3.2 IS+ Search Results Page Style Customization - CSS Overrides Changing the style of your site's premium search results page is possible via CSS overrides. You can change the design of the search results features such as colors and fonts. You can use the rules examples on this document, or create your own CSS rule. The easiest way to create a new CSS rule is by: 1. Open the page in Google Chrome 2. Right-click on the desired element in the screen. 3. Select "Inspect" 4. In the Style section hit the "+" sign and override the CSS Rule 5. Paste it in the "Custom SERP CSS" box on InstantSearch+ Dashboard Please be extra careful when applying CSS rules to your site as even the slightest mistake can corrupt the entire search results page! 11

12 3.2.1 IS+ Search Results Page CSS Overrides Examples This section contains basic CSS rules that can be applied to your InstantSearch+ Premium Search Results Page. General - Search Results Page style 1. Remove the Search Results Page title: "Showing # of results for...".isp_results_summary_wrapper { display: none!important; 2. Remove all products borders: li.isp_grid_product { border: none!important; 3. Change the favorites hearts color.favorite_is-favorited.heart { fill: #c72929!important; stroke: #c72929!important; 4. Change the 'Sort by:' text design (bold to normal).isp_sorting_and_result_view_wrapper #isp_search_res_sorting_menu li#search_res_sorting_title { font-weight: normal!important; 5. Change product description font size li.isp_grid_product div.isp_product_info { font-size: 12px; // Default size - 17px 12

13 Products 6. Product badge position - stretched at the bottom of the product.isp_badge.isp_product_image_wrapper:after { background-size: 100%; background-position: bottom; 7. Specific product badge position - stretched at the bottom of the product.isp_badge_tagname.isp_product_image_wrapper:after { background-size: 100%; background-position: bottom; 8. Change 'compare at price' design #isp_product_quick_view_model.isp_compare_at_price, li.isp_grid_product div.isp_product_info.isp_compare_at_price { color: #000!important; font-style: italic!important; text-decoration: line-through!important; 9. Remove search term highlighting li.isp_grid_product span.isp_search_term_highlight { background: none!important; 10. Change product's title color upon hover.isp_product_title:hover { color: #000!important; 11. Remove boxes from products.isp_grid_product { border: none!important; background-image: none!important; -webkit-box-shadow: none!important; -moz-box-shadow: none!important; box-shadow: none!important; 13

14 12. Change product image size #isp_search_results_container li.isp_grid_product.isp_product_image { width: 200px!important; // Custom width height: 200px!important; // Custom height 'Add to cart' and 'Quick View' buttons 13. Change the colors of the 'add to cart' button li.isp_grid_product input[type="submit"].isp_add_to_cart_btn { color: blue!important; /*text color*/ background: green!important; font-size: 12px!important; 14. Change the colors of the 'add to cart' background upon hover input.isp_add_to_cart_btn:hover { background: #000!important; 15. Change the display of the 'add to cart' button, so that it will show all the time (not just on hover) li.isp_grid_product form.isp_add_to_cart_form { display: block!important; 16. Change the colors of the quick view button #isp_search_results_container li.isp_grid_product a.isp_product_quick_view_button { color: #000!important; background-color: rgba(255,255,255,0.9)!important; 17. Change the colors of the quick view button - upon hover #isp_search_results_container li.isp_grid_product a.isp_product_quick_view_button:hover { color: #000!important; background-color: rgba(255,255,255,0.9)!important; 14

15 Review Stars 18. Changing reviews stars colors isp_serp_raty_reviews_option: { startype: 'i', // Font-based stars (instead of images) starhalf: 'spr-icon spr-icon-star-half-alt', staroff: 'spr-icon spr-icon-star-empty', staron: 'spr-icon spr-icon-star' <style>.isp_product_info i.spr-icon { font-size: 80%!important; color: #bfa349; </style> Search Filters 19. Changing the filters titles (attributes) design.isp_single_facet_wrapper.isp_facet_title.isp_facet_title_name { color: #000!important; 20. Changing the filters values (attribute values) design #isp_left_container_facets.isp_search_res_facets_container.isp_facet_value a { color: #000!important; font-size: 13px!important; 21. Removing the borders between the filters #isp_left_container_facets.isp_search_res_facets_container.isp_single_facet_wrapper { border-bottom: none!important; 22. Spacing out the left sidebar #isp_left_container_facets.isp_search_res_facets_container.isp_facet_value { margin: 4px!important; 15

16 23. Avoid showing the filters counter span.isp_facet_value_counter { display: none!important; 24. Changing the ' + Show more' and ' - Show less' design #isp_left_container_facets.isp_search_res_facets_container.isp_facet_show_hide_values { font-size: 0.75em!important; color: #707070!important; 25. Changing the filters tags design div#isp_search_results_filter_tags.isp_filter_removable_tag { background-color: #e8e8e8!important; font-size: 0.8em!important; color: #000!important; 16

17 3.3 IS+ Advanced HTML Customization using JavaScript You can customize the various look and feel HTML elements of the Search Results, Instant Dropdown and Product Recommendation using the below JavaScript object. The main vehicle is using the JavaScript Callback functions, which are called after the rendering of the InstantSearch+ results. The JavaScript object should be plugged at the top of your theme HTML. Notice this requires web development expertise. Our examples are provided as is and requires web developer testing before implemented on your site IS+ Options JavaScript definitions Have your developer use these at the top of your theme HTML: isp_serp_callback: function() {, // search results rendered isp_serp_no_results_callback: function() {, // *no* results isp_add_to_cart_callback: function(product_id, form_id) {, isp_serp_quickview_callback: function() {, // QuickView opened isp_serp_look_a_like_txt: 'Related ', // Button text STAR_REVIEWS_POSITION: 1, // Above or under price isp_serp_articles_tab_name: 'Blog Posts', // CMS tab name isp_dropdown_callback: function(li_element) {, // Dropdown item dropdown_align_inputbox: 'right', // Drodown alignment dropdown_narrow_by: [] // Filtered search query parameters (JSON) var isp_related_options = { isp_related_callback: function() {, // Recommendations rendered slider: options_slidestoshow: 4, // max product recommendations DISABLE_EXEC_SLIDE: true, // Whether slider is not initialize LAZYLOAD: "progressive", // Whether to load images in advance PRICE_FROM_ALWAYS: true, // Whether to render from price wording DECIMALS_REMOVE_ON_ROUND_PRICES: false, // whether to remove.00 RANDOMIZE: true, // whether to add extra randomization WOOCOMMERCE_IMAGE_SIZE = '147x300' The JavaScript SERP callback functions may run twice if the search results filters given the filters deferred load. Your code should address the fact that the callback might be triggered twice per a given search query. 17

18 3.3.2 ISP_PRODUCTS Documentation ISP_PRODUCTS is a JavaScript object with the currently viewed products in the search results page. In most situations the web developer will use this Object to change the content of the search results page Property Description Type id product identifier Integer l Title String d Description String p price Float p_c compare at price Float p_min variant minimum price Float p_max variant maximum price Float p_max_c compare at price max Float p_min_c compare at price min Float t product image url String v_c number of variants Integer vra Object containing the list of the product Variants and their attributes and values Object 18

19 3.3.3 Instant Search Dropdown Examples 1. Customer would like to add an Add-to-Cart in the instant suggestions isp_dropdown_callback: function(jquery_li_element) { var product_id = jquery_li_element.attr('isp_id'); var is_category = jquery_li_element.attr('isp_category'); return jquery_li_element.find('.isp_price_compare_at_price_exist').append(' <input type="button" onclick="alert(product_id)" value="push me"/>'); ; 2. Customer would like to have the instant dropdown aligned to the right dropdown_align_inputbox:'right' 3. Customer would like to change the dropdown position DROPDOWN_TOP_OFFSET: '10', // Extra top offset for dropdown DROPDOWN_LEFT_OFFSET: '10' // Extra left offset for dropdown 19

20 4. Customer would like to change the features of the drop down isp_dropdown_callback: function(jquery_li_element) { var product_id = jquery_li_element.attr('isp_id'); var is_category = jquery_li_element.attr('isp_category'); return jquery_li_element.find('.isp_price_compare_at_price_exist').append(' <input type="button" onclick="alert(product_id)" value="push me"/>'); ; 5. Customer would like to show filtered results in the instant search dropdown dropdown_narrow_by: [], // Parameters to be filtered with AVOID_POP_PRODUCTS_PRELOAD: false ; Then, upon the user choosing a category, assign the narrow category: isp_options.dropdown_narrow_by = [["Categories", "Girls"]]; 20

21 3.3.4 Product Recommendation Examples 1. Customer would like to change the amount of products to be shown in the Product Recommendation widget var isp_related_options = { slider_options_slidestoshow: 4 2. Change reviews stars to be before the price var isp_related_options = { STAR_REVIEWS_POSITION: 1 3. Change Review Stars to be presented by font and not by image (default) For more details: isp_serp_raty_reviews_option: { startype: 'i', starhalf: 'spr-icon spr-icon-star-half-alt', staroff: 'spr-icon spr-icon-star-empty', staron: 'spr-icon spr-icon-star' 4. Customer would like to control when to initialize the Product Recommendation Slider. Include the script in your <head>: var isp_related_options = { DISABLE_EXEC_SLIDE: true ; Then, when you want to show the product recommendation: isp_exec_slide(); 21

22 5. Customer would like to change the visuals of product recommendation var isp_related_options = { isp_related_callback: function() { // called if present after rendering the recommendation products ; 6. Customer would like to load product recommendation images on widget initialization var isp_related_options = { LAZYLOAD: "progressive" 7. Customer would like to show decimals on products recommendations widget var isp_related_options = { PRICE_FROM_ALWAYS: true, DECIMALS_REMOVE_ON_ROUND_PRICES: false ; 8. Customer would like to see random order of products on the products recommendations widget, upon refresh. var isp_related_options = { RANDOMIZE: true ; 22

23 9. Customer would like to change the products recommendations widget image size (WooCommerce) var isp_related_options = { WOOCOMMERCE_IMAGE_SIZE = '147x300' 23

24 3.3.5 Search Results Examples 1. Customer would like to perform a custom operation after a successful submission of Add-to-Cart from Search Results page <script type="text/javascript"> isp_add_to_cart_callback: function(product_id, form_id) { 2. Customer would like to show a specific banner per a search query in the Search Results page isp_serp_callback: function() { if (ISP_LAST_SEARCH.search_term == 'XYZ') { $jquery_isp('#isp_search_results_banner').html('<discount>'); 3. Customer would like to change the text button for Look-A-Like isp_serp_look_a_like_txt: 'Similar Products' 4. Customer would like to change the word "Articles" to "Blog Posts" (Shopify search results page) isp_serp_articles_tab_name: 'Blog Posts' 24

25 5. Customer would like to change the text on Add-to-Cart buttons in Search Results page to BUY isp_serp_callback: function() { $jquery('.isp_add_to_cart_form > input[type=submit]').attr('value', 'BUY'); 6. Customer would like to change the <title> and meta descriptions of the search results page isp_serp_callback: function() { var query = ISP_LAST_SEARCH['search_term']; $('title').html(query + ' - Your site title'); $('meta[name=description').attr('content', query + ' powered by InstantSearch+'); 25

26 7. Customer would like to add a banner with title and description to top of Search Results Page <script type="text/javascript"> isp_serp_callback: function () { if ("category" in ISP_LAST_SEARCH) { var banner_element = $jquery_isp("#isp_search_results_banner"); var before_banner_element = $jquery_isp(".isp_center_container_header"); before_banner_element.after(banner_element); banner_element.html("<h2>add your title and description here</h2>"); 8. Customer would like to add functionality to favorites icon (heart above item) var favorites = document.getelementsbyclassname("isp_favorite"); for (var i = 0; i < favorites.length; i++) { var product_id = Number(favorites[i].parentNode. parentnode.parentnode.getattribute("product_id")); favorites[i].childnodes[0].setattribute("onclick", favorites[i]. childnodes[0]. getattribute("onclick") + "; addfunction(" + product_id + ")") function addfunction(product_id) { // Add function logic here 26

27 9. Customer would like to add product attributes in search results page isp_serp_callback: function() { value: values list $('.isp_grid_product').each(function(index) { var isp_variants_options = new Object; // key: option name var p_id = $(this).attr('product_id'); var variant_data = ISP_PRODUCTS[p_id].vra[0][1]; for (var i = 0; i < variant_data.length; i++) { var option_name = variant_data[i][0]; if (option_name == 'Price' option_name == 'Sellable') { continue; var option_vals = new Array(); for (var j = 0; j < variant_data[i][1].length; j++) { option_vals.push(variant_data[i][1][j]); if (option_name in isp_variants_options) { for (v in option_vals) { else { $(this) if (!v in isp_variants_options[option_name]) { isp_variants_options[option_name].append(v); isp_variants_options[option_name] = option_vals;.find('.isp_product_info').html(''); for (var option_name in isp_variants_options) { $(this).find('.isp_product_info').append(option_name + ': ' + isp_variants_options[option_name] + '<br>'); ); 27

28 10. Customer would like to show Variant attribute information isp_serp_callback: function() { $('.isp_grid_product').each(function(index) { var isp_variants_options = new Object; var p_id = $(this).attr('product_id'); var variant_data = ISP_PRODUCTS[p_id].vra[0][1]; for (var i = 0; i < variant_data.length; i++) { var option_name = variant_data[i][0]; if (option_name == 'Price' option_name == 'Sellable') { continue; var option_vals = new Array(); for (var j = 0; j < variant_data[i][1].length; j++) { option_vals.push(variant_data[i][1][j]); if (option_name in isp_variants_options) { for (v in option_vals) { else { if (!v in isp_variants_options[option_name]) { isp_variants_options[option_name].append(v); isp_variants_options[option_name] = option_vals; $(this).find('.isp_product_info').html(''); for (var option_name in isp_variants_options) { $(this).find('.isp_product_info'). append(option_name + ': ' + isp_variants_options[option_name] + '<br>'); ); 28

29 11. Customer would like to add "on sale" and "sold out" stickers to products isp_serp_callback: function() { $('.isp_grid_product').each(function(index) { var isp_variants_options = new Object; var p_id = $(this).attr('product_id'); var product_data = ISP_PRODUCTS[p_id]; if (product_data.iso && product_data.iso == true) { // Out-of-stock item... if ($(this) Out</span>');.find('.sold-out').length == 0) { $(this).prepend('<span class="sold-out">sold if (product_data.p_c && product_data.p_c!= "") { // Compare at price... $(this) $' + product_data.p); );.find('.isp_product_price').html('<span class="on_sale">on Sale</span> 29

30 12. Customer would like to display additional product data for all visitors, and display product's price for logged-in users only isp_serp_callback: function() { $('.isp_grid_product').each(function(index) { var isp_variants_options = new Object; var p_id = $(this).attr('product_id'); var variant_data = ISP_PRODUCTS[p_id].vra[0][1]; for (var i = 0; i < variant_data.length; i++) { var option_name = variant_data[i][0]; if (option_name == 'Price' option_name == 'Sellable') { continue; var option_vals = new Array(); for (var j = 0; j < variant_data[i][1].length; j++) { option_vals.push(variant_data[i][1][j]); if (option_name in isp_variants_options) { for (v in option_vals) { else { if (!v in isp_variants_options[option_name]) { isp_variants_options[option_name].append(v); isp_variants_options[option_name] = option_vals; $(this).find('.isp_product_info').html(''); for (var option_name in isp_variants_options) { $(this).find('.isp_product_info').append(option_name + ': ' + isp_variants_options[option_name] + '<br>'); ); 30

31 13. Customer would like to display product variant info on product hover isp_serp_callback: function() { jquery.each(isp_products, function(id, el) { if (el.vra) { var size = jquery.map(el.vra[0][1], function(a) { if (a[0] == "Size") { return a[1] ); var year = jquery.map(el.vra[0][1], function(a) { if (a[0] == "Year") { return a[1] ); var price = jquery.map(el.vra[0][1], function(a) { if (a[0] == "Price") { return a[1] ); var item = jquery('#search-results li.isp_grid_product[product_id=' + id + ']'); var desc = item.find('.isp_product_desc'); if (item.find('.isp_product_price2').length == 0 && $('.account-link').length > 0 &&!el.iso) { desc.after($('<br><div class="isp_product_price2"></div>').text(price)) if (item.find('.isp_product_size').length == 0) { desc.after($('<br><div class="isp_product_size"></div>').text(size)) if (item.find('.isp_product_year').length == 0) { desc.after($('<br><div class="isp_product_year"></div>').text(year)) item.find('.isp_product_info'). addclass('product-info inside'); item.find('.isp_product_price_wrapper'); ); $('.isp_product_price_wrapper').hide(); $.each($('.isp_product_info.isp_product_image_href'), function(i, el) { var title = $(el).find('.isp_product_title').clone(); var wr = $(el).closest('.isp_product_info'); $(el).remove(); wr.prepend(title).parent().find('.isp_product_image_href:first').append(wr); ); 31