Link a datasheet to a page

Ask the community
,
1

Question:
I was trying to follow this tutorial : Using the Pricing Plans API for Pricing Plan Ordering and Payment

But I want the code (the very last one) to be on a page that is already on my website, this mean that I’m not creating a dynamic page only for this but I still want the datasheet to be linked to my page to proceed to payment.
In the editor the only problem that I have is the #dynamicDataset is underlined in red, what should I do to link my plan dataset to my page ?

Product:
WixEditor with velo

2

Please share the code if possible when you have question related with your question.

3

It’s literally the code from the tutorial (last one) :

import wixWindowFrontend from 'wix-window-frontend';
import wixPayFrontend from 'wix-pay-frontend';
import {checkout} from 'wix-pricing-plans-frontend';
import {authentication} from 'wix-members-frontend';

$w.onReady(function () {

  const currentPlanObject = $w("#dynamicDataset").getCurrentItem();
  const planId = currentPlanObject._id;
  const planPrice = currentPlanObject.price;

  $w('#buyNow').onClick((event) => {

  let isLoggedIn = authentication.loggedIn();
    
  if (!isLoggedIn) {
    authentication.promptLogin().then(() => {
      processPlan(planId, planPrice);
    })
  } else {
    processPlan(planId, planPrice);
  }  
    
 });
});

function processPlan(myId, myPrice) {

  if (myPrice > 0) {
    checkout.createOnlineOrder(myId).then(orderObject => {
      wixWindowFrontend.openLightbox("Confirm", orderObject)
       .then((goForIt) => {
       if (goForIt) {
         wixPayFrontend.startPayment(orderObject.wixPayOrderId);
       }
      });
    })
  } else {
    checkout.createOnlineOrder(myId).then(orderObject => {
      wixWindowFrontend.openLightbox("Congrats", orderObject);
    })
  }
}
4

If dynamicDataset underlined red it’s mean you don’t have any element with that ID. You should change your dataset element ID to dynamicDataset then red underline should go away.

Same required for any element you have on the page.

5

Okey so I added a dataset element on my page (it’s what was missing) and now no more underlining but when I start this :

$w.onReady(function () {
  
  console.log("Ready !");
  
  const currentPlanObject = $w("#dataset1").getCurrentItem();
  const planId = currentPlanObject._id;

  console.log("Const set !");

rest of the code

The “Ready !” is in the log but the “Const set !” message never appear in the console (and the rest of the code did’nt work too)

6

You will need advanced JS knowledge to let this work and fix BUGs.

Did you named the correct dataset. The dataset you should be using must be auto created and should belong to dynamic page itself.

7

Okey I got it to work, the problem was the .getCurrentItem();
I’m not in an dynamic page so it wasn’t referring to anything, I started use .getItems(); instead and then put in items variable all the items and call them by their index were I need them

8

Solution (in case someone need it one day) :

Don’t forget to add a dataset element on the page that is linked to your actual dataset before calling it in the code.

If your not in a dynamic page don’t use .getCurrentItem(); but .getItems() instead.

For more info see the dataset documentation : https://www.wix.com/velo/reference/wix-dataset/dataset