Connecting a single collection item page to WIX data

Ask the community
, ,
1

Hi all. I’m new to Wix Velo here.

I am currently building a yacht travel website that requires a booking page. It is set up as a dynamic page from my “Trips” collection.

This page requires me to show the price of each cabin type, which I have included in my collection data as a “number”.

Now, since I need to format the prices in USD, I would like to connect one of my text elements, let’s say “#cabin1Price” to the “cabin1Price” field in my collection, and then format it as needed

I know how to do it on a dynamic page that shows all of the trips in my collection within a repeater, but how do I do it for a single item, in a container that is not a repeater?

Below is the code that I currently have for the other page (Schedule & Rates) that shows all of the trips, and I would like to implement pretty much the same thing (including formatting the dates), but only for one trip for the booking page.

import wixData from 'wix-data';

$w.onReady( async function () {
    
    $w('#scheduleRatesRepeater').onItemReady(($item,itemData,index)=>{
        $item('#itineraryName').text = itemData.itineraryName;
        
        //Format starting price in USD, omitting the 2 decimal points.
        let formattedPrice = itemData.cabinType1Price.toLocaleString('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, minimumFractionDigits: 0,  });
        $item('#startingPrice').text = String(formattedPrice);

        //Format "Departure" & "Arrival" in DD MMM YYYY, e.g. 2 Apr 2023.
        const departureDate = itemData.departure;
        let options = {
            day: 'numeric',
            month: 'short',
            year: 'numeric',
            };
        let formattedDeparture = new Intl.DateTimeFormat('en-uk', options).format(departureDate);
        $item('#departureDate').text = String(formattedDeparture);

        //Combining "Disembarkation & "Embarkation" in one line.
        $item('#embarkDisembark').text = String(itemData.portOfEmbarkation + " to " + itemData.portOfDisembarkation);

    })

    const {items:trips} = await wixData.query('ScheduleRates').find();

    $w('#scheduleRatesRepeater').data = trips;

});

Thanks so much in advance!

2

I would suggest using a repeater still. Container boxes will not scale with your object/array lengths. You would use the same logic as a repeater but you are not using $item, rather $w. You also have to map which item you need to push to the container. The .data call only works on repeaters.

But based on your code, it looks like you are using a repeater anyways?

3

asdsad

4

Hi. Thanks for you reply. Perhaps I explained myself poorly, but actually the code I included in my original post is for another page (which lists down all of the Trips from my collection) while the page I’m currently building is for a single trip only.

Regardless, your answer gave me an idea, and I ended up finding what I was looking for from someone else’s post :).

So instead of importing wix data, I simply connected the text element to my dataset and then added some code to reformat it: https://community.wix.com/velo/forum/coding-with-velo/adding-commas-to-numbers-pulled-from-collection/p-1~o