Jump to content
burt

Responsive osCommerce - Bootstrap

Recommended Posts

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 Responsive osCommerce CE (community edition) 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 Responsive osCommerce CE (community edition) 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 Responsive osCommerce CE (community edition) 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 Responsive osCommerce CE (community edition) 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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

here is code snippet for checkout payment selection area :

 

 <!-- payment methods -->
 <div id="payment-select" class="row">
   <div class="col-md-12">
  <div class="panel panel-default">
    <div class="panel-heading"><?php echo TABLE_HEADING_PAYMENT_METHOD; ?></div>
    <?php
	 $selection = $payment_modules->selection();
	 if (sizeof($selection) > 1) {
	 ?>
	   <div class="panel-body">
		 <p><?php echo TEXT_SELECT_PAYMENT_METHOD ; ?></p>
	   </div>
	 <?php
	 } elseif ($free_shipping == false) {
	 ?>
	   <div class="panel-body">
		 <p><?php echo TEXT_ENTER_PAYMENT_INFORMATION; ?></p>
	   </div>
	 <?php
	 }
  ?>
	 <table class="table table-striped table-condensed">

	 <?php
	 $radio_buttons = 0;
	 for ($i=0, $n=sizeof($selection); $i<$n; $i++) {
	 ?>

	   <?php
	   if ( ($selection[$i]['id'] == $payment) || ($n == 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";
	   }
	   ?>
	    <th class="col-md-11"><?php echo $selection[$i]['module']; ?></th>
	    <td align="col-md-1">
		  <?php
		  if (sizeof($selection) > 1) {
		    echo tep_draw_radio_field('payment', $selection[$i]['id'], ($selection[$i]['id'] == $payment),'required');
		  } else {
		    echo tep_draw_hidden_field('payment', $selection[$i]['id']);
		  }
		  ?>

	    </td>
	  </tr>
	  <?php
	  if (isset($selection[$i]['error'])) {
	  ?>
	    <tr>
		  <td class="error" colspan="2"><?php echo $selection[$i]['error']; ?></td>
	    </tr>
	  <?php
	  } elseif (isset($selection[$i]['fields']) && is_array($selection[$i]['fields'])) {
	  ?>
	    <tr>
		  <td colspan="2"><table style="border:none;">
		  <?php
		  for ($j=0, $n2=sizeof($selection[$i]['fields']); $j<$n2; $j++) {
		  ?>
		    <tr>
			  <td style="border:none;"><?php echo $selection[$i]['fields'][$j]['title']; ?></td>
			  <td style="border:none;"><?php echo $selection[$i]['fields'][$j]['field']; ?></td>
		    </tr>
		  <?php
		  }
		  ?>
		  </table></td>
	    </tr>
	  <?php
	  }
	  ?>
    <?php
    $radio_buttons++;
    }
    ?>
    </table>
  </div>
   </div>
 </div>
 <!-- payment 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

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

 

<?php echo $confirmation['title']; ?>

 

Where does that come from ? In the standard osc tables layout, that consists of nothing so the td is "collapsed"...

 

I can't recall where that is set in osc


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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

@@grandpaj

 

I built one that works, (Ive used it for various clients for a few years now) you can see it in my demo if you look at my post just a few up.

 

When this build is released I will add it as a contribution, but as a general precaution, something like that would not be advisable for a core release for at least couple of reasons -

 

1) It's more info to capture in one shot, which can cause conflicts under certain situations, and more maintenance.

 

2) A lot of shops don't even use the checkout shipping page, if they sell virtual products, then that page can be bypassed completely. I coded my page not to display shipping methods/address at all if products are virtual, but really so no need to serve up more overhead if its not needed.

 

So if it fits a shops needs, its great, but only a small portion of shops would really benefit from it.


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

<?php echo $confirmation['title']; ?>

 

Where does that come from ? In the standard osc tables layout, that consists of nothing so the td is "collapsed"...

 

I can't recall where that is set in osc

 

I can find it in checkout_confirmation.php on any release I search on my local, and it's on Harald's latest release on GitHub line 238, https://github.com/haraldpdl/oscommerce2/blob/master/catalog/checkout_confirmation.php

 

But I cannot find any payment module that uses it, its just $confirmation['fields'][$i]['title'];

 

Maybe its very dated?


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

Maybe its very dated?

 

That's what I'm thinking...but to ensure it, how about;

 

   if (tep_not_null($confirmation['title'])) {
     echo '<div class="col-sm-6">';
     echo '  <div class="alert alert-danger">';
          echo $confirmation['title'];
     echo '  </div>';
     echo '</div>';
   }

 

This way, it's there if set, and not it not. I can't recall ever seeing or working with $confirmation['title'] ...


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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

@

Hi Gary,

Thanks for that, but dare I show how thick I am, but what .php file does the code in post #449 belong to.

 

many thanks

Grandpa

Edited by grandpaj

Share this post


Link to post
Share on other sites

http://www.template.me.uk/2334bs3/ is now an -exact- mirror of the Master Github.

 

I don't like to re-introduce tables into the checkout, it's not tabular data (well I suppose it is in a way, but...blah blah). So, I'm not going to reintroduce those. Tiger Striping can be done on the div based layout.


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 Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

For mobile views, in particular, is there really a need for the Categories and Manufacturers infoBoxes to be displayed, during the checkout process? It would make for a much cleaner interface with these hidden, if easily achievable.

The breadcrumbs and top logo provide entry points to other parts of the store, if required, plus there is the footer region for other possible relevant information (for example to check on terms & conditions).

[Also applicable to the account pages.]

Edited by ejsolutions

Share this post


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

×