Handling Ajax Forms in Colorbox

In my last post I talked about how to add links to other pages with Colorbox. This post is about how to handle Ajax forms with Colorbox. You may have noticed that when you submit a form from within Colorbox, it does a HTTP request rather than an Ajax request. This can be somewhat frustrating – especially if you are wanting to have your form submit via Ajax.

In this post we will cover the following:

  1. Create a small form with required fields.
  2. Create PHP processing to check the required fields.
  3. Open the form with Colorbox.
  4. Submit the form via Ajax and show the results in Colorbox.

Read More »

Posted in HTML, Javascript Code, jQuery, PHP Code | Tagged , , , | Comments closed

Add Links to Other Pages in Colorbox

If you haven’t heard of Colorbox, then you should definitely check it out. It’s one of the better jQuery Lightbox/Thickbox replacements. Colorbox has a lot of features, however it seems to break links to other pages, when it is used to display inline content. (Note: I’m not talking about opening new content within the same Colorbox, that works fine, I’m talking about just a normal link from the Colorbox to another page).

I actually had to write some additional JavaScript to get the links working from within Colorbox. I’ve included the code below. If you know of a better or different way of doing this please let us all know in the comments!

Firstly I had to add a class to my link element. The class I’m using is “cbox-link” feel free to use your own.

<a href="'.$base_url.'/view/myfile.php" class="cbox-link">View My File</a>

Next I added this JavaScript to get the link working with the “cbox-link” class:

jQuery(function(){
   jQuery('.cbox-link').bind("click", function(){
      var location = jQuery(this).attr("href");
      window.location.replace(location);
   });
});

Now the links in the Colorbox are working correctly.

Posted in HTML, Javascript Code | Tagged , | Comments closed

Adding a Logout Link to Magento

Magento seems to include the “Login” link by default. However, Magento does not seem to show a link to Logout after one logs in.

If you have been searching tirelessly for a solution to your Magento logout woes, have no worries your search is at an end! We’ve already searched and found. We’ve included the code you will need to add a Logout link to Magento. Read More »

Posted in Magento, Magento Help, Magento Resources, Magento Skinning, PHP Code | Tagged , , , | Comments closed

Mobile CSS Not Working For You – Try This Route

I recently tried using this method to develop a website for mobiles because it seemed popular and came from some reputable sources, however it just wasn’t working for me!

<link rel=”stylesheet” href=”http://URL/screen.css” type=”text/css” media=”Screen” />
<link rel=”stylesheet” href=”http://URL/mobile.css” type=”text/css” media=”handheld” />

I also tried adding @media to specific styles in my main CSS file and that wasn’t working either.

Finally I decided to ditch this route and went with this:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;” />
<link media=”only screen and (max-device-width: 480px)” href=”/stylesheets/mobile.css” rel=”stylesheet” />

… it worked for me, hopefully for you too!

Posted in Mobile Websites | Tagged , | Comments closed

Where To Edit Wishlist Email Files In Magento

As with many things Magento, there is a little running around to make edits to the wishlist email that goes out from Magento.

Here are the default template wishlist email files in Magento

To edit the product name, description, View Product link and Add to Cart link, you’ll need this file:

app > design > frontend > THEME > default > template > wishlist > email > items.phtml

Unfortunately though, you must edit another file that contains the infamous “Demo Store” text and also another set of links:
Add all items to shopping cart | View all wishlist items

app > locale > en_US > template > email > wishlist_share.html

Posted in Magento Help, Magento Skinning | Tagged | Comments closed

Cannot Resize Image In WordPress Twenty Ten Theme or Child Themes?

If you cannot re-size an image once you’ve inserted it into your post or page using the WISYWIG and you are running the Twenty Ten theme or a child theme based off of that, take a deep breath – there is a fix!

To fix this, all you need to do is edit the Twenty Ten CSS. Unfortunately there is no way override this setting in your child CSS.

If you are not sure how to get to the Twenty Ten CSS, here you go.

While logged into wp-admin, click Appearance > Editor > and then in the top right you will see a drop down menu next to “Select a theme to edit.” Choose Twenty Ten and then click Select. This will automatically load all of the Twenty Ten template files including the CSS file that we need to edit. Scroll down and under the sub heading Styles, you will see a file named Stylesheet (styles.css) – that’s the one.

Go to line 761 and you will see this:

#content img {
	margin: 0;
	height: auto;
	max-width: 640px;
	width: auto;
}

Change that to look like this:

#content img {
	margin: 0;
	height: auto;
	max-width: 640px;
	/*width: auto;*/
}

That should do the trick! You should now be able to size images in the WordPress editor.

Posted in WordPress Code | Tagged , | Comments closed

Using Mysqldump to Export a Database

Usually we will use phpMyAdmin to export, import, and manage MySQL databases. However, there are times when you cannot, or do not wish to, use phpMyAdmin. In these cases it’s often possible to accomplish what you need by using the command line interface for MySQL, or in this case using the mysqldump client.

This little snippet can be run on the command line to backup or export your database in SQL format. However, the mysqldump client can do much more then simple backups – checkout the mysqldump page for more information.

mysqldump --host [yourhost] -u [your_database_user] -p [your_database] > [your_file].sql

Here’s a brief explanation of what each of the command components means.

  • –host
    • Whatever comes after this is your database host. For most people the database host will be localhost.
  • -u
    • Whatever comes after this is the user for the database. If you run this command without the -u component you will be running it as whatever user you are currently logged into the shell as.
  • -p
    • This indicates that you wish to enter a password for the given user. If you use it the way we are, then you will be asked to enter a password after running the command and before the database is exported.
  • >
    • This takes the output of mysqldump and saves it to whatever file you specified after the sign.

It probably goes without saying, but you need to replace all occurrences of [...] with your information. Here’s an example showing what an actual command would look like.

mysqldump --host localhost -u example_user -p example_db > example_db_bkup.sql
Posted in Command Line, Database and SQL, MySQL | Tagged , , , , | Comments closed

Pre-Launch Magento Configuration Checklist

http://www.magentocommerce.com/knowledge-base/entry/pre-launch-system-configuration-checklist/

http://tomrobertshaw.net/2010/09/37-point-magento-pre-launch-checklist/

Magento Launch PDF Checklist:

Posted in Magento, Magento Help | Comments closed

Magmi – Magento Product Importer

I haven’t looked into this too closely – but this looks to be an efficient product importer for Magento. Apparently it imports at several thousand products a minute.

Here are a couple links with more information.

  • Original Thread: http://www.magentocommerce.com/boards/viewthread/201210/
  • Sourceforge hosted Project: http://sourceforge.net/apps/phpWebSite/magmi/index.php

I’m looking forward to giving it a try. What are your experiences with this?

Posted in Database and SQL, Magento, Magento Resources | Tagged , , | Comments closed

Redirect to a New Domain Using Mod-Rewrite

Sometimes you find yourself needing to redirect one domain name to another domain name. Say you want to redirect www.myolddomain.com to www.mynewdomain.com. You can do this by using Mod-Rewrite within your .htaccess file.

Here is an example of how to do this. In this example both the non-www version of the domain name and the www version of the domain name are detected and redirected.

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^yourolddomain.com$ [OR]
RewriteCond %{HTTP_HOST} ^www.yourolddomain.com$
RewriteRule ^/?(.*)$ "http://www.yournewdomain.com/$1" [R=301,L]
Posted in Command Line, General Web | Tagged , , , | Comments closed