Welcome back to the play by play of my experiences at the 2011 AspDotNetStorefront Conference in Las Vegas.  Day One down, Day Two here we come…  Another incredibly informative day and I leave lots smarter and excited to start our newest AspDotNetstorefront project!

Developer’s Clinic– Technically the “developer’s clinic” was to allow the developers to bring solutions to coding problems that were e-mailed to them in advance.  The questions were way beyond my meager programming skills though (I leave that to our awesome developers!), but I did come to the conference armed with sixteen “how to” questions.  Since I didn’t see anywhere else on the schedule to ask my particular questions (and 90% of them would really bore an audience anyway), I invaded the developer’s clinic area and basically begged the unlucky AspDotNetStorefront staff member there for assistance.  Josh Belden was kind enough to indulge me, even after I pulled out the notebook with my myriad of questions.  He worked through each item with me patiently and didn’t once roll his eyes!

This is really the reason that we selected AspDotNetStorefront as a shopping cart in the first place – the exceedingly helpful support and active developers community.  I’m so pleased to find out that that spirit of sharing and community continues at Vortx and couldn’t be happier about the assistance that Josh provided.  Trying not to sound too gushy, but this 30 minutes of one-on-one consultation likely saved me hours of research and analysis.  I’d suggest that next year, rather than a “Developer’s Clinic”, which seemed rather sparsely attended, there be an “Ask the Experts” booth, where conference attendees can go to brainstorm with the experts.  Thanks Josh!!

Session 7B, “jQuery” by Dan Heberden, jQuery – This session also turned out to be too technical for my poor project manager brain (there’s only so many dollar signs and curly brackets my head can take!), but the developer that attended the conference with me was positively giddy.  “We can do everything in jQuery!” she said, which I really liked to hear.  I learned enough to know that jQuery is going to give us a more interactive user experience without sacrificing performance or having to edit source code (which I avoid like the plague if I possibly can).  Dan was incredibly knowledgeable on the subject and provided a list of resources which I plan to add to our corporate knowledgebase:

• http://www.learningjquery.com
• http://www.jqfundamentals.com
• http://api.jquery.com

Lunchtime announcements– We anxiously awaited the big announcements that were shared by Dana Greaves, CEO of AspDotNetStorefront and Vortx, during the lunch session:

• Of most immediate interest to me personally– Version 9.1 of ML was released today, which should offer many fixes and enhancements to the ML9 product with minimal impact to current custom code
• Change in licensing– Instead of being forced to purchase Multi-Store in 5-pack units, the product is now available in single store units, with the future option to purchase additional stores at a discounted rate
• Several promotions and discounts available to conference attendees were announced
• New branding/naming for the ML9 product as “MSx” (I think??)

Session 8B, “Design + Master Pages”, by Chris McKellar and George Solomon (Vibe Commerce) – I was anxious to attend this session because I’ve worked with Vibe several times in the past and have heard both Chris and George speak before.  They are both extremely knowledgeable about AspDotNetStorefront and very good public speakers and I was not disappointed.  One thing that stood out about this session, among the others, was specific examples of AspDotNetstorefront sites that used the principals in the talk.  They also did a good job of bridging the gap between the true developers in the room and those of us that have to make business decisions based on the technology.

Chris began with a nice overview of the psychology of design and prompted us to consider a number of different factors when designing and developing a site:

• Make sure the user experience is seamless and simple – “Make it so good they don’t notice”
• Understand exactly what you want the customer to do and how that goal can be accomplished
• Modern designs tend to have:
  • Less “ads” and/or call to actions in the site header (instead reserved for informational/account-related content)
  • Search box tends to be large and in the middle of the top nav bar
  • Tabs have been replaced with “mega-menus” and photography is leveraged to provide an emotional response
• Consistency in site design and presentation is KEY!
• Category landing and search results pages should look exactly the same to provide a seamless shopping experience
• Use whitespace/negative space wisely and generously… Let the site “breathe”
• Use appropriate color triggers– warm colors for strong emotions and immediate response (call to actions, promotions) and cool colors for calmness and serenity
• Provide the customer with a confirmation page before the final order is placed to increase consumer confidence

Next, George provided a summary of “Master Pages” and why we should be excited to use them.  As someone who has been reluctant to upgrade for this very reason, this was a very informative part of the session for me.  I learned the following (do I dare say I’m sold??):

• Master pages provide an effective way to establish a consistent layout throughout the website as well as separating the functionality from the design in order to enable team members to develop on different pieces of the same site simultaneously.
• When deployed correctly, there can be a performance boost for the end-users on an AspDotNetStorefront site using Master Pages
• Using Master Pages allows a service company to bring any .NET developer up to speed quickly on an AspDotNetStorefront site, whereas earlier versions often required a fairly high learning curve for both designers and developers
• There will potentially be more third party controls and add-ons available for a site based on Master Pages, due to its inherent extendability
• Applying styles and switching themes are easier with Master Pages
• .NET only allows one “run-at” form per page and AspDotNetStorefront uses that, so other sub-forms on the page (search box, newsletter submissions) must be implemented using .NET controls.
• Sites should be easier to develop and deploy using Master Pages (fingers crossed!)

Session 9B, “Stump the Experts” with Jesse Hodges, Josh Belden, Jason Addington (all of AspDotNetStorefront/Vortx) and George Solomon (Vibe Commerce) – The organizer’s intention was to make this kind of a “game” where the audience would write down questions that they knew the answers to and try to stump the expert panel.  This started pretty slowly, as most of us were unprepared and thought it would be more of an open brain-storming session (and personally, I still wish it had been), but it turned out fun in the end (I won a bag with a cheater question) with lots of laughs and trash talking.  I didn’t really learn a whole lot, except for one thing, which was probably the most important of all—these guys are really, really smart and they know what they are doing– period.  With a program that easily has tens of thousands of lines of code, they could quickly and easily spout of the exact name of a stored procedure and how to modify the code to get the desired effect.  They are proud of the work that they do and readily think outside the box to solve a problem.  Good enough for me!

I leave Las Vegas tired from a long couple of days, but full of energy and excitement about the product and the company that now owns it.  Congrats to all involved for hosting such a successful event!

I have the great opportunity this week of attending the ASPDotNetStorefront Conference in Las Vegas, hosted by Vortx (the new owners of the e-commerce shopping cart that Beacon has been implementing for about four years).  The conference is divided into two tracks– developers and merchants– and, being neither ;), I’m bouncing back and forth between the tracks, based on the topic.  Here are my thoughts and discoveries thus far:

Session 1 “Fearless Source Code Modification” by John Morrison, Morrison Consulting- I’d hoped this session would be focused on best practices to safely make source code modifications to the ASPDNSF code, which we do often.  It was actually a session on source control and was a bit too technical for me.  However, I’m sure that many of the developers in the room benefited from the information and I plan to take the information back to the office to have our DBA investigate both VisualSVN and TortoiseSVN to advance our internal code management to “vendor branch management”.

Session 2 “Email Marketing – Beyond the Basics” by Kristine Dobson (Email Direct) and Ross Kramer (Listrak) – Really enjoyed this session a lot.  Not really related to ASPDNSF per se, but lots of awesome information about creating email campaigns.  A small glimpse of what I learned:

Email Marketing

• The most effective campaigns are scheduled on a rigidly consistent schedule.  The most common frequency is bi-weekly, but also consider weekly or daily
• Consider sending an “email series” rather than single emails to new customers for maximum effectiveness
• Be sure to test mailings for email rendering and inbox delivery as well as content
• Items that can cause email non-delivery (particularly in Outlook, which is particularly content sensitive)
  • Trigger words (dear, free, mortgage)
  • Spelling errors
  • Using all caps
  • Not using consistent font size and face
  • !!!!, % and $ (particularly in subject)
  • Red font
  • Highlighted copy
  • Subject lines longer than 50 characters

Shopping Cart Abandonment

• Though stats vary, approximately 60-75% of shoppers ultimately abandon their online carts.  This is a huge opportunity to recoup sales through email marketing.
• Recommend a series of email to the customer, sometimes offering promotions/discounts and sometimes just reminding the shopper of items in their cart (or upsell related items)
• Carefully test the content and timing of the remarketing campaigns
• If applicable, offer the customer an easy way to find the products in a local store rather than online in the email
• Some customers respond very well to links to product videos in email and/or product reviews

Session 3 “Payment Methods” by Alex Brutin, Moneybookers/Skrill and Jason Doll, Amazon Payments- A very interesting session about alternatives to the traditional credit card payment.  In Europe, for example, credit cards are very rarely carried or used for online purchases, in favor of local credit sources, debit cards, or bank transfer.  Skrill will soon release an electronic wallet product in the U.S., much like PayPal, that will allow U.S.-based online stores to more easily accept payment from European countries in their preferred method of payment (potentially increasing conversions).

Likewise, Amazon Payments will soon be releasing an integration with Aspdotnetstorefront that will allow the visitor to check out of the online store using the address book and payment information already stored in their Amazon account, without leaving the online store.  Previously, Amazon Payment required a rebranded window that left the online store, which reduced the options for upselling.  This new interface will be a widget that will be included on the site’s checkout page and will never cause the customer to leave the site.  Since there are over 100 million Amazon account holders, this has a tremendous potential for increasing conversion rates.

Session 4 “Product Feeds” by Ryan Douglas, Singlefeed – The presenter described his own experience with a retail online store and the difficulty of maintaining data integrity.  He described how essential it is to maintain very good data, in particular with regard to feeding data to comparative shopping engines.  The accuracy and descriptiveness of your data can make a huge difference in a purchase selection between identical products listed in a shopping engine.  He highly recommended, in addition to the traditional required fields like product name and description, to maintain UPC, brand/manufacturer and model number for every product in your store.  UPC codes are particularly essential for the new mobile apps that allow the customer to scan a barcode and find the product online.  He also recommended listing product attributes like color and size as separate fields so that they can be more easily denoted in the comparison.  Also give very close consideration to product title and include as much relevant information as possible (color, size, brand) in the product name so that it can be easily understood outside the context of the online store.

Session 5 “Interacting With Customers” by Michael Teitelbaum, Velaro and Ian Rowley, WhosOn – These presenters each shared their online chat programs with the audience and gave very valid arguments as to why chat should be implemented in most online stores in order to add a necessary “touch point” for the customer.    There are two main chat formats– reactive chat and proactive chat.  Reactive chat is initiated by the customer in response to graphics/icons located on the site indicating that chat is available.  It was recommended that the chat icon be placed prominently on the home page as well as any other location that the customer is likely to “show intent” (like a product detail page) and anywhere that customers traditionally abandon the cart (checkout, shipping policies, etc.).  Proactive chat is an invitation to the customer that pop-up for the customer when they attempt or initiate some action.  For example, if a customer spends a certain period of time on a page, navigates to a particular page, adds certain items to their cart or is a “high value customer” could all prompt a proactive chat invitation.  Proactive chat is usually more than twice as effective as reactive chat.

Including chat in an online store has proven to significantly reduce call volume in call centers and is more efficient than phone banks because most agents can field more than one chat at a time (as many as four, in fact!).  Once involved in a chat, the agent can view the customer’s order history, browse history, referring sites, referring keywords, etc.  The speed and efficiency of the chat can be improved by implementing pre-made messages and links, so that the agent does not have to type answers to many routinely asked questions.  This is essential, because customers expect that there will be no queue when waiting for a chat response.

Good job to all of today’s presenters… Looking forward to tomorrow!

See a summary of “Day Two” here…

Vibe offers a variety of add-ons for ASPDotNetStorefront. However, its pretty common that a template design will get nuked or lose its style after the add-ons or functionality is included. One add-on. On a previous post, I explained how to integrate Vibe’s Product Compare Add-on with their Vibe Trib Add-on, both of which make use of the product listing and detail pages. I’ve run into a common template design problem with the Vibe Trib GS Add-on (includes filters, search, sort, and attributes) and on that can be easily resolved, given you know where to look. If you make use of a left navigation for products, you will unavoidably run into this issue. If you don’t this add-on will simply serve as your one and only left navigation pane for product filtering. (See Vibe’s example page.)

Notice in the previous post how the results filters are in the left navigation underneath other topic pages? The Vibe Trib plugin allows site visitors to filter results by different attributes of your store’s products. Getting these filters into the left navigation for the first time took quite some effort to resolve. The page content is rendered using “entity.vibe.trib.xml.config” and would obviously populate the right side, where the placeholder is positioned in the template. (See image below) Because this XML package is responsible for generating those filters, if the original template uses a left navigation area, the filters will be called too late by the XML package to be properly rendered. You could always use CSS to float the filters to the right, thats an easy solution, but recent projects have required using the left nav.

Steps

1. The first step is to carve out your leftNav from your template and save a copy of it in your ‘skins/skin_id’ directory.
2. Since these Vibe add-ons relate to products, I generally name it ‘products.ascx’.
3. In the admin screen, navigate to your product categories. Under ‘Extension Data’ for every category change the “Use Skin Template” field to match your new template name. (Include .ascx!)
4. With the leftNav on your clipboard, open the relevant XML Package to develop and simply build the leftNav as part of the XML Package in ‘skins/skin_id/XMLPackages’.
5. Remember to use a customized XML Package, you need to open the XML Packages directory in the root directory of your site.
6. Once the XML Package has been changed to include the leftNav
7. VibeTrib Add-on uses ‘entity.vibe.trib.xml.config’ for listing pages, but this will also need done for the search page (if you want filters on your search page–which of course you will).
8. In order to make the change on the search page, we need to develop the search content’s responsible XML Package as well. This can usually be a copy-paste job once its done for a prior package.
9. Once the search page has the modifications, they will not show without adding a custom AppConfig.
10. Again navigate to the admin screen, select the Configuration tab < Advanced < AppConfig Parameters.
11. On the left-hand side, we need to create a new AppConfig that directs the search page to use a different template.
12. The config name needs to start with : “Template” followed by the name of the ASPX page that will be called (no spaces). The Vibe Search included with the add-on is vsearch.aspx
13. The config value simply needs to be the name of the new template to use: products.ascx
14. Click add and the AppConfig should change the search pages template over to support the leftNav with filters all being produced by the calling XML Package.

Quick Disclosure:  As the latest addition to the Beacon team, the last two weeks have been spent adapting to all the things that come with starting out with a new company.   I’m really excited about my role as an Account Executive and I look forward to digging in and being a productive part of the team.  With that said, I must admit that having to contribute to the Beacon blog has caused me some anxiety as I have never wrote a “professional” blog post before, so please show mercy…

A year or so ago, I downloaded the Coupon App on my Droid.  It’s an awesome application.  My favorite by far as it has made me aware of a bunch of great deals.  The best deals have been their free magazine subscriptions.  I have a hard time turning down the offers, so I am now the proud subscriber of everything from Spin to Forbes.  I get so many magazines that I struggle to keep up.  Over the holidays, I vowed to work through my growing backlog of reading and stay on top of it in the New Year.

In reading through the January 17^th issue of Forbes, I came across a really cool article on how the CEO of the Teaching Company, Brandon Hidalgo has used marketing metrics to grow his business to $110 million/year in sales.  The article speaks to specific instances of how seemingly subtle tweaks to his online and offline marketing campaigns based on the behavioral data of his customers has increased sales anywhere from 5% to over 20%.

“In February 2010 the Teaching Company changed the color (from pale green to orange) and location (from side to bottom) of an “Add to Cart” button on its website. Result: Sales improved 5.8%. In one mailing, replacing an image of Michelangelo’s God’s hand with one depicting the ruins of Petra produced a 21.8% lift in sales…”

I liked this article, because it helped me understand the business impact of what our team of Web Marketing Specialists do every day for our clients.  They share Hidalgo’s passion for metrics and use it to optimize the performance of our clients’ web properties.

If you have a moment, check out the article on Forbes.com – I think you’ll enjoy it!

Mashable released the 2010 Holiday Season Online Spending Numbers and the results are excellent!   Interesting statistitic…Free Shipping was used in over 50% of all online transactions.

Enjoy the article below.

Patrick Flanagan, Business Development Manager, 336-944-4187

The 2010 U.S. online holiday shopping season fared remarkably well. Black Friday online retail sales soared and Cyber Monday made history when consumer spending exceeded $1 billion for the first time in a single day. When all was said and done, the November to December holiday season brought in $32.6 billion in retail e-commerce spending.

The enormous figure represents an all-time high for the season and marks a 12% increase in spending over the previous year, according to comScore.

Online shoppers put their credit cards (and PayPal accounts) to work for the entire season, but more so on Cyber Monday, which was the heaviest online spending day of the year with $1.028 billion in total spending. It was the only day to break the $1 billion threshold, but seven other days surpassed $900 million in spending.

Monday, December 13 — also known as Green Monday — was the second biggest online spending day of the year pulling in $954 billion. Monday, December 6 and Friday, December 17 (Free Shipping Day) followed closely behind with $943 billion and $942 billion in online spending respectively.

comScore credits holiday promotions, discounted merchandise and free shipping offers with helping propel the 2010 season to become the biggest yet. In fact, free shipping “was used in more than half of all e-commerce transactions this season, up significantly from last year,” according to comScore chairman Gian Fulgoni.

Article Found at http://mashable.com/2011/01/05/online-holiday-shopping-season/

PINES International, “The Wheatgrass People” just launched a newly developed ASPDNSF site Beacon Technologies was involved with the design, development, SEO set-up and launch.

A couple of unique features of this site:

• Customized promotion add-on that allows the client to set “volume discounts” (buy $40, get 10% off; buy $50, get 20% off; etc.) and notifies the customer on the checkout page with how much more needs to be added to meet those levels (“Buy $10 more to get 20% off!”)

• Extensive use of “topic” pages to provide customers with static content about the company, site and products

• Site search indexes topic pages as well as products

• SEO Friendly

• Client can modify entire header area of site via topic page in Admin

Great work Beacon Team!

I have been in the information technology world since 1981 when I wrote my first programs as a student at Wake Forest, then later as an intern at the NC Dept of Agriculture and throughout my career with RJ Reynolds, AT&T, as a student at Kansas State and now with Beacon.  In 1998 when we started Beacon, there were a few web development companies out there, but now they are EVERYWHERE!  All of them claim to be the best.  I know, I know.  That’s just business.  I have talked with hundreds of business leaders with respect to web initiatives over the years.  To no one’s surprise, the four main factors that drive the decision to select a web development/consulting firm are (1) Price, (2) Experience/Capability, (3) Delivery Time, and (4) Relationship / Support.  I believe we are very good at what we do, but by no means are we perfect as there is always room for improvement.  But having been in this profession for over half my life, I thought it might be worthwhile to share some of my experience-based thoughts on what good web development entails.  Of course, this isn’t all inclusive, but a solid foundation.

Website Development Facts:

1. For business purposes, it is NOT so simple that “a caveman can do it”.
2. Every website is a custom website.  Cost increases with the level of customization and volume of content/products.
3. You get what you pay for.  Cutting corners, having your nephew build the site, trying to build it yourself when you have time usually produces poor results.  Take the time to do it right.  Prioritize all your requirements and desired features.  Establish a realistic budget and share it with your vendor.  Ask them to provide as much as they can with that budget without sacrificing quality.  Push lower priority requirements to a future release.
4. Every website has a “Blueprint” Phase and a “Construction” Phase (most expensive of the two).  A good blueprint keeps the construction costs down and prevents re-work, so take the time to do it right.  Breaking these two phases into separate projects (contracts) works best.
5. Web development, hosting and marketing depend on each other.  It is a BIG advantage to have a single vendor that is strong in all 3 areas with good customer support.  One number to call for any web-related issues.

 Website Types:

1. Marketing (Informational, lead-generation)
2. Storefront (Ecommerce, online revenue generation)
3. Activity-Based (Custom Applications, Blogs)
4. Mix of the above

 Website Development Differentiators:  Good firms will not only discuss your specific needs, but will also share current trends, brainstorm new ideas and proactively cover the following (at a minimum), while constantly providing ideas and consultation.  If your web development company is sitting there waiting for you to tell them what to do, find another firm.

1. Cross Browser Compatibility:  Will your website operate in ALL the most current popular browser versions?
2. Updates to the website:  I’ve NEVER seen a website that didn’t need updates from time to time.  How will updates be handled and priced?
3. Content Management:  There are many, many content management systems on the market.  Of course, they vary in price based on features and functionality.  One size doesn’t fit all.  No reason to put a monster engine in a VW bug, nor a 4-cylinder into a Corvette. 
4. Coding for search engine visibility (SEO):  It’s one thing to create content for a web page, but a whole different thing to make the site search engine friendly, using meta tags effectively, the right keyword density, SEO landing pages, internal linking and much more.  You can’t just build a website and expect the world to find it.  You have to know how to construct it so the search engines “like” it…and I’m not talking about a Facebook “Like”!
5. Professional/Creative Web Design:  The old saying is quite true… You never get a second chance to make a good first impression.  Your website represents your business.  People don’t read content as much anymore.  This is why using the right imagery with easy navigation is important.
6. Calls to Action:  Ask yourself, “What do I want people to do when they come to my website?”  Is there a strong call to action that facilitates this?  And how will it be tracked?
7. Analytics:  I frequently say, “you can’t manage what can’t measure”.  MAKE SURE you have some sort of analytics tool (preferably Google Analytics) to track visitors, conversions and much more.  Your website is another Sales Rep – make sure it is performing well.
8. Site Search:  Is a site search tool included and is it appropriate for your site?  It is vitally important.
9. Hosting & support:  If your vendor also hosts your website, can they also host your email and provide spam filtering?  Are redirects being used appropriately?  What happens if a page isn’t found?  Do they check for broken links regularly?
10. Local web marketing:  Will your vendor help with optimizing your listings in Google Local, Places, Maps…and other standard local venues?
11. Integration:  Does your website need to integrate with 3^rd party or back office software?  Accounting?  Shipping?  Order Management?  CRM?  Will experienced engineers be available to discuss critical requirements.

 Choosing a Website Development Partner:  When you select a website development firm, there is always somewhat of a leap of faith.  Like any profession, there are good firms and bad firms. Minimize this leap by considering the following:

1. How many years have they been in business?  Demonstrates financial stability, success and peace of mind that they have not only been providing these services, but will be around when you need them in the future.
2. Look at their portfolio.  There are so many firms out there that showcase relatively unknown clients.  There’s a reason for this – especially if they have been around for a long time.
3. Read their blog and Facebook page.  It will tell you a lot about their breadth and depth of skills, their people and their personality.
4. Do they outsource or do everything in house?  Nothing against outsourcing, but I’m a big believer in minimizing the number of costly middle-men.
5. Ask about who’s doing the work.  Does one person handle project management, creative design, development, testing, SEO and implementation?  I have yet to meet a person who is an expert in all of these areas.
6. Ask for example deliverables.  Can they provide examples of a project plan and any other deliverables that are created prior to development?  The website is NOT the only deliverable.  Houses aren’t built without a blueprint, neither should your website.
7. Ask about communication.  Will your primary point of contact be a Project Manager or a Developer?  Can you meet this person?
8. Ask about the creative design process.  How many design-and-review iterations do they provide with respect to the website design – so that you can see the creative design(s) and request modifications?
9. Ask about the CMS and eCommerce software options.  Are they locked into only one of each or do they have more breadth of experience and alternative options to meet your price and functional requirements?
10. Ask how they test the website before it is launched.  Do they have a formal “User Acceptance Testing” process – so you can check everything out before it gets launched?
11. Is the firm a good fit for your business culture?  Does the relationship “feel” good & honest like the firm cares about the success of your website?  Or do you feel like you are just part of an assembly line.
12. Ask about post-launch support.  Who to call?  Pricing?  Expected response time?  After hours?  Ticketing system to insure your request is logged and monitored to completion?
13. Do they really provide their own hosting services or do they use a 3^rd party?  Ask this 3-part question:  Where is the web server located that houses my website?  How often is server maintenance performed and who performs it?  I’ve seen a lot of finger pointing between hosting firms and development firms over the years.

 Website Development Budget:  For us, every project is quoted separately  There’s always exceptions, but here’s a “Rule of Thumb” table that I have put together based on several hundred projects we’ve performed over the years.  I hope this helps to some degree with your approach to web development firms.

*Small:  option to pay monthly
**X-Large: businesses w/ large product catalogs, universities, etc (thousands of pages) that require careful planning and coordination with internal decision-making groups. Many times these projects require integration with existing legacy systems and/or 3^rd party software.
***Duration is dependent on the availability of resources, number of resources working concurrently and the client’s availability & delivery of content.

Beacon Technologies just successfully launched another ASPDNSF site for Mattress King. This was a big team effort, with assistance from virtually everyone on the TSG and SW Development groups. For several people, this was their first experience with an ASPDNSF site and they picked it up in record time and with much success.

Here are some interesting features used on this site:

· Rotating home page images that the client can maintain in Admin site.

· Filtered product listings page (“Narrow Your Results” in left nav).

· “Tabbed” product detail page.

· Nicely formatted “Store Locations” page.

· Customer Video page.

In a recent project, I combined a couple different Add-ons for ASPDotNetStorefront provided by VibeCommerce. These included the Product Compare Add-on with the Attributes Add-on. Together, these create an aesthetically appealing product listing page.

In short, the Product Compare add-on allows you to select products off the listing page and generate a page built for comparing product information.  The Attributes add-on allows products to be filtered, sorted, searched, and provides a clean interface to browse the products.  Although these instructions are aligned to version 8, it is just as possible to accomplish with version 9, given you’ve got the right products versions from Vibe.  The end result, after styling looks something like this:

In order to integrate the two, we have to tear apart the XML Packages provided for each add-on.  Once downloaded and installed according to the documentation, its first required that you set your product categories (in Admin) to use the correct ‘Display Format XmlPackage’ which is : ‘entity.vibe.trib.xml.config’.  Once this is completed navigate and open:

/site_root/XML Packages/entity.vibe.trib.xml.config

-OR-

/site_root/skins/SKIN_ID#/XmlPackages/entity.vibe.trib.xml.config

*If using XML Package within skin subdirectories, be sure to have a copy of the default/stock XML Package in the root XML Package directory.

Rather than having you switch between the Product Compare Package and the Attributes Package, the code to add into the Attributes package will be provided.  Within the ‘entity.vibe.xml.config’ file, you need to find the following lines of code (~196)  in red and add the code in green:

<script src=”jscripts/vibe/jquery.history.js” type=”text/javascript”>var a=1;</script>
<script src=”jscripts/vibe/vibe.trib.core.js” type=”text/javascript”>var a=1;</script>
<script src=”jscripts/vibe/vibe.pc.js” type=”text/javascript”></script>

You can find the code in green within the ‘vibe.productcompare.xml.config’ file or copy it here directly

Once you have the JavaScript referenced, we need to add the Product Compare Checkboxes in the listing page using the following:

<p>
Add to Compare: <input value=”{ProductID}” id=”chkProduct_{ProductID}” name=”chkProduct” type=”checkbox” />
</p>

The placement of this code ought to be relative to the products in your XML Package.  In the above example, it follows the price and description.  Find the line (~619) with:

<a class=”productResultImgLink” href=”{aspdnsf:ProductandEntityLink(ProductID, SEName, $EntityID, $EntityName, 0)}”>
<xsl:value-of select=”aspdnsf:LookupProductImage(ProductID, ImageFileNameOverride, SKU, ‘icon’, 0, $AltText)” disable-output-escaping=”yes” />
</a>

*ABOVE GREEN CODE GOES HERE*

</div>
</xsl:template>

Lastly, we need to throw the Compare button somewhere on the page to generate the product compare page.  Location isn’t a very strict requirement when adding it to the page, however some places are more effective and appealing than others.  I found that putting the button on the top and bottom paging menus looked suitable.  The code for the button, regardless of where you put it is:

<div align=’right’ class=’addToCompare’>
<input type=’button’ onclick=’onPCSubmit()’ value=’Compare’ />
</div>

Now both add-ons are integrated into the Attribute Add-on.  Happy styling!

It has been a while since I’ve updated our ever-growing AspDotNetStorefront portfolio and we’ve recently launched several new (very cool!) sites.  Here’s just a sampling of some of our recent work with this shopping cart platform:

In addition, here are some AspDotNetStorefront resources that we use regularly that might be helpful to you:

• AspDotNetStorefront Developer’s forum
• AspDotNetStorefront Online manual
• AspDotNetStorefront Support email
• AspDotNetStorefront Features list
• AspDotNetStorefront KnowledgeBase
• AspDotNetStorefront Blog