W3 osCommerce WIP

[Hotclutch]

[bonbec]

Defrosted version ?

[Hotclutch]

1 minute ago, bonbec said:

Defrosted version ?

No. This I am building on official 2.3.4.1. it will have all the functionality and features of that version, many of which were stripped out in the CEs.

https://www.w3schools.com/w3css/defaulT.asp

[Hotclutch]

https://www.dropbox.com/s/6yzeg9adbmee3f5/W3-osC.zip?dl=0

If anybody wants to have a look and share their thoughts, above is the download link. It's only a start for now.

[Hotclutch]

Some more pics of the styling of W3.CSS

 

[Hotclutch]

The package will install onto a php8 environment.

[Hotclutch]

[Hotclutch]

or

 

 

[Hotclutch]

I use Bootstrap 5 for the responsive grid because it is superior to the grid of W3.CSS

In template_top.php you will find:

		<div id="bodyContent" class="col-md-<?php echo $oscTemplate->getGridContentWidth(); ?> order-first order-md-2">

In template_bottom.php you will find:

<?php
  if ($oscTemplate->hasBlocks('boxes_column_left')) {
?>

<div id="columnLeft" class="col-md-<?php echo $oscTemplate->getGridColumnWidth(); ?>">	
  <?php echo $oscTemplate->getBlocks('boxes_column_left'); ?>
</div>

<?php
  }

  if ($oscTemplate->hasBlocks('boxes_column_right')) {
?>

<div id="columnRight" class="col-md-<?php echo $oscTemplate->getGridColumnWidth(); ?> order-last">
  <?php echo $oscTemplate->getBlocks('boxes_column_right'); ?>
</div>

<?php
  }
?>

Then in includes/classes/osc_template.php:

var $_grid_content_width = 6;

and

    function getGridColumnWidth() {
      return 3;
    }

These settings control the project layout. No changes to the database are made. I imagine that the way it is setup now would suit most installations. In Admin, you can still turn on/off boxes, or move them left/right. By doing so you could have a 1,2 or 3 column layout without having to edit code.

If anyone has installed the package from when I have made it available, i have updated it with some progress. You should be able to overwrite the files (minus the configure and htaccess files) to see the changes.

[Hotclutch]

W3.CSS is easy to learn, easier than Bootstrap. And easier to theme with.

Go to:

https://www.w3schools.com/w3css/w3css_color_themes.asp

for a list of pre-defined colour schemes.

By adding 1 line of code to template_top.php with your chosen scheme, you now have a new look to the site.

 

[Hotclutch]

[Hotclutch]

product listing complete.

 

[Hotclutch]

pagination complete.

 

[Hotclutch]

Made some edits to the english language file to achieve this. Anybody using another language pack can / will have to do the same.

#define('PREVNEXT_BUTTON_PREV', '[<< Prev]');
#define('PREVNEXT_BUTTON_NEXT', '[Next >>]');
define('PREVNEXT_BUTTON_PREV', '«');
define('PREVNEXT_BUTTON_NEXT', '»');

 

[Hotclutch]

Alerts have been completed.

 

[Hotclutch]

Now we put an overlaying sidebar. Put whatever you want in there. This code won't be added to the package.

 

[Hotclutch]

The guidance for the Sidebar is here:

https://www.w3schools.com/w3css/w3css_sidebar.asp

[Hotclutch]

Modal complete.

The theme is now nearly complete. I think I have done enough to make this usable on php7.4; Cannot be used on php8 yet.

[Hotclutch]

Product Page Layout adjusted.

 

[Hotclutch]

Product Tabs are easy to implement.

 

[Hotclutch]

On 9/7/2021 at 9:46 PM, Hotclutch said:

The theme is now nearly complete. I think I have done enough to make this usable on php7.4; Cannot be used on php8 yet.

 

 

[Hotclutch]

[Hotclutch]

Admin Dashboard Modules.

 

[Hotclutch]

Time to add some featured products and manufacturers to the shop.

 

[Hotclutch]