Blog

Online store options and the Cartesian product

by Bobby Whitman

close  

A common situation: you are about to checkout at an online store, but before you can buy that new T-shirt you must first choose which color you want and select what size you wear.

You’ve likely never stopped to think about the data behind this simple interaction, but what really needs to happen is that based on these choices the application is actually selecting the specific inventory item you wish to purchase.

Let’s consider this same problem from the other side of the counter. Now, you are creating an online store and you have several lists of options that you must combine to form your inventory. How do you create every possible combination without missing any and without repeating? And, more importantly, how do you accomplish this programmatically so that store owner does not have to create each combo by hand (a task that quickly becomes overwhelming)?

In my elementary example you have a list of sizes {S, M, L, XL} and a list of colors {orange, red, blue, green}. Here it is quite simple: look at each color and make sure you have one item of each size for that color.


for( $i = 0; $i < count($colors); $i++ )
    for( $j = 0; $j < count($sizes); $j++)
        array_push( $combos, array( $colors[$i], $sizes[$j] ) );

But what if we have an unknown number of variables (maybe there is a third, or maybe there is a total of eight)? Our simple nested loop will no longer works when we don’t know how deep to go.

<mathspeak>

It helps to define this problem correctly, which is where the math comes in. Here, we have a finite number of finite sets and we wish to find all of the distinct ordered n-tuples who elements are the members of these sets. In other words, we want to find the Cartesian Product of the sets of our product options.

Symbolically…

if X1, X2, …, Xn are our sets of product options,

then, we want to calculate X1 × X2 × … × Xn = { (x1, x2, …, xn) | xi ∈ Xi }

This may look somewhat familiar from back in your days of graphing equations. The most common example of a Cartesian Product is what is called a Cartesian plane, or the x- and y- axes made up order pairs of numbers. Consider my original example, imagine labeling the x-axis with sizes and the y-axis with colors, the points then are your combinations. Same idea, just in more general terms.

</mathspeak>

Once we have the problem defined, we can tackle it programatically. My first reaction was to think recursion, but this problem can actually be solved quite elegantly in O(n2) time.

Click here to see my solution.

    Post Comment

    Twitter

    Fact vs. Fiction: What Usability is Not, http://t.co/aDAdJLa4

    Posted on Tue, Feb 7
    by phil_franks

    Twitter

    an oldie, but a goodie // Death to design by committee // via @Boagworld http://t.co/6Mo1Vxyl

    Posted on Mon, Feb 6
    by pomajp

    Twitter

    The Myth Of The Sophisticated User http://t.co/Mlr7M20r (via Instapaper)

    Posted on Mon, Feb 6
    by pomajp

    Blog

    Web/Graphic Designer Position Available

    by Gary Moneysmith

    close  

    Dynamit was honored as one of the “Best Places to Work” in 2010 & 2011 by Columbus Business First newspaper and Interactive Agency of the Year. Times are even better in 2012 and we’re hiring a Web/Graphic Designer for our aggressively growing team.

    This is an exciting opportunity to work on cutting edge projects for well-known brands in a dynamic, entrepreneurial and highly creative environment. Please email resumes/cover letters and portfolio information (documents or links to online examples) to Gary Moneysmith via gmoney@dynamit.us.

    A web/graphic designer on the Dynamit team will:

    • Be well versed with Adobe Creative Suite: Strong knowledge of Photoshop, experience with Illustrator and InDesign.
    • Have a strong understanding of Usability & Web Trends: Experience with user interface design, knowledge of best practices & examples of this in a portfolio or live site/application design. They will also be up-to-date on web trends and design tactics with examples.
    • Have experience in user experience design (UXD) designing application and system interfaces. This experience is crucial for this position.
    • Have Basic Programming Knowledge: We’re not looking for a developer here, but the designer should have the ability to design for web with a knowledge of the boundaries and how to design for execution by a programmer.
    • Have a Strong Portfolio: We’d like to see much more web work than print.
    • Be eager to learn, with a passion for design & the web. The designer should have a strong internal drive for industry knowledge and be committed to furthering the craft.

    Experience is important, but personality is key. Our culture is what drives us, and we’re looking to build our team with someone who both fits and contributes to it.

    The position is full time at our office in the Arena District in Columbus, Ohio. We offer a competitive salary and benefits package as well as a fun, high-energy, intellectually-stimulating work environment.

    Benefits Include

    • Competitive salary (compensation will be based on skills and experience)
    • Fully paid medical/dental insurance for employees
    • Paid parking
    • Unlimited vacation time (within reason)
    • Office bar + climbing wall — not recommended together

    Don’t sit back. If you want to work in a fast paced work environment with great people who love what they do, apply today.

    About Dynamit
    Dynamit is a digital agency based in the Arena District in Columbus, Ohio. We work with clients and brands on digital initiatives that include strategy, design, user experience and development. We influence communication and commerce. Client work includes Hilton Worldwide, Charley's Grilled Subs, McGraw-Hill, British Broadcasting Corporation (BBC), E-Z-GO, American Electric Power (AEP), Columbus College of Art & Design and the Ohio State Medical Center (OSUMC) to name but a few.

      Post Comment

      Twitter

      The Biggest Opportunity For Disruption Today: Health Care Products That Work, http://t.co/ndynGRKD

      Posted on Mon, Feb 6
      by phil_franks