Can someone help me with these errors?

Ask the community
, ,
1

Im building a custom product page following this series: https://www.youtube.com/watch?v=A37mjU87pHg

I made sure to follow each step carefully but getting these two errors.

errrs
errrs2559×967 162 KB

error 1:
“UserError: datasetApi ‘getCurrentItem’ operation failed
Caused by DatasetError: Operation (getCurrentItem) is not allowed because the field used to build this page’s URL is empty”

error 2:
“Error: requirement failed: Cannot filter by choices because there are no options or the options are not managed”

Can someone fix this code for me? Im kinda clueless here.

here is the code that im using for this page.

import { labels } from “wix-crm.v2”;
import { getProductVariants } from “backend/store”;

let product;
let selectedOptions = {};

$w.onReady(function () {
populateProductsData();
populateMediaItems();
populateOptions();
});

function populateOptions() {
const { productOptions } = product;

const optionKeys = Object.keys(productOptions); // [Size];
let options = optionKeys.map((option) => productOptions[option]);
console.log(“options”, options);

if (optionKeys.includes(“Size”)) {
const sizeOption = productOptions[“Size”];
options = options.filter((option) => option.name !== “Size”);
$w(“#optionsSelectionTags”).options = sizeOption.choices.map((choice) => ({
label: choice.description,
value: choice.description,
}));

$w("#optionsSelectionTags").onChange((event) => {
  const currentSelection =
    event.target.value[event.target.value.length - 1];
  //$w("#optionsSelectionTags").value = [];
  $w("#optionsSelectionTags").value = [currentSelection];
  selectedOptions["Size"] = currentSelection;
  updateProductPageWithOptions();
});

$w("#optionsSelectionTags").expand();

}
}

async function updateProductPageWithOptions() {
console.log(selectedOptions);
//get a variant based on the options;
const variants = await getProductVariants(product._id, {
choices: selectedOptions,
});

console.log(“variants”, variants);
}

function populateMediaItems() {
const { mainMedia, mediaItems } = product;
$w(“#mainMedia”).src = mainMedia;

$w(“#mediaItemsRepeater”).onItemReady(($item, itemData) => {
$item(“#mediaItem”).src = itemData.src;
});

$w(“#mediaItemsRepeater”).data = mediaItems.map((item, index) => ({
…item,
_id: index.toString(),
}));
}

function populateProductsData() {
product = $w(“#dynamicDataset”).getCurrentItem();
console.log(product);
$w(“#productName”).text = product.name;
$w(“#price”).text = product.formattedPrice;
}

2

Any help here guys? Cant find anything on google either

3

wait until the dataset is ready before accessing getCurrentItem may help

function populateProductsData() {
  $w("#dynamicDataset").onReady(() => {
    product = $w("#dynamicDataset").getCurrentItem();
    
    if (!product || !product.name) {
      console.error("Product data is empty or invalid.");
      return;
    }

    console.log("Product:", product);
    $w("#productName").text = product.name;
    $w("#price").text = product.formattedPrice;
  });
}

and I think error 2 is because you are trying to access product.productOptions before product has been initialized. So you may need to adjust code to suit this