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
Search Toggle and Search Bar on Mobile - Can we enable a Search Bar Toggle on Mobile
Options
Go to last post Go to first unread
Previous Topic Next Topic
jeffr_ca  
#1 Posted : Wednesday, November 11, 2020 3:26:41 PM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered, HelpDesk
Joined: 1/7/2019(UTC)
Posts: 112

Thanks: 1 times
Was thanked: 2 time(s) in 2 post(s)
Hello,

I've noticed that none of the Header Widgets Boards (Store Header Compact, Store Header MenuBar or Store Header Content Menu) display a Search Bar Toggle on mobile devices.

I'm working with Store Header Content Menu for my system. Could we enable a Search Toggle similar to the attachments?

Thanks!!

-Jeff

MobileNoSearchBar.jpg (131kb) downloaded 0 time(s).
AC 9 has No Search Tool on Mobile

MobileSearchBarToggle.jpg (133kb) downloaded 0 time(s).
Add Search Toggle Button

MobileSearchBarToggledON.jpg (137kb) downloaded 0 time(s).
Search Bar Open
Back to top

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.
Back to top  
shari  
#2 Posted : Thursday, November 12, 2020 4:43:50 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 704

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
Hi Jeff,

Currently, there is no option for a search bar on the mobile view.

Thanks
Back to top
jeffr_ca  
#3 Posted : Tuesday, November 24, 2020 7:48:52 PM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered, HelpDesk
Joined: 1/7/2019(UTC)
Posts: 112

Thanks: 1 times
Was thanked: 2 time(s) in 2 post(s)
Is there any way we could get a code snippet to add this into 9.0.3? It seems like we're the only mobile store interface around without an upfront search bar i.e. Amazon, Ebay, Walmart, Bestbuy, etc.

-Jeff
Back to top
shaharyartiwana25816656  
#4 Posted : Wednesday, November 25, 2020 11:35:08 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 704

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
You can try to place the Store Search widget from the Header category just below the main header.
But this will be visible on the desktop screen as well. To remove from desktop view and display on mobile view only you can add classes around the container in the layout HTML (Admin - Configure - Website menu) and then add CSS media queried to only display on mobile view.
Back to top
jeffr_ca  
#5 Posted : Sunday, November 29, 2020 4:12:28 PM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered, HelpDesk
Joined: 1/7/2019(UTC)
Posts: 112

Thanks: 1 times
Was thanked: 2 time(s) in 2 post(s)
Thanks. I tried the method you suggested and it works somewhat. The trouble is that the search bar becomes part of the page contents and when the page is scrolled, the search bar disappears behind the Nav Bar.

So, I played around with the _StoreItemsMenu.cshtml and came up with a solution that adds an extra button to the NavBar that toggles the Search Bar immediately below the Nav Bar. The original Menu toggle continues to work and pops up below the Search Bar.

I don't know if my programming is entirely correct, but it appears to be working on our site in testing. It's pretty simple but I'm pleased with how it's working so I've posted it here in case others can use it.

I'd like to improve it by giving the search bar Focus as soon as it is toggled on so that the mobile keyboard pops up and the customer can immediately start typing their search words. If anyone can offer suggestions on how to do that would be appreciated.

Thanks!

-Jeff

SearchBarWorkingExample.jpg (115kb) downloaded 2 time(s).


Code:

            <div class="navbar-header">
                <a id="able-span" href="@Url.Content("~/")" class="visible-xs navbar-brand"><img src="@Url.Content(ViewBag.MobileImageUrl)" alt="@ViewBag.MobileAlternateText" /></a>
  
  
<!--Assigned the data-target an ID for the original menu toggle button by Able so it doesn't conflict with our new search button below-->  
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Ablenavbar-collapse"><i class="fa fa-bars"></i></button>

<!--Added a new button for search toggle.  Assigned the data-target an ID for the new search toggle-->
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#WEDSearchbar-collapse"><i class="fa fa-search"></i></button>
				
								
                <a class="visible-xs pull-right navbar-brand" href="~/Checkout/Basket">
                    <span class="p1 fa-1x" data-count="@(basketItemsCount)">
                        <i class="fa fa-shopping-cart m-t-n-xs"></i>
                    </span>
                </a>
            </div>


<!--This is our new toggle-->

	<div class="visible-xs">
            <div  class="navbar-collapse collapse" id="WEDSearchbar-collapse">
                   <li class="visible-xs nav navbar-nav">			  
					@Html.Action("RenderStoreSearch")
                   </li>
            </div>
    </div>



<!--This is Able original code but we assigned an ID-->		
            <div class="navbar-collapse collapse" id="Ablenavbar-collapse">
                <ul class="nav navbar-nav sf-menu">
                    <li class="visible-xs text-center"><a href="~/Members" class="tab"><i class="acct"></i>@GetResourceString("retail.storemenu.account")</a></li>

Back to top
shaharyartiwana25816656  
#6 Posted : Monday, November 30, 2020 3:26:59 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 704

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
Hi Jeff,

Try adding this to your app.js file

Code:
$(function () {
    $('#WEDSearchbar-collapse').on('show.bs.collapse', function () {
        $('#Keywords').focus();
    })
});
Back to top
jeffr_ca  
#7 Posted : Monday, November 30, 2020 8:26:05 AM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered, HelpDesk
Joined: 1/7/2019(UTC)
Posts: 112

Thanks: 1 times
Was thanked: 2 time(s) in 2 post(s)
Thanks...I've given it a quick try, but no success. I will check it further later.

-Jeff
Back to top
jeffr_ca  
#8 Posted : Monday, November 30, 2020 9:32:22 PM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered, HelpDesk
Joined: 1/7/2019(UTC)
Posts: 112

Thanks: 1 times
Was thanked: 2 time(s) in 2 post(s)
I've placed the code into the ~/scripts/app.js file and have re-checked and tried a few changes, but still not successful with automatically setting focus when the search bar opens.

Any further ideas on this?

-Jeff
Back to top
Users browsing this topic
Guest (10)
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.196 seconds.