I am building a custom site where users can pick a container, pick from a variety of stuffers, and then select shipping method.
Everything works fine on Chrome, but I noticed that Safari is acting weird.
The numbers should automatically change based on user input, which happens on Chrome. When the quantity is changed, the total changes, when an item is added, the cost per item and total cost per items changes. When quantity is changed, shipping/handling costs change as well.
It seems as though on Safari, that when I make a change, it takes another change to be made in order for the previous change to display. Also, when inputting a number into the quantity directly, it does not calculate correctly, cannot pinpoint exactly what.
//Shipping and Handling Auto update:
const $oneLocation = $w('#checkbox16');
const $multipleLocations = $w('#checkbox17');
const $handlingDestination = $w('#input33');
const $shippingDestination = $w('#input34');
const updateHandling = ($checkbox, handlingSrc, shippingSrc) => {
if($checkbox.checked){
const $handlingSrc = $w(handlingSrc);
const $shippingSrc = $w(shippingSrc);
setHandling($handlingSrc.value);
setShipping($shippingSrc.value);
} else {
$handlingDestination.value = '0.00';
$shippingDestination.value = '0.00';
}
}
const setHandling = (handlingSrcVal) => {$handlingDestination.value = handlingSrcVal;}
const setShipping = (shippingSrcVal) => {$shippingDestination.value = shippingSrcVal;}
$oneLocation.onChange(() => updateHandling($oneLocation,'#input29', '#input31'));
$multipleLocations.onChange(() => updateHandling($multipleLocations,'#input30', '#input32'));
//For shipping/handling calculations
//TOTALS AND COST OF ITEMS
export function input13_input(event) {
let quantity = $w("#input13").value
//cost per item;
let price = $w("#input25").value;
// total cost of items
$w("#input26").value = (quantity*price);
const $oneLocation = $w('#checkbox16');
const $multipleLocations = $w('#checkbox17');
const $handlingDestination = $w('#input33');
const $shippingDestination = $w('#input34');
const setHandling = (handlingSrcVal) => {$handlingDestination.value = handlingSrcVal;}
const setShipping = (shippingSrcVal) => {$shippingDestination.value = shippingSrcVal;}
//single handling fee;
const singleHandlingFee = Math.ceil(quantity/32)*12.90;
$w("#input29").value = singleHandlingFee;
if($oneLocation.checked) setHandling(singleHandlingFee);
//mult handling fee;
const multHandlingFee = quantity*3.90;
$w("#input30").value = multHandlingFee;
if($multipleLocations.checked)setHandling(multHandlingFee);
//single shipping fee;
const singleShipping = Math.round(quantity/32)*45;
$w("#input31").value = singleShipping;
if($oneLocation.checked) setShipping(singleShipping);
//mult shipping fee
const multShipping = quantity*12.98
$w("#input32").value = multShipping;
if($multipleLocations.checked) setShipping(multShipping);
}
A link to this page can be found at: https://bizlutionsllc.wixsite.com/stuffit/buildyourown
If this can please be solved, I would greatly appreciate it, as this site cannot go live until this issue is resolved, as money is at stake.
THANK YOU!
+ go ever this thread. It sounds like your issue:
You have thousands of code lines on your page, so it might not be easy to locate the issue (you can make it much shorter. I mean MUCH shorter by using functions and methods for repeated code).
Anyhow, I can see you have some imports in the middle of your code (See lines: 2196-2199), you should move them to the top of the page, but I doubt that will solve the issue.
I suggest:
Make the code shorter.
Check the safari console and see if there's any error.
Add console.log() to the relevant places and debug the code.
Try to see if using onKeyPress with setTimeout(callback, 10) instead of onInput solves the problem.