Copying information to the 'Add Note' section on the cart page

Ask the community
, , ,
1

Question:
[ I created an iframe and a GitHub link with the help of chat gpt, allowing customers to select a pickup point on the Hungarian gls map. After selecting a pickup point, they can click a confirmation button.

However, one problem remains: despite chat gpt suggesting that it should work, the selected pickup point is not copied into the “Add Note” section (which I renamed to “Pickup Point Will Appear Here”). For some reason, the information doesn’t get transferred.

I also tried another idea: after the customer selects a pickup point, the program places it into a text box, and a “Copy” button allows them to copy it to the clipboard. Then, next to the Add Note section, I placed a “Paste” button — but even this solution does not work.

Does anyone have any ideas? Thank you in advance!]

Product:
[Wix Editor]

2

Since you are using an iFrame, you will have to establish a connection between HTML-Component (your iFrame) and your PAGE using → POST MESSAGE ←

3

Thank you! I will try it.

4

Hey the problem is, that: The custom GLS ParcelShop iframe successfully sends the selected point via postMessage and saves it into localStorage.
However, on the Wix Cart Page, the script cannot find the “Add a note” input field because the native Wix note field is sometimes hidden (collapsed) or loads dynamically inside the cart component.
As a result, the code cannot programmatically insert the GLS point into the note field after clicking the “Insert” button.

A more reliable method is needed: either delayed field detection (waiting for the cart page to fully load), or a different DOM query strategy to target the dynamic note field correctly. Do you have any idea? Thank you.

5

That is correct. The Add a Note field is part of the Wix Stores Cart Widget, and is not an individual element that can be controlled with $w APIs.

But this can be achieved using the updateCurrentCart() function of the wix-ecom-backend API.

Since this is a backend function, you will have to create a web.js code file in your site’s backend which can be called from the frontend.

Here’s an overview of how the code would work.

  1. User selects a location on the map and clicks a Confirm button.
  2. The HTML embed sends the selected location in text format using postMessage.
  3. Fetch the message with Velo code on your cart page by using the onMessage() event of the HTML component.
  4. Pass this text to your backend function as a parameter
  5. In your backend function, fetch the text string that was passed from the frontend and update the options.cartInfo.buyerNote field with this text.

And there you have it - that should enter the user’s chosen location inside the Add a Note field.

1 Like
6

Not far away from solution i would say… :ok_hand:

The way is described, all you have to do now is to folow and understand all the single steps to get your wished result.

Good luck!

And one more side-note! Keep always in mind → if you want to generate something unique, custom, or special → you can do it ONLY by —> CODE ← and only if the right APIs are available, especially it if comes to Wix-Products. This is why all those APIs were made, to be able to interact with all the given Wix-Elements inside of your Wix-Editor/Website.

7

@Pratham and CODE-NINJA thank you so much guys for your help, problem solved!

3 Likes
8

Glad to hear that!

Do share your working code here so that it can help other users in the future who’re looking for a similar resolution :raising_hands:t2:

1 Like