How can I search and display SKU in Dawn theme 2.0?

Store Design
,
1

I’ve been able to add SKU as part of the display by adding this in the predictive-search.liquid for Dawn 2.0


 {%- assign current_variant = product.selected_or_first_available_variant -%}
                    SKU: {{ current_variant.sku }}

There are two additional modifications I need,

  1. Ability to search by SKU

  2. After pressing enter on search, display SKU in the screen that appears from the ‘Search’.

Please be specific about what code modifications are needed and where to include them.

2

Try adding variants.sku as a search parameter to search form behaviors.

i.e. ?q=variants.sku%1234abcd

The native shopify search for the online sales channel is very basic and introductory.

It isn’t meant to meet increasingly specific demands. So it’s all workarounds.

That feature is a large advanced customization beyond the scope of the forums.

Keep requests small and specific such as displaying/hiding some property, or styling.

Broadly you either need to:

  • use an actual dedicated search app/service that facilitates searching by a specific property
  • heavily customize the search to fake being a sku lookup / parts lookup tool (research the forums) by only showing exact match results in liquid and or javascript
  • and or heavily customize the filter system to use skus for filtering a collection with all products; and the limitations that comes with.

If you need this customization explored and built then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Good Luck.

3

Ability to search by SKU in Dawn V14.0 I had to edit assets/predictive-search.js

Look for the Fetch request and update as follows:

fetch(`${routes.predictive_search_url}?q=${encodeURIComponent(searchTerm)}&resources[type]=product&resources[options][unavailable_products]=hide&resources[options][fields]=title,variants.sku,product_type,variants.title§ion_id=predictive-search`,
     { signal: this.abortController.signal }
    )
      .then((response) => {
        if (!response.ok) {
          var error = new Error(response.status);
          this.close();
          throw error;
        }
1 Like
4

Hi, your code works, but I was wondering if it is possible to add something extra so that people can search a specific part of the SKU.
Let’s say the item number SKU is: 99.5685.52.
I would like customer to search for 5685. and not the whole number beginning with 99.***

You think this is possible? Thx in advance

5

Thank you!