Skip to content

Instantly share code, notes, and snippets.

@klevu

klevu/Page: search-results

Last active May 5, 2023 17:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save klevu/478568f8c0c2f783472a7b11d5caf5e0 to your computer and use it in GitHub Desktop.
Save klevu/478568f8c0c2f783472a7b11d5caf5e0 to your computer and use it in GitHub Desktop.
Download ZIP
Shopify Assets
Raw
Page: search-results
<div class='kuContainer' id='kuMainContainer'><div id='ku-search-form' class='ku-search-block-full' style='display:none;'><form action='/pages/search-results' method='get' role='search'><input type='search' name='q' id='ku-search-field' class='ku-searchfield' placeholder='Search text'><input type='button' title='Search' id='ku-search-btn' value='' class='ku-search-btn'></form></div><div class='klevu-clear-both'></div><div id='loader' style='text-align:center'><img src='https://js.klevu.com/klevu-js-v1/img-1-1/ku-loader.gif' alt='Loading...'/></div><div class='kuNoRecordFound' id='kuNoRecordFound' style='display:none;'><p>No matching products found.</p></div><div class='kuProListing' id='kuProListing' style='display: none;'><div class='kuFilterHead kufilter-label' id='klevuNarrowByLabel'>Narrow By</div><div class='kuFilters' id='kuFilters'></div><div id='ku-search-filter-tags'></div><div class='kuResultList' id='kuResultListBlock'><div class='kuResultInfo'><div class='kuTotalResultsTab' id='kuTotResults'><div class='kuTabs' id='kuTabs'></div></div><div class='kuPagination' id='kuPagination1'></div><div class='kuPagination' id='kuPagination3' style='display:none;'></div><div class='kuClearBoth'></div></div><div class='kuProductContent' id='kuProductContent'><div class='kuSortHeader'><div class='kuSortingOpt'><div class='kuSortby'><label id='klevuSortLbl'>Sort by:</label><select name='kuSortby' id='kuSortby' onchange='klevu_changeSortingOptionsForLandigPage(this.value);'><option value='rel' id='klevuRelSort'>Relevance</option><option value='lth' id='klevuLthSort'>Price: Low to high</option><option value='htl' id='klevuHtlSort'>Price: High to low</option></select></div><div class='kuPerPage'><label id='klevuItemsPerPage'>Items per page:</label><select onchange='klevu_changeItemsPerPage(this.value);' id='noOfRecords1'><option>24</option><option>36</option>
<option>48</option></select></div><div class='kuView'><a class='kuGridviewBtn kuCurrent' href='#' id='gridViewBtn' onclick='setKuViewGrid()'><span class='icon-gridview'></span></a><a class='kuListviewBtn' href='#' id='listViewBtn' onclick='setKuViewList()'><span class='icon-listview'></span></a></div><div class='kuClearLeft'></div></div></div><div class='kuGridView' id='kuResultsView'></div><div class='kuBottomPagi'><div class='kuPerPage'><label id='klevuItemsPerPageFooter'>Items per page:</label><select onchange='klevu_changeItemsPerPage(this.value);' id='noOfRecords2'><option>24</option><option>36</option><option>48</option></select></div><div class='kuPagination' id='kuPagination2'></div><div class='kuClearBoth'></div></div></div><div class='kuOtherContent' id='kuOtherContent'><div class='kuSortHeader'><div class='kuSortingOpt'><div class='kuPerPage'><label id='klevuItemsPerPageCms'>Items per page:</label><select onchange='klevu_changeCmsItemsPerPage(this.value);' id='noOfRecords3'><option>24</option><option>36</option><option>48</option>
</select></div><div class='kuClearLeft'></div></div></div><div class='kuListView kuOtherContentView' id='kuOtherContentView'></div><div class='kuSortHeader'> <div class='kuSortingOpt'><div class='kuPerPage'><label id='klevuItemsPerPageCmsFooter'>Items per page:</label><select onchange='klevu_changeCmsItemsPerPage(this.value);' id='noOfRecords4'><option>24</option><option>36</option>
<option>48</option></select></div><div class='kuPagination' id='kuPagination4'></div><div class='kuClearLeft'></div></div></div></div></div><div class='kuClearBoth'></div></div></div><input id='noOfRecords' type='hidden' name='noOfRecords' value='24' /><input type='hidden' name='startPos' id='startPos' value='0'/><input type='hidden' name='totalResultsFound' id='totalResultsFound' value='0'/><input type='hidden' name='searchedKeyword' id='searchedKeyword' value=''/><input type='hidden' name='totalPages' id='totalPages' value='0'/><script type='text/javascript' src='https://js.klevu.com/klevu-js-v1/js-1-1/klevu-landing.js'></script>
Raw
sections klevu-collection-pl.liquid
<script type="text/javascript">
if (typeof klevuProducts == 'undefined') {
var klevuProducts = new Array();
}
</script>
<!-- Start klevu-pl-collection -->
{% render 'klevu-pl-collection' %}
<!-- End klevu-pl-collection -->
<!-- Start klevu-pl-analytics -->
{% render 'klevu-pl-analytics' %}
<!-- End klevu-pl-analytics -->
{% schema %}
{
"name": "Klevu Collection PL",
"settings": []
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Raw
sections klevu-collection-theme-jsv1.liquid
<div class='kuContainer' id='kuMainContainer'><div id='ku-search-form' class='ku-search-block-full' style='display:none;'><form action='/pages/search-results' method='get' role='search'><input type='search' name='q' id='ku-search-field' class='ku-searchfield' placeholder='Search text'><input type='button' title='Search' id='ku-search-btn' value='' class='ku-search-btn'></form></div><div class='klevu-clear-both'></div><div id='loader' style='text-align:center'><img src='https://js.klevu.com/klevu-js-v1/img-1-1/ku-loader.gif' alt='Loading...'/></div><div class='kuNoRecordFound' id='kuNoRecordFound' style='display:none;'><p>No matching products found.</p></div><div class='kuProListing' id='kuProListing' style='display: none;'><div class='kuFilterHead kufilter-label' id='klevuNarrowByLabel'>Narrow By</div><div class='kuFilters' id='kuFilters'></div><div id='ku-search-filter-tags'></div><div class='kuResultList' id='kuResultListBlock'><div class='kuResultInfo'><div class='kuTotalResultsTab' id='kuTotResults'><div class='kuTabs' id='kuTabs'></div></div><div class='kuPagination' id='kuPagination1'></div><div class='kuPagination' id='kuPagination3' style='display:none;'></div><div class='kuClearBoth'></div></div><div class='kuProductContent' id='kuProductContent'><div class='kuSortHeader'><div class='kuSortingOpt'><div class='kuSortby'><label id='klevuSortLbl'>Sort by:</label><select name='kuSortby' id='kuSortby' onchange='klevu_changeSortingOptionsForLandigPage(this.value);'><option value='rel' id='klevuRelSort'>Relevance</option><option value='lth' id='klevuLthSort'>Price: Low to high</option><option value='htl' id='klevuHtlSort'>Price: High to low</option></select></div><div class='kuPerPage'><label id='klevuItemsPerPage'>Items per page:</label><select onchange='klevu_changeItemsPerPage(this.value);' id='noOfRecords1'><option>24</option><option>36</option>
<option>48</option></select></div><div class='kuView'><a class='kuGridviewBtn kuCurrent' href='#' id='gridViewBtn' onclick='setKuViewGrid()'><span class='icon-gridview'></span></a><a class='kuListviewBtn' href='#' id='listViewBtn' onclick='setKuViewList()'><span class='icon-listview'></span></a></div><div class='kuClearLeft'></div></div></div><div class='kuGridView' id='kuResultsView'></div><div class='kuBottomPagi'><div class='kuPerPage'><label id='klevuItemsPerPageFooter'>Items per page:</label><select onchange='klevu_changeItemsPerPage(this.value);' id='noOfRecords2'><option>24</option><option>36</option><option>48</option></select></div><div class='kuPagination' id='kuPagination2'></div><div class='kuClearBoth'></div></div></div><div class='kuOtherContent' id='kuOtherContent'><div class='kuSortHeader'><div class='kuSortingOpt'><div class='kuPerPage'><label id='klevuItemsPerPageCms'>Items per page:</label><select onchange='klevu_changeCmsItemsPerPage(this.value);' id='noOfRecords3'><option>24</option><option>36</option><option>48</option>
</select></div><div class='kuClearLeft'></div></div></div><div class='kuListView kuOtherContentView' id='kuOtherContentView'></div><div class='kuSortHeader'> <div class='kuSortingOpt'><div class='kuPerPage'><label id='klevuItemsPerPageCmsFooter'>Items per page:</label><select onchange='klevu_changeCmsItemsPerPage(this.value);' id='noOfRecords4'><option>24</option><option>36</option>
<option>48</option></select></div><div class='kuPagination' id='kuPagination4'></div><div class='kuClearLeft'></div></div></div></div></div><div class='kuClearBoth'></div></div></div><input id='noOfRecords' type='hidden' name='noOfRecords' value='24' /><input type='hidden' name='startPos' id='startPos' value='0'/><input type='hidden' name='totalResultsFound' id='totalResultsFound' value='0'/><input type='hidden' name='searchedKeyword' id='searchedKeyword' value=''/><input type='hidden' name='totalPages' id='totalPages' value='0'/><script type='text/javascript' src='https://js.klevu.com/klevu-js-v1/js-1-1/klevu-landing.js'></script><script> var klevu_collectionProductPath = '{{ collection.url | escape }}'; </script><script>function GetURLParameter(sParam){var sPageURL = window . location . search . substring(1);var sURLVariables = sPageURL . split('&');for (var i = 0; i < sURLVariables . length; i++){var sParameterName = sURLVariables[i] . split('=');if (sParameterName[0] == sParam) { return decodeURIComponent(sParameterName[1]);}}} var q = GetURLParameter('q'); </script><script>var klevu_pageCategory;var klevuquery='';var klevucountslash;if(q==''||q==null){klevu_pageCategory='{{ collection.title | escape }}';klevucountslash=window.location.pathname.split('/').length;if(klevucountslash==4){var klevutags=window.location.pathname.split('/').pop().split('+');for(i=0;i<klevutags.length;i++){klevuquery+='tags:';klevuquery+=klevutags[i]+';;'}if(klevuquery!==''){var klevu_userLandingFilterResults=klevuquery.slice(0,-2)}}}else{klevu_pageCategory='';var attribute_key=window.location.pathname.split('/').pop();if(attribute_key=='vendors'){attribute_key='brand'}if(attribute_key=='types'){attribute_key='type'}var klevu_userLandingFilterResults=attribute_key+':'+q }</script>
{% schema %}
{
"name": "Klevu Collection Theme",
"settings": []
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Raw
sections klevu-collection-theme.liquid
<div class="klevuLanding"></div>
{% schema %}
{
"name": "Klevu Collection Theme",
"settings": []
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Raw
sections klevu-product-pl.liquid
<!-- Start klevu-pl-product -->
{% render 'klevu-pl-product', product: product %}
<!-- End klevu-pl-product -->
<!-- Start klevu-pl-analytics -->
{% render 'klevu-pl-analytics' %}
<!-- End klevu-pl-analytics -->
{% schema %}
{
"name": "Klevu Product PL",
"settings": []
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Raw
snippets klevu-add-to-cart.liquid
<script type="text/javascript">
if ('undefined' === typeof klevu_addtocart) {
function klevu_addtocart( id, url, qty ) {
if ('undefined' !== typeof klevu_customAddToCart) {
klevu_customAddToCart(id, url, 1);
} else {
var urlProtocol = ( "https:" === document.location.protocol ? "https://" : "http://" );
var url = urlProtocol + window.location.hostname + '/cart/add?id=' + id + '&quantity=1';
window.location.assign(url);
}
}
}
</script>
Raw
snippets klevu-catnav-theme.liquid
{% if template == 'collection'%}
<!-- Include Category Page Theme -->
<script src="https://js.klevu.com/theme/default/v2/catnav-theme.js"></script>
<script type="text/javascript">
var klevu_pageCategory = "{{ collection.title | escape }}";
sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);
</script>
{% endif %}
Raw
snippets klevu-metadata.liquid
<script type="text/javascript">
{% if template == 'collection'%}
var klevu_page_meta = {
"pageType": "category",
"categoryName": "{{collection.title | escape }}",
"categoryUrl": "{{shop.url}}{{collection.url}}",
};
{% endif %}
{% if template == 'product'%}
var klevu_page_meta = {
"pageType": "pdp",
"itemName": "{{product.title | escape }}",
"itemUrl": "{{shop.url}}{{ product.url}}",
"itemId": "{{product.selected_or_first_available_variant.id}}",
"itemGroupId": "{{product.id}}",
"itemSalePrice": "{{product.price | money_without_currency}}",
"itemCurrency": "{{shop.currency}}"
};
{% endif %}
{% if template == 'cart'%}
var cartRecords = [];
{% for item in cart.items %}
cartRecords.push({'itemId': {{item.variant_id}} ,'itemGroupId': {{item.product_id}} });
{% endfor %}
var klevu_page_meta = {
"pageType": "cart",
"cartRecords": cartRecords
};
{% endif %}
</script>
Raw
snippets klevu-pl-analytics.liquid
<script type="text/javascript">
klevu.interactive(function () {
var options = {
url: {
protocolFull: klevu.settings.url.protocol + "//",
analytics: klevu.settings.url.protocol + "//stats.klevu.com/analytics/",
analyticsCat: klevu.settings.url.protocol + "//stats.ksearchnet.com/analytics/"
},
powerup: {
analytics:true
},
analytics: {
apiKey: 'klevu-1234567890' // your Klevu JS API Key
}
};
klevu(options);
});
klevu.extend({
analyticsUtilShopifyPL: {
base: {
/**
* Function to get cat view term option object
* @param {*} dataObj
*/
getCategoryViewOptions: function (dataObj) {
var analyticsCategoryOptions = {
klevu_categoryName: "unknown",
klevu_src: "unknown",
klevu_categoryPath: "unknown",
klevu_productIds: "unknown",
klevu_pageStartsFrom: "unknown"
};
if (!dataObj) {
return analyticsCategoryOptions;
}
if (dataObj.categoryName) {
analyticsCategoryOptions.klevu_categoryName = dataObj.categoryName;
}
if (dataObj.categoryPath) {
analyticsCategoryOptions.klevu_categoryPath = dataObj.categoryPath;
}
if (dataObj.productIds) {
analyticsCategoryOptions.klevu_productIds = dataObj.productIds;
}
if (dataObj.src) {
analyticsCategoryOptions.klevu_src = dataObj.src;
}
if (dataObj.pageStartsFrom) {
analyticsCategoryOptions.klevu_pageStartsFrom = dataObj.pageStartsFrom;
}
return analyticsCategoryOptions;
},
/**
* Function to send cat view analytics request
* @param {*} termOptions
*/
sendCatViewAnalyticsRequest: function (termOptions) {
if (!termOptions) {
termOptions = this.getCategoryViewOptions({
categoryName: "",
src: "",
categoryPath: "",
productIds: "",
pageStartsFrom: ""
});
}
klevu.analyticsEvents.catview(termOptions);
},
/**
* Function to get cat product tracking click object
* @param {*} dataObj
*/
getCategoryProductClickTrackingOption: function (dataObj) {
var analyticsCategoryClickOptions = {
klevu_categoryName: "unknown",
klevu_src: "unknown",
klevu_categoryPath: "unknown",
klevu_productId: "unknown",
klevu_productName: "unknown",
klevu_productUrl: "unknown",
klevu_productSku: "unknown",
klevu_salePrice: "unknown",
klevu_productRatings: "unknown",
klevu_productPosition: "unknown"
};
if (!dataObj) {
return analyticsCategoryClickOptions;
}
if (dataObj.categoryName) {
analyticsCategoryClickOptions.klevu_categoryName = dataObj.categoryName;
}
if (dataObj.categoryPath) {
analyticsCategoryClickOptions.klevu_categoryPath = dataObj.categoryPath;
}
if (dataObj.productId) {
analyticsCategoryClickOptions.klevu_productId = dataObj.productId;
}
if (dataObj.productName) {
analyticsCategoryClickOptions.klevu_productName = dataObj.productName;
}
if (dataObj.productSku) {
analyticsCategoryClickOptions.klevu_productSku = dataObj.productSku;
}
if (dataObj.salePrice) {
analyticsCategoryClickOptions.klevu_salePrice = dataObj.salePrice;
}
if (dataObj.productRatings) {
analyticsCategoryClickOptions.klevu_productRatings = dataObj.productRatings;
}
if (dataObj.productPosition) {
analyticsCategoryClickOptions.klevu_productPosition = dataObj.productPosition;
}
if (dataObj.src) {
analyticsCategoryClickOptions.klevu_src = dataObj.src;
}
return analyticsCategoryClickOptions;
},
/**
* Function to send cat product click tracking analytics request
* @param {*} termOptions
*/
sendCategoryProductClickTrackingAnalyticsRequest: function (termOptions) {
if (!termOptions) {
termOptions = this.getCategoryProductClickTrackingOption({
categoryName: "",
src: "",
categoryPath: "",
productId: "",
productName: "",
productUrl: "",
productSku: "",
salePrice: "",
productRatings: "",
productPosition: ""
});
}
klevu.analyticsEvents.catclick(termOptions);
},
},
build: true
}
});
/**
* Analytics event for shopify preserve layout
*/
klevu.coreEvent.build({
name: "analyticsPowerUpShopifyPL",
fire: function () {
if (
!klevu.getSetting(klevu.settings, "settings.powerup.analytics", false) ||
!klevu.analytics ||
!klevu.analytics.build ||
!klevu.analyticsUtilShopifyPL ||
!klevu.analyticsUtilShopifyPL.build
) {
return false;
}
return true;
},
maxCount: 500,
delay: 30
});
klevu.interactive(function(){
if (typeof klevuSendProductData == 'function') {
klevuSendProductData();
}
if (typeof klevuSendCategoryData == 'function') {
klevuSendCategoryData();
}
});
</script>
Raw
snippets klevu-pl-collection-product.liquid
<script type="text/javascript">
if (typeof klevuProducts == 'undefined') {
var klevuProducts = new Array();
}
klevuProducts.push({{ product.id }});
</script>
Raw
snippets klevu-pl-collection.liquid
<script type="text/javascript">
var klevu_cat_name = "{{ collection.title }}";
var klevu_cat_url = {{ shop.url | append: collection.url | json }};
</script>
<script type="text/javascript">
function klevuSendCategoryData(){
var klevu_cat_name = "{{ collection.title }}";
var klevu_cat_url = {{ shop.url | append: collection.url | json }};
//storage
var category = klevu.dictionary("category");
category.setStorage("local");
category.mergeFromGlobal();
category.addElement("klevu_categoryName", klevu_cat_name);
category.addElement("klevu_categoryUrl", klevu_cat_url);
category.addElement("klevu_categoryProducts", klevuProducts);
category.mergeToGlobal();
var klevuCategoryOptions = {
klevu_categoryName: klevu_cat_name,
klevu_categoryPath: klevu_cat_name,
klevu_productIds: klevuProducts.join(",")
};
klevu.coreEvent.attach("analyticsPowerUpShopifyPL", {
name: "attachShopifyPLListingAnalytics",
fire: function () {
klevu.analyticsUtilShopifyPL.base.sendCatViewAnalyticsRequest(klevuCategoryOptions);
}
});
}
</script>
Raw
snippets klevu-pl-product.liquid
<script type="text/javascript">
{%- assign current_variant = product.selected_or_first_available_variant -%}
var klevuProduct = {
klevu_categoryName:"",
klevu_categoryPath:"",
klevu_productId:{{ product.id }},
klevu_productName: "{{ product.title }}",
klevu_productUrl:{{ shop.url | append: product.url | json }},
klevu_productSku:"{{ current_variant.sku }}",
klevu_salePrice: {{current_variant.price}}/100,
send: false
};
function klevuSendProductData(){
var category = klevu.dictionary("category");
category.setStorage("local");
category.mergeFromGlobal();
if(category.getElement("klevu_categoryName") != "klevu_categoryName" || category.getElement("klevu_categoryUrl") != "klevu_categoryUrl"){
if(document.referrer && document.referrer.indexOf(category.getElement("klevu_categoryUrl")) != -1){
klevuProduct.klevu_categoryName = category.getElement("klevu_categoryName");
klevuProduct.klevu_categoryPath = category.getElement("klevu_categoryName");
var products = category.getElement("klevu_categoryProducts").split(",");
if(typeof products == "object" && products.indexOf("{{ product.id }}") != -1 ){
klevuProduct.klevu_productPosition = products.indexOf("{{ product.id }}");
klevuProduct.send = true;
}
klevu.coreEvent.attach("analyticsPowerUpShopifyPL", {
name: "attachShopifyPLListingAnalytics",
fire: function () {
if(klevuProduct.send){
delete klevuProduct.send;
klevu.analyticsUtilShopifyPL.base.sendCategoryProductClickTrackingAnalyticsRequest(klevuProduct);
}
}
});
}
}
}
</script>
Raw
snippets klevu-quick-search-theme.liquid
<script type="text/javascript">
klevu.interactive(function () {
var options = {
url : {
landing: '/pages/search-results', // your Shopify Search Results Page
search: klevu.settings.url.protocol + '//eucsv2.klevu.com/cs/v2/search' // your Klevu APIv2 Search URL
},
search: {
minChars: 0,
searchBoxSelector: 'input[name=q],.kuSearchInput', // your Shopify Search Input
apiKey: "klevu-1234567890" // your Klevu JS API Key
},
analytics: {
apiKey: 'klevu-1234567890' // your Klevu JS API Key
}
};
klevu(options);
});
</script>
<script src="https://js.klevu.com/theme/default/v2/quick-search-theme.js"></script>
{% if template == 'page.klevu-search-results' %}
<!-- Include Search Results Landing Page Theme -->
<script src="https://js.klevu.com/theme/default/v2/landing-page-theme.js"></script>
{% endif %}
Raw
snippets klevu-recommendations.liquid
<script src="https://js.klevu.com/recs/v2/klevu-recs.js"></script>
<script type="text/javascript">
klevu.interactive(function () {
var options = {
powerUp: {
recsModule: true
},
recs: {
apiKey: "klevu-1234567890" // your Klevu JS API key
},
analytics: {
apiKey: "klevu-1234567890" // your Klevu JS API key
}
};
klevu(options);
});
</script>
Raw
templates page.klevu-search-results.liquid
<div class="page-width">
<h1>{{ page.title }}</h1>
<div class="klevuLanding"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment