Skip to main content

Posts

Showing posts from 2010

Developer's Note: VirtueMart Checkout - Condensing Shipping Pages

This post will handle condensing the shipping address and shipping method pages. If you only offer one choice of shipping to your customer, then it is pointless to present your customer with a page that allows them to select, from one option, the type of shipping they want. It’s also just nice to condense these two pages to help reduce the number of clicks between the start and the end of the purchase process. Of course, it is still worthwhile to have your customer review their shipping address and to present them with an option to change the shipping address to something different than the bill to address. Condensing these pages will present your customer with a more streamlined checkout process that will improve your customer’s interaction with your e-commerce site. The first change needs to be applied in the VirtueMart configuration page. Log into your Joomla installation’s administrator page and then go to your VirtueMart component page. From here, click on configuration

Web Designers Vs. Web Developers

A funny comic relating Web Designers to Web Developers.  There definitely are some truths to the stereotypes!

Developer’s Note: Condensing Forms Displayed During VirtueMart Checkout

By default, the VirtueMart checkout process will ask for more information from your customer than is actually needed by your store.  To help reduce the form-field overload  that you customer may face when trying to purchase a product from your online store, it can help to actually remove fields that are not necessary to your business.   Do you really need to know the “company", "title", or "fax number” of a customer?  If not, then this tutorial will show you how to remove those fields. Changing the following file will impact the Billing Information and the Shipping Information (Shipping Address) forms that appear during the VirtueMart checkout process. The file you will need to edit can be found here: /administrator/components/com_virtuemart/classes/ps_userfield.php Search for the function getSkipFields() By default, the skipped fields are the username, password, password check, and the check for the terms of service agreement. function getSkipField

Developer Note: PayPal Only Checkout - Changing the Confirm Order Button

If your store will only be using  PayPal  as a payment handler, the customer experience can be improved by replacing the "Confirm Order" button at the end of the checkout process with an actual PayPal button. The old button doesn't convey to your customer that they will be taken to PayPal  to complete their order. All we're going to do with this post, is show how to change that "Confirm Order" button into this a Paypal button The file you want to edit is found here: \components\com_virtuemart\themes\default\templates\checkout\get_final_confirmation.tpl.php Within this file, search near the bottom for the following code: <div align="center"> <input type="submit" onclick="return( submit_order( this.form ) );" class="button" name="formSubmit" value="<?php echo $VM_LANG->_('PHPSHOP_ORDER_CONFIRM_MNU') ?>" /> </div> The button has a class called input.butto

Developer Note: Virtuemart - Moneris / ESelectPlus Integration - API Token Mismatch

One quick solution to a common problem.  When running Virtuemart and using Moneris as your payment processor, you may occassionally run into the following error: A message from the processor:  API Token Mismatch: (N/A) ERROR:  FAILURE IN PROCESSING THE PAYMENT (ps_moneris) The quick and easy way to fix this is to log into http://www.eselectplus.ca with your credentials and make sure that, under “My Account -> Account Settings”, the default transaction ECI is set to SSL .  It normally defaults to another transaction type (non-electronic commerce transaction), so you need to change it to represent the type of transaction you prefer.  Whether that is an SSL transaction or not is dependent on you site.

Developer Note: Virtuemart - Editing the Add to Cart MooTool Popup

To edit the “Add To Cart” popup that appears when you add an item to a cart in Virtuemart, there are few files that you need to know about. These are the files to know \components\com_virtuemart\themes\default\theme.js \components\com_virtuemart\js\mootools\   - contains the files for editing the appearance of the popup. To edit the appearance of the box, edit \components\com_virtuemart\js\mootools\mooPrompt.css to change the styles as well as editing the 2 images in the directory to edit how they appear as well (close box and header-background)

Installing Virtuemart for Joomla

VirtueMart is a free piece of Shopping Cart Software made for Joomla .  It works right out of the box with a few minor tweaks, but it also allows for some major customization. There is a lot to learn about VirtueMart to get it fully customized for your needs, but if you want a free e-commerce shopping cart component for Joomla, VirtueMart is the leading candidate. To install VirtueMart is easy.  Download the latest complete package from the VirtueMart website .  Log into your Joomla adminstrative interface and upload the package that you just installed (see Joomla - Installing Components and Plugins ).  You need to unpack the file you just download because you are only going to need to initially upload the file called com_virtuemart_1.1.5.j15.zip (corresponding to the version you downloaded).

Official Facebook Like Button

I would like to follow up the post made about the Tweet button with a post about the Facebook Like button and the benefits of adding the button to your web site. Below is an image of what the button looks like.  If you would like to see a real world example, you will find one at The Vintage Revival  near the bottom. The Facebook Like button allows visitors to share the content of your site with people on Facebook. When a visitor clicks on the Like button, a story appears in that visitor’s friends’ News Feed with a link back to your website. As you can guess, this quickly and easily helps promote your site on one of the most popular social networks on the Internet today. By embedding code in your website (called Open Graph tags ), your page will become the equivalent of a Facebook page with a connection made on Facebook between the visitor and your web site. Your site will appear in the "Likes and Interests" section of the visitor's profile and you will have t

Official Tweet Button Released by Twitter

Twitter has now released a new Tweet button for there service. This function was previously offered by TweetMeme's Retweet button . Similar to Facebook's Like button , the new Tweet button from Twitter allows a visitor to send a Twitter message from your site. Tweet Twitter offers a page to help you construct your Tweet Button: http://twitter.com/goodies/tweetbutton On this page, you have the option of how your button will appear: The text that people will include from this Tweet can be customized The URL that you want linked to this Tweet The default language You can also recommend up to 2 people to follow for this Tweet button to recommend to the visitor When you have completed the customization, it's easy to insert the code into your site because Twitter will generate it for you.  Cutting and pasting the code into your site will complete the process and then you are up and running. That's it.  It's a very similar process to the Facebook Like

Recent Portfolio Addition - AniaTaubenfligel.com

AniaTaubenfligel.com is a modeling portfolio site showcasing photos of the model Ania Taubenfligel. There are 2 image galleries showcasing her photos and her appearances as captured by the fashion media.  Along with the image galleries, there is an information page and a contact page. Created by  2BlueSolutions Web Design.

Forté Representation - Non-Flash pages added

A recently developed site, Forté Representation , was released as a pure Flash site.  To allow this site to be viewed on non-Flash enabled devices such as the iPhone, non-Flash pages were developed.  Upon visiting the site, it is determined whether you can see Flash or not.  If you can't see Flash on the device you are accessing the site with, then you will only be served non-Flash pages. One of the key features of the site is the gallery.  To mimic the Flash version of the photo gallery, Javascript was implemented with the assistance of the JQuery library.  Combining JQuery with a plugin called EasySlider allowed for development of a sliding gallery that is visible on non-Flash devices. In total, the site was broken up into separate HTML pages: Home Photographers, broken up into each artist:  Linda Mackie , Ian Sheh , and Renat Touichev . Makeup+Hair, listing the artist Eman Aziz . About Connect Clicking on any of the above links on a Flash enabled device will redirec

Installing JCE Editor for Joomla

Installing JCE Editor into Joomla. http://www.joomlacontenteditor.net/downloads/editor/ Find the download link for the latest version of the JCE Package and save the file somewhere accessible. Enter the backend of your Joomla Adminstration and go to the Install/Uninstall , by clicking on the Extensions menu item. Choose the file that you just downloaded and click "Upload File & Install" Once it is completed, you should be presented with a "successful install" message. Now, go back to the main menu Site -> Global Configuration menu and choose the JCE Editor under the Default WYSIWYG Editor combo box.

XKCD Webcomic - Cemetary

Cemetery find more XKCD comics here: http://xkcd.com/

Recent Portfolio Addition - Forté Representation

Fort é  Representation. Artist Representation.  Vancouver based agency representing photographers, makeup artists, stylists and other artists in the visual communications realm.  Given a design by The Well Creative , this site was implemented in Adobe Flash with continual feedback from the designer and from the business owner to fulfill their vision. ( click here to visit the site )

Developer Note: Customizing Agora Forum - Size of the horizontal menu bars

Okay, let's begin digging a little deeper into the style code of the Agora Forum .  We're going to begin with editing the horizontal bars to help control the appearance of your forum. First, let's start with making sure you have the Firebug extension installed for Firefox.  The Firebug extension will really help shed a light on how the custom style sheet affects the horizontal bars.  Once installed, you can select the row in Firefox and see what styles are being used to control the row. The one key property you are looking for is height .  It is the height of each class that we will be changing to customize the size of the horizontal bars.  What this blog post will do is show you which classes to edit in your style sheets. Let us begin with the top horizontal bar, the main menu row of Agora Forum.  This one bar is controlled by the one class div.ag_rightend found in common.css ( /joomla/components/com_agora/style ).  Adjusting the height property for this one clas

Developer Note: Customizing Agora Forum - Adjusting Most Active Users Section

Most Active Users Section If you wish to remove the "Most Active Users" section of your forum, you'll need to comment out the top section of footer.tpl , which can be found in the templates directory of the Agora Forum component directory:   /components/com_agora/template/ Opening up footer.tpl , you'll find that the top section has the "Most Active Users" section surrounded by a starting and ending comment block.  To remove the "Most Active Users" from your forum, just comment out the code that is between the two comment blocks. Now, on a side note, this area is important, if you choose to keep the "Most Active Users" section, because this is one area you'll need to apply styles, if you are customizing the look of your Agora Forum.  Take note of this location and we'll come back to it in the post I make about customizing the look of your forum.

Developer Note: Customizing Agora Forum - Turning a cell into a link

Making The Entire Cell "Clickable" The default settings for Agora Forum requires a user to click on the text of the forum/topic name to enter that forum/topic.  This isn't necessarily the most user friendly method of accessing your forums.  One way around this is to make the entire row cell click-able and then a user just needs to click anywhere on the cell.  You can see an example of this at the Prosupplements Forum . So, what one needs to do is make the cell a click-able object and the easiest way to accomplish this is to add an "onClick" event to the table cell.  

Restoring Your Joomla Site From A JoomlaPack Backup

If you don't already have a backup file to use, install  JoomlaPack  and make a backup of your site and download the .jpa file that is created. These instructions will handle restoring your Joomla site onto a new server (server move) or back onto your own server (disaster recovery).  Take the .jpa file that you downloaded after using JoomlaPack and upload it to the root of the server you want to expand it onto (ie.   /www/)  using an FTP program or your server hosts administration file handling software.  Now, grab Kickstart and upload it alongside your .jpa file.  Kickstart will allow you to log into your server through a web browser and handle the extraction of the jpa file online. Once you have the Kickstart file and the JoomlaPack archive uploaded, browse to the location using a web browser (ie.  www.2bluesolutions.ca/kickstart.php).  If you can't find the file online, then double check where you uploaded it to and put in that address. In most cases, you can just clic

Developer Note: Non-Standard Fonts

Many of us would like to use non-standard fonts on our websites.  The old way used to involve creating a few different styles for different browsers along with different fonts for those browsers. I went through a situation where I converted a font from a Mac font to a Open Type Font (OTF) to a True Type Font (TTF) then, finally, to an Embedded Open Type (EOT) font.  Of course, one needs an EOT for Internet Explorer and a TTF for everything else (usually).  In my case, I needed to use 3 different programs to make the fonts that I needed! Well, now I've stumbled across a site called Font Squirrel  that will generate all the fonts that you need along with the CSS style code that you will need to use the fonts on your page.

Backing up your Joomla Site

When it comes to backing up your Joomla site, there is really only one choice at the moment and that's the Joomla Extension called JoomlaPack . JoomlaPack installs quickly and integrates quite well with your current Joomla site. After installation, you are presented with a nice big Backup Required button on your Joomla administration home page. Clicking this button automatically begins the automated backup process.  Just sit back and watch as it backs up your whole site. To check on your backup, you can enter the JoomlaPack administration area by clicking on the JoomlaPack menu item under the components menu of your Joomla administration page.  For most users, it's best to keep JoomlaPack running in "Easy Mode", which allows for some quick access to some simple configuration options, a backup now button, and a way to administer the backup files.  By entering the "Administer Backup Files" area, you will be able to select a backup file and download it t

Art Sexy Lightbox - Picture Display

On the Alexander Furniture Agencies website, I used a Joomla extension call Art Sexy Lightbox to do the photo displays throughout their site as seen below: Art Sexy Lightbox  can be bought for $20 and is one of the first Joomla extensions that I purchased because it was easy to implement and did exactly what it said it would with a decent amount of customization.  There is a great demo site that they have set up to show you what the extension can do.

Recent Portfolio Addition
  
Alexander Furniture Agencies

Alexander Furniture Agencies was looking to create an online informational brochure for future clients. The idea was to clearly present the client with examples of Alexander Furniture Agencies' completed projects including a detailed photo gallery, reference letters, company background and contact information.

Joomla and Captcha

Looking to prevent the amount of spam that one of my clients was receiving, I investigated how to install a CAPTCHA utility on a Joomla contact form. You can see it in action at Ryan Gibbons Real Estate After looking at a few Joomla extensions, I settled on a solution called " Captcha Plugin for Joomla! " (yes, a creative name), a simple yet effective plug-in created by JoomlaXi . You need to register to download the extension from the JoomlaXi page , but it's free.

Recent Portfolio Addition
  
Ryan Gibbons Real Estate

Ryan Gibbons approached us to start a site to represent his real estate business. Working closely with Mr. Gibbons, we worked to create a site that presented his clients with the information they needed to either buy or sell with him as their agent. We constructed the layout of his site using Joomla (a content management system), which allows for him to easily go in and edit, and keep up to date, the information throughout his site.

Welcome to my blog.

2BlueSolutions prides itself on listening to the wants of each independent client. We strive to create a website as unique as your company. This blog will be used to post tips and tricks that I have learned while developing web sites.  I also plan to provide some tutorials on using Joomla. Find us on the web at www.2bluesolutions.ca