Why does the search bar on my Alchemy-themed website show incorrect product prices?

[Liquid-kicks]

Dear All,

My website is sub11.io and if you go to the search bar and search for an item it shows the price of any item wrongly. It adds one 0 for some reason. 

for example a product priced at 166JD will show on the search bar as 1,660JD

Very weird.

I looked into the code and came up with this.

{%- for i in (1..5) -%}
<div class="search-result search-result--placeholder">
<div class="search-result__link">
<div class="search-result__image"></div>
<div class="search-result__detail">
{%- if settings.live_search_show_vendor -%}
<div class="search-result__vendor"></div>
{%- endif -%}
<div class="search-result__title"></div>
<div class="search-result__price"></div>
</div>
</div>
</div>
{%- endfor -%}

I highlighted in bold the class search-result__price and was wondering if I can use a custom css edit to 

[Guleria]

Hello @Liquid-kicks ,

I checked and found yes there is extra 0 but without checking the code its not possible to provide a solution for it.

The code you shared is not enough to provide a solution. If you can please share the code which fetches the result.

Alternatively once try to reach the theme author.

Thanks 

[Liquid-kicks]

Hi Developer-G

Thank you so much for trying to help.

This is the code for the search bar in the header:-

{%- if settings.enable_search -%}
<div class="header-search side-drawer no-js-hidden">
<button type="button" class="side-drawer__close-btn" aria-label="{{ 'general.accessibility_labels.close' | t | escape }}">{% render 'svg-x' %}</button>

<div class="header-search__content">
<h2 class="h3">{{ 'layout.search.title' | t }}</h2>
<form method="get" action="{{ routes.search_url }}" autocomplete="off">
<input type="hidden" name="type" value="{{ settings.search_type }}">
<input type="hidden" name="options[prefix]" value="last">
<div class="input-with-button">
<div class="input-with-button__input-wrapper input-with-clear">
<input class="input-with-button__input input" type="search" name="q" placeholder="{{ 'layout.search.placeholder' | t | escape }}" autocomplete="off" data-previous-value="" aria-label="{{ 'layout.search.placeholder' | t | escape }}">
<button class="input-with-clear__clear" type="button">{% render 'svg-close' %}</button>
</div>
<button class="input-with-button__button button button--alt" type="submit">{{ 'layout.search.submit' | t }}</button>
</div>
</form>
<div class="header-search__results-wrapper"
data-live-search-vendor="{{ settings.live_search_show_vendor }}"
data-live-search-meta="{{ settings.live_search_search_meta }}">
<div class="header-search__placeholder">
{%- for i in (1..5) -%}
<div class="search-result search-result--placeholder">
<div class="search-result__link">
<div class="search-result__image"></div>
<div class="search-result__detail">
{%- if settings.live_search_show_vendor -%}
<div class="search-result__vendor"></div>
{%- endif -%}
<div class="search-result__title"></div>
<div class="search-result__price"></div>
</div>
</div>
</div>
{%- endfor -%}
</div>
<div class="header-search__results"></div>
</div>

{%- if section.settings.search_menu_linklist != blank and linklists[section.settings.search_menu_linklist].links.size > 0 -%}
<div class="header-search__nav">
{%- if section.settings.search_menu_title != blank -%}
<h3 class="header-search__small-heading h6 meta">{{ section.settings.search_menu_title }}</h3>
{%- endif -%}

<ul class="header-search__links unstyled-list">
{%- for link in linklists[section.settings.search_menu_linklist].links -%}
<li class="header-search__links-item">
<a href="{{ link.url }}">{{ link.title | strip }}</a>
</li>
{%- endfor -%}
</ul>
</div>
{% endif %}
</div>
</div>
{%- endif -%}
</div>

This is the code that fetches the result.

{%- layout none -%}
{%- paginate search.results by 6 -%}
{%- capture products_output -%}
{%- for result in search.results -%}
{%- if result.object_type == 'product' -%}
,{"title":{{ result.title | json }},"url":{{ result.url | json }}
{%- if result.images and result.images.size > 0 -%}
,"image":{{ result.images[0] | image_url | json }}
{%- endif -%}
,"vendor":{{ result.vendor | json }},"price_max":{{ result.price_max }},"price_min":{{ result.price_min }},"compare_at_price_min":{{ result.compare_at_price_min }}}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}

{%- capture pages_output -%}
{%- for result in search.results -%}
{%- if result.object_type == 'page' -%}
,{"title":{{ result.title | json }},"url":{{ result.url | json }}}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}

{%- capture articles_output -%}
{%- for result in search.results -%}
{%- if result.object_type == 'article' -%}
,{"title":{{ result.title | json }},"url":{{ result.url | json }}
{%- if result.image -%}
,"image":{{ result.image | image_url | json }}
{%- endif -%}
}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}

{%- comment -%} Output the json object {%- endcomment -%}
{"resources":{"results":{"products":[{{ products_output | remove_first: ',' }}],"pages":[{{ pages_output | remove_first: ',' }}],"articles":[{{ articles_output | remove_first: ',' }}]}}}
{%- endpaginate -%}

[Guleria]

This code looks fine.

Can you share the code where ajax return the results and appends it in the html and the ajax JS code ?

[Liquid-kicks]

Im not sure where the ajax call is and how I can see the ajax return call.

[Guleria]

Without this it is not possible for me to provide a solution.

btw you can try to use a fresh copy of the theme because as i checked in the demo store it works fine there.

or alternatively you can go with a developer to fix it. 

[Liquid-kicks]

Developer-G thank you so much for helping out. In all cases its a learning curve for me and I am actually starting to understand liquid so much better.

1. On the demo store it does work fine. That is correct. The currency is in USD. I downloaded a fresh copy on the site and still getting the same results (same problem). I saw on another thread that someone is having the same problem (Bahraini store) and now Im think that it does have to do with unsupported currency (both myself and his store are not working).

2. I have searched all the code with the keyword function and I didnt get anything in return. I assume that there are no ajax calls?

3. I found an interesting code file called unit-price.liquid (maybe that will help)... I was thinking here maybe I can add a filter | divided by 10 or something. Please have a look and do let me know thank you!

{%- if variant.unit_price_measurement -%}
{%- capture unit_price_base_unit -%}
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{- variant.unit_price_measurement.reference_unit -}}
{%- endif -%}
{%- endcapture -%}
<div class="unit-price {{ class }}">
<span class="unit-price__price theme-money">{{ variant.unit_price | money }}</span>
<span class="unit-price__separator">{{ 'products.product.unit_price_separator' | t }}</span>
<span class="unit-price__unit">{{ unit_price_base_unit }}</span>
</div>
{%- endif -%}

[Guleria]

1) Then it seems there is a conflict with an app.

2) Search is working with ajax that's why I asked for it.

3) You can but I don't recommend it because the issue is only with the search.  

[Liquid-kicks]

Hi Developer-G,

I agree with you. Need to fix the route problem. Look at what I found in the theme.js file:

theme.announcementHeight = 0;
theme.HeaderSection = new function () {
this.onSectionLoad = function (target) {
// Search
if (theme.settings.enable_search) {
var $searchWrapper = $('.header-search__results-wrapper');
var $searchContainer = $('.header-search__content', target);
var $searchResultsContainer = $('.header-search__results', target);
var currentReq = null;
var searchThrottleDelay = 400;
var searchThrottleTimeoutId = -1;
var imageReplaceRegex = {
search: /(\.[^\.]+)$/,
replace: '_100x$1' };

var removeResultsAndPrepForMore = function removeResultsAndPrepForMore() {
var $oldResults = $searchResultsContainer.addClass('header-search__results--disband');
setTimeout(function () {
$oldResults.remove();
}, 500);
$searchResultsContainer = $('<div class="header-search__results">').insertAfter($searchResultsContainer);
};
$('.header-search .input-with-button__input', target).on('change.themeHeaderSection keyup.themeHeaderSection paste.themeHeaderSection', function (e) {
var $input = $(this),
$form = $(this).closest('form'),
includeMeta = $searchWrapper.data('live-search-meta');

// Has value changed?
if ($input.val() == $input.data('previous-value')) {
return;
}

Could this be the cause? The replace: '_100x$1' ]; ???

My knowledge with js is not great.

So after reverse engineering I changed it to 10x$1 but what happened is the photo of the product in the search box got smaller.

I guess thats not it...

[Guleria]

Can you please share the theme zip in my email so I can check it in my development store. 
In this way I can confirm what the exact issue.    

[Liquid-kicks]

Just sent it over thank you!

[Guleria]

There is no issue with the theme. You can check here https://client-store-5.myshopify.com/ 
Same theme installed and it works fine. Try to disable the apps you installed one by one to find the conflict. 

[Liquid-kicks]

In the link you provided the price of the items do not show up. Isnt that correct?

Im trying to uninstall apps and see if it affects it now..

[Guleria]

For me it shows the link. Maybe either you are not on the correct path or it's me who doesn't understand the issue.  

btw please check the attached screen-shot

And the link of first search result is https://client-store-5.myshopify.com/products/test-product-2

[Liquid-kicks]

Developer G,

Thank you so much for trying to help me out. I really appreciate it.

I deleted all the apps and nothing changed.

I finally resolved the problem. The solution is actually way more complex than anticipated but I cant believe I figured it out lol...

I had to completely edit the javascript code and keep console logging until I debugged it.

Really cant believe the theme authors.... nobody tried to help and they must know of the code!!

There are two things to note:-

1. The prices coming out of the search box are coming from the javascript code and

2. The prices of the product cards are coming from the Shopify liquid code  and they are both different.

So once I fixed the search bar I had to fix the product card also as it was rounding up products too.

If you look at line 93-102 in the theme.js ---> huge problems here its actually completely wrongly coded!

first thing I did was take out the t= (t/100).toFixed(r); as this will round up numbers.

I then created an if clause

t= String(t); (defined price here as a string)

if (t.includes(".") {

if(Number(t.split(".")

[1] === 0) {

return t.split(".")

[0];

}

else{

t=t.substring(0, t.length-2);

return t;

}

}

else { 

reused the old code here

}

If you also look at line 111 in the theme.js --> problem here too with o...

should be o= a(t, 2);

For a non developer... not bad for an autobot eh!