Jump to content
Our Partners
Hotclutch

W3 osCommerce WIP

By Hotclutch, in osCommerce Online Merchant Community Bootstrap Edition

Recommended Posts

Hotclutch    187

Hotclutch
Posted

Updating jquery from V1 to V3 breaks the datepicker function. I don't see an updated datepicker script for V3. V1 has known vulnerabilities.

I will come back to this to see if there is a solution, for now the datepicker on the catalog side don't work.

Share this post

Link to post
Share on other sites

Hotclutch    187

Hotclutch
Posted

The left column in Admin has been placed in a sidebar overlay, triggered from the hamburger button below the osCommerce logo.

If you prefer the old way, you need to undo the changes in template_top.php and stylesheet.css

w3-1-min.png

w3-2-min.png

Share this post

Link to post
Share on other sites

Hotclutch    187

Hotclutch
Posted

Putting the reviews of a product onto the product page (product_info.php):

Add: 

  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_REVIEWS);

below 

  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_INFO);

Note, if there are duplicate entries in the 2 files, you will need to remove them.

Find: 

<div class="row mb-3">
	<div class="col">
<?php echo stripslashes($product_info['products_description']); ?>
	</div>
</div>

and replace with 

 <div class="w3-row">
    <a href="javascript:void(0)" onclick="openTab(event, 'Description');">
      <div class="w3-half tablink w3-bottombar w3-hover-light-grey w3-padding">Description</div>
    </a>
    <a href="javascript:void(0)" onclick="openTab(event, 'Reviews');">
      <div class="w3-half tablink w3-bottombar w3-hover-light-grey w3-padding">Reviews</div>
    </a>
  </div>

  <div id="Description" class="w3-container product_tab">
    <h2>Description</h2>
    <p>
		<?php echo stripslashes($product_info['products_description']); ?>
	</p>
  </div>

  <div id="Reviews" class="w3-container product_tab" style="display:none">
    <h2>Reviews</h2>
    <p>
<?php
  $reviews_query_raw = "select r.reviews_id, left(rd.reviews_text, 100) as reviews_text, r.reviews_rating, r.date_added, r.customers_name from " . TABLE_REVIEWS . " r, " . TABLE_REVIEWS_DESCRIPTION . " rd where r.products_id = '" . (int)$product_info['products_id'] . "' and r.reviews_id = rd.reviews_id and rd.languages_id = '" . (int)$languages_id . "' and r.reviews_status = 1 order by r.reviews_id desc";
  $reviews_split = new splitPageResults($reviews_query_raw, MAX_DISPLAY_NEW_REVIEWS);

  if ($reviews_split->number_of_rows > 0) {
    if ((PREV_NEXT_BAR_LOCATION == '1') || (PREV_NEXT_BAR_LOCATION == '3')) {
?>

    <div class="d-flex flex-column flex-sm-row justify-content-sm-between mb-2">
		<div class="mb-2 mb-sm-0"><?php echo '<span class="w3-small">' . $reviews_split->display_count(TEXT_DISPLAY_NUMBER_OF_REVIEWS) . '</span>'; ?></div>
        <div class="d-flex align-self-end">
			<div class="me-2"><?php echo '<span class="w3-small">' . TEXT_RESULT_PAGE . '</span>'; ?></div> 
			<div><?php echo $reviews_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info'))); ?></div>
		</div>
    </div>

<?php
    }

    $reviews_query = tep_db_query($reviews_split->sql_query);
    while ($reviews = tep_db_fetch_array($reviews_query)) {
?>

<div class="w3-panel w3-card p-2">
	<h2><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_REVIEWS_INFO, 'products_id=' . $product_info['products_id'] . '&reviews_id=' . $reviews['reviews_id']) . '"></a>'; ?></h2>
	<div class="w3-small"><?php echo sprintf(TEXT_REVIEW_BY, tep_output_string_protected($reviews['customers_name'])); ?></div>
	<div class="w3-small mb-3"><?php echo sprintf(TEXT_REVIEW_DATE_ADDED, tep_date_long($reviews['date_added'])); ?></div>	
	<div><?php echo tep_break_string(tep_output_string_protected($reviews['reviews_text']), 60, '-<br />') . ((strlen($reviews['reviews_text']) >= 100) ? '..' : '') . '<br /><br /><i>' . sprintf(TEXT_REVIEW_RATING, tep_image(DIR_WS_IMAGES . 'stars_' . $reviews['reviews_rating'] . '.gif', sprintf(TEXT_OF_5_STARS, $reviews['reviews_rating'])), sprintf(TEXT_OF_5_STARS, $reviews['reviews_rating'])) . '</i>'; ?></div>	
</div>

<?php
    }
  } else {
?>

    <p><?php echo TEXT_NO_REVIEWS; ?></p>

<?php
  }

  if (($reviews_split->number_of_rows > 0) && ((PREV_NEXT_BAR_LOCATION == '2') || (PREV_NEXT_BAR_LOCATION == '3'))) {
?>

    <div class="d-flex flex-column flex-sm-row justify-content-sm-between mb-2">
		<div class="mb-2 mb-sm-0"><?php echo '<span class="w3-small">' . $reviews_split->display_count(TEXT_DISPLAY_NUMBER_OF_REVIEWS) . '</span>'; ?></div>
        <div class="d-flex align-self-end">
			<div class="me-2"><?php echo '<span class="w3-small">' . TEXT_RESULT_PAGE . '</span>'; ?></div> 
			<div><?php echo $reviews_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info'))); ?></div>
		</div>
    </div>

<?php
  }
?>

  <div class="d-flex justify-content-between mb-3">
	<div><?php echo tep_draw_button(IMAGE_BUTTON_BACK, 'fas fa-angle-left', tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params()), null, null, 'class="w3-button w3-theme-light"'); ?></div>  
    <div><?php echo tep_draw_button(IMAGE_BUTTON_WRITE_REVIEW, 'fas fa-comment', tep_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, tep_get_all_get_params()), 'primary', null, 'class="w3-button w3-theme-light"'); ?></div>
  </div>
	</p> 
  </div>


<script>
function openTab(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("product_tab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-border-red", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.firstElementChild.className += " w3-border-red";
}
</script>

Here is the result:

 

w3-1-min.png

w3-2-min.png

Share this post

Link to post
Share on other sites

petervd    3

petervd
Posted

Hi Hotclutch, I am interested to test your version to see if I can use it with my own shops. Are those links I see in the first page of this topic up-to-date or can I find your version with the latest changes elsewhere?

You wrote its compatible with php 7.x, how about MySQL 10?

Share this post

Link to post
Share on other sites

Hotclutch    187

Hotclutch
Posted
44 minutes ago, petervd said:

Hi Hotclutch, I am interested to test your version to see if I can use it with my own shops. Are those links I see in the first page of this topic up-to-date or can I find your version with the latest changes elsewhere?

You wrote its compatible with php 7.x, how about MySQL 10?

It can be used on PHP8 now, not sure about the MySQL version.

I updated the package yesterday last.

Some of the changes I mention in this thread, I am not going to add to the package, like the product reviews mod. I only put it here as a reference.

Share this post

Link to post
Share on other sites

petervd    3

petervd
Posted

Perfect, I will give it a go! I guess I will see soon enough wether it works with MySQL 10 .


 

2 minutes ago, Hotclutch said:

Some of the changes I mention in this thread, I am not going to add to the package, like the product reviews mod. I only put it here as a reference.

I see, maybe it is an idea to add a note to the code you add to this topic which will not be part of your package so its clear for an interested user wether he needs to add that himself or not?

Share this post

Link to post
Share on other sites

Hotclutch    187

Hotclutch
Posted
4 minutes ago, petervd said:

Perfect, I will give it a go! I guess I will see soon enough wether it works with MySQL 10 .


 

I see, maybe it is an idea to add a note to the code you add to this topic which will not be part of your package so its clear for an interested user wether he needs to add that himself or not?

My goal for this package is two-fold:

1) To make the PHP updates.

2) Replace the old 960 grid with the responsive W3CSS framework.

I am not going to bloat the package with changes, which i thought was a mistake of the CEs.

Share this post

Link to post
Share on other sites

Hotclutch    187

Hotclutch
Posted

I have updated the package now with some minor changes to the catalog header.php and stylesheet.css. Eventually there will be no need for a stylesheet.css because the styling will be taken care of by W3.CSS. Most of the entries that are left are already redundant, but I am just leaving them there for now as a fallback, until I am confident that all the elements in the project have been converted.

Share this post

Link to post
Share on other sites

Hotclutch    187

Hotclutch
Posted

We add a search bar to the header to negate the need for a search box in one of the columns. (This is a mod, won't be added to the package).

In includes/header.php

replace 

<header class="container-fluid mb-3">
  <?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?>
</header>

with 

<header class="container-fluid mb-3">
	<div class="row">	
		<div class="col-sm-6"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>
		<div class="col-sm-6">
<?php echo
tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get') .
'<div class="d-flex justify-content-end">' .
	'<div class="flex-grow-1 me-2">' . tep_draw_input_field('keywords', '', 'size="10" maxlength="30" class="w3-input w3-border"') . '&nbsp;' . tep_draw_hidden_field('search_in_description', '1') . tep_hide_session_id() . '</div>' .
	'<div class="me-2"><button type="submit" class="w3-button w3-green"><span class="fas fa-search"></span></button></div>' .
	'<div><a role="button" class="w3-button w3-theme" title="' . MODULE_BOXES_SEARCH_BOX_ADVANCED_SEARCH . '" href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><span class="fas fa-cog"></span></a></div>' .
'</div>' .
'</form>';
?>			
		</div>
	</div>	
</header>

Note that the class added is class="w3-input w3-border"

If you prefer a frameless search bar, then use class="w3-input"

Here is the result:

 

w3-1-min.png

w3-2-min.png

w3-3-min.png

Share this post

Link to post
Share on other sites

Hotclutch    187

Hotclutch
Posted

Here is a fully populated navbar with Hamburger trigger for a sidebar, Brand name link, Reviews, New Products and Special Offers. Also an example footer. The header.php and footer.php that create these are attached.

 

w3-1.png

w3-2.png

w3-3.png

w3-4.png

header.zip

Share this post

Link to post
Share on other sites

Hotclutch    187

Hotclutch
Posted
On 9/13/2021 at 8:32 PM, Hotclutch said:

Here is a fully populated navbar with Hamburger trigger for a sidebar, Brand name link, Reviews, New Products and Special Offers. Also an example footer. The header.php and footer.php that create these are attached.

 

w3-1.png

w3-2.png

w3-3.png

w3-4.png

header.zip

I implement the header, footer & sidebar into the package. Easy enough to remove if not needed.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing osCommerce Online Merchant Community Bootstrap Edition
×