Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

W3 osCommerce WIP


Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...