Integration: Lightspeed

Spotler Activate Search (previously Sooqr) can be integrated with Lightspeed to enable a powerful search solution for your e-commerce platform. Lightspeed is a leading cloud-based commerce platform that provides tools for inventory management, point-of-sale systems, and e-commerce solutions. Learn more on the Lightspeed website.

This step-by-step plan contains the following steps:

Step 1 – Create a custom feed in Lightspeed

To generate a product feed for Spotler Activate Search, follow these steps:

    1. Log in to your Lightspeed administration at /admin/auth/login.
    2. In the left menu, click Settings, then select Feeds in the Website Settings column.
    3. At the bottom, click Go to Custom Feeds.
    4. Click the green button Add Feed in the top-right corner.
    5. Provide a name for the feed (e.g., "Spotler"). Leave the Copy from field empty and click Save.
    6. In the script editor that appears, paste the following code:
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:g="http://base.google.com/ns/1.0">
<channel>
<title>{{ shop.title | cdata }}</title>
<link>{{ shop.domain | cdata }}</link>
<description>{{ shop.description | cdata }}</description>
{% for product in products %}
<item>
<id>{{ product.id }}</id>
<mpn>{{ product.sku | cdata }}</mpn>
<title>{{ product.title | cdata }}</title>
<longtitle>{{ product.fulltitle | cdata }}</longtitle>
<description>{{ product.description | cdata }}</description>
<link>{{ product.url | url }}</link>
<image>{{ product.image | url_image | replace('image', 'image1') }}</image>
{% if product.price.price_old_incl %}
<sale_price>{{ product.price.price_old_incl | money_float }} {{ shop.currency | upper }}</sale_price>
<price>{{ product.price.price_incl | money_float }} {{ shop.currency | upper }}</price>
{% else %}
<g:price>{{ product.price.price_incl | money_float }} {{ shop.currency | upper }}</g:price>
{% endif %}
<currency>eur</currency>
{% if product.available %}
<stock>{{ product.stock_level }}</stock>
<in_stock>In stock</in_stock>
{% else %}
<out_of_stock>out of stock</out_of_stock>
{% endif %}
<category>
<![CDATA[
{% if product.categories %}
{% for category in product.categories | limit(1) %}
{{ category.title }}
{% endfor %}
{% endif %}
]]>
</category>
<subcategory>
<![CDATA[
{% if product.categories %}
{% for category in product.categories | limit(1) %}
{% if category.subs|length > 0 %}
{% for subcategory in category.subs | limit(1) %}
{{ subcategory.title }}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
]]>
</subcategory>
<subsubcategory>
<![CDATA[
{% if product.categories %}
{% for category in product.categories | limit(1) %}
{% if category.subs|length > 0 %}
{% for subcategory in category.subs | limit(1) %}
{% if subcategory.subs|length > 0 %}
{% for subsubcategory in subcategory.subs %}
{{ subsubcategory.title }}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
]]>
</subsubcategory>
{
<ean>{{ product.ean | cdata }}</ean>
{% if product.brand %}
<brand>{{ product.brand.title | cdata }}</brand>
{% endif %}
</item>
{% endfor %}
</channel>
</rss>
  1. Click Save and then Close.
  2. Click View link to confirm the feed data is visible.

Step 2 – Generate the data feed in Spotler Activate Search

Log in to Spotler Activate Search using your credentials. If you encounter issues logging in, contact Spotler Support.

Follow the on-screen instructions to add the data feed link from Lightspeed. Ensure the feed is set to synchronize regularly for accurate indexing.

Step 3 – Add the Spotler Activate Search snippet to your website

    1. In Spotler Activate Search, locate your six-digit Spotler ID at the top-right corner.
    2. Log in to your Lightspeed administration and navigate to Settings Web Extras.
    3. Paste the following snippet into the Custom JS field:
<!-- Start Sooqr.com on-site search and navigation code -->
<script type="text/javascript">
var _wssq = _wssq || [];
var setResizeFunction= false;
var sooqrAccount = '******-1';
_wssq.push(['_load', { 'suggest' : { 'account' : 'SQ-' + sooqrAccount, 'version' : 4, fieldId : 'searchInput'}}]);
_wssq.push(['suggest._setPosition', 'screen-middle', {top:0}]);
_wssq.push(['suggest._setLocale', 'nl_NL']);
_wssq.push(['suggest._excludePlaceholders', 'Search..']);
_wssq.push(['suggest._bindEvent', 'open', function() {
if(!setResizeFunction) {$jQ( window ).resize(function() {if($jQ('.sooqrSearchContainer-' + sooqrAccount).is(':visible'))
{websight.sooqr.instances['SQ-' + sooqrAccount].positionContainer(null, null, true);}});setResizeFunction = true;}
}]);
(function() {
var ws = document.createElement('script'); ws.type = 'text/javascript'; ws.async = true;
ws.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'static.sooqr.com/sooqr.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ws, s);
})();
</script>
<!-- End Sooqr.com on-site search and navigation code -->

Replace the ****** in the code with your Spotler ID.

Ensure the fieldId in the snippet matches the id of the search input field on your website.

Inspect the input of the search bar on your website and make sure that the id is set to the same value as the fieldId on line 7.

  • If you have multiple search bar inputs loaded on the same page at the same time, please make sure that the ID is unique. You can set multiple field id’s like this: fieldId : ['searchInput1','searchInput2']
  • You can also use the following code that identifies searchbar inputs by the name 'q' and then sets the id to search followed by a number starting with 0:

Screenshot 2023-05-23 at 13.07.29.png

var searchInputs = document.getElementsByName('q');
for (var i = 0, l = searchInputs.length; i < l; i++) {
searchInputs[i].setAttribute('id', 'search' + i);
}

Refresh your website and test the search functionality to ensure it works correctly.