SOW : Core Plugins

SOW = Step Of Web (Smarty author).
SOW plugins are part of Smarty Core, written from scratch!

SOW : Search Suggest

Optional plugin, used to activate ajax search functionalities.
Designed to be used as a primary search!


1. serving html content through ajax – advantage: create a custom layout (product images, promotions, etc);
Dependencies: None


2. serving a json through ajax – the plugin will create the html layout as a simple list (this documentation is using this way). See json file.
Json is also seful for static html website, adding a search functionality.
Dependencies: fuzzy.js vendor.
fuzzy.js vendor is required – is a library for approximate (fuzzy) string matching. Fuzzy.js is aimed at providing an experience which you may know from editors such as Sublime Text, Atom, TextMate and others. It's lightweight (2Kb without gzip), fast and very good for this purpose.


/* 
	:: Plugin File
	src/js/sow.core/sow.search_suggest.js

	:: Plugin Init 
*/	$.SOW.core.search_suggest.init('form.js-ajax-search');




/* 
	:: Plugin Options|Defaults
*/	$.SOW.core.search_suggest.init('form.js-ajax-search', {

		enable 					: true,
		method 					: '', 			// [GET|POST] WARNING! THIS IS PRIMARY! Leave empty to use the form method (usualy is GET)
		container 				: '#sow-search-container',
		input_min_length 			: 2,
		input_delay 				: 100, 			// ms
		related_kw 				: '',			// default keywords on load (leave empty to control from your backend)
		related_url 				: '',
		related_action 				: 'related_get',
		suggest_url 				: '',
		suggest_action 				: 'suggest_get',
		// --
		contentType 				: '', 			// example: 'application/json; charset=utf-8'
		dataType 				: '',			// example: json
		forceStringify 				: false,		// stringify requests - data sent as JSON;  data: JSON.stringify(...)

	});
									

1. Serving HTML content through ajax


<!-- 

	[SOW] SEARCH SUGGEST PLUGIN [HTML]
	[GULP: _src/js/sow.core/sow.search_suggest.js]
	[SCSS: src/scss/_vendors/sow/sow_search_suggest.scss]
	++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++
	
	action="..." 					is not used by the plugin. Is the regular form action - the search result page when user click the search button (or press enter key).

	data-autosuggest="on" 				"off" = turn off autosuggest

	data-related-url="..." 				what user see first when click the search input (request url)
	data-related-action="related_get"  		backend identifier for related
	data-related-keywords="" 			optional, might be used according to user history, to send to the server favourite/predefined keywords so the first suggestion to be related. 
							This function is usually handled by the backed, so this is optional, in case there is no backend access for changes!

	data-suggest-url="..." 				what user see when type (request url). Might be the same as data-related-url and controlled according to data-suggest-action.
	data-suggest-action="suggest_get" 		backend identifier for autosuggest
	data-input-min-length="2"  			minimum length/characters to activate autosuggest before sendint requests to the server
	data-input-delay="300"  			user typing/keyup delay in ms, before sending the request to the server. usualy, 500ms is the average -  so give a decent delay for typing before sending the request to the server.

	data-container="..." 				the container where results are pushed by ajax (present in this html markup). Should remain as it is, if there is no reason to change the predefined id.

	

	Related Format:
		{"ajax":"true","action":"related_get","related_keywords":""}

	Suggest Format:
		{"ajax":"true","action":"suggest_get","user_keywords":"user keywords"}


	NOTE: "ajax":"true" is added by the plugin so you can check as an extra param, if needed - like this:
		if($_GET['ajax'] == 'true') {
			// serve ajax results
		} else {
			// serve regular page results
		}

	If $.SOW.sow__debug_enable is set to 'true' in sow.config.js, the process is visible in browser console.
	Debug is on in this demo, you can check your console while typing in the search box to see the request format sent to the server.


-->
<form 	action="index.html" 
		method="GET" 
		data-autosuggest="on" 
		data-container="#sow-search-container" 
		data-input-min-length="2" 
		data-input-delay="300" 
		data-related-keywords="" 
		data-related-url="_ajax/search_suggest_related.html" 
		data-suggest-url="_ajax/search_suggest_input.html" 
		data-related-action="related_get" 
		data-suggest-action="suggest_get" 
		class="js-ajax-search sow-search sow-search-over hide d-inline-flex">
	<div class="sow-search-input w-100">

		<div class="input-group-over d-flex align-items-center w-100 h-100 rounded shadow-md">

			<input placeholder="what are you looking today?" name="s" type="text" class="form-control-sow-search form-control form-control-lg shadow-xs" value="" autocomplete="off">

			<span class="sow-search-buttons">

				<!-- search button -->
				<button type="submit" class="btn btn-primary btn-noshadow m-0 px-2 py-1 b-0 bg-transparent text-muted">
					<i class="fi fi-search fs--20"></i>
				</button>

				<!-- close : mobile only (d-inline-block d-lg-none) -->
				<a href="javascript:;" class="btn-sow-search-toggler btn btn-light btn-noshadow m-0 px-2 py-1 d-inline-block d-lg-none">
					<i class="fi fi-close fs--20"></i>
				</a>

			</span>

		</div>

	</div>

	<!-- search suggestion container -->
	<div class="sow-search-container w-100 p-0 hide shadow-md" id="sow-search-container">
		<div class="sow-search-container-wrapper">

			<!-- main search container -->
			<div class="sow-search-loader p--15 text-center hide">
				<i class="fi fi-circle-spin fi-spin text-muted fs--30"></i>
			</div>

			<!-- 
				AJAX CONTENT CONTAINER 
				SHOULD ALWAYS BE AS IT IS : NO COMMENTS OR EVEN SPACES!
			--><div class="sow-search-content rounded w-100 scrollable-vertical"></div>

		</div>
	</div>
	<!-- /search suggestion container -->

	<!-- 

		overlay combinations:
			overlay-dark opacity-* [1-9]
			overlay-light opacity-* [1-9]

	-->
	<div class="sow-search-backdrop overlay-dark opacity-3 hide"></div>

</form>
<!-- /SEARCH -->
									

2. Serving JSON through ajax


<!-- 

	[SOW] SEARCH SUGGEST PLUGIN [JSON]
	[GULP: sow.core/sow.search_suggest.js]
	[SCSS: _plugins/sow_search_suggest.scss]
	++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++ ++
	
	action="..." 					is not used by the plugin. Is the regular form action - the search result page when user click the search button (or press enter key).

	data-autosuggest="on" 				"off" = turn off autosuggest

	data-related-url="..." 				what user see first when click the search input (request url)
	data-related-action="related_get"  		backend identifier for related
	data-related-keywords="" 			optional, might be used according to user history, to send to the server favourite/predefined keywords so the first suggestion to be related. 
							This function is usually handled by the backed, so this is optional, in case there is no backend access for changes!

	data-suggest-url="..." 				what user see when type (request url). Might be the same as data-related-url and controlled according to data-suggest-action.
	data-suggest-action="suggest_get" 		backend identifier for autosuggest
	data-input-min-length="2"  			minimum length/characters to activate autosuggest before sendint requests to the server
	data-input-delay="300"  			user typing/keyup delay in ms, before sending the request to the server. usualy, 500ms is the average -  so give a decent delay for typing before sending the request to the server.

	data-container="..." 				the container where results are pushed by ajax (present in this html markup). Should remain as it is, if there is no reason to change the predefined id.

	Related Format:
		{"ajax":"true","action":"related_get","related_keywords":""}

	Suggest Format:
		{"ajax":"true","action":"suggest_get","user_keywords":"user keywords"}


	NOTE: "ajax":"true" is added by the plugin so you can check as an extra param, if needed - like this:
		if($_GET['ajax'] == 'true') {
			// serve ajax results
		} else {
			// serve regular page results
		}

	If $.SOW.sow__debug_enable is set to 'true' in sow.config.js, the process is visible in browser console.
	Debug is on in this demo, you can check your console while typing in the search box to see the request format sent to the server.



	JSON mode require few more params:
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
		data-mode="json"  					required for json mode
		data-json-max-results='10' 				max results to display
		data-json-related-title='Explore Smarty' 		title of first window (related) when user click the search input
		data-json-related-item-icon='fi fi-star-empty' 		optional icon of each related item
		data-json-suggest-title='Suggestions for you' 		title of second window (suggestions) when user type
		data-json-suggest-noresult='No results for' 		"no results" text message
		data-json-suggest-item-icon='fi fi-search' 		optional icon of each suggested item
		data-json-suggest-min-score='5' 			is the score to fine tune the search matching between 1 and 10. You can play to find the best fit. This documentation uses 5. 0 is equivalent to "exact match".
		data-json-highlight-term='true' 			false = do not highlight matched letters/words
		data-contentType='application/json; charset=utf-8' 	default ajax contentType
		data-dataType='json' 					default ajax dataType
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

	optional; and useful for json only - change title color
		data-theme-class="danger" 

-->
<form 	action="index.html" 
		method="GET" 
		data-autosuggest="on" 

		data-mode="json" 
		data-json-max-results='10'
		data-json-related-title='Explore Smarty'
		data-json-related-item-icon='fi fi-star-empty'
		data-json-suggest-title='Suggestions for you'
		data-json-suggest-noresult='No results for'
		data-json-suggest-item-icon='fi fi-search'
		data-json-suggest-min-score='5'
		data-json-highlight-term='true'
		data-contentType='application/json; charset=utf-8'
		data-dataType='json'

		data-container="#sow-search-container" 
		data-input-min-length="2" 
		data-input-delay="300" 
		data-related-keywords="" 
		data-related-url="_ajax/search_suggestion_json_related.json" 
		data-suggest-url="_ajax/search_suggestion_json_suggest.json" 
		data-related-action="related_get" 
		data-suggest-action="suggest_get" 
		class="js-ajax-search sow-search sow-search-over hide d-inline-flex">
	<div class="sow-search-input w-100">

		<div class="input-group-over d-flex align-items-center w-100 h-100 rounded shadow-md">

			<input placeholder="what are you looking today?" name="s" type="text" class="form-control-sow-search form-control form-control-lg shadow-xs" value="" autocomplete="off">

			<span class="sow-search-buttons">

				<!-- search button -->
				<button type="submit" class="btn btn-primary btn-noshadow m-0 px-2 py-1 b-0 bg-transparent text-muted">
					<i class="fi fi-search fs--20"></i>
				</button>

				<!-- close : mobile only (d-inline-block d-lg-none) -->
				<a href="javascript:;" class="btn-sow-search-toggler btn btn-light btn-noshadow m-0 px-2 py-1 d-inline-block d-lg-none">
					<i class="fi fi-close fs--20"></i>
				</a>

			</span>

		</div>

	</div>

	<!-- search suggestion container -->
	<div class="sow-search-container w-100 p-0 hide shadow-md" id="sow-search-container">
		<div class="sow-search-container-wrapper">

			<!-- main search container -->
			<div class="sow-search-loader p--15 text-center hide">
				<i class="fi fi-circle-spin fi-spin text-muted fs--30"></i>
			</div>

			<!-- 
				AJAX CONTENT CONTAINER 
				SHOULD ALWAYS BE AS IT IS : NO COMMENTS OR EVEN SPACES!
			--><div class="sow-search-content rounded w-100 scrollable-vertical"></div>

		</div>
	</div>
	<!-- /search suggestion container -->

	<!-- 

		overlay combinations:
			overlay-dark opacity-* [1-9]
			overlay-light opacity-* [1-9]

	-->
	<div class="sow-search-backdrop overlay-dark opacity-3 hide"></div>

</form>
<!-- /SEARCH -->