Can I do some work for you?

If you like what you see and would like to get some pricing going, please drop me a line at web@federicojacobi.com. I'll get back to you as quickly as I can.

Thanks for visiting my site!

@federico_jacobi

I'm in awe with they are somewhere in between instagram and reddit

How to make an OSCommerce landing page

OSCommerce can seem kind of closed sometimes, but I asure you: it isn’t. It all about easy custom coding. For landing pages however, it’s more HTML than PHP. Even though your store is all setup nicely, if you are investing in keyword advertising or PPC you want to maximize your return. How do you do that? landing pages are the most common way to go.

Landing pages are regular pages of your website, but usually focused on one of your products or services. In OSC chances are its a product. The key to landing pages is testing, as there are no definitive formulas for making the visitors buy. There are tons of articles on the science of landing pages and a/b split testing … read some! Here’s how you do it:

  1. Create an empty file landingpage-1.php
  2. Add the the usual OSCommerce structure. Assuming your OSC install is virgin it goes like this: applicationtop, header, columnleft, content, columnright, footer, applicationbottom. See below for osc2.2rca or osc2.3+
  3. make sure Google Analytics or whatever you use to track performace is working.

OSC 2.3+

With the newest version of OSCommerce the setup is very easy to do. Because of the stock templating system, header+columnleft and columnright+footer are combined kinda. Here’s the code:

<?php
  require('includes/application_top.php');
  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_CONDITIONS);
  $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_CONDITIONS));
  require(DIR_WS_INCLUDES . 'template_top.php');
?>

<?php echo HEADING_TITLE; ?>

*********** YOUR LANDING PAGE CODE GOES HERE ****************
<?php require(DIR_WS_INCLUDES . 'template_bottom.php'); require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

Just replace the lines and voilá.

OSC 2.2rca

This is a little tricker as it can be easier or harder depending on how modified your design is. On a virgin install is straight foward, on a modified one where there’s some kind of templating going on or the columns have been moved you will need to read on your files. Here’s the code for a virgin version:

<?php
  require('includes/application_top.php');
  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_CONDITIONS);
  $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_CONDITIONS));
?>
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->

<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3">
  <tr>
    <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
    </table></td>
<!-- body_text //-->
    <td width="100%" valign="top"><table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td><table border="0" width="100%" cellspacing="0" cellpadding="0">
          <tr>
            <td class="pageHeading"><?php echo HEADING_TITLE; ?></td>
            <td class="pageHeading" align="right"><?php echo tep_image(DIR_WS_IMAGES . 'table_background_specials.gif', HEADING_TITLE, HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT); ?></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
      </tr>
      <tr>
        <td class="main">***********  YOUR LANDING PAGE CODE GOES HERE ****************</td>
      </tr>
    </table></td>
<!-- body_text_eof //-->
    <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->
    </table></td>
  </tr>
</table>
<!-- body_eof //-->

<!-- footer //-->
<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
<!-- footer_eof //-->
<br>
</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

There you have it!. If you have any other thoughts … please share them!

Theme to Browser (T2B) Control

Tags: , , , , , , , , — February 13, 2011

T2B Control is a wordpress plugin that helps you use a different theme depending on the browser you are using. This is great for things like having a dedicated theme for mobile devices (for now just iPhone/iPod), but also is a great way to cheat your way out of CSS hacks and browser specific annoyances ( IE anybody? ). Even though themes are usually designed to be cross browser and CSS fine tuning is part of it, sometimes you do not have the time to spend trying to figure out a way to make the  pages behave across browsers.

For now the supported software is: Internet Explorer, FireFox, Opera, iPhone/iPod, Safari. All of them modern versions, however, version specific detection will come in future upgrades of the plugin.

How to install

Easy: after downloading the plugin just save it to the plugins folder of your wordpress install. Go to the admin page and then Plugins. Locate Theme to Browser (T2B) Control and click on activate.

Setup

Once the plugin is activated just go to the “Appearance” tab and find T2B Control. There you should be able to figure out what theme to use in which browser.

Download

Just go to the wordpress plugin repo and get it! Here’s the link http://wordpress.org/extend/plugins/theme-to-browser-t2b-control/

Modifying WP Featured Content Slider to use a timer

Tags: , , , , , — May 23, 2010

This is a very neat plugin that does an all too common featured content on WordPress, but it has a HUGE problem which is the lack of a timer for changing the slides. If you go through the code it’s not even ready for a timer to work … which sucks, but that’s ok. Here’s how you do it.

Find the plugin at the wordpress plugin site or go here http://www.iwebix.de/featured-content-slider-wordpress-plugin/

then find the jQuery timers plugin (for jQuery) at http://plugins.jquery.com/project/timers and save it in the scripts folder of the wp content slider plugin folder.

If you have wordpress setup to load jQuery you might have a problem with the plugin as it does it’s own jQuery loading. We need to modify featured-content-slider.php from the plugin folder to read:

$sliderscript = "<link rel=\"stylesheet\" href=\"".$slider_path."css/slide.css\" type=\"text/css\" media=\"screen\" charset=\"utf-8\"/>

<script type=\"text/javascript\" src=\"".$slider_path."scripts/slider.js\"></script>

<script type=\"text/javascript\" src=\"".$slider_path."scripts/jquery-1.2.6.min.js\"></script>

<script type=\"text/javascript\" src=\"".$slider_path."scripts/jquery-timer.js\"></script>

 \n";

Then open slider.js from the scripts folder and modify to read (almost at the end of the file):

			if (config.contenttype[0]=="ajax" && typeof config.contenttype[1]!="undefined") //fetch ajax content?
				stepcarousel.getremotepanels($, config)
			else
				stepcarousel.alignpanels($, config) //align panels and initialize gallery

			jQuery(document).everyTime('3s', function(i) { stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby)} )

		}) //end document.ready

That’s it. Change 3s to whatever timing you want.

Easy enough huh? now we need to add a hover stop on the timer … which i haven’t done yet … but this should do for now.