Background filtering with Self-Snap

[donhello]

Hi,

We are trying to integrate SNAP into an existing liquid file within our Shopify store.

We understand that SNAP has it's way of reading from the url for querying/filtering results.

But the thing is we need to maintain the current url we have on our site, we want to put SNAP on our collections pages.

The plan is to break down the collection url (example: collections/dresses/color_multi-pattern)

let filtering = {
 collection-name : dresses
 color: multi-pattern
}

//to something like this and then pass it somewhere to update the results.

in addition to this, since we are integrating on an existing liquid template, we will be building this ahead of time.
Therefore we'll be reading the url from within the SNAP project, unless there is a way to pass these parameters in any other way.

Is this possible?

[korgon]

Hello @donhello,

I would suggest using the script context as outlined in our background filtering docs:
https://searchspring.github.io/snap/#/integration-backgroundFilters

Here is a liquid snippet that our Implementation team commonly use on Shopify integrations:

{%- if customer -%}
{% capture ss_shopper_config %}
shopper = { id: "{{ customer.id }}" };
{% endcapture %}
{%- endif -%}

{% assign ss_defer_config = ' defer' %}
{%- if collection.handle and template contains 'collection' -%}
{% assign ss_defer_config = '' %}
{%- if collection.handle != settings.ss_collection_handle -%}
{% capture ss_collection_config %}
collection = { id: "{{ collection.id }}", name: "{{ collection.title | replace: '"', '"' }}", handle: "{{ collection.handle }}" };
{% endcapture %}
{%- endif -%}
{%- endif -%}

{%- if current_tags -%}
{% capture ss_tags_config %}
tags = "{{ current_tags | join: '|' | replace: '"', '"' }}";
{% endcapture %}
{%- endif -%}

{%- if template -%}
{% capture ss_template_config %}
template = "{{ template }}";
{% endcapture -%}
{%- endif -%}

{% capture ss_money_config %}
format = "{{ shop.money_format }}";
{% endcapture %}

{% comment %}Searchspring Script{% endcomment %}
<script src="https://snapui.searchspring.io/{{ settings.ss_site_id }}/bundle.js" id="searchspring-context"{{ ss_defer_config }}>
{{ ss_shopper_config }}{{ ss_collection_config }}{{ ss_tags_config }}{{ ss_template_config }}{{ ss_money_config }}
</script>

You would then grab the script context via getContext (see background filtering docs) and use it to build out your background filters that then get passed into the appropriate controller. For example:

const context = getContext(['collection', 'tags', 'template', 'shopper']);
let backgroundFilters = [];

if (context.collection?.handle) {
	// set background filter
	backgroundFilters.push({
		field: 'collection_handle',
		value: context.collection.handle,
		type: 'value',
		background: true,
	});

	// handle collection tags (filters)
	if (context.tags) {
		const collectionTags = context.tags.toLowerCase().replace(/\&quot\;/g, '"').replace(/-/g, '').replace(/ +/g, '').split('|');
		collectionTags.forEach((tag) => {
			backgroundFilters.push({
				field: 'ss_tags',
				value: tag,
				type: 'value',
				background: true,
			});
		});
	}
}

You may find that you don't need everything from the snippets above, but I hope it helps you get collection pages integrated.

Cheers!

[donhello]

Looks good, I'll try this and get back to you.

btw I see that this implementation uses the managed integration, the reason I opted for self-snap is that github fails when ever I try to publish, even without new commits.

just to confirm, will the context variables work with this approach?

<script src="./bundle.js" id="searchspring-context">
{{ ss_shopper_config }}{{ ss_collection_config }}{{ ss_tags_config }}{{ ss_template_config }}{{ ss_money_config }}
</script>

[korgon]

Yes the managed integration will upload the finalized bundle to the CDN: https://snapui.searchspring.io/siteId/bundle.js - the script context variables will work regardless of where the bundle resides, so your example ought to work as expected.