Search code examples
javascriptvelo

Add a reserve button to column 4 of a Table. Linked to a Lightbox/pop-up


I am setting up a new site in Wix. The page uses an API to fill a simple 4 column table. Sizes, climate, prices, and reserve. I am. trying to figure out how to code a button into column 4 (all rows) that links to the Lightbox "reservation". The reserve button will not be linked to the API, just a form for a customer to fill in.

This is what I currently have. How can I add a button to the last column?

import {getLocationInfo} from 'backend/WssApiService';
import {getLocationReviews} from 'backend/WssApiService';
import {getAvailableLocations} from 'backend/WssApiService';


$w.onReady(function () {
getLocationInfo('xxxxx').then(function(locationInfo) {
//console.log(locationInfo);

$w("#table1").rows = [];
let rows = $w("#table1").rows;

locationInfo.Location.Units.sort((a, b) => (a.Monthly > b.Monthly) ? 1 : -1);

for (var i = 0; i < locationInfo.Location.Units.length; i++) {

    var climateControlled = locationInfo.Location.Units[i].SizeDescriptionsField.filter(function(item) {
        return item.includes("Climate") && !item.includes("No Climate");
    });

    //console.log(climateControlled);

    if(climateControlled.length > 0)
    {
       rows.push({Size: locationInfo.Location.Units[i].UnitSize, climate_control : "Yes", Price: '$' + locationInfo.Location.Units[i].Monthly});
    }
    else
    {
        rows.push({Size: locationInfo.Location.Units[i].UnitSize, climate_control : "No",  Price: '$' + locationInfo.Location.Units[i].Monthly});
    }
}

$w("#table1").rows = rows;

Solution

  • You cannot insert a button into a Table in Wix. Use a Repeater for that or add an onCellSelect event handler (https://www.wix.com/corvid/reference/$w.Table.html#onCellSelect) to the table and define the location using code.