ProWorks Blog Rotating Header Image

Commerce for Umbraco: Sample Site and Starter Kit

Umbraco Developer TutorialIn preparation for Umbraco CodeGarden 11 this coming week, ProWorks has created a Commerce for Umbraco Sample Website and Starter Kit that you can download and try out for yourself!  This site is similar to the starter site the ProWorks uses to create e-commerce sites.

Included in the sample site:

  • Umbraco 4.7
  • Commerce for Umbraco
  • Blog 4 Umbraco
  • News
  • FAQ

Screen Shots:

Files:

Commerce4Umbraco_ExampleSite.zip – Web Files

Commerce4Umbraco_ExampleSite_DB.bak – Database

Commerce4Umbraco_SQLScripts.zip – SQL Creation Scripts (if your cannot restore the backup above)

Setup:

Database:

  • Restore the database backup to a SQL Server instance.
  • Create a SQL Server user and map it to the new database.  Write down the credentials as it will be entered into the web.config.

Website:

  • Unzip the web files to a new directory.
  • Edit the web.config and modify all connection strings and umbraco connection info to point to the database and user credentials you just created.
  • Setup the new site in IIS.  Make sure its setup to use .Net 4.0.
  • Setup the file permissions on disk to allow the new website to modify files on the disk.

Commerce:

  • Edit web.config and replace all “commerce4umbraco47.local” with the host binding you used when creating the new website in IIS.
  • Edit the \config\commerce\commerce4umbraco47.local.config file and replace all occurrences of “commerce4umbraco47.local” with the host binding you used when creating the new website in IIS.
  • Rename the “commerce4umbraco47.local.config” file in the \config\commerce directory to coincide with the host binding you used when creating the new website in IIS.
  • Open the site in your local browser!

If you have any questions about the sample site, please comment below!

Umbraco XSLT and XPATH Visualizer and Resources

I just stumbled across a new site that would have been very useful in getting up to speed with XSLT and XPATH not only when getting started with Umbraco, but also with Sitecore.  It’s Pimp My XSLT by (@greystate).

My favorite fun tool on the site is an XPath Axes Visualizer:

Basically, you can change the current page by clicking the tree, then see what pages would be returned by using the various axes on the bottom-right.  Fun fun!

Of course, the real meat of the site is in the articles.  Check it out!

Other XSLT Resources:

Any other XSLT resources you find yourself going back to time and time again?

Permanent 301 Redirect domain.com To www.domain.com in Umbraco

Umbraco Developer TutorialMost SEO experts say that when you have two or more domains or URLs that have duplicate content, then Google will penalize you. Google and SEO experts recommend that you use 301 redirects to tell search engines that you have duplicate content and to forward to the correct domain or url.

This is something we generally do in IIS (see How to 301 Redirect example.com to www.example.com in IIS), but sometimes hosts don’t give you access to IIS and you have to make do.

I found and tweaked this from an old forum post (url rewrite for http://domain.com to http://www.domain.com – Thanks Bob!).

1. Go to your “Config” directory in your main Umbraco website directory.

2. Edit the “URLRewriting.config” file in your favorite text editor.

3. Add the following code between the <rewrites>(paste here)</rewrites> tags:

<add name="SEOfix"  virtualUrl="^http\://domain.com/(.*)"
rewriteUrlParameter="ExcludeFromClientQueryString"
destinationUrl="http://www.
domain.com/$1"
redirect="Domain"
redirectMode="Permanent"
ignoreCase="true" />

<add name="SEOfixSSL"  virtualUrl="^https\://domain.com/(.*)"
rewriteUrlParameter="ExcludeFromClientQueryString"
destinationUrl="https://www.
domain.com/$1"
redirect="Domain"
redirectMode="Permanent"
ignoreCase="true" />

4. Save the file and test.

That’s it!

This is clearly a very simple solution.  If you want something more robust, then please check out this post from Mike Taylor: URL Rewriting and SEO.  It has some great discussion and is Umbraco-centric despite the title.  Thanks Stefan for the recommendation!

Fix ‘Yet Another Media Picker 4′ For Upgrade From Umbraco 4.0.x to 4.5.2

Umbraco Developer Tutorial

Recently we upgraded an Umbraco 4.0.3 website to Umbraco 4.5.2 and found that the ‘Yet Another Media Picker 4′ package isn’t supported in 4.5.2. Unfortunately, simply selecting Media Picker as the new type isn’t going to work because the YAMP4 stored its media id in the NText field in the database instead of as an Integer.  Yikes!  Database deep dive…here we go!

Luckily, I found a thread from our.umbraco.org where Matt Brailsford and Nik Wahlberg work this issue out for the most part: Media Picker w/ Preview after upgrade

When I got into the thread, it was a bit confusing and it was actually referring to a different package so I thought I’d blog my experience with the conversion process and YAMP here.

1. Backup your database

2. Find the content page properties that have used the YAMP4 to store media and review to make sure it looks good.

SELECT pd.*
FROM cmsPropertyData as pd
inner join cmsPropertyType as pt on pt.id = pd.propertytypeid
inner join umbracoNode as n on n.id = pt.dataTypeId
WHERE n.uniqueID = '9C6A12A7-C7E3-4515-B0E3-5D63B402063E'

3. Copy and cast the dataNtext field to dataInt for those records.  Thanks to Nik for the process on this one.

(BTW, you backed up your database, right?)

UPDATE cmsPropertyData
SET dataInt=CAST(CONVERT(varchar(20),dataNtext) AS INT)
FROM cmsPropertyData as pd
inner join cmsPropertyType as pt on pt.id = pd.propertytypeid
inner join umbracoNode as n on n.id = pt.dataTypeId
WHERE n.uniqueID = '9C6A12A7-C7E3-4515-B0E3-5D63B402063E'

4. Clear the dataNtext field

UPDATE cmsPropertyData
SET dataNtext = null
FROM cmsPropertyData as pd
inner join cmsPropertyType as pt on pt.id = pd.propertytypeid
inner join umbracoNode as n on n.id = pt.dataTypeId
WHERE n.uniqueID = '9C6A12A7-C7E3-4515-B0E3-5D63B402063E'

5. Change the ‘Yet Another Media Picker’ Data Type in the Developer section to use the ‘Media Picker’ as its rendering control.

6. Test your Content pages with images on them and verify everything is working.

You’re done!

Umbraco Tutorial: How to Create a Blog Post with Blog for Umbraco

For Content Editors

Want to know how to create a blog post in Umbraco? Just follow these steps:

1. Go to the “Content” section of Umbraco, find “Blog” under “Home”

2. Right click “Blog” and choose “Create”

3. Enter the title of your post and click “Create”


3a. The post will be automatically placed into the correct date folder in the content tree


4. Enter the content of your blog post


5. Enter tags for your post


6. When you’re done, click “Save and Publish” to get your post on your website

And that’s it! Happy blogging! If you have any questions feel free to ask.

Notes and Experiences Upgrading Umbraco 4.0.x to 4.6.1 and 4.7.0

Umbraco Developer Tutorial

This is a series of notes and what I could cobble together from various Umbraco upgrade articles and sources.  I also found a few issues that weren’t documented by anyone that gave me some grief.  I’ll likely add any 4.7 specific items as well when I get a chance to test this process with that version.

I’ve found that you may want to upgrade from 4.0.x to 4.5.2 then to 4.7 because the upgrade install script didn’t seem to run in the 4.6.1 upgrade I performed.  Basically, the database wasn’t updated properly when I went straight to 4.6.1.

My Notes:

From http://our.umbraco.org/wiki/install-and-setup/upgrading-an-umbraco-installation

  • Backup DB and Files of existing site
  • Create new web site and db for “upgrade” site
  • Manually merge web.config for new 4.0 changes to upgrade site (use Beyond Compare)
  • Manually merge /config files
    • Remove /bin from xlstExtensions.config
    • Remove /bin/ from restExtensions.config
  • Copy Merge these from the 4.6.1 base install on codeplex or 4.7 base code to the new site
    • I have found it better to copy using beyond compare so my packages don’t disappear and any UI.xml or locale changes don’t get lost.  But if you prefer, copy away!
    • /app_data
    • /app_browsers
    • /app_code
    • /bin
    • /data
    • /install
    • /umbraco
    • /umbraco_client
    • default.aspx

Other upgrade notes:

  • Verify your /umbraco/config/create/UI.xml still has your custom items in it.  It may have been over-written by the copy above.

http://our.umbraco.org/wiki/about/roadmap/umbraco-45/upgrading-to-umbraco-45

  • Delete App_global.asax.dll
  • Verify “UseLegacyXmlSchema” element in umbracoSettings.config is set properly (false if no XSLT conversion has been done)
  • Go to http://www.yourupgradesite.com/install/
    • Go through the upgrade install script

http://www.littlewebempire.com/blog/2010/10/29/update-umbraco-from-4021-to-452

  • You may need to add the Media Recycle bin to the UmbracoAppTree and UmbracoNode tables in the DB
  • Verify the \App_Data\TEMP\ClientDependency folder has stuff in it.  Delete anything in the folder and reload the website

Package Upgrades / Changes

  • Copy old /data/packages/ folder contents to /App_Data/Packages/

Then you need to test that your packages work and are compatible with this latest version.  Here is a place to start: http://our.umbraco.org/wiki/reference/packaging/umbraco-45-compatibility/umbraco-45-package-testing

Articles that may be helpful for package issue:

Umbraco 4.7 Additions:

  • There are quite a few dlls to remove to keep your XSLT working.  This forum article was VERY helpful in identifying the specific URLs to remove: XSLT macros not getting rendered after upgrading to 4.7 RC
    • Remove:
      • Iron*.dll (all dlls in your /bin directory starting with “Iron”, like IronPython.dll and IronRuby.dll)
      • Microsoft.Scripting*.dll
      • Microsoft.Dynamic.dll
      • umbraco.macroEngines.legacy.dll
      • RazorEngine.Core.dll
      • RazorEngine.Templates.dll
      • VistaDB*.dll
      • I’ll add more if they are mentioned…
      • From comments:
      • umbraco.standardFormhandlers.dll

That’s it so far.  Please feel free to add anything you needed to do.  I’ll edit as I find further issues.

Fix ‘Yet Another Media Picker 4′ For Upgrade From Umbraco 4.0.x to 4.5.2

13 Blog Post Ideas and Other Tips for Business Blogs

What’s the Objective?

  1. Earn TRUST – how important are relationships to your business?
  2. Merit CREDIBILITY – how do you prove expertise?
  3. Demonstrate you CARE – do you care enough to share?
  4. Invite FEEDBACK – are phone & email enough for your customers?
  5. Grow your online PRESENCE – how do your customers find you online?
  6. Make someone say “WOW” – is it valuable to be remarkable?
  7. Support your COMMUNITY – we all want a business fan club right?

Sources for Blog Post Topics

  1. Industry news & events
  2. Questions to customer service & front desk
  3. Personal experiences and conversations
  4. Posts on other blogs, Twitter & Facebook
  5. Ask your customers & readers
  6. Stuff from customers (letters, photos, video, cupcakes…)
  7. Popular culture
  8. Empty spaces and knowledge voids online

13 Blog Post Topic Ideas for Your Business

  1. Explain how a recent news event will affect your industry.
  2. List essential resources related to your industry and summarize why.
  3. List and debunk the most common myths in your industry.
  4. Promptly deliver a report from an industry related event.
  5. Compare something complex or misunderstood to something simple or commonly understood.
  6. Deliver timely advice or news relevant to an upcoming holiday or event.
  7. Share a list of changes you are considering for your business.
  8. Make a list of valuable products or services that are complimentary to your business/industry.
  9. Share a list of your favorite replies on Blog, Twitter and/or Facebook.
  10. Share a list of your favorite photos or videos related to your business/industry.
  11. Answer a list of the most commonly asked questions you receive.
  12. Create simple step-by-step directions how to do something.
  13. Invite someone interesting to write a post.

A Few Good Examples

Creating Your Own Custom YouTube Player

The Custom Player allows you to create a customized player that you can add to your website or blog. YouTube provides a nice easy to use one-page wizard to show one of your playlists, favorites, or your own videos.

Here is an example of a custom player that is set to play a specific playlist. As videos are added to this playlist they will automically be added to this custom player. Cool, huh?


Make Your Own YouTube Custom Player at http://www.youtube.com/custom_player

Tip: Login to your YouTube account and create a playlist. You can add videos, your and others, to your playlist. Custom players can be set to display from a set playlist. The nice thing is that as you add new videos to your playlist, the plugin will be automatically updated no matter where its published at.

New Facebook Fan Page Features and Thoughts

Surprise!  Facebook has a new Fan Page look and feel.

So far the new Facebook Fan Page has received some mixed reviews.

New features I really like:

Facebook Use As Fan Page

  • Email notifications – You can now get an email every time someone comments or posts to your wall.  Finally!

Facebook New Fan Page - Email Notifications

Things I don’t like so much:

  • New “most interesting” sorting of the wall posts – Each person who visits your page and views the wall with the “Everyone” sort will see a different post order.  The order is based on some sort of “most interesting” score that they receive.  Note the date order below.

When logged in as me (Jason):

When logged in as ProWorks (the Fan Page):

When Loyan views the page:

So that’s pretty crazy.

The good news is that you can preview the changes before making the switch to make sure your tabs and everything looks good.  If it doesn’t look good you have until March 11th to fix it because that’s the date everyone will be switched over no matter what.

Other Resources:

Take a look at these links for more information about the new Facebook Fan Page and how it may affect you.

What do you think of the new fan page?

New Facebook Fan Page Feature: How To Post As Both Your Page and Yourself

With the release of the new Facebook Fan Page look and feel one key new feature was added:

You can now decide whether you want to post on your Facebook Fan Page as yourself (your personal profile).

The old fan page forced you to post as your fan page persona if you were an admin of a fan page.  However, with this change you can switch between posting as yourself and posting as your fan page.

How to set it up:

1. Edit Your Page

Facebook New Fan Page Post As Yourself - Edit Page

2. Select the “Your Settings” menu item on the left menu and un-check the “Posting Preferences” checkbox.

Facebook New Fan Page Post As Yourself - Your Settings

That’s it.  Now you will post as your personal profile on your fan page!

If you want to post as your fan page in the future, then simply use the new “Use Facebook as Fan Page” feature to toggle between your fan page and your personal profile.

3. When logged in as yourself, click the “Use Facebook as…” link on the right side:

Now you will be able to comment, like, and post under the “Fan Page” profile.  If you go to your home page (news feed) you will see information for pages that your page likes as well as fans instead of your personal feed. Pretty cool.

4. You can switch back easily by simply clicking the same link (it will list your name):

Enjoy the new power and flexibility!