Google PAgeSpeed Tips 1) Leverage Browser Caching 2) Eliminate render-blocking JavaScript

Using Google Web Tools PageSpeed Insights you can see analyze your site and see what Google says you can do to speed up your site, specifically.

If Google says to Leverage Browser Caching then simply paste the following in the .htaccess file in the root of your website, probably public_html

# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A0

# Set up caching on media files for 5 weeks
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A3024000
Header append Cache-Control "public"
</FilesMatch>

# Set up caching on media files for 5 weeks
<FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A3024000
Header append Cache-Control "public"
</FilesMatch>

# Set up 5 week caching on commonly updated files
<FilesMatch "\.(xml|txt|html|js|css)$">
ExpiresDefault A3024000
Header append Cache-Control "proxy-revalidate"
</FilesMatch>

# Force no caching for dynamic files
<FilesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache

Eliminate render-blocking JavaScript is even easier. Simply add the ‘async’ attribute. See below:

<script async src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<script async src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

Add an Email Link to Webpage

From:www.echoecho.com

Email links use a link tag

<a href> tag.

for example a basic link would be:

<a href="mailto:youremailaddress">Email Me</a>

Clicking this opens a visitor’s email program with your address already in the To: field.

Add a subject :

<a href="mailto:email@echoecho.com?subject=sometext">
Email Me</a>

Add specific text in the body of their message, simply add &body=:

<a href="mailto:email@echoecho.com?body=Please send me a copy of your new program!">Email Me</a>

Or combine all the options and allow your visitor to send email with the address, subject and text already entered.

<a href="mailto:email@echoecho.com?subject=sometext
&body=Please send me a copy of your new program!">Email Me</a>

OpenCart 2.0.1.0: Adding a Message to the Checkout process

1) Front page
If you are using the slideshow, you can add a message directly below the slideshow.
Open: catalog>view>theme>default>template>module>slideshow.tpl

about line 30 underneath:

</div>

  <?php } ?>
</div>

add:

<p class="slideshow-spacer"><hr /></p>
<!--- start message section here--->
  
  <div class="row">
      <div class="col-sm-6">
        <p>
        <h3>Message Title!</h3>
        <strong>Tagline</strong> 
        some text you would like to appear on the left
        </p>
      </div>
      <div class="col-sm-6">
        Put an image on the right side:<img src="image/catalog/onvacation.jpg" alt="On vaction" class="img-responsive" />
      </div>
  </div>
<p class="slideshow-spacer"><hr /></p>
 
<!--- end message section here--->

2) On Checkout page:
Open:
catalog>language>english>checkout>checkout.php
change:

$_['text_checkout_shipping_method']  = 'Step 3: Shipping Method';

to

$_['text_checkout_shipping_method']  = 'Step 3: Shipping Method. Add whatever message you would like to appear above the shipping method choices';

Do the same for

$_['text_checkout_payment_method']   = 'Step 4: Payment Method';

add you can add a message above the payment method choices.

3) Once the customer completes checkout, display another reminder.
Open:
catalog>language>english>checkout>success.php and add your message to both ‘text customer’ and ‘text guest’.

$_['text_customer']        = '<p>Your order has been successfully processed!</p><p>You can view your order history by going to the <a href="%s">my account</a> page and by clicking on <a href="%s">history</a>.</p><p>Please direct any questions you have to <a href="%s">Store Owner</a>.</p><p>Thanks for shopping with us online!</p>';
$_['text_guest']           = '<p>Your order has been successfully processed!</p><p>Please direct any questions you have to the <a href="%s">Store Owner</a>.</p><p>Thanks for shopping with us online!</p>';

4) Finally change the order confirmation email to reflect your message.
Open:
catalog>language>english>mail>order.php and change the text below:

$_['text_new_greeting']         = 'Thank you for your order!';

OpenCart 2.0: Display Product Size underneath Product Price.

OpenCart has a very useful and functional attribute system that allows you add just about anything you wish to the product description. However, the added attribute is added in an extra tab. This hack lets you add the product size directly under the product price.
Screen Shot 2015-06-11 at 2.17.50 PM

This hack will also add the product size to the item in the shopping cart.
Screen Shot 2015-06-11 at 2.27.51 PM

This technique is a hack because it uses an already existing field, ‘jan’ in the oc_product table to store the product size. However, the technique is easy to do because the admin already is set up to add data to the field. See admin>products>edit your product>data>JAN . (If you sell in Japan and need that field you can perhaps use the EAN field instead). *It would also be less of a hack when I get this converted to OCMOD.

Step 1:
Open catalog/controller/product/product.php. Find about line 271

$data['points'] = $product_info['points'];

Insert directly beneath

$data['jan'] = $product_info['jan'];

Step 2:
Open catalog/view/theme/my template/template/product/product.tpl find about line 75

<?php if ($tax) { ?>
            <li><?php echo $text_tax; ?> <?php echo $tax; ?></li>
            <?php } ?>

Insert directly beneath:

<li>size: <?php echo $jan; ?></li>

These two steps will display the value entered into admin>products>edit your product>data>JAN directly beneath the price on the products page.

Step 3:
Open system/library/cart.php find about line 245

'model'           => $product_query->row['model'],

insert directly below:

'jan'           => $product_query->row['jan'],

Step 4:
Open catalog/view/theme/your template/template/checkout/cart.tp and find

<?php if ($product['option']) { ?>
                  <?php foreach ($product['option'] as $option) { ?>
                  <br />
                  <small><?php echo $option['name']; ?>: <?php echo $option['value']; ?></small>
                  <?php } ?>
                  <?php } ?>

Insert directly beneath:

<br /><small><?php echo $product['jan']; ?></small>

Now any value display in JAN will display beneath the product name in the shopping cart.

Finally open admin/language/english/catalog/product.php and change

$_['entry_jan']              = 'JAN';

to

$_['entry_jan']              = 'Retail Size';

OpenCart 2.0: Display Text over the Front Page Slideshow Banner Images

Here is a quick and simple hack that allows you to display text messages and/or html anywhere on the Slideshow images. It is a hack, but it requires only pasting a snippet of simple code to view>theme>default>template>module>slideshow.tpl and adding several CSS selectors to view>theme>default>stylesheet>stylesheet.css. This hack will work with up to three images.

This hack readjusts the size of the text as the screen gets smaller, and hides the it on small devices so the slideshow displays properly on mobile devices and this keep the text from overlapping the images the screen size decreases. Using the CSS you can move the text and the banner image around the screen independently of one another.

To get the exact title of the banner.  Set up your slideshow as usual in open cart, and cut and paste the title from banner>edit banner.

 
LIVE DEMO

step 1) add to stylesheet.css:

/*slideshow CSS override*/
.item{
margin-right:0px;
}
/*position the banner image for large screen*/
@media (min-width: 768px)
  {.bannerimage{margin-right:200px;}
      }

@media (max-width: 767px){
  .bannerimage-recenter{
    margin-right:0px;
    }
  }

.bannertitle{
  position: absolute;
  text-align:center;
  width: 30%;
  height: 100%;
  top: 0;
  right: 115px;
  padding:10px;
  }

.bannertitle h1{
  font-weight:400;
  }

.bannertitle h2{
  font-weight:400;
  line-height:40px
  }

@media (max-width: 992px) {
  .bannertitle{
    right: 50px;padding:0px;
    }
  .bannertitle h1{
    font-size:20px;
    font-weight:400;
    }
  .bannertitle h2{
    font-size:16px;
    font-weight:400;
    line-height:25px;
   }
 }

step 2: In slideshow.tpl replace everything within <div class=”item”></div> tags , including the div tags with:

<div class="item">

  <!--banner title mod-->
   <div class="bannertitle hidden-xs">
  <?php
$bannertitle = $banner['title'];
if($bannertitle == "exact title of first image"){
	echo "<h1>Example Text:</h1><h2>More example text to appear over image</h2>";
    }elseif($bannertitle == "exact title of second image"){
    echo "<h1>Different Text</h1><h2>different text to appear over image</h2>";
    }else{
    echo "<h1>More Text</h1><h2>yet another bit of text to appear</h2>";
    }
?>
  </div>
    <div class="bannerimage">
       <div class="bannerimage-recenter">
  <!--stop banner title mod-->

    <?php if ($banner['link']) { ?>
    <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
    <?php } else { ?>
    <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
    <?php } ?>
    <!-- start banner title mod-->
      </div>
    </div>
    <!--stop banner title mod-->
</div>

You can do the same hack to get unique taglines to replace the category name.
Open view/theme/default/template/product/category.tpl
Just below:

<div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>

add the following:

<?php
		if($heading_title == "Acne"){
    		$heading_tagline='The Acne Treatment That Moisturizes the Skin';
    		}elseif($heading_title == "Anti-Aging"){
    		$heading_tagline='Exquisite Anti-Aging for Sensitive Skin';
    		}else{
    		$heading_tagline='Skin softening for Rosacea product/category.tpl';
    		}
		?>

Then just below that change:

 <h2><?php echo $heading_title; ?></h2>

to:

 <h2><?php echo $heading_tagline; ?></h2>

OSCommerce Basics: Posting A Variable with a form

This is the basic code used in OSCommerce to create a form and send a value to a page, and display that value on that page.

echo tep_draw_form('', tep_href_link('index.php', 'action=post', 'SSL'));
echo tep_draw_input_field('my_form', '');
echo tep_image_submit('', 'submit', '');
echo '</form>';

The oscommerce function tep_draw_form() creates a form, the oscommerce function tep_draw_input_field() creates a text box. You can tell these are functions because they have () after their name. (The programming knows to look in the file includes>functions>html_output to find out exactly how output these functions and so can you) .

The tep_draw_input_field() function is written so that the value in the first set of single quotes is recognized as the name of the input. In this case the name of the input is ‘my_form’. The function tep_image_submit(), also found in includes>functions>html_output, creates a submit button and </form> completes and closes the form.

Note the function within a function, tep_href_link() . This tells the form what page to send, or post, the input to. It can be the same page or another page. When you hit the submit button, you will go to that page. If on that page you have the code $HTTP_POST_VARS[‘my_form’], then that page knows to look for and capture the input called ‘my_form’ from the form. The input is now available to be used on that page in any of it’s programming. If you want to see that input, (and it is not necessary to do so in order to use that input), simply echo that variable on that page.

You can also substitute a number of other form types for the text box form, tep_draw_input_field(). For example the function tep_draw_checkbox_field() draws a checkbox. Now your code would be:

echo tep_draw_form('my_form', tep_href_link('index.php', 'action=post', 'SSL'));
echo tep_draw_checkbox_field('my_form', 'donuts');
echo tep_image_submit('', 'submit', '');
echo '</form>';

Note that the information, or value to be transmitted needs to be in the checkbox function, within the brackets() in the second set of quotes. And thus in this case $my_new_variable instead of being equal to anything that is typed into a text box, would always be equal to ‘donuts’.

Is Your Website Secure? Check it and See.

Here is a quick, easy and informative way to see if you have your https setup correctly on your website. My friendly webhost tech told me about this site, WhyNoPadlock.com

Simply go to www.whynopadlock.com and enter the page on your website address you want to check.

Within seconds it will check and see if your SSL certificate is valid, tell you when it expires and who issued it. Perhaps more informatively, It will also list any unsecure items on the page, such as a link or image not properly posted, (for example if you have hardcoded it and not used the proper OSCommerce format).

If your customers are getting that browser warning that your site contains insecure items, this site will tell you what is causing that.

Another site that provides this same info but a bit more graphically pleasing is www.sslshopper.com

Improved Customer Sort

Improve customer sorting in the admin. Stock OSCommerce simply displays a static alphabetical customer list in admin>orders>customers. This old contribution originally posted on the OSCommmerce site in 2002 by Burt and just recently updated 9/20/2011 by D-Woo allows up and down sorting by first and last name and by date the account was created.

It’s really easy to install, just replace admin/customers.php and upload two images.

Mail Manager for OSCommerce: Description

Mail Manager is a comprehensive mail program for OSCommerce. Designed for 2.2RC2a and OSC 2 CSS.
Purpose:

  1. Send all emails both in html and in text.
  2. Allow editing and templating of all emails, to include order confirmation, create account, password forgotten, status update, and tell a friend emails from the admin
  3. Add a post sales email marketing ability to OSCommerce
  4. Modulate the rate that emails are sent

Emails that can be edited and templated from the admin include the emails that are initiated when a customer create an account, completes an order, requests a password, sends a ‘tell a friend’ email, recieves when an order status is updated, the single emails sent directly from the admin to a customer, and the newsletters.

Mail Manager:

  1. Mail manager allows the shop owner to create and edit all emails from the admin with both an html and a text alternative, to allow professional and readable emails to be produced.
  2. To create a consistent look, templates can be produced in the admin that can be applied to all emails.
  3. A bulkmail module is included that allows the rate that OSCommerce sends email and newsletters to be adjusted. The rate is in seconds per email. This allows shops on shared web-hosting account to send large mailings without exceeding band-width limitations.
  4. The bulkmail module also contains a special feature that allows the sending of marketing emails to customer that have recently made a purchase. This email contains an orders product listing, to include images and links to ‘write a review’, and also contains cross sold items. (if the xsell module is installed).
  5. Mail Manager adds product images to the customer initiated tell_a_friend email.
  6. A search feature is added to the admin email that makes it simple to locate a customer and send them note, etc on a templated email.

Mail Manager Installation