Using a Spin Box to Change the Product Quantity

OVERVIEW

If you're not familiar with what a spin box is, it's the common way that some desktop programs allow end-users to increase and decrease values in a textbox.  You have seen this in various programs you've used and even in Windows.  With a single click, an end-user can change the value, saving at least a keystroke.  This is a much more usable and even stylized way to present a quantity field.

REQUIREMENTS

The following pre-requisites will be necessary to accomplish the goals of this article:

  • Have one or more products added
  • Have store administration access in your Hotcakes Commerce store
  • Have file system access to your store
  • Familiarity with how to modify and create views
  • HTML, CSS, and jQuery knowledge
  • Familiarity with scripting methodologies or an understanding of Razor Syntax
  • Visual Studio 2012 or newer (only required for intellisense)

It is highly suggested that you first review the custom viewsets documentation prior to following the steps in this article.  Doing so will help you understand the steps required here better.

GETTING STARTED

You should already have an understanding of how to work with and modify or create views in Hotcakes Commerce.  Ideally, you should also have a viewset project ready for you to make the minor modifications suggested here.

Cool user experience enhancements like this could be custom built, but we're going to use an existing one to reduce the amount of work we need to do.  There is a free spin box plugin called SpinBox.  Feel free to download it and use it along side us in our example.

Product Details View

The view that you should be modifying is the one that's injected into the main Product view.  This view contains all of the details of the product that are shown before adding it to the cart, including price, options, and quantity.  This will be the view were we include the spin box script and the little bit of required code.  Which we'll begin with now...

Including The Script

Every viewset can have its own custom or third party scripts included.  If you haven't already downloaded the SpinBox script, do so and save it in the folder shown below.

~\Portals\_default\HotcakesViews\VIEWSETNAME\Scripts\

If you include your scripts here, we make it incredibly easy to include those scripts in your view.  See the saved plugin script below.

SpinBox script in the Scripts folder

Updating the Product Details View

There are views for each customer-facing piece of functionality, including the Products view.  The products view is similar to others in that there is a main view and then a few smaller “partial” views that are injected into the main view named Index. In this example, we will be updating the _ProductDetails.cshtml file for the Products view.

PLEASE NOTE: Do not make changes to the views in the _default viewset. Your changes will be lost on upgrade.

Open the Index.cshtml partial view in your custom viewset project, found in the following location in your viewset project.  

~\Portals\_default\HotcakesViews\VIEWSETNAME\Views\Products\_ProductDetails.cshtml

Register Script

Now we need to tell the view to include the SpinBox script we've downloaded when the page loads.  We can add scripts and styles to our views quite easily.  The code below simply requires that you pass in the file name, provided that you saved a copy of the script file in the location described above.  

This is the most efficient way that we would suggest adding any script, as it takes advantage of performance settings available in the underlying CMS.

@Html.RegisterViewScript("SpinBox.js")

Update Quantity HTML

The quantity HTML will need a minor adjustment to allow us to use the SpinBox functionality.  We will simply need to wrap the INPUT tag with a SPAN tag like shown below.  The ID you decide to use is up to you.  When you're done, your code should look similar to the example below.  Note the sbQuantity ID.  We'll use that later.

<span id="sbQuantity">
    <input type="text" id="qty" name="qty" value="@Model.InitialQuantity" class="hc-input-mini"/>
</span>

Call the Script

Now that all of the pieces are in place, all we have to do is call the SpinBox script to make the new feature work.  This update is going to be very simple.  We are going to call the SpinBox plugin once the page safely loads.

The code example below shows a script added at the bottom of the view.

<script type="text/javascript">
    $(document).ready(function() {
        var spinBox1 = new SpinBox('sbQuantity');
    });
</script>

Add Some Style

The last part of this process is to add your own style and/or images to your SpinBox implementation.  The plugin website has a default set of styles that you can work off of for your own site.  When you're done adding your own styles, just view the products...

That's all there is to it!  The SpinBox plugin makes this process very painless.  

SpinBox used on Quantity textbox

 

Have more questions? Submit a request

Need More Help?

Do you need more assistance with this article? Please review your support options.