How to Create a Floor Plans Page and Database in Wix, using Velo

Who is our customer and what problem did they want to solve?

The content for The Standard was a great use case for Wix's Dynamic Pages feature. The client provided a spreadsheet of different Residences along with the data that would need to be displayed on each of Residence's pages.

What solution did we provide?

To implement this, we made a Content Manager database called "Residences" with data such as the price of the residence, the square footage, the number of bedrooms & bathrooms, as well as the unit number, building number, floor number, an image of their floor plan and a downloadable PDF of the floor plan.

We also created another Content Manager database called "ResidenceFeatures" which would contain features that the residences shared that the "Residences" database would reference. Each residence feature had a title such as "11 ft. ceilings" or "8 ft solid core doors" and had multiple residences that referenced it.

How did we implement the solution?

With these databases in place, the next step was to create dynamic pages for the Residences collection.

When you do this, Wix creates a page in the editor to list all items from that collection as well as a page for each specific item of the collection.

For the "All" items dynamic page, the customer provided drawn images of the property with each residence shown and numbered. Since the residences are divided by floor, we used a Wix Multistate box to show the image for each floor's residences and buttons to change the state of the Multistate box to match the floor selected.

Next, we placed buttons with transparent background and transparent text over each drawn image (residences). From there, you are able to navigate to the individual residence's page.

For each individual residence's page, we used the Wix Data module to query the "ResidenceFeatures" collection referenced above, retrieve the features for each residence, then show them in a repeater.

We used the Multistate box again in order to display an image of the Residence's floor plan without furniture and a thumbnail of the floor plan with furniture that when clicked changes the state of the Multistate Box to a state with a large picture of the residence floor plan with furniture and a thumbnail that changes the Multistate box back to the original state.

Check out the code we used below:

import wixData from "wix-data";
import wixWindow from "wix-window";

$w.onReady(function () {
  const formFactor = wixWindow.formFactor;
  const data = $w("#dynamicDataset").getCurrentItem();
  if (typeof data.floorplan === "undefined") {
    $w("#beforeAfterStateBox").hide();
  }
  const repeater = $w("#repeater1");
  repeater.onItemReady(($item, itemData, index) => {
    $item("#featureText").text = itemData.title;
    if (index === repeater.data.length - 1) {
      repeater.show("fade");
    }
  });

  wixData
    .queryReferenced("Residences", data._id, "ResidenceFeatures")
    .then((result) => {
      repeater.data = result.items;
    });

  if (formFactor === "Desktop") {
    $w("#seeWithFurnitureImage").onClick(() => {
      $w("#beforeAfterStateBox").changeState("withFurniture");
    });

    $w("#seeWithFurnitureText").onClick(() => {
      $w("#beforeAfterStateBox").changeState("withFurniture");
    });

    $w("#seeWithoutFurnitureText").onClick(() => {
      $w("#beforeAfterStateBox").changeState("withoutFurniture");
    });

    $w("#seeWithoutFurnitureImage").onClick(() => {
      $w("#beforeAfterStateBox").changeState("withoutFurniture");
    });
  }
});

Have questions about this? Contact us at 225-250-1888 or email robert@roberthebertmedia.com.

About our company

RHM specializes in helping businesses of all sizes and across all industries achieve their digital and web marketing needs. Whether it's designing a new website, building an app, performing custom development, or running Google Ads, our goal is to showcase how you are the best at what you do and help people connect with you. Contact us at 225-250-1888 to get started!