Jump to content
burt

Bootstrap 3 in 2.3.4 - Responsive from the Get Go

Recommended Posts

Hint: admin > modules > header_tags > grid/list > {edit} > look at the page list. Even an amateur can do this ;)


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

I added this to the test shop .htaccess, could those who were getting a problem, test it again;

 

http://template.me.uk/2334bs3/index.php

 

and report if it is now OK (or still broken).

 

Fixed in firefox but IE bug explorer seems to have lost the plot

 

Viewing with laptop

Edited by joli1811

To improve is to change; to be perfect is to change often.

 

Share this post


Link to post
Share on other sites

I added this to the test shop .htaccess, could those who were getting a problem, test it again;

 

http://template.me.uk/2334bs3/index.php

 

and report if it is now OK (or still broken).

 

Looks good for me No problems so far.

 

Firefox

IE8

Google Chrome

 

Grandpa

Edited by grandpaj

Share this post


Link to post
Share on other sites

The solution was to move the loading of HTML5Shiv from the <head> section to just before the </body> tag.

 

Just something I have picked up on google worth a quick try maybe

 

<!-- Bootstrap -->

<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">

 

 

 

<!-- Custom -->

<link href="custom.css" rel="stylesheet">

<!-- User -->

<link href="user.css" rel="stylesheet">

 

<script src="ext/jquery/jquery-1.8.0.min.js"></script>

<script src="ext/bootstrap/js/bootstrap.min.js"></script>

 

<link rel="stylesheet" media="screen,projection" href="ext/uitotop/css/ui.totop.css" /></head>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

<![endif]-->

<body>


To improve is to change; to be perfect is to change often.

 

Share this post


Link to post
Share on other sites

Hint: admin > modules > header_tags > grid/list > {edit} > look at the page list. Even an amateur can do this ;)

 

Stupid of me! :blush:

But the real problem is the presentation of search results.

 

 

Share this post


Link to post
Share on other sites

@@De Dokta - it seems to be just you having problems with this, so I consider this a problem between your monitor and your keyboard ;) :D


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

This effect particularly annoys me, see attached image. This is where (in smaller viewports) 1 line of nav moves under the other. What do others think ?


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

@@burt

 

This effect particularly annoys me, see attached image. This is where (in smaller viewports) 1 line of nav moves under the other. What do others think ?

 

I don't get that Gary....my screen very nicely goes from this to this...

post-182953-0-81612200-1395922706_thumb.jpg

Share this post


Link to post
Share on other sites

I don't get that Gary....my screen very nicely goes from this to this...

 

same here. no probs at all.

Edited by Tsimi

Share this post


Link to post
Share on other sites

@@De Dokta

 

Is this a local installation? (XAMPP) or is it burts shop?

 

side note: micro$oft stopped the Win XP support. maybe it is time to move on to Win 7 (support till year 2020) or Win 8.1 (terrible menu handling!) :P

Edited by Tsimi

Share this post


Link to post
Share on other sites

@@Tsimi @@Dan Cole - it's an update I'm running on localhost. I'll update the test site in a bit.

 

G


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

Ok try the test shop now. Problem is at SM view (ipad size viewport). Does it matter that the nav splits over two lines at this size ?


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

@@burt

 

now i can see it. but i can't go that far like you (see attached image)

if i make the window smaller then that it goes to the XS style view mode.

Edited by Tsimi

Share this post


Link to post
Share on other sites

@@burt

 

The overlap only occurs for a few width settings.

Maybe removing a couple of words word solve it.

For Instance 'Special Offers' could become 'Specials' and 'Site Settings' to 'Settings'

Share this post


Link to post
Share on other sites

@@burt

 

You probably already know this.. from the bootstrap site...

 

Overflowing content

 

Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

  1. Reduce the amount or width of navbar items.
  2. Hide certain navbar items at certain screen sizes using responsive utility classes.
  3. Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

Share this post


Link to post
Share on other sites

Wow- been away a few days and look how much longer the thread grew! Good deal.

 

So, looking further into the checkout process, I fell the actual process of selecting shipping and payment type is a bit clunky, I'm afraid real customers will become confused - as Ive seen the real customers become confused over the smallest little things.

 

I redid the layout of the shipping methods, it uses tables again, but that is simply to give the end user a well defined area to make their choice from. Its not a bad table, it will still fit nicely in the various view ports, and it has been marked up with bootstrap.

 

If anyone who has a version up could take this markup and place it in their checkout_shipping.php page, and give feedback, that would be great. I'll have it up in my demo site soon. Then I'll do the same for payment.

 

 <!-- shipping methods -->
 <div id="shipping-quotes" class="row">
   <div class="col-md-12">
  <div class="panel panel-default">
    <div class="panel-heading"><?php echo TABLE_HEADING_SHIPPING_METHOD; ?></div>


    <?php
    if ( (sizeof($quotes) > 1 && sizeof($quotes[0]) > 1) && ($free_shipping == false) ) {
 ?>
	  <div class="panel-body">
	    <p><?php echo TEXT_CHOOSE_SHIPPING_METHOD ; ?></p>
	  </div>
    <?php
    } elseif ($free_shipping == false) { ?>
	  <div class="panel-body">
	    <p><?php echo TEXT_ENTER_SHIPPING_INFORMATION; ?></p>
	  </div>
    <?php
 }
 ?>


    <table class="table table-striped table-condensed">
	  <?php
	  if ($free_shipping == true) {
   ?>
	 <tr class="success">
		  <th colspan="3"><?php echo FREE_SHIPPING_TITLE; ?> <?php echo $quotes[$i]['icon']; ?></th>
	    </tr>
	    <tr id="defaultSelected" class="moduleRowSelected" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 0)">
		  <td><?php echo sprintf(FREE_SHIPPING_DESCRIPTION, $currencies->format(MODULE_ORDER_TOTAL_SHIPPING_FREE_SHIPPING_OVER)) . tep_draw_hidden_field('shipping', 'free_free'); ?></td>
	    </tr>

	    <?php 
  } else {
		  $radio_buttons = 0;
		  for ($i=0, $n=sizeof($quotes); $i<$n; $i++) {
	    ?>
		 <tr class="info">
		   <th colspan="3"><?php echo $quotes[$i]['module']; ?> <span class="pull-right" style="margin-right:15%;"><?php if (isset($quotes[$i]['icon']) && tep_not_null($quotes[$i]['icon'])) { echo $quotes[$i]['icon']; } ?></span></th>
		 </tr>
	   <?php if (isset($quotes[$i]['error'])) { ?>
		  <tr class="error">
		    <td colspan="3"><?php echo $quotes[$i]['error']; ?></td>
		  </tr>
	    <?php  } else {
		  for ($j=0, $n2=sizeof($quotes[$i]['methods']); $j<$n2; $j++) {
		    // set the radio button to be checked if it is the method chosen
		    $checked = (($quotes[$i]['id'] . '_' . $quotes[$i]['methods'][$j]['id'] == $shipping['id']) ? true : false);
			 if ( ($checked == true) || ($n == 1 && $n2 == 1) ) {
			   echo '	  <tr id="defaultSelected" class="moduleRowSelected" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, ' . $radio_buttons . ')">' . "\n";
			 } else {
			   echo '	  <tr class="moduleRow" onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, ' . $radio_buttons . ')">' . "\n";
			 }
 ?>

 <td class="col-md-9"><?php echo $quotes[$i]['methods'][$j]['title']; ?></td>
<?php
	    if ( ($n > 1) || ($n2 > 1) ) {
?>
		  <td class="col-md-2"><?php echo $currencies->format(tep_add_tax($quotes[$i]['methods'][$j]['cost'], (isset($quotes[$i]['tax']) ? $quotes[$i]['tax'] : 0))); ?></td>
		  <td  class="col-md-1 text-right"><?php echo tep_draw_radio_field('shipping', $quotes[$i]['id'] . '_' . $quotes[$i]['methods'][$j]['id'], $checked); ?></td>
<?php
	    } else {
?>
		   <td class="col-md-3 text-right" colspan="2"><?php echo $currencies->format(tep_add_tax($quotes[$i]['methods'][$j]['cost'], (isset($quotes[$i]['tax']) ? $quotes[$i]['tax'] : 0))) . tep_draw_hidden_field('shipping', $quotes[$i]['id'] . '_' . $quotes[$i]['methods'][$j]['id']); ?></td>
<?php
	    }
?>
	  </tr>	
<?php
	    $radio_buttons++;
	  }
    }
  }
   }
?>
    </table>
  </div>
   </div>
 </div>
 <!-- shipping methods -->


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

Ok, I guess that's something that is up to the shopowner...here's the two shipping choices display'

 

Original, as is coded right now in Master;

 

 

 

Garys redesign;

 

 

 

Preference?


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

@@burt

 

I like them both.... :P

 

The Master example I like because the information for a particular choice is on the same line.

 

With Garys I like the fact that they are clearly shown as separate choices.

 

How about the master being output to a bootstrap list group?

Share this post


Link to post
Share on other sites

Also, without the old school select radio onclick javascript function, I can foresee some customers having difficulties selecting a method. Theres always that one who cant seem to click a radio button, but I think for accessibility reasons the customer needs to be able to click anywhere in the row and have that method selected.

 

I'm just going off of customer service experience Ive seen in the past after changing such things for shop owners.

 

Ive bypassed the onclick script in favor of labels with the for attribute before, but that only works when your using a method that offers various choices, for something like table or per item, there is no optional choice to wrap a label around, and if they click on the price, the radio wont be selected.

 

If anyone wants to see it live, http://wsfive.com/bs-master login with test@@Tester.com test1

 

You can see it on checkout_shipping page right now, Ive yet to do the payment details yet.

 

You can also use just the link with checkout.php to see a whole different page :thumbsup: <-- again, payment select is not redone. (And the comments travel from page to page without loosing content)

Edited by WebSource 5

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

@@burt

 

Any reason why this portion of code was left out of the checkout_payment area?

 

<?php
   } elseif (isset($selection[$i]['fields']) && is_array($selection[$i]['fields'])) {
?>
  <tr>
    <td colspan="2"><table border="0" cellspacing="0" cellpadding="2">
<?php
  for ($j=0, $n2=sizeof($selection[$i]['fields']); $j<$n2; $j++) {
?>
	  <tr>
	    <td><?php echo $selection[$i]['fields'][$j]['title']; ?></td>
	    <td><?php echo $selection[$i]['fields'][$j]['field']; ?></td>
	  </tr>
<?php
  }
?>

 

Also, have noticed when using a credit cart with input on checkout_confirmation, the area is split into two columns, on the left is a blank alert alert-danger div and the right is the alert alert-info div with the CC fields


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

Hi

 

Regarding the checkout_shipping.php page and checkout_payment.php pages. Could these be combined into one page

 

Reasons

1 less click for the customer,

and the 2 pages on there own are not really "very busy"

 

Don't shoot me.

 

Grandpa

Share this post


Link to post
Share on other sites

Looks like I missed it.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

Hi

 

Regarding the checkout_shipping.php page and checkout_payment.php pages. Could these be combined into one page

 

Reasons

1 less click for the customer,

and the 2 pages on there own are not really "very busy"

 

Don't shoot me.

 

Grandpa

 

No. Not for core anyway.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×