Need Help with Including Product Information and Images in Form Submission Emails

[Miriam_Olivier]

Hi Wix Community,

I’m working on a Wix site where users can request a quote for products. When a user submits a quote request form, I want the email notification to include detailed product information, including the product name, ID, and image. While I’m able to capture the form input values, the product details aren’t appearing in the emails correctly, particularly the product image.

Here’s a summary of what I’m trying to achieve:

• Retrieve product information from a session-stored product ID.
• Bind this product information to the form submission.
• Ensure that the email notification includes the product name, ID, and image.

Current Setup:

• I store the product ID in the session when a user views a product.
• On form submission, I retrieve the product details using the stored product ID.
• I attempt to bind this information to the form dataset before submission.

Problem:

• The product name and ID appear in the emails, but the product image does not.
• I’m unsure if the product information is being correctly set in the form dataset.

Here’s the relevant code snippet:

import { quoteRequest } from 'backend/notifications';
import wixCrm from 'wix-crm';
import { session } from 'wix-storage';
import wixData from 'wix-data';

$w.onReady(function () {
    let product = session.getItem("product"); // This line will get the item from storage session

    $w("#storeDataset").onReady(() => {
        console.log("The product dataset is ready to be filtered with the following ID:" + product);

        $w("#storeDataset").setFilter(wixData.filter()
                .eq("_id", product) // This line will filter the product dataset to find the 1 matching product from storage session
            )
            .then(() => {
                console.log("The product is " + product);
            })
            .catch((err) => {
                console.log(err);
            });
    });

    // Our dataset for our form is called #requestQuoteDataset
    $w("#submitBtn").onClick(() => {

        $w("#storeDataset").onReady(() => {
            let productFound = $w("#storeDataset").getCurrentItem();
        
                let theName = productFound.name;
                let theImage = productFound.mainMedia;
          
            // Validation logic here
            let checkFirst = $w('#firstName').valid; //Make sure to replace the fields with your form elements ID names
            let checkLast = $w('#lastName').valid;
            let checkPhone = $w('#phone').valid;
            let checkEmail = $w('#email').valid;

            const firstName = $w('#firstName').value;
            const lastName = $w('#lastName').value;
            const email = $w('#email').value;
            const phone = $w('#phone').value;

            if (checkEmail && checkPhone && checkLast && checkFirst) {
                $w("#requestQuoteDataset").setFieldValues({
                    "productName": theName,
                    "productId": product,
                    "productImage": theImage,
                    "firstName": firstName,
                    "lastName": lastName,
                    "email": email,
                    "phone": phone
                });

                // Let the original save operation continue
                $w("#requestQuoteDataset").save()
                    .then(() => {
                        quoteRequest();
                        console.log("A new notification was sent to all contributors.")
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            } else {
                console.log("Canceling save");
            }
        });

    });

    $w("#requestQuoteDataset").onAfterSave(() => {
     // This line triggers the notification from the backend. In our example, the backend function is called quoteRequest.
        console.log("A new notification was sent to all contributors.");
    });
});

This is what the email looks like, as you can see the product image does not appear.