Design Techniques for ASPDotNet Storefront

Est. Reading Time: 5 minutes

Due to the infrequent use of class or ID attributes on important elements, styling can require a bit of digging through the storefront XML Packages.This combined with the use of advanced CSS selectors alleviates many of the issues that may occur during the design and styling of an ASPDotNetStoreFront site.Here are a few XML Packages to consider preparing ahead of time that are commonly used in an ASPDotNetStoreFront site:

  • Entity.grid.xml.config – grid of products/categories package
  • Entity.gridwithprices.xml.config – same as above, but includes pricing
  • Entity.categorties.xml.config – Package for displaying categories
  • Product.simpleproduct.xml.config – Package for product page
  • Product.tabbedUI.xml.config – Tabbed variant of product page package

Before you can begin modifying any of these, (pre-version 9!) you need to specify that you will be using a custom XML Package by making a change to the file found in the root “XMLPackages” directory. This can be as simple as adding a space at the end of the document.Once this is done, copy the XML Package to “/skins/Skin_ID/XMLPackages”.

The nice thing about these custom packages is it allows you to go through many of the page elements and add classes, IDs, or in-line styling where CSS is needed.Not all tags can be modified inside the XML Packages, specifically tags that are generated by “<xsl:value-of name=’ASPDNSF: {…..}’ />” and other ASPDotNetStoreFront elements.Adding div tags around elements with an ID can provide a way to select elements only within that div, even if you can’t get to the code.

<divid=view-larger-image> <xsl:value-ofselect=aspdnsf:LookupProductImage(ProductID, ImageFilenameOverride, SKU, ‘medium’, 1, $AltText)disable-output-escaping=yes/> </div>

Even if there is a wrapping div, by adding id=”view-larger-image”, we can make styling changes to images, links, etc.This requires viewing the page in a browser to know what elements to target.The above lines of code are not intuitive to the resulting tags.

Using advanced CSS selectors may omit XML Package changes, provided the CSS doesn’t result in unwanted site-wide style changes.Take the image below as an example, which is found directly below the product image.It is wrapped in the same div (view-larger-image) as shown above in the example.

In order to put a border around our product image, but not include this View Larger image, the code generated by the ASPDNSF gives us limited options.The CSS could be written to make all images found in the view-larger-image div receive a border and the explicitly set the magnifying glass and text to no border with:

img{ border:solid1pxblack; } img[src='skins/skin_1/images/showlarger.gif']{ border:0 }

Using attribute selectors in your CSS works perfectly with image ‘src’ attributes. (Unless file names or hierarchy is changed!)Be aware though, that a line of CSS as simple as “div[align=’center’]{ border:0 }” may create adverse effects on other pages across the site.The ‘src’ attribute is good for images that are not generated dynamically.A product image would not be suitable, because there would need to be a line of CSS for every possible product in the site.The ID and Name attributes are dynamic for the product image, so any selector utilizing these attributes would be of no use.

If you observe the structure the ASPDNSF tag generates in a browser, (using Firebug or View Source) you can look at structural ways to get your CSS selector matched up with the elements you need.This is what is generated by the above aspdnf element:

<divid=view-larger-image> <divalign=center> <scripttype=text/javascript> function popupimg(url) {‘popup.aspx?src=’ + url,’LargerImage3196528′,’toolbar=no,location=no, directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no, width=500,height=500,left=0,top=0′); return (true); } </script> <divstyle=display: none;id=divProductPicZ31> </div> <divid=divProductPic31> <imgborder=0alt=XXXXXXXXXXXsrc=images/Product/medium/XXXXXXX.jpgtitle=Click here to view larger imageonclick=popupimg(‘images/Product/large/31.jpg’)style=cursor: pointer;name=ProductPic31id=ProductPic31><!-—This is the image > </div> <br> <imgheight=4border=0width=1src=images/spacer.gif> <br> <divalign=center> <aonclick=popupimg(‘images/Product/large/XXXXXX.jpg’);href=javascript:void(0);> <imgborder=0align=absmiddlealt=XXXXXXXXXtitle=Click here to view larger imagesrc=skins/skin_1/images/showlarger.gif><!-—This is the image shown above > </a> </div> </div> </div>

This provides other means of using CSS selectors to style your elements.With this method, no default ‘img’ style is made for other ‘img’ tags and instead only targets the product image.

#view-larger-image div+divimg{border:solid1px#000000;}