Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive osCommerce - Bootstrap


Recommended Posts

By the time you got around to this my free time was nearly gone. Now I have to work and pay the bills. I'll finish it if I can find the time, but no promises.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

  • Replies 2.2k
  • Created
  • Last Reply

I'm afraid things like scrollspy will cause more of a fuss than they're worth -- there are much less... visual ways.. to update data on a page without a page reload. 

 

Categories are a huge worry for me, I need to find a solution, sites like mine where we're trying to achieve something like 300 thousand products active, the categorization tree is going to become overly large and unworkable. 

 

in other words, ajax ajax ajax ajax

Link to comment
Share on other sites

products_attributes.php is done. Lots of changes html wise, as well as converting all forms, selects and inputs to use their respective functions. A few tables removed in favor of some switch/case actions.

 

Will be committing to my admin branch in due time.

 

#########################################################################################

 

On another note, I have updated the BootStrap build to V2.3.4 - https://github.com/GLWalker/osCommerce-2334-bootstrap/tree/HEAD

 

Ive updated the install file merging changes from V2.3.4 as well as adding in the newer header_tag modules in this Bootstrap build and turning on box modules.

 

After installation it should be setup like the demo @ http://template.me.uk/2334bs3/

 

Any and all testers would be great. I have sent a push request to merge this - so the more that can have a look, the better - there are lots of changes and Gary cannot do all the testing and looking at files alone.

 

Besides the devs that can eyeball code, the easiest way to test is download the zip from https://github.com/GLWalker/osCommerce-2334-bootstrap/tree/HEAD  and install. 

 

This update has no Bootstrap Admin files, but DOES include all admin file changes from the default 2.3.4 build.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

Hello guys....

 

  You have done amazing job making OSC responsive...
I enjoy it a lt. But before I'll start working with it i have question about 2 things:

 

Here : http://www.template.me.uk/2334bs3/ i saw 2 things: GRID - You can change type of products listing and additional photos to products.
I have downloaded latest version from here: https://github.com/gburton/osCommerce-2334-bootstrap/archive/master.zip

But this version does contain this two things ( change view of products list and additional pictures )
Where can I get this version from:  http://www.template.me.uk/2334bs3/

 

With greetings

HH

Link to comment
Share on other sites

FYI handy for responsive testing using firefox

 

If you have Updated Mozilla Firefox, use Ctrl + Shift + M .

It gives responsive view,orientation (portrait and landscape) , touch events and take a screen shot also.

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

Link to comment
Share on other sites

Not sure how many more times I need to say this.

 

This thread is not for support.  It is a discussion only thread.

 

If you need support post it elsewhere, making sure to include all details, including HOW TO REPLICATE what you think is wrong.

Link to comment
Share on other sites

Hi Everyone

Special thanks to BURT. He did fantistic job by converting oscommerce to reponsive mode. I really like that.

I have question for everyone like if I want to add category menu in header part in horizontal position then how can I do so?

I would like to access it in reponsive mode as well.

Your advice will be help me a lot.

 

Thanks in advance.

 

Link to comment
Share on other sites

Hi Everyone

Special thanks to BURT. He did fantistic job by converting oscommerce to reponsive mode. I really like that.

I have question for everyone like if I want to add category menu in header part in horizontal position then how can I do so?

I would like to access it in reponsive mode as well.

Your advice will be help me a lot.

 

Thanks in advance.

 

Already discussed here and here. ;)

 

J.J.

Link to comment
Share on other sites

One issue I've noticed from the start -

 

When clicking on a button/row in a table to initiate an action,  the page needs to reload on that some area - not such a big deal on a desktop, but for smaller devices it would make the workflow a lot better.

 

I tried using anchors, but that's jumpy and cumbersome and adds ridiculous markup to everything.

 

Maybe something like scrollspy? http://getbootstrap.com/javascript/#scrollspy

 

Anyone have an ideas/advice?

Do you know Foxp2 github v2.4 repo with attributes?

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

@@wHiTeHaT

x-editables looks like as a breaked project but very perfect.

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

@@Gergely

 

I was looking, but cannot find that one. Do you have a link?

 

I dont have :(  I hoped that I have an old copy but probably deleted in 2013.

 

 

 

This is not the full project:

https://github.com/shanmugam4545/oscommerce-2.4-with-twig

 

 

Lol: http://www.oscommerce-fr.info/forum/lofiversion/index.php?t70742.html

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

As if were not all busy with a ton of repo's and loose ends to tie - here's some more food for thought

 

I have been making the elements generally found on the home page (heading, customer_greeting, text_main, new_products) to take advantage of the content modules introduced in 2.3.4 - I even place extra markup in each module to give one the ability to add their own before and after content - the idea is you can place your own opening div with desired markup, or omit completely.

 

This gives you the ability to bundle the modules together in any sort of layout desired. By default upon initial installation of the content module, the before content is '<div class=\"contentText\">' and after content is '</div>'.

 

Ive been able to place the main text on one side with a neat tidy stack of new products to the other side - thats just a small example - the outcomes are limitless - just craft the before/after content with the sort order of each content module, and you can create all kinds of layouts.

 

SO - also have been experimenting with acidvertigo's classes created for 2.4 . I made a new class for manufacturers and use it to output the manufacturer_info content box data. Now the idea is to create new content modules for the product_info page. If done the way I explained above, then the layouts that can be achieved will be practically unlimited.

 

With that said I do see a need to clean up some parts of the community build in order to take better advantage of the content modules (if it makes the upgrade to 2.3.4).

  • Some of the info boxes were coded to display in the product info page. These should be reverted back to box modules only, and a new set of content modules created for use in their place.
  • Some new box modules were introduced that display only in the header. These should be moved to content modules with a header group.
  • The infoboxes and footer follow the same pattern - and my suggestion is the same.

Using the classes - including the newly implemented category_tree -  and content modules we could have a pretty damn robust community build going on here.

 

 

Well, for the time being I'll let this simmer while I return to the admin work.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

For better clarification of before/after content  here is what I did to the content's template module of customer_greeting:

<?php
  if ( defined('MODULE_CONTENT_INDEX_CUSTOMER_GREETING_BEFORE_CONTENT') && tep_not_null(MODULE_CONTENT_INDEX_CUSTOMER_GREETING_BEFORE_CONTENT) ) {
    echo MODULE_CONTENT_INDEX_CUSTOMER_GREETING_BEFORE_CONTENT . "\n";
  }
  
  echo $greeting_string;
    
  if ( defined('MODULE_CONTENT_INDEX_CUSTOMER_GREETING_AFTER_CONTENT') && tep_not_null(MODULE_CONTENT_INDEX_CUSTOMER_GREETING_AFTER_CONTENT) ) {
    echo MODULE_CONTENT_INDEX_CUSTOMER_GREETING_AFTER_CONTENT . "\n";
  }

and again for text_main:

<?php
  if ( defined('MODULE_CONTENT_INDEX_TEXT_MAIN_BEFORE_CONTENT') && tep_not_null(MODULE_CONTENT_INDEX_TEXT_MAIN_BEFORE_CONTENT) ) {
    echo MODULE_CONTENT_INDEX_TEXT_MAIN_BEFORE_CONTENT . "\n";
  }
  
  echo MODULE_CONTENT_INDEX_TEXT_MAIN;
    
  if ( defined('MODULE_CONTENT_INDEX_TEXT_MAIN_AFTER_CONTENT') && tep_not_null(MODULE_CONTENT_INDEX_TEXT_MAIN_AFTER_CONTENT) ) {
    echo MODULE_CONTENT_INDEX_TEXT_MAIN_AFTER_CONTENT . "\n";
  }

It may seem like a lot of extra markup - but it prevents having any hard coded opening/closing elements and I think from a design and layout perspective it really opens the doors to building up the page - without having to create a type of drag and drop feature.

 

 

I could open the customer greeting with a before div tag with class of col-md-6, omit the after content, have the text_main loaded with no before content, and then make the after content the closing div that corresponds to the opening div in the customer_greeting module.

 

SO then I would have half the page dedicated to these two modules and beside that could place something else in the remaining col-md-6 space.

 

 

 

 

 

 

 

I wouldnt limit it to page modules alone - for example - the footer content modules have some hard coded classes for their width in place - a suggested one could be placed in the default install - but then we always have the ability to redo it as desired directly from the module interface.

 

Heres also the markup for the main content module for cm_index_customer_greeting:

<?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_index_customer_greeting {
    var $code;
    var $group;
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

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

      $this->title = MODULE_CONTENT_INDEX_CUSTOMER_GREETING_TITLE;
      $this->description = MODULE_CONTENT_INDEX_CUSTOMER_GREETING_DESCRIPTION;

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

    function execute() {
      global $oscTemplate, $customer_id, $customer_first_name;

      if (tep_session_is_registered('customer_first_name') && tep_session_is_registered('customer_id')) {
        $greeting_string = sprintf(MODULE_CONTENT_INDEX_TEXT_GREETING_PERSONAL, tep_output_string_protected($customer_first_name), tep_href_link(FILENAME_PRODUCTS_NEW));
      } else {
        $greeting_string = sprintf(MODULE_CONTENT_INDEX_TEXT_GREETING_GUEST, tep_href_link(FILENAME_LOGIN, '', 'SSL'), tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'));
      }

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

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

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

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

    function install() {
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Customer Greeting', 'MODULE_CONTENT_INDEX_CUSTOMER_GREETING_STATUS', 'True', 'Should the customer greeting be shown on the index page?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
	  tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Before Content', 'MODULE_CONTENT_INDEX_CUSTOMER_GREETING_BEFORE_CONTENT', '<div class=\"contentText\">', 'Insert here item such as opening div tag with desired class, leave blank for nothing.','6', '0', 'tep_draw_textarea_field(\'configuration[MODULE_CONTENT_INDEX_CUSTOMER_GREETING_BEFORE_CONTENT]\', false, 30, 3, ', now())");   
	   tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('After Content', 'MODULE_CONTENT_INDEX_CUSTOMER_GREETING_AFTER_CONTENT', '</div>', 'Insert here item such as closing div tag, leave blank for nothing.', '6', '0', 'tep_draw_textarea_field(\'configuration[MODULE_CONTENT_INDEX_CUSTOMER_GREETING_AFTER_CONTENT]\', false, 30, 3, ',  now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_CONTENT_INDEX_CUSTOMER_GREETING_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

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

    function keys() {
      return array('MODULE_CONTENT_INDEX_CUSTOMER_GREETING_STATUS','MODULE_CONTENT_INDEX_CUSTOMER_GREETING_BEFORE_CONTENT','MODULE_CONTENT_INDEX_CUSTOMER_GREETING_AFTER_CONTENT','MODULE_CONTENT_INDEX_CUSTOMER_GREETING_SORT_ORDER');
    }
  }
?>

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

  • Some of the info boxes were coded to display in the product info page. These should be reverted back to box modules only, and a new set of content modules created for use in their place.
  • Some new box modules were introduced that display only in the header. These should be moved to content modules with a header group.
  • The infoboxes and footer follow the same pattern - and my suggestion is the same.

 

So far:

 

Footer Content Modules:

Generic Text (replaces bm_text from 2334bs)

Information Links (pretty much you'd choose this OR the usual side column information box)

Contact Us

To Do:

Best Sellers

Account

Order History

 

Footer Extra Modules:

Copyright

Payment Icons

To Do:

None

 

 

 

 

Link to comment
Share on other sites

I see you went with a width to determine class used. I think that is probably the best way of handling things in the header and footer.

 

The only place I see having to get extreme as my example is on the actual page where there will / SHOULD be a need to organize presentation. And I do know its really overkill on my part - but thats what I tend to do!

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

Bear in mind that the site owner (or template maker etc etc) can also go direct into the template file for the module and change things in there.  

 

I can make it easy for the average Joe to go into the admin, turn on a box and make it 2/3 of the footer, then add another box and make it 1/3.  More than this is (I think) not needed in this area.  

 

I have not yet thought about the product page or the index page.

Link to comment
Share on other sites

Bear in mind that the site owner (or template maker etc etc) can also go direct into the template file for the module and change things in there.  

 

I can make it easy for the average Joe to go into the admin

 

Those 2 statements have been my dilemma. I prefer to change the code in the module 100% over anything else. But keeping it simple for the average Joe makes it complicated. In fact, the more I think about adding before and after content spots, I'm now seeing that I have probably made it even more complicated because unless one knows bootstrap, or whatever framework, it would probably be even more difficult to arrange everything as wanted.

 

I forgot a very important rule here: KISS

 

Revert in process.

 

SO now let me overthink again!

 

Maybe the product info page could be structured in a way like the admins dashboard where everything is arranged in one slot or another grid type fashion - but that's probably BS too.

 

Here we go:

F@#*! IT - They need to be setup to look just like the default install. Then when one is building their site, they can go in and manually change the HTML in the module.

 

Besides that, shop owners and themers will more than likely be putting together their own custom modules for desired presentation.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

It's the problem I've been describing for years - when we coders try to make things more simple "press this button to do X", it actually makes the codebase a lot more complicated, and will lead to the type of situation that Magento users find themselves in => if it's doable from the admin panel it's easy, if you need to do something else, start crying.

 

In other words, my lemons and melons analogy ... if coders give you a variety of melons, but you the shopowner needs a lemon ...

 

I do want to do something to allow placement of content in certain pages, I think it's going to be more like a "block system" so that the shopowner could do:

 

product title 75% product price 25%

 

description 50% image 50%

 

buy button 100%

 

Reviews 75% write review button 25%

 

if we keep it as ucomplicated as we can while also giving the shopowner some ability to easily change the product page layout, I think we're on the right track. So we can give the ability to give a width (and shopowners will need to know that 100% total, and the next "block" drops to a new line) and the ability to sort the "blocks" easily so that the shopowner could put (for example) the buy button above the description and so on.

 

Thoughts ?

Link to comment
Share on other sites

I think that approach would be a win/win situation, and it sort of falls in the same as the login form content module - but with bootstrap is better as we don't need to write any javascript for alpha or omega classes.

 

I have already created content modules for everything on the product_info page - past and present. If you send me a snippet of the code you used for the footer module widths, I'll place that in my existing work.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

  • burt locked this topic
  • burt unlocked and locked this topic

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...