52 replies to this topic

[ErikMM]

58. Add an event calendar. There are several ways to do this. There is an add-on, but at this moment it appears to have a bug, or improper install instructions. Anyway, if you search for jQuery calendars you could also get one to match your theme using themeroller.

Adding a calendar is simple enough, but what about a full custom and up-to-date event log? Something for posting sales or training events, up coming demonstrations, or shows for band websites etc.?

Google rocks! It would be nice to have the calendar in the admin panel, and notify the customer base thru it, but Google's current event calendar is great, and you know its only going to get better with time.

Benefits of a Google calendar? free, easy to use, and customizable (with a little outside help, even more-so), plus you can start to connect to all your contacts, send invites, add map links/directions, add photos and videos of the event after (or while it takes place), and Google users can easily add the event to their calendar...and see all the goodies you added after. There are even email, and phone reminder options.

How to implement?
A. build a new page as you would for an about page etc. see #17 (1. a new calander.php page in: catalog and catalog/includes/languages/english 2. add the page to catalog/includes/filenames 3. add a link to the box you want the link to appear in at catalog/includes/boxes/theboxyouwantit to appear in 4. make sure you also include the info for the new page at catalog/includes/languages/english/modules/boxes/theboxyouwantit to appear in)
B. all the above can all be skipped if you just want to install the calendar to an existing page. "easy, peasee"
C. Get close to the appearance/theme colors of your shop by installing one php file into the catalog. Since I can't post outside links on the forum, I will have to spell it out. The free provider is a site called "unitz". If you search for "color-customization-for-embedded-google-calendars" you'll find what you need including really easy instructions.
D. Currently the calendar customization thru Google is limited, but a few color changes can be made there, at your Google account. With the unitz customization, you'll get a lot closer to the look you want. I'm guessing Google will eventually make the calendars fully custom, but until then this will do.

*the Google i frame code is pasted into catalog/includes/languages/english/thenewcalendar.php file you made, or whatever page you want the calendar to appear

Edited by ErikMM, 30 July 2012 - 12:15 AM.

[ErikMM]

Customizing your shop 2.3.2 road map:

a. just post solutions, not questions
b. edit mistakes you see or alternate ways

Previous post summary by number
*previous dumb/wrong suggestion—see note

1. footer: powered by oScommerce @ catalog/includes/languages/english.php
2. footer: osCommerce banner image @ Admin control panel> tools > banner manager
3. home page: New products for Month on home page @ catalog/index.php OR @ Admin control panel> modules > font page (if you installed the front page module). There’s probably a better fix, but this is one way to hide it: <?php // include(DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); ?>
4. home page: Welcome Guest! Would you like to @ catalog/includes/languages/english.php  define('TEXT_GREETING_GUEST', 'text here’ );
5. *home page: What’s New Here? @ catalog/index.php <h1><?php echo $category['categories_name']; ?></h1> not sure that you want to remove headers for SEO reasons. I still can’t find file to modify text, perhaps because I modified with front page module. See this: http://forums.oscommerce.com/topic/368458-231-a-how-to-road-mapno-questions-just-how-tos-please/page__view__findpost__p__1592359
6. Store logo: store logo Admin> Configuration> Store Logo If you make it too wide it will mess up the cart, account, and checkout buttons. It may move the buttons if people log in because then "log off" is added to the button set. 617 px wide is about as wide as you can go before making other modifications to make it work (see 18).
7. buttons: button text @ catalog/includes/languages/english.php
define('HEADER_TITLE_MY_ACCOUNT', 'My Account');
define('HEADER_TITLE_CART_CONTENTS', 'Cart Contents');
define('HEADER_TITLE_CHECKOUT', 'Checkout');
8. *box titles: modify here: @ catalog/includes/language/english/modules/boxes/all your boxes titles can be found in this box folder e.g. define('MODULE_BOXES_SEARCH_BOX_TITLE', 'Search'); Center the titles @ catalog/stylesheet.css .infoBoxHeading { }, add: text-align: center; between{  }  However, this will put the breadcrumb Home » Catalog » Products etc. in the center as well. They can be moved back to the left @ catalog/stylesheet A.headerNavigation { color: #000000; float: left;} HOWEVER, the » » will be stuck out in the middle!? One solution, if you don't like the breadcrumb anyway is to remove it @ catalog/includes/application_top.php add // before each line like so //$breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);  //$breadcrumb->add(HEADER_TITLE_CATALOG, tep_href_link(FILENAME_DEFAULT)); see: http://www.clubosc.com/oscommerce-breadcrumb-tips.html complete removal is done @ catalog/header, only the middle div, or both (meaning everything), needs to be removed: remove the middle div alone, or all of these lines <div class="grid_24 ui-widget infoBoxContainer"> <div class="ui-widget-header infoBoxHeading"><?php echo '&nbsp;&nbsp;' . $breadcrumb->trail(' &raquo; '); ?></div></div>
9. *boxes: move left or right @ Admin> Modules> Boxes *(box color- use themeroller, don’t change ext-jquery-ui UNLESS you want something transparent, as themeroller does not do transparency or opacity as far as I know) more: http://www.w3schools.com/css/css_image_transparency.asp and http://css-tricks.com/rgba-browser-support/
10.   if you add text to a page @ catalog/includes/languages/English/pagename.php don't forget that words with an apostrophe, like "don't," must be preceded by a \ like this... \' or don\'t if you don't put the \ your page or entire site may not load
11. SSL http://forums.oscommerce.com/index.php?showtopic=233458
12. Favicons: http://forums.oscommerce.com/topic/346818-any-one-know-how-to-add-favicon-ico-in-address-bar/page__pid__1552190#entry1552190
13. A much better way to add and sort products: http://addons.oscommerce.com/info/4063 + this needed http://forums.oscommerce.com/topic/195959-ajax-attribute-manager-support/page__st__1100
14.   Menu tree expansion (go back to original post 13 for more details)
15.   continue button (go back to original post 13 for more details)
16.   don’t forget #10
17.   Add an about page...or other pages to the info box (go back to original post 17 for more details)
18.   store logo: bigger (go back to original post 18, and 54 for more details)
19.   “Top" @ catalog/includes/languages/english.php define('HEADER_TITLE_TOP', 'Top');
20.   Database Backup @ Admin>Tool> Tools>Database Backup ONLY backs up the "data base," NOT all of your .php, and .css files in the Catalog folder. It will save categories and products info. It is very important to backup the data base, but equally important to make a zip file or something for the rest of the site. In my case, I use an Archive function in the File Manager (webshell) provided by my host.
21. *reCAPTCHA—FAIL (success: http://addons.oscommerce.com/info/8323/v,23)
22. *Email, post it in lieu of the contact_us, but make it an image so bots spammers aren’t as likely to find you (go back to original post 22 for more details) *22. Entered 22 twice use themeroller
23.   Add a background pic to an info box (go back to original post 23 for more details)
24.   *use themeroller and stylesheet mods in lieu of ui changes
25.   Add a new box: http://forums.oscommerce.com/topic/367702-creating-a-new-infobox-in-oscommerce-231/
26.   Webdeveloper…most browsers now have built in element details, just right click to inspect element…chrome and firefox are better that ie in my opinion, Webdeveloper is better than firefox’s standard issue
27. 960 grid: (go back to original post 27 for more details)
28.   *this was a pretty bad post, except the magnifying glass tid-bit (go back to original post 28 for more details)
29.   size and style of your ALL link fonts @ catalog/stylesheet.css (go back to original post 29 for more details)
30.   background image:  (go back to original post 30 for more details)
31.   button text: continue:  (go back to original post 31 for more details)
32.   background image to your site: (go back to original post 32 for more details)
33.   sprite CATEGORY menu: (go back to original post 33 for more details) this solves the problem of having to click twice to see products
34.   Banner rotator:  (go back to original post 31 for more details)
35.   Footer image: (go back to original post 31 for more details)
36.   Change "Categories" into an image: http://forums.oscommerce.com/topic/369356-how-can-i-change-categories-into-a-jpg-or-gif/
37.   Add login box
38.   Add ons: http://addons.oscommerce.com/category?v=23
39.   Templates: (go back to original post 39 for more details)
40.   Comodo SSL plus see post two down at original post
41.   Continued
42.   Other menu types
43.   Great tips: http://multimixer.gr/tag/oscommerce-v23/
44.   Similar to 27 http://forums.oscommerce.com/topic/369256-change-left-column-width/page__p__1555914#entry1555914
45.   Images at product pages that work! (go back to original post 45 for more details)
46.   http://forums.oscommerce.com/topic/370464-oscsid-why-you-should-lose-it/
47.   Box corners http://forums.oscommerce.com/topic/370737-rounded-box-corners-in-v231/page__view__findpost__p__1564287 themeroller can change size/radius of corners
48.   Box border http://forums.oscommerce.com/topic/370737-rounded-box-corners-in-v231/page__view__findpost__p__1564292 also themroller
I changed my boxes in the stylesheet and in the jquery stylesheet, though the later is not recommended, but its just css...
49.   Product view stripes: (go back to original post 49 for more details)
50.   Shipping: I gave up and don’t charge shipping because this was so frustrating, but perhaps someone else has info or a fix that works for shipping
51.  Admin Configuration menu
52.  product model to the product_info.php title
53.  Focus on forms
54.  Accommodating a wide logo
55.  Adding content to the left and right columns
56.  See #5
57.  Social media links: nice and tidy "add this" box
58.  Add an event calendar.
59.  I suggest adding sitemaps: http://forums.oscommerce.com/topic/330175-google-xml-sitemap-seo/page__fromsearch__1 and adding the sitemaps to your robots.txt file
60.  In addition to 59, you really should, at a minimum, open a Google Merchant, and Bing Merchant account. You can upload your sitemaps there, and more importantly list all your products,  and get the ball rolling for better SE listing, and potential hits from the Google and Bing Shopping areas. There are a number of SEO add ons. I went with FWR’s packages, but there are others as well. I tried the Google feeder add on http://addons.oscommerce.com/info/4513 , but it won’t do for apparel as a lot of the fields were off. In turn, I created an Excel spreadsheet for my products and uploaded them directly to Google and Bing. They will tell you how to do this. Now my products are in their shops, with links directly to my site.
61. Security update: http://forums.oscommerce.com/topic/375288-updated-security-thread/page__view__findpost__p__1584648 + http://www.clubosc.com/hacked-oscommerce-essential-reading.html
62. SEO down low: http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf


New versions are coming out..for better security, and other issues. I imagine a lot of the “look/feel” will be handled in a similar fashion to the above tips, but I don’t know yet…gonna give 2.3.3 a try! oh what fun!

Edited by ErikMM, 15 August 2012 - 06:43 AM.

[ErikMM]

63. pure css pop up! I use a pop up for a size chart on the product info pages of tee shirts I sell. I styled it with css. It pops up nicely over the product info, and disappears when not hovering over it. I used these to help me: http://meyerweb.com/eric/css/edge/popups/demo2.html and http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/ and http://www.w3schools.com/cssref/playit.asp?filename=playcss_box-shadow&amp;preval=50px%2050px%205px%20black

catalog/stylesheet.css:

/*shirt size popup with border and triangle(box pointer)*/

#linkpop a img {height: 0; width: 0; border-width: 0;}

/*top moves the popup down, left moves it to the right, image will shrink to fit height/width,  25px changes shadow blur*/
#linkpop a:hover img {position: absolute; top: 20px; left: 55px; height: 500px; width: 500px; background-color:#ffffff; border-style:solid; border-width:1px; border-radius:6px; box-shadow: 12px 12px 25px black;}


/*lower % moves triangle to right, need to play with it to make it line up or appear*/
#linkpop a:hover:after, #linkpop a:hover:before{
	border: solid transparent;
	content: ' ';
	height: 0;
	right: 91%;
	position: absolute;
	width: 0;
}

/*width will change triangle size, higher top # moves it down*/
#linkpop a:hover:after
{  border-width: 14px;
	border-right-color: #ffffff;
	top: 247px;
}

/*note relationship between these numbers and numbers just above i.e. continuing 1px border theme*/
#linkpop a:hover:before {
	border-width: 15px;
	border-right-color: #663333;
	top: 246px;
}

Then in my product info in admin I added the link "Size & Care". I lined the triangle (box pointer) up to come out from the link.

this went in the product build in admin in the Products Description box:

<div id="linkpop"><a href="http://www.mtbthreads.com/product_info.php/-all-mountain-dudette-p-115" alt="mountain bike clothing link"><b>Care & Size</b><img src="images/products/mTb_ThREADS_size_chart.png" alt="mountain bike clothing sizing, and care instructions"></a></div>

I'd like to make it an image swap link, but have had a hard go at combining swaps with the code above. I can live with a text link pop up sans java script!

[img]http://yuiblog.com/assets/cssarrows/shapes_5.png[/img]
similar to this^ BUT the box I built in the code above^^ has a thinner brown border, and the pointer is on the left, not right side, with white background, not gray...but you get the point

Edited by ErikMM, 15 August 2012 - 08:40 AM.

[ErikMM]

64. Cheater styling for your product listing <<prev 1 2 3 next>> links

admin>configuration>product listing (sets options for product listing)

mimic jquery redmond (shown below) or whatever buttons style you have playing with the code below @ catalog/stylesheet.css

A.pageResults {
  color: #66A2D6;
background: #E7F2F9;
border: 1px;
  border-style: solid;
  border-color: #bedcef;
  padding: 4px;
border-radius:5px;
}
A.pageResults:hover {
  color: #663333;
  background: #c5def1;
border: 1px;
  border-style: solid;
  border-color: #bedcef;
  padding: 4px;
border-radius:5px;
}

^ my hover text is brown to match my site's link styling

Edited by ErikMM, 19 August 2012 - 04:54 PM.

[ErikMM]

65. related to 63. Create a simple mouse-over image opacity change 'button' using css

I added a image to one of my boxes (includes/modules/boxes):

$data = '<div class="ui-widget infoBoxContainer">' .
			  '  <div class="ui-widget-header infoBoxHeading">' . MODULE_BOXES_ADDTHIS_BOX_TITLE . '</div>' .
			
'  <div class="infoBoxContents">' .
			  '<center></br>
<div id="navimba"><a href="http://www.imba.com/support-imba" target="blank" title="1% $$ to imba" alt="1% of sales profit donated to the international mountain bike association"/><img src="images/products/imbadonateGREEN2.png" width="81" height="42"></a></div>
</br><br>
<!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pubid=xa-4db12fa86ec881d8"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db12fa86ec881d8"></script>
<!-- AddThis Button END -->
</center>' .
			  '  </div>' .
			  '</div>';

the ^image part that concerns us from above is this:

<div id="navimba"><a href="http://www.imba.com/support-imba" target="blank" title="1% $$ to imba" alt="1% of sales profit donated to the international mountain bike association"/><img src="images/products/imbadonateGREEN2.png" width="81" height="42"></a></div>

the link target, as you can see above, opens a new tab, and links outside the site

in catalog/stylesheet I did this

#navimba{
width:81px;
height:42px;
}
#navimba:hover{
opacity:.5;
}

on hover it fades to 50% opacity

clean and easy

Edited by ErikMM, 26 August 2012 - 08:20 PM.

[ErikMM]

66. same as 65, but link to an anchor on-site at an info page

basically if people hover on the image, it fades, and if they click it sends them to the anchor...i.e. jumps to and scrolls to that part of the info page, which will be located at the top of the browser

catalog/stylesheet

#navusa{
width:57px;
height:64px;
}
#navusa:hover{
opacity:.5;
}

the infobox (includes/modules/boxes/)

'<div id="navusa"><a href="about.php#usa" title="Because it matters!" alt="100% American Made"/><img src="images/products/usa_made2.png" width="57" height="64" hspace="35"></a></div>'.

I used ^hspace to line it up where I wanted

on the info page it links to I did this (the info page is my about page (actually at catalog/about...not catalog/includes/languages/english/about, though you can put it there, just watch the ' and do this \'))

<a name="usa"></a>WHAT?</b>
<ul><li><div id="popusa"><a href="http://www.mtbthreads.com/about.php" alt="made in the usa bike clothing">AMERICAN ThREADS. It matters.</b><img src="images/products/outsourcesweatshop.jpg" title="ben deter sweatshop poster" alt="http://bendeter.com/past/sweatshop-poster/"></a></div></li>
<li>USA Grown. Spun, dyed, cut, and sewn in California and New Hampshire.</li>
<li>Hand-crafted art on fiber.</li></ul>

the part you need, the anchor, from above is this

<a name="usa"></a>WHAT?</a>

the extra stuff after WHAT? and </a> is a css pop-up I created (as explained in #63)

Edited by ErikMM, 26 August 2012 - 08:39 PM.

[ErikMM]

67. instead of the hspace used in 65, and 66 you can line the image up in center of a box like this

(and you can add a border on hover in addition to the opacity change or in lieu of the opacity change--described below)

center like this (instead of hspace):

'<center><div id="navusa"><a href="about.php#usa" title="Because it matters!" alt="100% American Made"/><img src="images/products/usa_made2.png" width="57" height="64"></a></div></center>'.

centering will make adding or using hover image borders line up easier than hspace

to add a border on hover (see 65, 66) this code:

#navusa{
width:57px;
height:64px;
}
#navusa:hover{
opacity:.5;
}

becomes this:

#navusa{
width:57px;
height:64px;
border: 1px solid white;
padding: 1px;
border-radius: 5px;
}
#navusa:hover{
opacity:.5;
border: 1px solid black;
padding: 1px;
border-radius: 5px;
}

^the pre-hover border is the same color as my background, on hover in the example above it changes to black (with opacity applied to the border as well).

You can ditch the opacity if you just want to go with a border alone on hover.

If you don't add the pre-hover border the image will jump or shift on hover with the border. If you like the jump/shift effect don't add the border before hover.

The padding is needed to allow the rounded corners to show. If you don't want rounded corners you can remove the appropriate lines.

Edited by ErikMM, 27 August 2012 - 08:31 PM.

[ErikMM]

68. Chrome will mess up or misalign your header buttons (cart, account etc.). The fix is here: http://forums.oscommerce.com/topic/389958-headershortcut-fixes/

[ErikMM]

69. Staying high(er) in search results. Other than some of the SEO hints in posts above^. If your store is pretty static, as far as products go, I reccomend making minor changes to product descriptions, your about page, shipping page...anything...on a weekly basis to stay higher in search results. Small weekly tweaks will ensure you keep getting crawled and listed higher. Even better imo, if you have enough material to start a blog, this may be a way to connect to customers in regards to you, your products, or other things of interest that will help keep your product site/blog stay new. I installed a wordpress blog at mysite.com/blog, and linked to my products of course. So far so good.

[ErikMM]

70. There is only one banner allowed on the front page through the admin panel. To add two or more banners (and/or rotators) to the front page do the following :

a. create a banner as you normally would in the admin panel/tools/banner manager section (also see #34: http://forums.oscommerce.com/topic/368458-231-a-how-to-road-mapno-questions-just-how-tos-please/#entry1557278)
b. record the "group" name you gave the banner
c. find this code in catalog/index.php

<?php
} else { // default page
?>

<h1><?php echo HEADING_TITLE; ?></h1>

<div class="contentContainer">
<div class="contentText">
<?php echo tep_customer_greeting(); ?>
</div>

<?php
if (tep_not_null(TEXT_MAIN)) {
?>

<div class="contentText">



<?php echo TEXT_MAIN; ?>
</div>

d. add this before the last </div>

<?php
if ($banner = tep_banner_exists('dynamic', 'your banner group name')) {
?>

e. or this (the second banner is whichever one you turn on in admin panel)

<?php
if ($banner = tep_banner_exists('dynamic', 'your banner group name')) {
?>
<?php echo tep_display_banner('static', $banner); ?>

Edited by ErikMM, 14 February 2013 - 09:55 PM.

[ErikMM]

71. (or 34 update). Product Attributes for 2.3.x (works on 2.3.3) that are not laborious. Awesome. here: http://addons.oscommerce.com/info/4063

[ErikMM]

72. Store logo swap image on hover. When customers hover over your store logo, this will swap the logo image for any other image you want, like another color of the same logo etc.. When they mouse over the logo your store's logo will disappear and be replaced by another image or different version of your logo:

catalog/stylesheet

#homeheaderswap:hover {
background:url(http://yourimage.png or jpg etc);background-size: 420px 68px; background-repeat:no-repeat; background-position:center;
}/*background-size only needed if you want to shrink to match store logo size--best to just do with photoshop beforehand*/


#storeLogo {
margin-top: 5px;
text-align:center
;}/*magin is up to you*/

#storeLogo:hover {
text-indent:-9999px;
}/*hides logo when hover image appears*/

cat/includes/header
replace this

<div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>

with this

<a href="index.php" title="home" alt="link to home page"><div id="homeheaderswap"><div id="storeLogo"><?php echo tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME); ?></div></div></a>

Edited by ErikMM, 18 February 2013 - 09:31 PM.

[ErikMM]

73. This is a simpler way to change your logo on hover as in #72, but just uses opacity:

just add this to your cat/stylesheet (prefrably below #storeLogo {margin-top: 5px; text-align:center;} )

#storeLogo:hover {
opacity:0.6;
}

you can play with opacity settings
0.1 is almost transparent, 0.9 is almost opaque

You can go backwards too, in other words starting with a more transparent logo (0.6), and going normal on hover
like this

#storeLogo {
margin-top: 5px; text-align:center; opacity:0.6;
}
#storeLogo:hover {
opacity:1;
}

Edited by ErikMM, 18 February 2013 - 09:47 PM.