Connecting a table to Customer plans?

Ask the community
,
1

Hi,

I have a number of plans on the plans and pricing tab and I would like to be able to link what customers have plans to in a table, I currently have the wix code for getting the plan details:

import wixUsers from ‘wix-users’;

let user = wixUsers.currentUser;

let userId = user.id;
let isLoggedIn = user.loggedIn;

$w.onReady( function () {
user.getPricingPlans()
.then( (pricingPlans) => {
let firstPlan = pricingPlans[0];
let planName = firstPlan.name;
let startDate = firstPlan.startDate;
let expiryDate = firstPlan.expiryDate;
});
})

and I have tried to link this with a #table but it is not working could anyone help out with a solution?

I look forward to any help, @yisrael-wix

Best wishes,

Simon

2

The sample code only gets the data for the first plan as a demonstration. You can populate a table something like this:

user.getPricingPlans()
  .then( (pricingPlans) => {
    $w("#table1").rows = pricingPlans;
  } );

You can also display the plans in a Repeater. You’ll need to set the data property:

user.getPricingPlans()
  .then( (pricingPlans) => {
    $w("#repeater1").data = pricingPlans;
  } );

And you’ll need to add an onItemReady() function to handle the fields that you want to display:

$w.onReady(function () {
  $w("#repeater1").onItemReady( ($item, itemData, index) => {
     // set the item field here
  } );

Good luck

3

Hi @yisrael-wix ,

I have tried a number of ways utilising the code suggested and so far nothing seems to be working?

I have so far made an amalgamation of code to try to get it to work this is below:
mport wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;

let user = wixUsers.currentUser;

let userId = user.id;
let isLoggedIn = user.loggedIn;

$w.onReady(() => {
user.getPricingPlans()
.then( (pricingPlans) => {
$w(“#table1”).rows = pricingPlans;
$w(“#table1”).columns = [
{
“id”: “col1”,
“dataPath”: “plan_name”,
“label”: “Plan Name”,
“width”: 100,
“visible”: true ,
“type”: “Text”,
},
{
“id”: “col2”,
“dataPath”: “start_date”,
“label”: “Start Date”,
“width”: 100,
“visible”: true ,
“type”: “Date”,
},
{
“id”: “col3”,
“dataPath”: “expiry_date”,
“label”: “Expiry Date”,
“width”: 100,
“visible”: true ,
“type”: “Date”,
}
];
});
});

Not sure where I am going wrong?

Best wishes,

Simon

4

I would highly recommend against making “an amalgamation” of code. It most likely won’t work.

See the API for the Table.columns API . It is defined once, in the page’s onReady() function.

See the API for the Table.rows API to see how to set the content of the Table.

You need something like this (has not been tested):

import wixData from 'wix-data';
import wixUsers from 'wix-users';

$w.onReady(() => {

   $w("#table1").columns = [
     {
       "id": "col1",
       "dataPath": "plan_name",
       "label": "Plan Name",
       "width": 100,
       "visible": true,
       "type": "Text",
     },
     {
       "id": "col2",
       "dataPath": "start_date",
       "label": "Start Date",
       "width": 100,
       "visible": true,
       "type": "Date",
     },
     {
       "id": "col3",
       "dataPath": "expiry_date",
       "label": "Expiry Date",
       "width": 100,
       "visible": true,
       "type": "Date",
      }
    ];

  let user = wixUsers.currentUser;  
  let userId = user.id; 
  let isLoggedIn = user.loggedIn;
  user.getPricingPlans()
      .then((pricingPlans) => {
        $w("#table1").rows = pricingPlans;
      });
});
5

Hi @yisrael-wix ,

Many thanks for this,

I have managed to get it to work, however the start date and expiry date are not in short format “DD/MM/YYYY” any idea how to achieve this?

I provide the updated code below:

import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;

$w.onReady(() => {

$w(“#table1”).columns = [
{
“id”: “col1”,
“dataPath”: “name”,
“label”: “Name”,
“width”: 150,
“visible”: true ,
“type”: “Text”,
},
{
“id”: “col2”,
“dataPath”: “startDate”,
“label”: “Start Date”,
“width”: 300,
“visible”: true ,
“type”: “Date”,
“format”: “DD/MM/YYYY”,
},
{
“id”: “col3”,
“dataPath”: “expiryDate”,
“label”: “Expiry Date”,
“width”: 150,
“visible”: true ,
“type”: “Date”,
}
];
})
let user = wixUsers.currentUser;
let userId = user.id.id;
let isLoggedIn = user.loggedIn;
user.getPricingPlans()
.then((pricingPlans) => {
$w(“#table1”).rows = pricingPlans;
});

6

@simonadams You will need to reformat or to use the Javascript Date object. You can find lots of information on this with an Internet search.

See the article Wix Code: How to Format Dates for more information.

7

@yisrael-wix thanks I have managed to get this piece to work appropriately now many thanks.

Si