Blog » Embedding Videos In ASPDNSF Product Pages

Embedding Videos In ASPDNSF Product Pages

One of our clients was facing a desire to move torwards placing videos or other flash objects into the product display pages of ASPDNSF. The introduction of a Tabbed UI provided a great framework for this but the same concept could apply to any of the product display XMLConfig package.

One of the first criteria was that it needed to be seamless to site visitors; when a video was available, it had to show but they didn?t want any thing ?trumpetting? the lack of video for a particular product. It also needed an easy to administer interface on the product edit pages. They didn?t want to jump through hoops to embed the javascript/flash code into a product description field since the WYSIWYG editor is not always kind to this type of content. More importantly, I didn?t want to have to create a new administrative interface to edit this new data.

Luckily, the product data store has a number of suitable fields that are currently available for custom use. One of these is the MiscText field. Thankfully, the stored procedure used by this XMLPackage uses the aspdnsf_ProductInfo stored procedure already retrieves this value so we won?t have to make a change to the stored procedure. Making a small change like adding another field to the stored procedure?s SELECT statement is very easy to do but we always try and keep an eye towards ease of upgrades. When a newer version of ASPDNSF comes out, the fewer changes we have to make to stored procedures the better.

So, if you look at the XMLConfig package for the Tabbed UI, you?ll see that each of the tabs is defined by a list item in an unordered list (for the tab iteslf) and a div for the page that is presented when the tab is clicked. Below you?ll find the additional LI that we added to get the tab to show up. You?ll notice that the LI is wrapped up in a conditional xsl:if statement that checks to make sure we have any content in the MiscText field. If it is empty, the tab isn?t shown.

                            <xsl:if test="aspdnsf:GetMLValue(MiscText) != ''">
                              <li>
                                <a href="#" rel="video">
                                  Video
                                </a>
                              </li>
                            </xsl:if>

Of course we could created the word video as a string resource and called it using aspdnsf:StringResource(‘product.tabUI.videotab’) but the client assured me that they had no intention of changing their mind on the text (we?ll see).

Next we?ll need to define the tab to contain the video. Again, we?ll be creating this div conditionally:
                            <xsl:if test="aspdnsf:GetMLValue(MiscText) != ''">
                              <div id ="video" class="tabcontent">
                                <xsl:value-of select="aspdnsf:GetMLValue(MiscText)" disable-output-escaping="yes" />
                              </div>
                            </xsl:if>

And that is all you need to do really. With minimal effort and only 12 lines of code, you?ve added added a new container for ?difficult to present and edit? data in your product pages.

If you?ve got any thoughts about this or questions, please use the Comments below to carry on this conversation.

 
Michael Gibbs
Stalk Me...
Latest posts by Michael Gibbs (see all)