Pallet Sofa Configurator

Published on: 15 Dec 2017

Project: Product Configurator
Tech: HTML, CSS
GitHub: Playground; Code

Just to satisfy my own curiosity I made this Proof of Concept of a configurator for a pallet sofa that allows users to choose different options for the base, mattress, and pillows.

The only JavaScript used here is for the print button, while the core functionality is implemented using HTML and CSS.

Play with it on this page: Pallet Configurator or on GitHub Pages: POC-1

HTML Structure

Let’s start by breaking down the HTML structure of our pallet sofa configurator:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta information and title -->
</head>
<body class="nir-mqs">
  <div class="wrapper">
    <form>
      <div class="images">
        <!-- Image for the sofa base -->
      </div>
      <div class="parts">
        <!-- Pallet selection -->
        <h2>Pallet Paint</h2>
        <ul class="pallet-list">
          <!-- List of pallet options with radio buttons and labels -->
        </ul>

        <!-- Mattress selection -->
        <h2>Mattresses</h2>
        <ul class="mattress-list">
          <!-- List of mattress options with radio buttons and labels -->
        </ul>

        <!-- Pillow selection -->
        <h2>Pillows</h2>
        <ul class "pillows-list">
          <!-- List of pillow options with radio buttons and labels -->
        </ul>

        <!-- Print button -->
        <nav>
          <input type="button" class="btn" value="Print" onClick="window.print()">
        </nav>
      </div>
    </form>
  </div>
</body>
</html>

Styling with CSS

The primary functionality of this configurator is accomplished through CSS. Let’s explore the key CSS styles used in this project:

Essential Styles

These are the styles that take care of the functionality.

.pallet,
.mattress,
.pillows {
    display: none;
}

input[type="radio"] {
    display: none;
}

input[type="radio"] + label {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0;
}

input[type="radio"] + label + img {
    display: none;
    z-index: 1;
}

input[type="radio"]:checked + label + img {
    display: block;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

Functionality with JavaScript

The only JavaScript used in this project is for the print button. When the “Print” button is clicked, it triggers the browser’s print functionality. This allows you to create a physical copy of your sofa configuration.

Conclusion

In this blog post, we’ve seen how to create a simple pallet sofa configurator using HTML and CSS. The configurator allows you to select different options for the base, mattress, and pillows, and then print your configured sofa. While the core functionality is implemented with HTML and CSS, JavaScript is used to enable the print feature.

Prev Next