How to have "request a quote" autofill product name into form

Ask the community
1

Hello!

I currently this code in place on my product page:
import wixWindowFrontend from ‘wix-window-frontend’;

$w(‘#page1’).onViewportEnter(() => {
// Change the Add to Cart button label to “Request a quote”
$w(‘#productPage1’).setAddToCartLabel(‘Request a quote’);

// Set the onAddToCart event handler to open the quote request lightbox
$w('#productPage1').onAddToCart(async (resume, cancel) => {
    const data = await getSelectedProductData();
    wixWindowFrontend.openLightbox('Request a Quote', data)
        .then((quoteData) => {
            console.log(quoteData);
            cancel(); // Prevent the default add to cart action
        });
});

});

// Function to get the selected product data
async function getSelectedProductData() {
const quantity = await $w(‘#productPage1’).getQuantity();
const choices = await $w(‘#productPage1’).getSelectedChoices();
const customText = await $w(‘#productPage1’).getCustomText();
return {
quantity: quantity,
choices: choices,
customTextFields: customText,
};
}

It functions as desired, however the issue arises when I try to have the product name from the product page that is currently being viewed self populate into my lightbox form. I have tried several of the AI code suggestions and have not been able to get anything to work. Please bear with me as I have 0 coding knowledge.

Thank you so much for any help.

2

Lightbox code:

import wixWindow from 'wix-window-frontend'

const data = wixwindow.lightbox.getContext()
// The data passed from the previous page, when opening the lightbox
3

With this in my light box, does the form present within that light box need specific labels or something? Just putting this into the code did not seem to work. …
Thank you

4

This code simply sets a variable named data which stores the same data you passed to the light box when opening it using wixWindow.openLightbox()

What you do with it is up to your needs

I do not know what you have in your data, but let’s say the text you want changed is stored in data.title

if you need to set some of that information into a text object (for example #textElement), then just do

$w(‘#textElement’).text = data.title
5

I would just like a form section to autofill with the product from the page that opened the lightbox form.

Is there a simple way to push that to the form and fill a section with it?

6

Are you using Wix Forms or did you create your own custom form using input elements and code?

Wix Forms cannot be manipulated via code.

7

unfortunately I used wix forms

8

I have changed my form to custom elements, I am still unable to get any information to autofill… would you be able to offer any more suggestions? Thanks

9

Do you have the data you want to auto-fill?

For text inputs, you can use
$w('#someTextInput).value = 'Some Value'

As for others, it’d depend on their type, but they’re all rather simple

10

Share your code and screenshots so the community can help

11

I eliminated some of the code to get the site to at least somewhat function so I don’t really have much of anything.

import wixWindowFrontend from 'wix-window-frontend';

$w('#section21').onViewportEnter(() => {
    // Change the "Add to Cart" button label to "Request a quote"
    $w('#productPage1').setAddToCartLabel('Request a quote');
    
    // Add an event handler to the "Add to Cart" button to open the "RFQ" lightbox
    $w('#productPage1').onAddToCart(() => {
        wixWindowFrontend.openLightbox('RFQ');
    });
});

This is the only custom code I have, its on my product page. But I am trying to get something between this page and the opened lightbox so that the product on the page where they initially hit the “request a quote” button is relayed to my CMS. Any method that this can be done would be beneficial.

Thank you for the continued help

12

For instance, Ive now tried this

import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
let product;$w.onReady(function () {
  initProductPage();
});

wixLocation.onChange((location) => {
  let newPath = location.path;
  if (newPath?.[0] === 'product-page') {
    initProductPage();
  }
});

async function initProductPage() {
  product = await $w('#productPage1').getProduct();
  $w('#productPage1').setAddToCartLabel('Request a quote');
  $w('#productPage1').onAddToCart(onAddToCartHandler);
}async function onAddToCartHandler(resume, cancel) {
  const data = await getSelectedProductData();
  wixWindow.openLightbox('RFQ', data)
    .then(() => {
      cancel();
    });
}

async function getSelectedProductData() {
  const productQuantity = await $w('#productPage1').getQuantity();
  const productChoices = await $w('#productPage1').getSelectedChoices();
  const productCustomText = await $w('#productPage1').getCustomText();
  return {
    product: product,
    quantity: productQuantity,
    choices: productChoices,
    customTextFields: productCustomText,
  }
}

with

$w.onReady(function (context) {
  $w('#input6').value = context.product.name;
});

in the relevant light box, and I still get nothing inserted into that input field

13

Again, the context is retrieved using wixWindow.lightbox.getContext()

So your lightbox code should be:

import wixWindow from 'wix-window-frontend'

const context - wixWindow.lightbox.getContext()
$w.onReady(() => {
    $w('#input6').value = context.product.name
})
1 Like
15

Sorry Dean, even with that change the input remains blank

16

Seems the module has been changed to wixWindowFrontend

Try this and see if it logs the data passed to the lightbox correctly

import wixWindowFrontend from 'wix-window-frontend'

console.log(wixWindow.lightbox.getContext())
17 
import wixWindowFrontend from 'wix-window-frontend'

console.log(wixWindow.lightbox.getContext())
$w.onReady(() => {
    $w('#input6').value = context.product.name
})

Like this?

18

Yes and no

console.log(wixWindow.lightbox.getContext()) should print to console the lightbox’s context - So opening the lightbox on preview mode should allow you to view what the actual value passed when the lightbox is opened

This did not save the context into a variable, so context.product.name is undefined

import wixWindowFrontend from 'wix-window-frontend'

const context = wixWindow.lightbox.getContext()
console.log('context', context)

$w.onReady(() => {
    $w('#input6').value = context.product.name
})
1 Like
19

This gives the error “ReferenceError: wixWindow is not defined”

I am lost

20

Dean, it works! Thank you for the help

21

That was because I used wixWindow by mistake again instead of wixWindowFrontend, but since it’s working now I take you figured it out

Glad to help :slight_smile: