How can I setup "Price" of field type in CMS

Ask the community
, , , ,
1

Question:

I cannot find the “price” field type in CMS, when I try to create a collection.
Product:
Wix Studio

What are you trying to achieve:
I need to build a CMS for a real estate, and I am going to use CMS. When I create the collection, I find out that I could not find the “price” field type. Please help me whether I can just choose one of the fields or I need to use Javascript. If I need to use Javascript, please someone teach me how to find the code. I really appreciate that.

What have you already tried:
I try to use test field to insert price, such as “$100,00”. but I think this is not right way to achieve that. There must be some specific field type I can use for “price”.

Additional information:
I also need a field type for “price per sqft”.

2

Hey! There is an open feature request for this that is collecting votes to understand the need. Please weigh in here and you will be notified when this status changes

4

Hello Jin,

You can either set the field inside your CMS collection to be either a number or text type. If it’s text, you can format the price as a basic string. Ex: “$100.00”. If you set it as number, no characters outside of 0-9 will be supported.

I guess I am trying to better understand what exact format you are looking for. Did you want the dollar sign and then floating (smaller) numbers for a decimal? If so, you can break them up and change font sizes in the editor.

Depending on your need, price should be a number so you can do some data pulls and aggregates based on your need. If you need to code it and stylize it as a string, it’s very simple. Here an example of turning the number into a formatted price.

// this in a backend file for logging purposes => you do not need to do this in the backend
export const formatPrice = () => {
    const price = 99.99
    let formattedPrice = `$${price}`

    return formattedPrice
}

Here’s a more actionable idea of what to do. Let’s say your text elementId name for the price is simply named “price” then follow this example.

  1. Step 1: Connect your text element to the content manager
  2. Step 2: Name your text element Id to “price” in the page’s code panel
  3. Step 3: If you’re not connecting it via code, then obviously you will get the value from the dataset you have on the page. If it’s a dynamic page it is even easier. If it is a normal dataset you may need to code in a filter to find the item data. Depending on your case you will have the following code.
import wixData from 'wix-data';

$w.onReady(function () {

    $w('#dataset1').onReady(() => {
        buildPrice()
    })

});

//  get dataset values
const buildPrice = /*async*/ () => {
    let itemData = $w('#dataset1').getCurrentItem() // if dynamic page
    /*

    // if it's a static page and you need to filter the dataset to find your item you would use this code. You would also uncomment the async in the line above
	// docs => https://www.wix.com/velo/reference/wix-dataset/dataset/setfilter

    await $w("#dataset1").setFilter(wixData.filter()
        .startsWith("lastName", "D") // example
        .ge("age", "21") // example 
    );

	let itemData = $w('#dataset1').getCurrentItem() // if dynamic page

    */
    console.log(itemData, 'item data')
}

3a. You’ll notice that the console.log() will allow you to view the data in your browser. Open the console to find the data and make sure the object key is the one you need.

  1. Once you have the item data, this is the code you should mirror.
import wixData from 'wix-data';

$w.onReady(function () {

    $w('#dataset1').onReady(() => {
        buildPrice()
    })

});

//  get dataset values
const buildPrice = async () => {
    let itemData = $w('#dataset1').getCurrentItem() // if dynamic page
	$w('#price').text = `$${itemData.price}`
}