Post by SubatWest » Fri Nov 18, 2016 6:58 pm

Hi again
No sooner do I solve one problem when my son sets me another!
This time he wanted an expanded search box in menu bar and remove normal search box.
I am not a coder just a 66 year old who has time and is enjoying learning (with the help of some great guys on this forum) I am sure others would like this feature. So i'll outline the full code. The install is OC 2.1.0.1
So the task - searching the internet I have put together a js "file expanding-search.js" with code:

Code: Select all

$(document).ready(function(){
            var submitIcon = $('.ty-search-magnifier');
            var inputBox = $('.ty-search-block__input');
            var searchBox = $('.cm-processed-form');
            var isOpen = false;
           submitIcon.click(function (event) {
                if (isOpen == false) {
                    event.preventDefault();
                    searchBox.addClass('cm-processed-form-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('cm-processed-form-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });
             submitIcon.mouseup(function(){
                    return false;
                });
            searchBox.mouseup(function(){
                    return false;
                });
            $(document).mouseup(function(){
                    if(isOpen == true){
                        $('.ty-search-magnifier').css('display','block');
                        submitIcon.click();
                    }
                });
        });
            function buttonUp(){
                var inputVal = $('.ty-search-block__input').val();
                inputVal = $.trim(inputVal).length;
                if( inputVal !== 0){
                    $('.ty-search-magnifier').css('display','none');
                } else {
                    $('.ty-search-block__input').val('');
                    $('.ty-search-magnifier').css('display','block');
                }
            }
Then a css file "expandingsearch.css" with code:

Code: Select all

.cm-processed-form{
    position:relative;
    min-width:50px;
    width:0%;
    height:50px;
    float:right;
    overflow:hidden;
    
    -webkit-transition: width 0.1s;
    -moz-transition: width 0.1s;
    -ms-transition: width 0.1s;
    -o-transition: width 0.1s;
    transition: width 0.1s;
}

.ty-search-block__input{
    top:0;
    right:0;
    border:0;
    outline:0;
    background:#dcddd8;
    width:100%;
    height:50px;
    margin:0;
    padding:0px 55px 0px 20px;
    font-size:20px;
    color:red;
}
.ty-search-block__input::-webkit-input-placeholder {
    color: #d74b4b;
}
.ty-search-block__input:-moz-placeholder {
    color: #d74b4b;
}
.ty-search-block__input::-moz-placeholder {
    color: #d74b4b;
}
.ty-search-block__input:-ms-input-placeholder {
    color: #d74b4b;
}

.ty-search-magnifier{
    width:50px;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    font-family:verdana;
    font-size:22px;
    right:0;
    padding-top:10px;
    margin:0;
    border:0;
    outline:0;
    line-height:30px;
    text-align:center;
    cursor:pointer;
    color:#dcddd8;
    background:#172b3c;
}

.cm-processed-form-open{
    width:100%;
}/* CSS Document */
Then added html to Header.tpl in after:

Code: Select all

 <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
      </ul>
the following code:

Code: Select all

<div class=" top-search">
        <div class="ty-search-block">
    <form action="" name="search_form" method="get" class="cm-processed-form">

        <input type="text" name="hint_q" value="" id="search_input" title="" class="ty-search-block__input cm-hint"><button title="" class="ty-search-magnifier" type="submit"><i class="material-icons">search</i></button>
<input type="hidden" name="Manufacturers" value="model">

    </form>
</div>
    </div>
and in header.tpl:

Code: Select all

<script src="catalog/view/javascript/expanding-search.js" type="text/javascript"></script>
<link href="catalog/view/theme/default/stylesheet/expandingsearch.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
The result is a nice icon :
expandsearch.png

expandsearch.png (2.35 KiB) Viewed 2039 times

So the problem is that on click the box expands but after 5 or so seconds disappears. Can any of you good people help to complete the task and then the whole thing can be available to the community?
Thanks as always for input.

Active Member

Posts

Joined
Fri Oct 31, 2014 1:29 am

Post by paulfeakins » Fri Nov 18, 2016 7:58 pm

Have you got a link where we can see it in action?

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk


User avatar
Guru Member
Online

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom

Post by SubatWest » Sat Nov 19, 2016 12:16 am

Sorry I haven't as I always run things on the localhost before loading to the live site.

Active Member

Posts

Joined
Fri Oct 31, 2014 1:29 am

Post by cyclops12 » Sat Nov 19, 2016 2:34 am

been trying this but when i put

Code: Select all

$(document).ready(function(){
            var submitIcon = $('.ty-search-magnifier');
            var inputBox = $('.ty-search-block__input');
            var searchBox = $('.cm-processed-form');
            var isOpen = false;
           submitIcon.click(function (event) {
                if (isOpen == false) {
                    event.preventDefault();
                    searchBox.addClass('cm-processed-form-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('cm-processed-form-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });
             submitIcon.mouseup(function(){
                    return false;
                });
            searchBox.mouseup(function(){
                    return false;
                });
            $(document).mouseup(function(){
                    if(isOpen == true){
                        $('.ty-search-magnifier').css('display','block');
                        submitIcon.click();
                    }
                });
        });
            function buttonUp(){
                var inputVal = $('.ty-search-block__input').val();
                inputVal = $.trim(inputVal).length;
                if( inputVal !== 0){
                    $('.ty-search-magnifier').css('display','none');
                } else {
                    $('.ty-search-block__input').val('');
                    $('.ty-search-magnifier').css('display','block');
                }
            }
into a file called expanding-search.js i get the following error...
js-error.JPG

js-error.JPG (49.85 KiB) Viewed 2019 times


Expert Member

Posts

Joined
Sun Sep 27, 2015 1:10 am

Post by SubatWest » Sat Nov 19, 2016 5:29 am

Have had a look and could not replicate the error but try the following js which also works and produces the same result of a bar that opens for 5 or so seconds.:

Code: Select all

$(document).ready(function(){
            var submitIcon = $('.ty-search-magnifier');
            var inputBox = $('.ty-search-block__input');
            var searchBox = $('.cm-processed-form');
            var isOpen = false;
            submitIcon.click(function(){
                if(isOpen == false){
                    searchBox.addClass('cm-processed-form-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('cm-processed-form-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });  
             submitIcon.mouseup(function(){
                    return false;
                });
            searchBox.mouseup(function(){
                    return false;
                });
            $(document).mouseup(function(){
                    if(isOpen == true){
                        $('.ty-search-magnifier').css('display','block');
                        submitIcon.click();
                    }
                });
        });
            function buttonUp(){
                var inputVal = $('.ty-search-block__input').val();
                inputVal = $.trim(inputVal).length;
                if( inputVal !== 0){
                    $('.ty-search-magnifier').css('display','none');
                } else {
                    $('.ty-search-block__input').val('');
                    $('.ty-search-magnifier').css('display','block');
                }
            }

Active Member

Posts

Joined
Fri Oct 31, 2014 1:29 am

Post by SubatWest » Sat Nov 19, 2016 7:57 pm

Further update

I have been experimenting and have now got the following code to work and opoen the searfch box to take an entry:
the CSS is:

Code: Select all


.searchbox{
    position:relative;
    min-width:50px;
    width:0%;
    height:50px;
    float:right;
    overflow:hidden;
    
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

.searchbox-input{
    top:0;
    right:0;
    border:0;
    outline:0;
    background:#dcddd8;
    width:100%;
    height:50px;
    margin:0;
    padding:0px 55px 0px 20px;
    font-size:20px;
    color:red;
}
.searchbox-input::-webkit-input-placeholder {
    color: #d74b4b;
}
.searchbox-input:-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input::-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input:-ms-input-placeholder {
    color: #d74b4b;
}

.searchbox-icon,
.searchbox-submit{
    width:50px;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    font-family:verdana;
    font-size:22px;
    right:0;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    line-height:50px;
    text-align:center;
    cursor:pointer;
    color:#dcddd8;
    background:#172b3c;
}



.searchbox-open{
    width:100%;
}

.byline{
  position:absolute;
  top:150px;
  left:30%;
  text-align:center;
  font-size:18px;
}
.byline a{
  text-decoration:none;
  color: #d74b4b;
}
The JS is:

Code: Select all

  $(document).ready(function(){
            var submitIcon = $('.searchbox-icon');
            var inputBox = $('.searchbox-input');
            var searchBox = $('.searchbox');
            var isOpen = false;
            submitIcon.click(function(){
                if(isOpen == false){
                    searchBox.addClass('searchbox-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('searchbox-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });  
             submitIcon.mouseup(function(){
                    return false;
                });
            searchBox.mouseup(function(){
                    return false;
                });
            $(document).mouseup(function(){
                    if(isOpen == true){
                        $('.searchbox-icon').css('display','block');
                        submitIcon.click();
                    }
                });
        });
            function buttonUp(){
                var inputVal = $('.searchbox-input').val();
                inputVal = $.trim(inputVal).length;
                if( inputVal !== 0){
                    $('.searchbox-icon').css('display','none');
                } else {
                    $('.searchbox-input').val('');
                    $('.searchbox-icon').css('display','block');
                }
            }
The HTML is: in header.tpl placed after:

Code: Select all

<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>    
        <?php } ?>
        <?php } ?>
Is

Code: Select all

    <form class="searchbox">
        <input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();" required>
        <input type="submit" class="searchbox-submit" value="GO">
        <span class="searchbox-icon">GO</span>
    </form>

          </div>
This gives the search box now two things I am working on and could do with help.
How do I change the 'GO' into an icon and hw do I get the acual search function to search the site?

Active Member

Posts

Joined
Fri Oct 31, 2014 1:29 am

Post by SubatWest » Mon Nov 21, 2016 11:17 pm

Hi
Has anyone managed to come up with an answer?
I believe the code needed to insert is:

Code: Select all

       url = $(‘base’).attr(‘href’) + ‘index.php?route=product/search’;
  var search = $(‘input[name=\’search\’]’).attr(‘value’);
if (search) {
url += ‘&search=’ + encodeURIComponent(search);
}
location = url;
});   
But I have tried various places to input without success.

Active Member

Posts

Joined
Fri Oct 31, 2014 1:29 am
Who is online

Users browsing this forum: No registered users and 169 guests