BV Commerce is one of our favorite eCommerce apps, it’s flexible, scalable, and adaptable. I won’t get into all of the details of why we love it, but we’ve decided to open the box on some of the customizations that we develop to extend the application to meet functionality requests to give you some insight into what actually goes on behind the scenes with some of these features we develop. These may range from small little utilities, to feature enhancements, product tweaks, or in depth customizations. So consider this the first of many articles to come from us on the topic.
For our first installment, we’re going to show how you can add, what we call “product flags” to your catalog and product pages that add value to the user experience by telling them about a certain detail about specific product very quickly. These product flags should provide the user some useful information about the product that will help them in their purchasing decision. Typical flags you’ll see across the ‘net would be “On Sale”, or “New”. But what about other flags, that actually might provoke an action, such as “Limitied Quantity” (ie. act quick or this might run out)?
We recently worked with online retailer BeerTees.com on creating such a feature that would identify products in their catalog as such. And here’s a screenshot of a result from their Miller High Life T-Shirts page. They have flags – in the form of this banner – setup for new products, on sale merchandise, and items low on inventory. This messaging also stays consistent through to the product details page as a constant reminder of the product status.
For those of you familiar with BV Commerce, you might ask yourself well how did you do that? There is an out of box “New” indicator, however the “on sale” and “limited qty” indicators are not. So let’s walk through some of the code we used to get there.
The set of files we’ll be dealing with are with regard to the product template and category template. Let’s start with the category template. What we want to do first is edit the Category.aspx file for the category template you’d like to use. Then identify the DataList that is used to populate the products. In that DataList’s ItemTemplate, we need to insert an object that will be the placeholder for our image.
Next, you’re going to want to define the CSS style for this object so that it “floats” over the image, in the BeerTees.com example the images used for the ribbons are 68×68 and the image of the product that it floats over is 150px wide, as such, the styling is as follows:
So now we have our ribbon area defined, positioned, and ready to roll, we need to control it through some server side code. So in the category.aspx.vb file, we’re going to define when we want this panel to appear, and what exactly we want it to show. To accomplish these two tasks, we place the following code in the ItemDataBound of the DataGrid for the products:
Dim pnlRibbon As Panel = DirectCast(e.Item.FindControl(”pnlRibbon”), Panel)
Dim lowInventory As New Boolean
If p.SitePrice <> p.SitePriceForDisplay Then
pnlRibbon.Visible = True
pnlRibbon.CssClass = “ribbon ribbonsale”
ElseIf p.IsNew Then
pnlRibbon.Visible = True
pnlRibbon.CssClass = “ribbon ribbonnew”
ElseIf LowInventoryCheck(p) Then
pnlRibbon.Visible = True
pnlRibbon.CssClass = “ribbon ribbonlimited”
End If
Breaking down this code, we first check to see if the product is on sale, if we do, we assign it some CSS classes, the ribbon class we defined earlier to control the positioning of that area, while the ribbonsale class controls that background image (the sale ribbon) of the area. Next, we check to see if the product is new by calling the isNew property of the BV Commerce product class, and if so, we show the new banner (you can control what is considered new in the admin area under Options -> Category settings).
The last check looks at inventory to determine if it should show the limited qty banner. For this, we could have easily just ran a check to see if available inventory for that product was under a certain value, however, the available inventory attribute does not take into account product choices and their inventory. For people with that kind of product setup (like Beer Tees), inventory isn’t stored at the “container product” level but at the individual product choice level. So we created a method called LowInventoryCheck that you pass a BV Commerce product to and it returns a boolean to tell if there actually is a limited inventory. Here’s the code to that function:
Dim inventoryCount As Decimal = 0
Dim result As Boolean = False
Dim lowInventoryLevel As Integer = Integer.Parse(BVSoftware.Bvc5.Core.Content.SiteTerms.GetTerm(”LowInventoryLevel”))
‘First, check to see if there are any children products (sizes)
Dim searchCriteria As New Catalog.ProductSearchCriteria
searchCriteria.ParentId = p.Bvin.ToString()
Dim children As Collection(Of Catalog.Product) = Catalog.Product.FindByCriteria(searchCriteria)
‘If there are children, loop through each one gathering the inventory count
If children.Count > 0 Then
For Each child As Catalog.Product In children
inventoryCount += Catalog.ProductInventory.FindByProductId(child.Bvin).QuantityAvailableForSale
Next
‘If no children, use the inventory of the product
Else
inventoryCount = Catalog.ProductInventory.FindByProductId(p.Bvin).QuantityAvailableForSale
End If
‘If the inventory is below the threshold, return true
If inventoryCount < lowInventoryLevel Then
result = True
End If
Return result
End Function
Without going through every line of code, what we’re actually doing is checking to see if this product has any “children” product – aka product choices. If it does, find each of them, loop through, and count the totel inventory of all of them. If it does not have any children, then we just use the count of that specific product. We then perform a check to determine if it is below our low inventory threshold (we use a sitekey to store that number so that it can be chaged easier) and if so, return a true value so that the page knows that this product is in fact.
So there you have it in a nutshell, this same concept can be applied to the product templates as well. There are a number of ways this functionality could be improved, and ideally the LowInventoryCheck should be a function within the product class itself but one of the requirements on this customization was to not touch the source code. You could also extend this further and show multiple indicators at the same time, in our scenario, if something is low stock and on sale, the on sale takes precedence.
But a quick example of how you can extend your catalog display to entice some action from the user before they even get to the product details page.
Matt Prindle (13)
Carla (10)
Justin @ Palmer W... (6)
Hasan Luongo (5)
Kyle (5)