top of page
Custom Product Price

Custom Product Price

Let customers choose a price

Intermediate.png

Intermediate

4K

Published:

August 4, 2020

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example we allow site visitors to enter a custom price for a product. Then we create the product and add the product to the cart. This example is useful for processing donations.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

 

Page Elements

On the Home page we added the following elements:

  • Two text inputs for the customer’s name and the custom price

  • An ‘Add to Cart’ button

 

Code

In the backend customProduct.jsw module, we do the following:

  1. Import the Wix Stores Backend module.

  2. Add a function for creating a product.

  3. Add a function for adding media to a product.

 

On the Home page, we do the following:

  1. Import the backend functions.

  2. When the Add to Cart button is clicked, create a new custom product as follows:

  3. Set the product name based on the name entered by the customer in the text input.

  4. Set the product price based on the price entered by the customer in the text input.

  5. Set the product type as physical.

  6. Create the product using the backend function.

  7. Add media to the product using the product ID returned from the createProduct() function and an image of our choice.

  8. Add the product to the cart. 

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Related Articles

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Collect Payments for a Single Product

Collect Payments for a Single Product

Collect quick and secure payments from your site visitors.

Intermediate.png

Intermediate

Product Configurator

Product Configurator

Let customers create one-of-a-kind products.

Intermediate.png

Advanced

Upsell Products

Upsell Products

Promote products based on items in your cart

Intermediate.png

Intermediate

Anchor 2
bottom of page