Jump to content

Moving search bar


Minty

Recommended Posts

Hi guys,

I know this has been brought up a couple of times but I cant find an answer for the stock skin in V6.

I want to move the search bar to below the menu bar and then in its place put a logo banner. So I guess my question is twofold:

  1. How to move the search bar below the menu bar
  2. how to replace this with a banner logo (dimensions of what this should be please if anyone knows)

Much appreciated. Sorry if these have been answered before for this skin or version number but I couldn't find it. Unfortunately I cant give a web address as this is testing on localhost at the minute and not on a live server.

Thanks for reading.

Minty 

 

from this.png

to this.png

Link to comment
Share on other sites

18 hours ago, 34Ford said:

If it was the Kurouto skin this works.

 

Can't be the Kurouto skin then as the code is different to what I have. I can't find this code in either of the two files called main.php I did see this thread before and one other I think before I posted this request. Neither solved my issue.

Thank you for your suggestion, unfortunately this time its not the solution :-)

 

Link to comment
Share on other sites

Here is part 1. (Part 2 involves when the browser width, the 'viewport', is small, as if on a mobile device.)

In the template: main.php, find:

                        {include file='templates/box.session.php'}
                     </div>
                  </div>
                  <div class="row show-for-medium-up">
                     <div class="small-12 columns">{include file='templates/box.search.php'}</div>
                  </div>
               </div>
            </div>
            <div class="row hide" id="small-search">
               <div class="small-12 columns">
                  {include file='templates/box.search.php'}
               </div>
            </div>
            <div class="row">
               <div class="small-12 columns small-collapse">
                  {include file='templates/box.navigation.php'}
                  <div class="hide" id="val_lang_back">{$LANG.common.back}</div>
               </div>
            </div>
            <div class="row">
               <div class="small-12 columns small-collapse">
                  {include file='templates/element.breadcrumb.php'} 

Change to:
                        {include file='templates/box.session.php'}
                     </div>
                  </div>
{*                  <div class="row show-for-medium-up">
                     <div class="small-12 columns">{include file='templates/box.search.php'}</div>
                  </div>  *}
               </div>
            </div>
            <div class="row hide" id="small-search">
               <div class="small-12 columns">
                  {include file='templates/box.search.php'}
               </div>
            </div>
            <div class="row">
               <div class="small-12 columns small-collapse">
                  {include file='templates/box.navigation.php'}
                  <div class="hide" id="val_lang_back">{$LANG.common.back}</div>
               </div>
            </div>
<div class="row show-for-medium-up">
<div class="small-12 columns">{include file='templates/box.search.php'}</div>
</div>
            <div class="row">
               <div class="small-12 columns small-collapse">
                  {include file='templates/element.breadcrumb.php'} 

 

Part 2: At the small size, there is simply a hamburger ( session menu), spyglass, and cart icons.

Do you want some or all of these icons to be moved elsewhere?

Edited by bsmither
Syntax error.
Link to comment
Share on other sites

bsmither, thank you. That worked.

I think I am happy leaving the other items where they are. I just need to know where/how to add an image file in that space now.

ps Having trouble logging in now, I am sure its unrelated but cant log in to an account or to the admin section so I may take a while to reply if you post a answer to the image question.

Thanks again, you are a gent.

Link to comment
Share on other sites

Find:
            {include file='templates/box.eu_cookie.php'}
            <div class="row marg-top" id="top_header">
               <div class="small-4 large-3 columns">
                  <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"></a>
               </div>
               <div class="small-8 large-9 columns nav-boxes">
                  <div class="row" id="nav-actions">

Change to:
            {include file='templates/box.eu_cookie.php'}
            <div class="row marg-top" id="top_header">
               <div class="small-8 medium-9 large-10 columns">
                  <a href="{$STORE_URL}" class="main-logo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"></a>
               </div>
               <div class="small-4 medium-3 large-2 columns nav-boxes">
                  <div class="row" id="nav-actions">

 

Link to comment
Share on other sites

Thanks again for your input. I will try this once I sort the login issues out.

At the risk of going off topic I need to sort this first, its an odd thing. I am not suggesting the change made in your first suggestion has anything to do with it but since then I am unable to log in to my admin section, or as a customer. Also if I try to add items to my basket it adds them but when I view the basket its empty, I cant check out. If I add multiple items it doesnt remember them and when the basket preview shows it only has the last item I selected.

I have tried to log in to the admin section using both accounts I have set up and neither will allow me to log in, it just cycles to the last page. This is also true if I try to create a new general user account, it wont let me?

Would you have any ideas on why this would be?

As a footnote this happened on my first install attempt using cubecart and I had to reinstall, which I don't mind so much whilst testing but obviously I cant afford this to happen when it is on a live site.

Link to comment
Share on other sites

Please let us know the server environment of your development/test installation.

Is it on a hosted server or an in-house machine you have direct access to?

What browser are you using? (I hope it is not Chrome.)

Not being able to log in and not remembering what's in the shopping basket is a condition where CubeCart can't store what it was doing (the current state), can't maintain the association between the current state with the cookie supplied by the browser, or is not getting a cookie.

Unfortunately, you need to be able to examine certain goings-on to discover where the problem is happening.

Link to comment
Share on other sites

15 hours ago, bsmither said:

Please let us know the server environment of your development/test installation.

Is it on a hosted server or an in-house machine you have direct access to?

What browser are you using? (I hope it is not Chrome.)

Not being able to log in and not remembering what's in the shopping basket is a condition where CubeCart can't store what it was doing (the current state), can't maintain the association between the current state with the cookie supplied by the browser, or is not getting a cookie.

Unfortunately, you need to be able to examine certain goings-on to discover where the problem is happening.

Hi,

OK So I left it a while and came back to it today, Chrome still has issues but with firefox it all seems to be working properly. Not tried with edge just yet.

You said you hoped it wasn't chrome, is there a particular issues with Chrome or are you just not a fan? 

Anyway I will crack on now with the second part of the code to get the image set up using firefox. I will also try to find the developer extension that I have seen you mention once or twice before.

I have managed to extend the header logo, thank you bsmithers. And now I have done that I need to tweak it just a little. As you can see in the picture attached the logo stops a little short, so I would like this to be the same length as the menu bar. If I do this I would also like to move the log in, basket and currency icons/text to be one line but not sure if I would want them above the logo, or below the search bar? If you could provide both options that would be fantastic.

Sorry to keep asking, I have usually figured a lot more out for myself by now but I seem to be having a mental block with the code in cubecart. I do appreciate your help so far.

Thank you.

header 1.jpg

Link to comment
Share on other sites

There is a particular issue (and I detest Chrome, as well).

There is anecdotal evidence that says if the computer (where Chrome is installed) has its time set where it is off of UTC (+/- timezones) by more than a couple of minutes, then Chrome will not send the cookies. I'm not saying this is your issue, but since you use Chrome, it is something I suggest you look into -- making sure the time on your computer is very correct. (And the time on the server, which, if hosted somewhere, is probably correct.)

Observe the HTML of the following (abbreviated):

     <div class="small-8 medium-9 large-10 columns">
     <div class="small-4 medium-3 large-2 columns nav-boxes">

Notice how the sizes add to twelve of the two div columns blocks (logo and nav-boxes): 8+4, 9+3, 10+2. If we move the nav-boxes off of this row, we need to adjust the size of the logo block to have twelve columns. So, let's share the row having the search bar with the nav-boxes block.

Restore the main.php template back to its original coding.

On a new blank line after these lines 85-87:
                   <div class="hide" id="val_lang_back">{$LANG.common.back}</div>
                </div>
             </div>
Add the following:
            <div class="row show-for-medium-up">
               <div class="small-6 columns nav-boxes">
                  <div class="right text-center">{include file='templates/box.basket.php'}</div>
                  <div class="right text-center show-for-small"><a class="left-off-canvas-toggle button white tiny" href="#"><i class="fa fa-bars fa-2x"></i></a> <a class="button white tiny show-small-search" href="#"><i class="fa fa-search fa-2x"></i></a></div>
                  {include file='templates/box.currency.php'}
                  {include file='templates/box.language.php'}
                  {include file='templates/box.session.php'}
               </div>
               <div class="small-6 columns">
                  {include file='templates/box.search.php'}
               </div>
            </div>

Lines 62-75: Delete these lines
               <div class="small-8 large-9 columns nav-boxes">
                  <div class="row" id="nav-actions">
                     <div class="small-12 columns">
                        <div class="right text-center">{include file='templates/box.basket.php'}</div>
                        <div class="right text-center show-for-small"><a class="left-off-canvas-toggle button white tiny" href="#"><i class="fa fa-bars fa-2x"></i></a> <a class="button white tiny show-small-search" href="#"><i class="fa fa-search fa-2x"></i></a></div>
                        {include file='templates/box.currency.php'}
                        {include file='templates/box.language.php'}
                        {include file='templates/box.session.php'}
                     </div>
                  </div>
                  <div class="row show-for-medium-up">
                     <div class="small-12 columns">{include file='templates/box.search.php'}</div>
                  </div>
               </div>

Line 59:
From:
               <div class="small-4 large-3 columns">
To:
               <div class="small-12 columns">

 

Link to comment
Share on other sites

Brilliant that worked, you sir are a star, thank you.

I do have two small issues and please don't rush to reply. This all displays pretty much how I want, except on the checkout page where the logo is tiny and only sits on the left. Is there another edit needed for the checkout page?

checkout.png

Also a small niggle is the alignment of the navigation text, can this align to the left? I am guessing this is probably something to do with the 12 column part of the code somewhere? Couple of pics added just in case I didn't explain it well enough.

alignment.png

Hopefully I can let you have some peace after this :)

Thank you for the advice with the google time and cookie issue. I would have thought though that as its a local server on my PC the time should be exactly the same. I am hoping to move this to a hosting service over the weekend so can check again when I move it to a live host. Going to be a pain if I have to tell customers to use a different browser but I can add this to one of the footer documents I guess.

 

Link to comment
Share on other sites

Ok, so it is a localhost server. Many developers do this, but I must assume the Cubecart, Ltd. does not "officially support" this configuration.

In /includes/global.inc.php, make sure these statements are present:

$glob['storeURL'] = 'http://127.0.0.1/dev_store';
$glob['standard_url'] = 'http://127.0.0.1/dev_store';
$glob['ssl_url'] = 'https://127.0.0.1/dev_store';
$glob['cookie_domain'] = '127.0.0.1';
$glob['rootRel'] = '/dev_store/';

Do not use localhost as the URL in the web browser.

Also, in the .htaccess file, make sure that the following is present:
RewriteBase /dev_store/

Also, in your PHP settings (PHP.INI), the [Session] section, make sure you have a session.session_handler declared (typically files) and a session.save_path location declared, such as "L:\PHP\sessions", and that the /sessions/ folder exists and is writable.

In addition to the template main.php, there is also main.checkout.php. The two templates are almost identical.

Link to comment
Share on other sites

Thanks again.

Managed to figure out the checkout.main.php so the banner shows correctly.

I will have a look at the statements you have posted in the morning and check to see if this helps any. One bit in particular about not using localhost in the web browser is interesting so I will give that closer attention tomorrow. I have only just set the localhost up, literally a few weeks ago so this is also something else which is quite new to me. Appreciate your comments.

Thank you again for your time and patience with a newbie!

Link to comment
Share on other sites

  • 2 weeks later...

Hi Guys,

You have been really patient and I appreicate that. So, what if I wanted the login, currency and basket links actually in the menu bar on the right hand side? How would that be done?

Thank you.

Link to comment
Share on other sites

Basically, you would take the code found in box.session.php, box.language.php, box.currency.php, and box.basket.php, and copy it all into box.navigation.php.

You would need to not include the outer-most <div> and </div> statements. Then, find the outer <ul> and </ul> tags and insert companion <li> and </li> tags to match the sequence of the overall nav listing.

Finally, adjust all the styling to match the nav bar.

Link to comment
Share on other sites

18 hours ago, bsmither said:

Basically, you would take the code found in box.session.php, box.language.php, box.currency.php, and box.basket.php, and copy it all into box.navigation.php.

You would need to not include the outer-most <div> and </div> statements. Then, find the outer <ul> and </ul> tags and insert companion <li> and </li> tags to match the sequence of the overall nav listing.

Finally, adjust all the styling to match the nav bar.

Well I managed to royally mess that one up. So much so that I am now currently reinstalling a fresh install on my tesy site.

Dont ask! Luckily I use a test site but still very annoyed with myself. Frustrated too that I just cant get to grips with this damn code structure!

Report back as soon as I am up and running again!

Link to comment
Share on other sites

Sorry that happened, but I learn most things the hard way and can sympathize. I have a Featured Plush section I used via  a Widget set of templates. Maybe you can play around with the box.featured.php.

Here's part of the original:

<div class="panel" id="box-featured">
   <h3>{$LANG.catalogue.title_feature}</h3>
   <a class="th" href="{$featured.url}" title="{$featured.name}">
   <img src="{$featured.image}" alt="{$featured.name}">
   </a>
   <h3><a href="{$featured.url}" title="{$featured.name}">{$featured.name}</a></h3>
<br>
<h3>
   {if $featured.ctrl_sale}
   <span class="old_price">{$featured.price}</span> <span class="sale_price">{$featured.sale_price}</span>
   {else}
   {$featured.price}
   {/if}
<br><br>
{* ORIGINAL <button type="submit" value="{$LANG.catalogue.add_to_basket}" class="button small postfix">{$LANG.catalogue.add_to_basket}</button> *}
      <a href="{$product.url}" title="{$product.name}" class="button small postfix">{$LANG.common.info}</a>
</h3>
</div>

<div class="panel" id="box-featured">
   <h3>{$LANG.catalogue.title_feature}</h3>
   <a class="th" href="{$featured.url}" title="{$featured.name}">
   <img src="{$featured.image}" alt="{$featured.name}">
   </a>
   <h3><a href="{$featured.url}" title="{$featured.name}">{$featured.name}</a></h3>
<br>
<h3>
   {if $featured.ctrl_sale}
   <span class="old_price">{$featured.price}</span> <span class="sale_price">{$featured.sale_price}</span>
   {else}
   {$featured.price}
   {/if}
<br><br>
{* ORIGINAL <button type="submit" value="{$LANG.catalogue.add_to_basket}" class="button small postfix">{$LANG.catalogue.add_to_basket}</button> *}
      <a href="{$product.url}" title="{$product.name}" class="button small postfix">{$LANG.common.info}</a>
</h3>
</div>

I took that as a beginning and created my own box.featured.php file:

My div's would be different than yours, and of course the widgets would be what you want for currency, etc.

<div class="vertical-navigation-box-cbd ">
	<div class="wrapper">
 <h3> <span class="vertical-navigation-box-title-cbd">Featured Plush</span></h3>
<br>
<ul class="has-sub-cbd">
				{* {include file='templates/widgets/christmas.php'} *}
				{*	{include file='templates/widgets/valentine.php'} *}
				{*   {include file='templates/widgets/easter.php'}  *}
						{include file='templates/widgets/mothersfathersday.php'}
				{* {include file='templates/widgets/halloween.php'} *}

				{*  {include file='templates/widgets/healthrelated.php'}  *}
				{*  {include file='templates/widgets/birthday.php'}  *}
				{* {include file='templates/widgets/featuredbrand.php'} *}
				
<span class="mywidgethr"><hr></span>

</ul>
	</div><!-- /.wrapper -->
</div><!-- /.box .box-featured -->

Then I played until I had the widget files, such as the Mother's Day feature I have now:

<!-- MOTHER'S FATHER'S DAY -->
<a href="{$STORE_URL}/mothers-day-fathers-day.html" title="All our Plush Animal and Doll Mother's Day and Father's Day Gifts">
<img src="{$STORE_URL}/images/source/littletikescowilovemoomyteether.jpg"  width="100" alt="Health RelatedMother's Day and Father's Day  Plush" />
</a>
<!--width normally 70 for other images-->
<h4><a href="{$STORE_URL}/mothers-day-fathers-day.html">Mother's & Father's Day </a></h4>

The trick is to first get the sidebar box first, with the div's working the way you want. Then copy the currency elements into their own widget file. Once you have one piece working, it will be easy to repeat for  login, etc.

Link to comment
Share on other sites

Sorry that happened, but I learn most things the hard way and can sympathize. I have a Featured Plush section I used via  a Widget set of templates. Maybe you can play around with the box.featured.php.

Here's part of the original:

<div class="panel" id="box-featured">
   <h3>{$LANG.catalogue.title_feature}</h3>
   <a class="th" href="{$featured.url}" title="{$featured.name}">
   <img src="{$featured.image}" alt="{$featured.name}">
   </a>
   <h3><a href="{$featured.url}" title="{$featured.name}">{$featured.name}</a></h3>
<br>
<h3>
   {if $featured.ctrl_sale}
   <span class="old_price">{$featured.price}</span> <span class="sale_price">{$featured.sale_price}</span>
   {else}
   {$featured.price}
   {/if}
<br><br>
{* ORIGINAL <button type="submit" value="{$LANG.catalogue.add_to_basket}" class="button small postfix">{$LANG.catalogue.add_to_basket}</button> *}
      <a href="{$product.url}" title="{$product.name}" class="button small postfix">{$LANG.common.info}</a>
</h3>
</div>

<div class="panel" id="box-featured">
   <h3>{$LANG.catalogue.title_feature}</h3>
   <a class="th" href="{$featured.url}" title="{$featured.name}">
   <img src="{$featured.image}" alt="{$featured.name}">
   </a>
   <h3><a href="{$featured.url}" title="{$featured.name}">{$featured.name}</a></h3>
<br>
<h3>
   {if $featured.ctrl_sale}
   <span class="old_price">{$featured.price}</span> <span class="sale_price">{$featured.sale_price}</span>
   {else}
   {$featured.price}
   {/if}
<br><br>
{* ORIGINAL <button type="submit" value="{$LANG.catalogue.add_to_basket}" class="button small postfix">{$LANG.catalogue.add_to_basket}</button> *}
      <a href="{$product.url}" title="{$product.name}" class="button small postfix">{$LANG.common.info}</a>
</h3>
</div>

I took that as a beginning and created my own box.featured.php file:

My div's would be different than yours, and of course the widgets would be what you want for currency, etc.

<div class="vertical-navigation-box-cbd ">
	<div class="wrapper">
 <h3> <span class="vertical-navigation-box-title-cbd">Featured Plush</span></h3>
<br>
<ul class="has-sub-cbd">
				{* {include file='templates/widgets/christmas.php'} *}
				{*	{include file='templates/widgets/valentine.php'} *}
				{*   {include file='templates/widgets/easter.php'}  *}
						{include file='templates/widgets/mothersfathersday.php'}
				{* {include file='templates/widgets/halloween.php'} *}

				{*  {include file='templates/widgets/healthrelated.php'}  *}
				{*  {include file='templates/widgets/birthday.php'}  *}
				{* {include file='templates/widgets/featuredbrand.php'} *}
				
<span class="mywidgethr"><hr></span>

</ul>
	</div><!-- /.wrapper -->
</div><!-- /.box .box-featured -->

Then I played until I had the widget files, such as the Mother's Day feature I have now:

<!-- MOTHER'S FATHER'S DAY -->
<a href="{$STORE_URL}/mothers-day-fathers-day.html" title="All our Plush Animal and Doll Mother's Day and Father's Day Gifts">
<img src="{$STORE_URL}/images/source/littletikescowilovemoomyteether.jpg"  width="100" alt="Health RelatedMother's Day and Father's Day  Plush" />
</a>
<!--width normally 70 for other images-->
<h4><a href="{$STORE_URL}/mothers-day-fathers-day.html">Mother's & Father's Day </a></h4>

The trick is to first get the sidebar box first, with the div's working the way you want. Then copy the currency elements into their own widget file. Once you have one piece working, it will be easy to repeat for  login, etc.

Link to comment
Share on other sites

Hi Dirty Butter,

Thank you for this. I'm on an early start so will look at this more closely tomorrow.

I don't mind messing up, the very limited knowledge I have has come from breaking many a site. It's frustrating more than anything and time consuming.

Appreciate your post. I'll have a play tomorrow.

Cheers,

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...