Jump to content
Latest News: (loading..)
burt

Bootstrap 3 in 2.3.4 - Responsive from the Get Go

Recommended Posts

@@PupStar looks like one of us is going to have u make a logo content navigation module.

 

@@burt is that the right way?

 

@@greasemonkey

 

The logo is already a content module is it not?


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

@@burt - trying to catchup with you guys :)

 

Do i understand the templated boxes correctly, that if you want to change it, you edit each box in includes/boxes/templates ?

There is no infobox equivalent anymore ?

 

does this allow for template switching ?


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

@@PupStar

 

 

The logo is already a content module is it not?

 

No its a box module not a content module.

 

I quickly hacked up a navigation logo "content" module and now I can place (via sort order) before or after the cm_navbar.

 

I'm happy to share but would definitely want someone with more experience to check it over.

Share this post


Link to post
Share on other sites

@@PupStar

 

 

No its a box module not a content module.

 

I quickly hacked up a navigation logo "content" module and now I can place (via sort order) before or after the cm_navbar.

 

I'm happy to share but would definitely want someone with more experience to check it over.

 

@@greasemonkey

 

zip it up and attach it and I will give it a go, although I am no expert :thumbsup:

 

are you sure you are running the latest version as I have a cm_header_logo

Edited by PupStar

Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

@@PupStar @@greasemonkey

Logo is already a content module. You need to drop the navigation content module into the header folder (not forgetting to do the same with it's language file). Then use the sort order system.

 

Be aware that in general, Bootstrap expects the Navbar to be at the top of the page...hence why it is outside of the main container...

 

@@bruyndoncx

In effect, yes. The "control" file is the usual box module, it now has a template so that a template maker can change the appearance of individual boxes as they please. Eg, in my Zack template I have 1 box that is black and all the others are grey. Bear in mind that this templateable box system is only in a branch of the master.

Edited by burt

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

 

tried adding the navigation to the header folder with poor results.

 

I solved it by adding

<div class="clearfix"></div>

at the top of the navbar template

Edited by PupStar

Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

@@PupStar please ignore my ramblings... I see Gary moved logo (and a bunch of others too... which I will not ask questions about not that I've looked  :blush:  :blush:  :blush: ) to content with the latest updates.

 

@@burt yes I've not updated to the latest changes (still struggling with sourcetree - maybe more time this weekend).

Share this post


Link to post
Share on other sites

That will cause issues as the existing navigation module is built to be outside the container structure. You need to do something slightly different with an "internal" navbar, add a couple of clearfix div's (one before the first line of code in the template file, one after the last the line of code) which might be enough to get the look in place. Won't be perfect as it's trying to ram a oval peg into a round hole (ie, nearly there but not quite). Hope it makes sense?

Edited by burt

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

@@PupStar - the new system looks daunting, not? In fact, I believe it's quite straightforward once you get into the nuts and bolts of it. What you've done is amended the "template" file without changing the "control" file. That has to be a good thing, as the template file would never be changed on an osc update...hence your template file would never change (making life easier when updating, as your site maintains its look)...makes sense ?

Edited by burt

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

@@PupStar - the new system looks daunting, not? In fact, I believe it's quite straightforward once you get into the nuts and bolts of it. What you've done is amended the "template" file without changing the "control" file. That has to be a good thing, as the template file would never be changed on an osc update...hence your template file would never change (making life easier when updating, as your site maintains its look)...makes sense ?

 

yeah its making more sense all the time.

 

I have added a clearfix div to the end of the template file but it does not seem to work. The columns are still butted upto the navbar.

 

any ideas?


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

try removing navbar-no-margin from the template file, that would do it I 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

try removing navbar-no-margin from the template file, that would do it I think.

 

@@burt

 

perfect fix :thumbsup:

 

tomorrows project is to make the shopping cart into a content module (hopefully)


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

Sounds good to me, give it a go.

 

Here's the one I made earlier.

 

Changes from (desktop etc):

 

 

 

To (phone):

 

 


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

Why is the global class itself not is used :

 

in the cm_header_buttons.php  we add $cart global:

    function execute() {
      global $oscTemplate, $cart;
      
      $content_width = (int)MODULE_CONTENT_HEADER_BUTTONS_CONTENT_WIDTH;
      
      ob_start();
      include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/buttons.php');
      $template = ob_get_clean();

      $oscTemplate->addContent($template, $this->group);
    }

in the includes/modules/content/header/templates/buttons.php we change:

$_SESSION['cart']

so it looks like:

<div id="headerShortcuts" class="col-sm-<?php echo $content_width; ?> text-right">
  <div class="btn-group">
<?php

  echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'glyphicon glyphicon-shopping-cart', tep_href_link('shopping_cart.php')) .
       tep_draw_button(HEADER_TITLE_CHECKOUT, 'glyphicon glyphicon-credit-card', tep_href_link('checkout_shipping.php', '', 'SSL')) .
       tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'glyphicon glyphicon-user', tep_href_link('account.php', '', 'SSL'));

  if (isset($_SESSION['customer_id'])) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, 'glyphicon glyphicon-log-out', tep_href_link('logoff.php', '', 'SSL'));
  }
?>
  </div>
</div>

This works as user (someone need to test with the google thingy)

 

That works perfectly now with these changes, no error when fetching as Google.


Let's make things easier for new osCommerce users http://forums.oscommerce.com/topic/402638-discussion-about-hard-coded-database-tables/?p=1718900  Getting there with osCommerce 2.4! :thumbsup:

Share this post


Link to post
Share on other sites

Sounds good to me, give it a go.

 

Here's the one I made earlier.

 

Changes from (desktop etc):

 

attachicon.gifcart_desktop.jpg

 

To (phone):

 

attachicon.gifcart_phone.jpg

@@burt

 

Hi Gary, I have created the following cart in header content module

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  class cm_header_cart {
    var $code;
    var $group;
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function cm_header_cart() {
      $this->code = get_class($this);
      $this->group = basename(dirname(__FILE__));

      $this->title = MODULE_CONTENT_HEADER_CART_TITLE;
      $this->description = MODULE_CONTENT_HEADER_CART_DESCRIPTION;

      if ( defined('MODULE_CONTENT_HEADER_CART_STATUS') ) {
        $this->sort_order = MODULE_CONTENT_HEADER_CART_SORT_ORDER;
        $this->enabled = (MODULE_CONTENT_HEADER_CART_STATUS == 'True');
      }
    }

    function execute() {

      global $PHP_SELF, $cart, $currencies, $HTTP_GET_VARS, $request_type, $currency, $oscTemplate;

      $content_width = MODULE_CONTENT_HEADER_CART_CONTENT_WIDTH;


      if ($cart->count_contents() > 0) {

      $cart_box .= '  <div>' . sprintf(HEADER_CART_HAS_CONTENTS, $cart->count_contents(), $currencies->format($cart->show_total())) . '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '"><span class="input-group-btn"><button type="submit" class="btn btn-info"><i class="fa fa-shopping-cart fa-lg"></i></button></span></a></div>';
      }else{
      $cart_box .= '<li>' . HEADER_CART_NO_CONTENTS . '</li>';
      }

      ob_start();
      include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/cart.php');
      $template = ob_get_clean();

      $oscTemplate->addContent($template, $this->group);
    }

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_CONTENT_HEADER_CART_STATUS');
    }

    function install() {
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Shopping Cart Box Module', 'MODULE_CONTENT_HEADER_CART_STATUS', 'True', 'Do you want to enable the Shopping Cart Box content module?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Width', 'MODULE_CONTENT_HEADER_CART_CONTENT_WIDTH', '4', 'What width container should the content be shown in?', '6', '1', 'tep_cfg_select_option(array(\'12\', \'11\', \'10\', \'9\', \'8\', \'7\', \'6\', \'5\', \'4\', \'3\', \'2\', \'1\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_CONTENT_HEADER_CART_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from configuration where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_CONTENT_HEADER_CART_STATUS', 'MODULE_CONTENT_HEADER_CART_CONTENT_WIDTH', 'MODULE_CONTENT_HEADER_CART_SORT_ORDER');
    }
  }

and the template file as so

<div class="col-sm-<?php echo $content_width; ?>">
  <?php echo $cart_box; ?>
</div>

as you can I have no styling in the <div> as I am not sure how to style it to look like the search box next to it


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

Hello,

One suggestion for BS 2.3.4 and the future OsC 2.4 version.

I'm planning to add a phone button to the next version of my iosc Mobile add-on.
This button is placed on the contact page and optional in the header and will show the store phone and use the following code to trigger the phone dialer on mobile phones when clicking on the button:

<a href="tel:00-123-45-67">Tel. 00 123 45 67</a>

The Mobile Add-On uses a different set of pages for mobile devices, so its easy to show the buttons only on the mobile pages, not on the desktop store.

As far as I could see, BS 2.3.4 and the future OsC 2.4 version will only use device resolution (width) for the responsive design. So no way to trigger device specific features like a phone call only for devices with phone capacity.

Wouldn't it be interesting to include the Wurfl library to BS 2.3.4 and OsC 2.4:
http://wurfl.sourceforge.net/

This would allow to retrieve all device specific features and dispose them to be used to trigger features like the phone button and much more only if available on the visitors device.

Kind regards
Rainer

Edited by raiwa

Share this post


Link to post
Share on other sites
<?php
echo '<span class="visible-xs"><a href="tel:00-123-45-67">Tel. 00 123 45 67</a></span>Tel. 00 123 45 67';
?>

is a possible way.


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

@@PupStar as a possible way, you'd need to look at the btn classes to get the look a bit like like the searchbox -> http://getbootstrap.com/css/#buttons-tags and group them.

 

I tried this:

 

 

<div class="col-sm-<?php echo $content_width; ?>">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-info"><i class="glyphicon glyphicon-shopping-cart"></i></button>
    <button type="button" class="btn btn-default">2 products totalling $99</button>
  </div>
</div>
Edited by burt

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

 

@@PupStar as a possible way, you'd need to look at the btn classes to get the look a bit like like the searchbox -> http://getbootstrap.com/css/#buttons-tags and group them.

 

I tried this:

<div class="col-sm-<?php echo $content_width; ?>">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-info"><i class="glyphicon glyphicon-shopping-cart"></i></button>
    <button type="button" class="btn btn-default">2 products totalling $99</button>
  </div>
</div>

 

Hello @@burt,

 

Not sure if I explained correct,

 

Using device resolution (size - $content_width) will not work to find out if the device has phone capability or not. Some high end mobile phones have high resolutions like desktop screens, some low end tablets may have low resolution, but no phone feature.

 

Wurfl project does just this: extract all possible device features to be able to show for example the phone button only if the visitors device has  phone capability.

 

regards

Rainer

Share this post


Link to post
Share on other sites

I'm not sure I'm understanding what it is that you just said...sorry.

 

We dont work with resolution, we work with viewport size.  As all mobile phones are XS, we can use the XS helpers to hide and show content.

 

There seems to be little value in adding wurfl.


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

 

@@PupStar as a possible way, you'd need to look at the btn classes to get the look a bit like like the searchbox -> http://getbootstrap.com/css/#buttons-tags and group them.

 

I tried this:

<div class="col-sm-<?php echo $content_width; ?>">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-info"><i class="glyphicon glyphicon-shopping-cart"></i></button>
    <button type="button" class="btn btn-default">2 products totalling $99</button>
  </div>
</div>

@@burt

 

ok nearly there, cheers mate

 

I changed it to the following

      $cart_box .= '<div class="searchbox-margin"">
                      <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default">' . sprintf(HEADER_CART_HAS_CONTENTS, $cart->count_contents(), $currencies->format($cart->show_total())) . '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '"><span class="input-group-btn"><button type="submit" class="btn btn-info"><i class="fa fa-shopping-cart fa-lg"></i></button></span></a></button>
                      </div>
                    </div>';
      }else{
      $cart_box .= '<li>' . HEADER_CART_NO_CONTENTS . '</li>';
      }

I changed the first <div> as it was causing alignment issues 

<div class="col-sm-<?php echo $content_width; ?>">

and besides this should be in the template file should it not?

 

Now the only thing left to sort is how to butt the button to the field without the rounded corners on the left hand side of the button

 

 

Edited by PupStar

Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

OK, sorry. For the simple phone feature xs maybe enough.

But Wurfl would give much more device specific information which could be used for example to offer a Skype call button (callto:), if skype is installed. Retrieve the correct phone trigger code: most modern devices work with tel:, other phones use: wtai://wp/mc;

And a large list of device specific information which could be used to show and trigger device specific features.

Share this post


Link to post
Share on other sites

I don't think so, not as core code anyway.

 

Thanks for the input on the BS thread.


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.

×