By popular demand, a new plug-in is introduced at BlogrCart MNMLIS theme. Automated calculated shipping cost by average weight for items in cart with alert handlers comes pre-installed.
Below is an example mark-up to handle the selection option when shippingCustom is activated at BlogrCart MNMLIS theme.
<select class='form-control' data-maxweight='10.0' id='shippingSelect'> <option data-avgweight='0.25' data-weightmetric='kg' value='N/A'>-Please Choose-</option> <option data-avgweight='0.25' data-weightmetric='kg' value='0.5=7;1.0=9;1.5=12;2.0=14;2.5=22;3.0=24;3.5=27;4.0=30; 4.5=32;5.0=35;5.5=38;6.0=40;6.5=43;7.0=46;7.5=48;8.0=51;8.5=53;9.0=56;9.5=59;10.0=61;'>Within S. Malaysia, Within Sarawak, Within Sabah</option> <option data-avgweight='0.25' data-weightmetric='kg' value='0.5=9; 1.0=13; 1.5=17; 2.0=21; 2.5=26; 3.0=40; 3.5=44; 4.0=49; 4.5=53; 5.0=58; 5.5=62; 6.0=68; 6.5=72; 7.0=78; 7.5=82; 8.0=88; 8.5=90; 9.0=95; 9.5=100; 10.0=105; '>S. Malaysia to Sarawak</option> <option data-avgweight='0.25' data-weightmetric='kg' value='0.5=10;1.0=15; 1.5=20; 2.0=26; 2.5=41; 3.0=47; 3.5=52; 4.0=57; 4.5=63; 5.0=68; 5.5=74; 6.0=79; 6.5=85; 7.0=89; 7.5=96; 8.0=100; 8.5=106; 9.0=110; 9.5=116; 10.0=121; '>S. Malaysia to Sabah</option> <option data-avgweight='0.25' data-weightmetric='kg' value=''>Others (Please state in message box)</option> </select>
<select> <option>the values from attributes
data-*is used to handle the options & calculates at shopping cart summary section.
Understanding the Custom Shipping Functions
- The custom shipping functions uses the
data-*attributes values as data for finding the weight value to shipping rate pairs in each option
- The function pre-calculate the total weight of items in cart by multiplying the items quantity with the
data-avgweightset in each option. This total cart weight value is rounded to the nearest
.5value to search for a round up weight to shipping rate pairings provided at the option
- For instance if the total cart weight is
8.3, then the function will round the total weight value to the nearest
.5which would be
8.5. Then the custom function will search the
value datain the option and when match found, extracts its shipping rate pairing. Same principles if the total item weight is
4.8, then it will round up to
5.0. Then the function searches the shipping rate pairing for
Let's break the mark-up one by one.
Below is the default option. Required to handle usages if select option is not in used. No customization required.
<option data-avgweight='0.25' data-weightmetric='kg' value='N/A'>-Please Choose-</option>
data-*values (highlighted yellow) for custom shipping settings. Details value references below.
An example option mark-up broken down into individual lines as follows:-
<option data-avgweight='0.25' data-weightmetric='kg' value='0.5=7;1.0=9;1.5=12;2.0=14;2.5=22;3.0=24;3.5=27;4.0=30; 4.5=32;5.0=35;5.5=38;6.0=40;6.5=43;7.0=46;7.5=48;8.0=51;8.5=53;9.0=56;9.5=59;10.0=61;'> Within S. Malaysia, Within Sarawak, Within Sabah </option>
Weight Metric (kg or lb) - RequiredThe weight metric that is used for the items in cart, The
data-weightmetric='kg'indicates that kg (kilograms) is used. This weight metric will render/display at shopping cart summary when a shipping option is selected.
kg or lb (pounds). Other weight metric is not tested but we love to here your feedback. Or, share it here in the comment section below.
Average Weight - RequiredAverage weight means the average weight per item in cart. Used at
data-avgweight='0.25'. In this example
0.25[weightmetric]is the average weight per items in cart. In this case
0.25kg(kilograms) is the average weight for an item in cart.
Weight & Shipping Rate Values - RequiredHere is an example of a weight to shipping rate pairing (highlighted in yellow, cyan & green).
A weight & shipping rate pairing values as follows highlighted yellow
0.5=7;Each pairing must begin with a weight value (0.5) equals (=) a rounded shipping rate value (7) and ending with a colon as separator (;)
The next occurring value will have a weight increase by .5 paired with next rounded shipping rate value (without decimal points).
In laymen terms, if items calculated in cart (average weight x cart item quantity) equals or does exceeds
0.5[weightmetric], the shipping rate is
The same example for highlighted in cyan. If the items in cart weighs equal 5.0kg but does not exceeds the next weight increase (5.5kg) the shipping charges is
The format for extracting the weight to shipping rate value pairs is as follows:-
[integer in one decimal point]=[integer rounded];[next increase integer in one decimal point]=[next increase integer rounded];
This is important as the function searches a match weight value by one decimal point to differentiate with the shipping rate pairs. All weight values are ascending rounded to 0.5 values begining at 0.5 onwards.
Each format pairings ends with a colon
(;)to separate the occurring (next increase) value pairs.
Option Text Displayed - RequiredThe text to display at the select drop down options. An example is highlighted magenta at the above mark-up.
Adding More OptionsAdding more options for custom shipping is endless. Use tthe same technique and markup-ups to add options. Several working examples is also included in BlogCart MNMLIS theme.
- This shipping by weight have unlimited options of choices depending on preferred service providers. Adding one option shipping by weight using Provider A, or create another option for a service Provider B.
- Unlimited shipping by weight select options depending on locations or zoning. For example adding one option for weight by value shipping for Zone X & another select option for Zone Y.
- Or add both types of options selection (Provider , Zoning, Provider by Zoning) in one select options. This way gives more selection for your users.
- The price pairings can be used in unlimited number of integers without trailing decimels (rounded) as values, for instance using Rupiah or Rupee thousands ie 15,000 using 15000 is sufficient.
Error Handling HelpersThis custom shipping by weight select option comes with error handling. Below is the brief description on the Error handler events:-
- If user select option
value="N/A", an alert event will occur with the custom error text. The checkout button & form will automatically hide.
- If blog owner has an empty option value (
value=""), an alert event fires with a custom error text. The checkout button & the form displays.
- If there is a formatting error at the weight to shipping rate value pairs, an alert event will fire to indicate which value pairs has error(s).
- If a
data-weightmetricis not set (
data-weightmetric=""), the data values will not display.
- If a
data-avgweightis not set (
data-avgweight=""), an alert event fires indicate values not found.
- Spaces in value pairings strings has no effect to calculate(or find) the shipping rate.
- Special characters & alphabets can not be used.
- Weight values always with a single decimal rounded format of .5 increase (ascending)
- Shipping rate values are rounded. Decimal point will throw errors.
- Weight values must increase by
0.5with the lowest value is
0.5. The increase is as follows using kg as weight metric:
0.5kg, 1.0kg, 1.5kg, 2.0kg, 2.5kg etc.
- Each weight values must have a single decimal point. Other than that it may return errors.
- Leave option
value=''empty to allow manual shipping rate & users can continue sending orders.
- The maxWeight values must equals the same values as highlighted in red at the above mark-up. In the example 10.0 set to the maximum weight at shopping cart.