logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error
Unable To Access Search On Small Screens
Options
Go to last post Go to first unread
Previous Topic Next Topic
rlopez397954  
#1 Posted : Thursday, May 5, 2022 6:27:35 PM(UTC)
rlopez397954

Rank: Advanced Member

Groups: Authorized User, Registered, Developers, HelpDesk
Joined: 11/30/2018(UTC)
Posts: 86

Thanks: 8 times
Was thanked: 1 time(s) in 1 post(s)
One of our production sites has been running since version 9.0.2 and is up to date 9.0.6. I just came across a problem with the search Icon, when touched, does not bring up a search box and this happens on tablets vertically S8 and smart phones both horizontal as well as vertical S8+ using Android OS.

This site uses the (Store Header Compact) and (Store Menu light) with the search box hidden until Icon is touched. I have tested with both Chrome and Firefox and the condition is the same. We don't use Apple so I have no way to test at this time their OS to see if the problem is there as well.

No custom changes ever made as well to the Store Menu. If anyone is using the same header or menu setup your feedback would be great.

Thanks again.
Back to top

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.
Back to top  
nadeem  
#2 Posted : Friday, May 6, 2022 6:03:25 AM(UTC)
nadeem

Rank: Advanced Member

Groups: Administrators, Developers, Registered, HelpDesk, Authorized User, Admin, System
Joined: 10/11/2018(UTC)
Posts: 110

Thanks: 19 times
Was thanked: 18 time(s) in 18 post(s)
Quote:
I just came across a problem with the search Icon, when touched, does not bring up a search box and this happens on tablets vertically S8 and smart phones both horizontal as well as vertical S8+ using Android OS.


Is this working on any other mobile device? Can you confirm the following styles section inside your theme's default.css file? The file is located at \Website\Themes\{YOUR_THEME}\Content\default.css

Code:

/* MOBILE VIEW SEARCH FEATURE */
#store-header-menubar #mobile-search-icon,
header.navbar #mobile-search-icon {
    margin-top: 4px;
}

#header-dark header.navbar #mobile-search-icon {
    color:white;
}

#mobile-search-field {
    position: fixed;
	top:45px;
    left:0;
    right:0;
	padding:15px 0 15px 0;
	z-index:999;
    display:none;
}

#mobile-search-field .form-control {
	font-size:25px;
	height:auto;
	border:0;
	font-weight:400;
	box-shadow: 0 1px 5px 0 rgba(0,0,0,0.15);
}
Back to top
rlopez397954  
#3 Posted : Friday, May 6, 2022 9:54:32 AM(UTC)
rlopez397954

Rank: Advanced Member

Groups: Authorized User, Registered, Developers, HelpDesk
Joined: 11/30/2018(UTC)
Posts: 86

Thanks: 8 times
Was thanked: 1 time(s) in 1 post(s)
I checked several mobile devices accept IOS products as we do not have them in house. Our default CSS is correct.

It appears this behavior is only apparent on small Mobile phones V and H positions and on Tablets in the V position, but works fine in the H position. The site is live if you want to check.

Thanks for your quick response.



/* MOBILE VIEW SEARCH FEATURE */
#store-header-menubar #mobile-search-icon,
header.navbar #mobile-search-icon {
margin-top: 4px;
}

#header-dark header.navbar #mobile-search-icon {
color:white;
}

#mobile-search-field {
position: fixed;
top:45px;
left:0;
right:0;
padding:15px 0 15px 0;
z-index:999;
display:none;
}

#mobile-search-field .form-control {
font-size:25px;
height:auto;
border:0;
font-weight:400;
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.15);
}
Back to top
nadeem  
#4 Posted : Friday, May 6, 2022 10:40:21 AM(UTC)
nadeem

Rank: Advanced Member

Groups: Administrators, Developers, Registered, HelpDesk, Authorized User, Admin, System
Joined: 10/11/2018(UTC)
Posts: 110

Thanks: 19 times
Was thanked: 18 time(s) in 18 post(s)
Yes please share the website link. Thanks!
Back to top
rlopez397954  
#5 Posted : Friday, May 6, 2022 11:07:39 AM(UTC)
rlopez397954

Rank: Advanced Member

Groups: Authorized User, Registered, Developers, HelpDesk
Joined: 11/30/2018(UTC)
Posts: 86

Thanks: 8 times
Was thanked: 1 time(s) in 1 post(s)
Nadeem go to www.marinesteering.net give it a good pounding.

Let me know if you find a different behavior.

Thanks again for your help.

Ricky
Back to top
ray22901031  
#6 Posted : Friday, May 6, 2022 11:43:48 AM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
Hi Ricky,

Thank you for bringing this up to my attention, I am also experiencing the same problem using version 9.0.5. I just copied the code provided by support to my custom.css file, but it did not resolve the issue. I'm doing this on a local server and not the production server.

However, my main site www.MyRadioMall.com experiences the same issue. This is obviously due to a media query being executed somewhere. You don't need a mobile phone or a small device to test this. This is better tested in chrome and all you have to do is resize the website, and you will notice that the search box whether open or not will disappear as you shrink the site.

Using my pixel ruler, this seems to occur once the width of both our websites approaches 750px.

I'm constantly working on another issue, but it definitely seems to be revolving around a media query executing from large to medium.

I hope this helps support in trying to pinpoint this problem.

Thank you for bringing this up.

Ray

Edited by user Friday, May 6, 2022 11:44:33 AM(UTC)  | Reason: Not specified
Back to top
nadeem  
#7 Posted : Friday, May 6, 2022 1:14:46 PM(UTC)
nadeem

Rank: Advanced Member

Groups: Administrators, Developers, Registered, HelpDesk, Authorized User, Admin, System
Joined: 10/11/2018(UTC)
Posts: 110

Thanks: 19 times
Was thanked: 18 time(s) in 18 post(s)
Can you confirm the following inside your _StoreMenuLigh.cshtm file.
Code:

<div id="mobile-search-field">
    @Html.Action("RenderStoreMobileSearch")
</div>


I can't seem to find this HTML using the view source on your site. Maybe you have overridden the _StoreMenuLigh.cshtm view file under your theme which is missing the above markup?

Edited by user Friday, May 6, 2022 1:18:13 PM(UTC)  | Reason: Not specified
Back to top
ray22901031  
#8 Posted : Friday, May 6, 2022 1:38:45 PM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
Thank you for your prompt reply, no, we do not have this in our "_StoreMenuLight.cshtml" file. I have personally modified this file, so where exactly at what line number do you suggest that this to be inserted?


Also, worth noting:

It's interesting to note the difference between my site and "www.marinesteering.net". Their search icon shows after you shrink their site, our search icon disappears. This is done deliberately, although Google puts a lot of emphasis on mobile devices, we do not feel that our customers will search for items on such a small screen. Instead, we present our customers with menus for navigation (at the hamburger level), and one of the choices is the advanced search, which displays properly.

You would really need to have a tiny monitor nowadays to have such a low resolution, where the width of a website is under 800px. Even a tablet in landscape mode would have a width greater than 800px. So for us, this is not a big issue, since we don't feel people will actually search for specific items that we offer based on a SKU. We prefer again to use menus for navigation.

Google can put all the emphasis it wants on mobile devices, but when it's time to purchase, a majority, if not all, comes from desktop computers, and you would still have to be living in the Stone Age to have a 12" monitor and a low resolution that displays lower than 800px.

Thanks,
-Ray
Back to top
nadeem  
#9 Posted : Friday, May 6, 2022 1:50:28 PM(UTC)
nadeem

Rank: Advanced Member

Groups: Administrators, Developers, Registered, HelpDesk, Authorized User, Admin, System
Joined: 10/11/2018(UTC)
Posts: 110

Thanks: 19 times
Was thanked: 18 time(s) in 18 post(s)
Just put it at the end of the file.
Back to top
ray22901031  
#10 Posted : Friday, May 6, 2022 2:08:32 PM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
Following your instructions, this indeed took care of this issue. Since our search icon will hide under 800px, we opened up the search box first and then started to shrink the site in, the search box stayed until the hamburger menu appeared.

We will add this to our "_StoreMenuLight.cshtml" file, but we will comment out the code since we don't use it on anything under 800px. It's also important to note that we did not have to modify or add anything to my custom.css file.

I hope this helps others.

Many Thanks,
-Ray
Back to top
nadeem  
#11 Posted : Friday, May 6, 2022 2:12:53 PM(UTC)
nadeem

Rank: Advanced Member

Groups: Administrators, Developers, Registered, HelpDesk, Authorized User, Admin, System
Joined: 10/11/2018(UTC)
Posts: 110

Thanks: 19 times
Was thanked: 18 time(s) in 18 post(s)
Thanks for the confirmation Ray! Yes, the other site http://www.marinesteering.net have the same issue.

Ricky, please put the provided html to the store menu light view file and it should fix your issue as well.

Edited by user Friday, May 6, 2022 2:15:17 PM(UTC)  | Reason: Not specified
Back to top
rlopez397954  
#12 Posted : Friday, May 6, 2022 5:29:05 PM(UTC)
rlopez397954

Rank: Advanced Member

Groups: Authorized User, Registered, Developers, HelpDesk
Joined: 11/30/2018(UTC)
Posts: 86

Thanks: 8 times
Was thanked: 1 time(s) in 1 post(s)
I'm just getting back to this been out in the field all day. Thank you all for looking into this and getting a fix for it. The div tag was missing and after installing it, the search is now working correctly.


Just a quick thought. Our setup uses a custom theme with the Views>Shared> directory to keep everything clean specifically when having to upgrade. I went back and checked backups from 9.0.5 to 0.6 and sure enough in the main directory Views>Shared>StoreMenuLight.cshtml has the div statement <Mobile Search Field>.

After checking our custom theme Views>Shared> directory the div statement is missing. This is puzzling because the Store Menu Light file was copied from the main directory original file, to begin with.

So a final question is, should we remove a file (.cshtml) from the main directory if using that file in a custom themes directory?


Thanks again Nadeem and Ray for all of your help on this problem!


Ricky
Back to top
ray22901031  
#13 Posted : Friday, May 6, 2022 5:57:44 PM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
Hi Ricky,

I, personally, would not remove the file for the reasons that you explained in your post. You said you found the missing div statement in the main directory, that's probably because between version 9.01 to 9.05 it was updated at some point.

I started working on our site using version 9.0.1, so I'm uncertain if I manipulated my "_StoreMenuLight.cshtml" file using 9.0.1 or 9.0.2. My original file has a date of 1/19/2022, and it does not have the <div id="mobile-search-field"> code block.

Your custom file will always override the original, if something were to happen to your custom file, then the original would kick in, so it's better to keep this file just in case, and as you just pointed out you can use it as a reference point.

We both probably started to manipulate an older version before 9.0.4 where that code block did not exist, no big thing.

One last thing, you can always check the updates to see when that file was overwritten.

Although we don't use search at a lower resolution, I do appreciate you bringing this up.

Thanks,
-Ray

Edited by user Friday, May 6, 2022 5:59:13 PM(UTC)  | Reason: Not specified
Back to top
rlopez397954  
#14 Posted : Friday, May 6, 2022 6:13:56 PM(UTC)
rlopez397954

Rank: Advanced Member

Groups: Authorized User, Registered, Developers, HelpDesk
Joined: 11/30/2018(UTC)
Posts: 86

Thanks: 8 times
Was thanked: 1 time(s) in 1 post(s)
Ray, I agree 100% with not removing any files from the main directory. Also, I am going to go back through the backup files to see when the change was made.

I'm at fault for not looking more closely with upgrades and file changes that will need to be merged between the main directory and our custom theme directory when those files have been updated.

Thanks again for your help and input.

Ricky
Back to top
ray22901031  
#15 Posted : Friday, May 6, 2022 6:48:13 PM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 909

Thanks: 3 times
Was thanked: 15 time(s) in 15 post(s)
Please let me know what you find, obviously I missed it as well. These little things will fall through the cracks, until someone brings it up. I'm just grateful we all have this forum to rely on.

Thanks

UPDATE: I had a few minutes to kill before giving one of my cats his nightly insulin shot, so I did some poking around. It was the 9.0.4 to 9.0.5 upgrade that introduced this code block at the very bottom. I'm going to do a compare later on tonight to see what else I have missed.

Oh well!
-Ray

Edited by user Friday, May 6, 2022 7:22:19 PM(UTC)  | Reason: Not specified
Back to top
Users browsing this topic
Guest (21)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Privacy Policy | Powered by YAF.NET 2.2.4.14 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.296 seconds.