Tag Archives: osCommerce-based code

change the length of the product name in Admin

Problem: product names can be up to 128 characters in length in the database (products_description table: products_name)

However the default limit on the number of characters displayed in the Categories & Products area in the Admin is only 64. If you have product titles that are longer than this, you need to change this default.

File: admin/categories.php

Line 1880
<td class="main"><?php echo tep_draw_input_field('products_name
[' . $languages[$i]['id'] . ']', $products_name_field, 'size="64"
maxlength="XXX"'); ?></td>

Change the ‘xxx’ value to any number of characters up to 129.

sort new products by date added

Problem: New Products are sorting alphabetically instead of by date added. How do you list by date added without affecting category product listing sort settings?

File: catalog/products_new.php

Line 103 
$sort_column = 'PRODUCT_LIST_NAME';

Replace with
$sort_column = 'LAST ADDED';

Line 110
$sort_order = 'a';

Replace with
$sort_order = 'd';

Line 136
case 'PRODUCT_LIST_PRICE':
      $listing_sql .= " order by final_price " . ($sort_order == 'd' ? 'desc' : '') . ", pd.products_name";
      break;
  }

After, add this
case 'LAST ADDED':
      $listing_sql .= " order by p.products_date_added " . ($sort_order == 'd' ? 'desc' : '');
      break;
  }

The New Products page will now list the most recent products starting at the top of the page.

cre loaded navigation bar: change the colour

Cre Loaded’s navigation bar in the cre63_ats template looks like a basic Vista type menu in steely grey.

The dark grey bar isn’t a ‘colour’ set by css – it’s 4 different images put together:

The 4 images that are used

templates/cre63_ats/images/menu_left.png (7 x 43px)
templates/cre63_ats/images/menu_div.png (between each link) (4 x 43px)
templates/cre63_ats/images/menu_mid.png (the main bar) (2 x 43px)
templates/cre63_ats/images/menu_right.png (6 x 43px)

So if you wanted to change the colour of the menu you could do this by creating new images in the colour you want, with a gradient effect thrown-in, and replace the default cre loaded 63_ats ones above.

Here’s a quick rundown on how this could be done:

Colours

1. Decide on your colour scheme in advance, including font colours that you may be changing in the css. The file template.css contains most of the css associated with the navigation menu – eg:

table.menubarmain a:link, .menubarmain a:active, .menubarmain a:visited {
color:#FFFFFF;
font-size:11px;
font-weight:bold;
text-decoration:none;
}

A bit of time spent at the colour planning stage will help you to get a result you want, rather than one you may not:

cre loaded 63_ats menu in green

There are 5 colours in the green example above. If you’re new to hex colours, one point to keep in mind is that #000000 is black, #ffffff is white. A really useful piece of software for colour identification is Colorpic from Iconico – and its free.

The colours used in the green example were:
main menu colour: #0b9218; the gradient: #32d641 to #099717; and the dividers: #022505 and #06640f.

Photoshop Instructions

1. Create a 500 x 50px canvas
2. Select Rectangular Marquee tool >> Style: Fixed Size >> 480 x 43px
3. Go to Select >> Modify >> Smooth and apply 5px radius
4. Create a new layer (Ctrl+Shift+N) then Edit>> Fill >> Use: Color and choose the main menu colour.
5. Double click the layer >> Gradient Overlay and using the Gradient Editor Color Stops, set the left the lighter colour, the right darker
6. Still in the Blending menu >> Stroke >> Size 1px >> and change the colour to the darker gradient you used in 5.
7. Create a new layer and create a selection one px under the top border of the nav bar using the Single Row Marquee Tool >> Fill: White
8. Ctrl+click Layer 1 as well >> Select >> Inverse then Ctrl+click Layer 2 and press Del
9. Double click Layer 2 >> Blending Options >> Blend Mode: Soft Light, Opacity 60%
10. To make the dividers, make a new layer >> use the Marquee tool to make a 1px wide divider >> Fill with the darker divider colour
11. Move the Marquee one pixel to the right (use the right cursor key) >> Fill with the lighter divider colour.
12. Repeat 11. and fill with the darker colour again.
13. Slice up (or crop) the image into the 4 parts you need (see earlier description, noting the sizes in pixels.)
14. Backup the original images and upload the new ones to your server, as per the Description of the 4 images above
15. Adjust the font styles, colours etc in templates.css

Here are the 4 images that make up the green example above: