How to calculate amounts per products & sub-products

Hi, I would like to create an option (Create your own salad) were you can choose max 5 products (Salads).

Each product consists of 1 Base salad, 3 free of charge ingredients (sub-products) and the choice of two ingredients (sub-products) with an extra charge (some extra ingredients have a different price).

I created the following, which is a section of a form with more products. How can I insert amounts per product/sub-product, that will be calculated in the Total, eg.:

Thank you for your help.

Do you want to change the price according to the selected options/sub-products on your form?

If so, you may refer to the following guide for more details about doing it: https://www.jotform.com/help/265-What-is-Special-Pricing

Kindly give it a try and let us know if you have any questions.

I am trying to add Special pricing for more sub-products, but it seems it is possible only once.

What I want to reach is the following (create your own salad):

1. Quantity (max. 5 times)

2. Salad Base 4.00 ANG (dropdown with some options)

3. Free ingredient 1 (dropdown with some options)

4. Free ingredient 2 (dropdown with some options)

5.Free ingredient 3 (dropdown with some options)

6. Extra ingredient (dropdown with some options, with the cost of 1.00 ANG)

7. Protein (dropdown with some options with the cost of 2.50 - 3.00 ANG)

8. Total

I already created a purchase order for more products, that works out perfectly, I would like to incorporate this specific product (create your own salad) in that form.

Is there a way to do the above mentioned, since the Special pricing I could add only to one of the products. I already tried to add nr. 6 & nr. 7 and added the Special pricing to that combined option, but when it calculates the Total, there is no place to add the 4.00 ANG to nr. 2 (Salad Base), so it calculates only one price.

I rather would like to keep nr. 6 & nr. 7 separate.

Let me know if you can help me out. Thanks.

Thanks for the additional details.

I have been trying to find a workaround on your request, but was unable to find any while using the "sell products" payment method as the payment wizard is very limited.

I would recommend you to kindly try using calculations, this opens the ability to achieve what you want, you can set up the individual product as you want with the desired options and perform the calculations to get the sub-total.

The calculations can only be performed with basic fields such as drop downs, radio buttons, check boxes and the like. Kindly check the following guides that will help you performing calculations:

https://www.jotform.com/help/259-How-to-Perform-Form-Calculation-Using-a-Widget

https://www.jotform.com/help/301-How-to-Assign-Calculation-Value

If you have any questions during the process, let us know.

Thanks Kevin,

I managed to do a work around, and it is working:

https://www.jotform.com/build/202616432205848

How do I expend de product/price list.

Thanks,

Hi,

That's great to hear that you have found a workaround.

Let me get back to you with the necessary CSS codes to increase the width of the subproduct.

Thank you.

My apologies for the late response.

Please try to add these CSS codes on your form:

div.form-all {

  width : 750px;

}

.form-product-child-table td, .form-product-child-table th {

  padding : 0px!important;

}

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)

{

 .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui .form-product-item-detail.new_ui {

display: -webkit-inline-box;

overflow-x:visible;

}

}

For reference: How-to-Inject-Custom-CSS-Codes

You can check the results here on my cloned form: https://form.jotform.com/202715204531948

Let us know if it didn't meet your requirements.

Hi Krislei,

It worked (I added some extra spacing in your CSS code), I got more spacing, but I guess I reached the maximum spacing. What about scrolling to the right to get the remaining part of the past option:

I went searching, and I added the following CSS code:

@media screen and (max-width:480px){

#list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

}

It works:

Thank you for sharing that information here in the forum.

A lot of users will find this helpful. However, if you still need the scrolling to appear for mobile device, you can change the attribute for overflow-x:visible; to overflow-x:auto; to make it more responsive on mobile:

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)

{

 .form-line[data-payment="true"] div[data-wrapper-react="true"] .form-product-item.new_ui .form-product-item-detail.new_ui {

display: -webkit-inline-box;

overflow-x:auto;

}

}

Let us know if you need further assistance.