Problems, need help? Have a tip or advice? Post it here.
5 posts Page 1 of 1
Hi

I'm working at following functionality within my webshop:
There is a shipping possibility in my shop and I would like that clients can calculate the distance between there address and the shop. With that distance value I would like to calculate the shipping price.

Now, I already managed to get a distance calculator within the site via Google API Distance Matrix.
(you can find the tutorial file that I used in attachement)

I'm getting the distance value displayed on my webpage, so that step is fine.
But now I want to do some calculations with it.

There isn't a straightforward algorithm like 1 km costs 0,5 euro.
It's more like this:
0-1 km: 3 euro
1-2 km: 7 euro
2-3 km: 7,50 euro
3-4 km: 8 euro
....

I know I can manage this kind of calculations this with some couch tags, but question is:
How can I work with the distance value?

In the javascript from the google api I found this line:
Code: Select all
document.getElementById("distance_direct").innerHTML = "<br/>The distance between the two points (in a straight line) is: "+d;


So I would like to go calculate whit that "distance_direct" value.
Is there a way to get that value between some couch tags?

Would be wonderful 8-)

Thanks in advance!

Attachments

Hi Sam,

The script you posted is JS and so would execute client-side (by the browser) while the calculations based on its results need to be done server-side (by Couch).

So we'll need to pass back that value to the server for that to happen.
I think, you can use AJAX to do this.
Details of it will depend on how you have structured your site.
Hi KK
I have searched further to a solution and found a script that fits my needs. I've got what is was searching for: a input field linked to a google maps distance calculator. Did my calculations and it's giving the right values.

But there is one last step and I'm breaking my head on it...
The value I get via the distance calculator displays perfect on the screen, but I need that value also in my confirmation mail.

In attachment my new checkout.php page.
You will notice two big blocks of javascript that is handeling the calculations.

The end value gets displayed by this lines of code:

Code: Select all
document.getElementById("total").innerHTML = "Afstand: " + total + " km<br />Leveringskost = €" + fare;


Code: Select all
<div id="total"></div>


I would like to "play" a bit more with that "total" value, to eventually get it displayed in the confirmation mail.

Do you think this is something that can be done with some couch tags?
Maybe with "cms:php></cms:php>?

Lot of thanks for looking into it.

Sam

Attachments

Ok, I searched a bit further to any kind of way to get the javascript value into my mail form.

I found couple of tutorials of passing the variable through a hidden input field.

This code made sense to me but is not working.

HTML
Code: Select all
<input style="margin:5px 0;" type="button" value="Bereken leveringskost" onClick="calcRoute();">
<cms:input type="hidden" id="total" name="total" value="" />


JS

Code: Select all
document.getElementById("total").value = "Afstand: " + total + " km<br />Leveringskost = €" + totaalkost + "<span>(km vergoeding + 10% totaalbedrag bestelling)</span>";


EMAIL FORM (in same file as html)
Code: Select all
<cms:show frm_total />


Someone who is seeing where I'm going wrong?
Thanks.
Sam,

Let us treat this as a condition where we need to modify the shipping charges based on some user-input.

I'll give an example of how this can be done (and I'm sure you'll be able to relate it with your specific requirement).

If you take a look at the checkout page of the sample CouchCart application (http://www.couchcms.com/demo/simple/), you'll see the 'Enter coupon here' textbox with 'Apply' button.
coupons.jpg
coupons.jpg (53.27 KiB) Viewed 2288 times

Now suppose a coupon that offers free shipping is entered here, you can see that this modifies the original shipping charges by making them zero.

We can study how this coupons functionality works and we can them duplicate it to implement other kind of shipping calculations (e.g. one that uses Express, Domestic etc.).

Take a look at the checkout.php of the sample (http://www.couchcms.com/docs/code/simple-couchified.zip) and you'll find that the highlighted portion that you see in the cart above is actually a Couch form.

Hitting the 'Apply' button will submit the form and execute the k_success block in it. Following is (abbreviated) code in the k_success condition.
It comprises of three parts -
Code: Select all
<!-- START COUPON FORM -->
<cms:form method="post" anchor='0'>
    <cms:if k_success >

        <!-- 1. set submitted values in session.
        We'll use them in the shipping calculations done in cart_ex.php
        -->
        <cms:set_session name='coupon_found' value='1' /> 
        <cms:set_session name='coupon_code' value=code />
       
        <!-- 2. the following triggers a recalculation of all cart values.
        This will include calculating the shipping values which will now take into
        consideration the session values we set above
        -->
        <cms:pp_refresh_cart />
       
        <!-- 3. finally redirect so the cart page refreshes.
        This will display the new values -->
        <cms:redirect k_page_link />
       
    </cms:if>
    ..
    ..
</cms:form>

As you can see, in the comments within the code above, the 3 steps are -
1. Set the submitted value in session
2. Call cms:pp_refresh_cart to recalculate all cart values and thus using the values set above in getting the shipping value.
3. Redirect the page.

When the cms:pp_refresh_cart above executes, it calls cart_ex.php and so we can place our custom functions in there to do the calculations (using the session values, in this coupons example).

Take a look at cart_ex,php that is in the cart addon folder to see how the get_shipping() function uses the session variables set by coupon to return a '0' shipping charge -
Code: Select all
function get_shipping(){
    global $KSESSION;
   
    $cost = 0;
    $items = $this->count_shippable_items;
    if( !$items ) return 0; // No item in the cart that needs shipping
   
    // First check if a discount coupon provides free shipping
    if( $KSESSION->get_var('coupon_found') &&
        $this->sub_total > $KSESSION->get_var('coupon_min_amount') &&
        $KSESSION->get_var('coupon_free_shipping') ){
       
            $KSESSION->set_var( 'free_shipping_applied', 1 );
            return 0;
    }
    else{
        $KSESSION->set_var( 'free_shipping_applied', 0 );
    }
    ..
    ..
}

Point of this discussion is that we can use the exact three steps we mentioned above to implement all kind of shipping modifiers triggered from the frontend.

I'll give you a final example to illustrate this.
Here we display a dropdown showing three different shipping regions (in a form of course).
When the buyer selects any region, the form gets submitted and the code in k_success then uses the three steps to calculate the shipping charges.

Here is the full code -
Code: Select all
<cms:form method="post" anchor='0'>
    <cms:if k_success >
        <cms:set_session name='selected_shipping_location' value=frm_shipping_location /> 
        <cms:pp_refresh_cart />
        <cms:redirect k_page_link />
    </cms:if>
   
    <div class="styled">
    <cms:input type="dropdown"
        name="shipping_location"
        opt_values="
            Choose Shipping Location = 0 |
            Discovery Bay and Tung Chung (free) = 1 |
            Hong Kong Island and Kowloon (100HK$) = 2 "
        opt_selected = "<cms:get_session 'selected_shipping_location' />"
        onchange="this.form.submit()"
    />
    </div>
</cms:form>

Please compare it with the coupon form to see the similarity.

This form sets a session variable named 'selected_shipping_location' that contains the region selected. We can now use this value in cart_ex.php's get_shipping() function to return the calculated shipping value for the region.

OK, so now that you have seen two working examples of how to use a form to submit user-selected values that affect the shipping charges, we can come to your 'distance calculator'.

You can use a form (as described above).
Use the calculator to set an input of this form via JS to the calculated distance.
Clicking apply would submit the form making k_success execute. Here set the submitted distance in session and call cart_ex as described above to use that value to return a shipping charge.

This charge will automatically appear in the cart.

As your's is a very specific case, I'm sorry but this is all I can do to help you with it.
Hope it helps. Do let us know if you need explanation about anything.

Thanks.
5 posts Page 1 of 1
cron