Jump to content
burt

Responsive osCommerce - Bootstrap

Recommended Posts

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

Share this post


Link to post
Share on other sites

https://github.com/gburton/osCommerce-234-bootstrap/commit/b133ee05804fcdfcb338ea8c38171e17248e4ee8

 

this commit introduces the concept of templatable boxes, for anyone who wants to try them, let me know your thoughts.

 

Note that this is not committed to Master, only in a branch (for testing purposes).

 

Did anyone try these changes on a test site ?  Any thoughts on it ?

 

Thanks


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

Did anyone try these changes on a test site ?  Any thoughts on it ?

 

Thanks

@@burt

 

I have installed it but not had the time to have a proper play with it yet.


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 give it a go as you will find those cart changes a lot easier in the template file (for the box module)...let me know your thoughts?


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

@@PupStar give it a go as you will find those cart changes a lot easier in the template file (for the box module)...let me know your thoughts?

 

@@burt

 

I will have a go when I get a minute from doing housework before going back to the slog tomorrow

 

would you mind re-reading post #1226 and let me know your thought about the button issue.T

 

thanks


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

1226 is Raiwa's post which I don't think you want me to look at...

 

To make the cart like a button, use a cart module (with a template file), and do:

 

 

<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">SPRINTF HERE</button>
  </div>
</div>

 

Forget the other line that says "empty"..


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

Did anyone try these changes on a test site ?  Any thoughts on it ?

 

Thanks

I'm testing it and I love the way is implemented. For now I've not found issues

Share this post


Link to post
Share on other sites

I'm about to commit to master the templatable box modules - anyone got any input prior to me performing that action?


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
<?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.

 

 

Hello again,

 

How about this then for the contact box:

      $data .= '    <address>' .
               '      <strong>' . STORE_NAME . '</strong><br>' . nl2br(STORE_ADDRESS) . '<br>' .
               '      <span class="hidden-xs"><abbr title="Phone">P:</abbr> ' . STORE_PHONE . '</span><br>' .
               '      <span class="visible-xs"><a class="btn btn-success btn-sm" role="button" href="Tel:' . str_replace(' ', '-', STORE_PHONE) . '"><i class="glyphicon glyphicon-send"></i> P: ' . STORE_PHONE . '</a></span><br>' .
               '      <a class="btn btn-success btn-sm" role="button" href="mailto:' . STORE_OWNER_EMAIL_ADDRESS . '"><i class="glyphicon glyphicon-send"></i> E: ' . STORE_OWNER_EMAIL_ADDRESS . '</a></span><br>' .
               '    </address>' .
               '    <ul class="list-unstyled">' .
               '      <li><a class="btn btn-success btn-sm" role="button" href="' . tep_href_link(FILENAME_CONTACT_US) . '"><i class="glyphicon glyphicon-send"></i> ' . MODULE_BOXES_CONTACT_BOX_CONTACT . '</a></li>' .
               '    </ul>';

Kind regards

 

Rainer

Share this post


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

×