- Posts: 32
- Thank you received: 0
checkout, billingXshipping, steps, shippping price
10 years 4 months ago - 10 years 4 months ago #239080
by Osindelka
checkout, billingXshipping, steps, shippping price was created by Osindelka
-- HikaShop version -- : 2.6.2
-- Joomla version -- : 3.5.1
I have four Issues with the Checkout flow.
1)
My question concerns the checkout flow. I have a problem with how the billing and shipping address is displayed and how the system interacts with the buyer. I am not sure if it is a problem of the Hika Shop design or a problem with my template Storefront from Gavick, but the view used is original from HikaShop.
What I would like to see is that after the buyer chooses checkout variant, in this case especially the Guest variant, and goes to the second step with address, that he is presented with simple two fields with Billing address and Shipping address. He should be able to change information in both of those fields and nothing more should happen. Just very simple. Where the Shipping address is standard filled in as the same as billing address.
Now when I test the checkout, it more or less looks like that at first, the problem begins when the customer starts to interact with it.
I have selecting No, No, No, No on the settings of the shipping & payment panel and I have selected the List view.
In the checkout on the Front End there are two fields Billing Address and Shipping Address, under both of those fields is "New" when you click it, it creates a new field with another address on both sides, thus both under the Shipping and under the Billing Address. For each field there is a radio button, so that the customer needs too choose one. It looks like this:
This is not ok, there should not be made another address to chose from every-time the customer edits the address. Its terribly confusing for the customer.
What I need is a clean left field with the Billing address, the same address that the customer already gave, a choice to edit that Billing adress and a choice on the right side to add or edit Shipping address. This done with simple List view like beneath, without any radio buttons or delete buttons. Simple clean choice between the Shipping=Billing and then the possibility to edit the Shipping address (and as a bonus the possibility to edit the billing address but that is already too much).
The php view looks like this:
2) When in the checkout the customer can't move back to the previous step. E.g. if the customer chose to checkout as guest, and he fills in the email and his address in the first step, and then he is send to the second step, choosing the billing and shipping address, he can't go back to the first step to look at the cart or edit the email address anymore.
3) The checkout flow steps that are can be displayed are not working properly as they are hardcoded links to further steps in teh checkout process. So e.g. if I chose Login-Adress-Shipping choice-Payment choice checkout steps, the customer that is at the first step will be able to hover its mouse above the last step without going through the whole process and it will show as active link. Upon click it will move him to the last step, but that will cause an error obviously.
4) How can I let the customer see the total price of his order including the shipping costs? If I chose one shipping method to be automatic it will add the price to the shopping cart price, but it won't show any line with the "shipping costs" in the cart on the checkout. When I let the customer to chose the shipping method at the same step as when displaying the cart, it won't show it either. There's also no total overview of the total costs including the shipping or e.g. banking or other custom costs. It's quite crucial that the customers get to see the total amount due, including shipping etc, before they are going to payment.
Thank you
-- Joomla version -- : 3.5.1
I have four Issues with the Checkout flow.
1)
My question concerns the checkout flow. I have a problem with how the billing and shipping address is displayed and how the system interacts with the buyer. I am not sure if it is a problem of the Hika Shop design or a problem with my template Storefront from Gavick, but the view used is original from HikaShop.
What I would like to see is that after the buyer chooses checkout variant, in this case especially the Guest variant, and goes to the second step with address, that he is presented with simple two fields with Billing address and Shipping address. He should be able to change information in both of those fields and nothing more should happen. Just very simple. Where the Shipping address is standard filled in as the same as billing address.
Now when I test the checkout, it more or less looks like that at first, the problem begins when the customer starts to interact with it.
I have selecting No, No, No, No on the settings of the shipping & payment panel and I have selected the List view.
In the checkout on the Front End there are two fields Billing Address and Shipping Address, under both of those fields is "New" when you click it, it creates a new field with another address on both sides, thus both under the Shipping and under the Billing Address. For each field there is a radio button, so that the customer needs too choose one. It looks like this:
This is not ok, there should not be made another address to chose from every-time the customer edits the address. Its terribly confusing for the customer.
What I need is a clean left field with the Billing address, the same address that the customer already gave, a choice to edit that Billing adress and a choice on the right side to add or edit Shipping address. This done with simple List view like beneath, without any radio buttons or delete buttons. Simple clean choice between the Shipping=Billing and then the possibility to edit the Shipping address (and as a bonus the possibility to edit the billing address but that is already too much).
The php view looks like this:
Code:
<?php
/**
* @package HikaShop for Joomla!
* @version 2.6.2
* @author hikashop.com
* @copyright (C) 2010-2016 HIKARI SOFTWARE. All rights reserved.
* @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
*/
defined('_JEXEC') or die('Restricted access');
?><?php
if($this->identified) {
$config = hikashop_config();
$address_selector = (int)$config->get('checkout_address_selector', 0);
$mainId = 'hikashop_checkout_address_billing_only';
$leftId = 'hikashop_checkout_billing_address';
$mainClass = 'hikashop_checkout_address_billing_only';
$leftClass = 'hikashop_checkout_billing_address';
if($this->has_shipping) {
$mainId = 'hikashop_checkout_address';
$leftId = 'hikashop_checkout_address_left_part';
$mainClass = 'hikashop_checkout_address';
$leftClass = 'hikashop_checkout_address_left_part';
}
if(HIKASHOP_RESPONSIVE) {
$mainClass .= ' '.HK_GRID_ROW;
$leftClass .= ' '.HK_GRID_COL_6;
}
?>
<div id="<?php echo $mainId; ?>" class="<?php echo $mainClass; ?>">
<div id="<?php echo $leftId; ?>" class="<?php echo $leftClass; ?>">
<fieldset class="hika_address_field" id="hikashop_checkout_billing_address">
<div id="hika_checkout_adress_empty_field">Deze adres wordt gebruikt voor de facturatie</div>
<legend><?php echo JText::_('HIKASHOP_BILLING_ADDRESS'); ?></legend>
<?php
if(empty($address_selector) || $address_selector == 0) {
$this->type = 'billing';
echo $this->loadTemplate('view');
} else {
$this->type = 'billing';
echo $this->loadTemplate('select');
}
if($this->has_shipping) {
?>
</fieldset>
</div>
<div id="hikashop_checkout_address_right_part" class="hikashop_checkout_address_right_part<?php if(HIKASHOP_RESPONSIVE){ echo ' '.HK_GRID_COL_6;} ?>">
<fieldset class="hika_address_field" id="hikashop_checkout_shipping_address">
<legend><?php echo JText::_('HIKASHOP_SHIPPING_ADDRESS'); ?></legend>
<?php
$checked = '';
$style = '';
$override = false;
foreach($this->currentShipping as $selectedMethod){
if(!empty($selectedMethod) && method_exists($selectedMethod, 'getShippingAddress')) {
$override = $selectedMethod->getShippingAddress();
}
}
if(!empty($override)) {
?> <span class="hikashop_checkout_shipping_address_info"><?php
echo $override;
?></span>
<?php
} else {
if($config->get('shipping_address_same_checkbox', 1)) {
$onclick = 'return hikashopSameAddress(this.checked);';
if($this->shipping_address==$this->billing_address){
$checked = 'checked="checked" ';
$style = ' style="display:none"';
$nb_addresses = count(@$this->addresses);
if($nb_addresses==1){
$address = reset($this->addresses);
if(!empty($address_selector)) {
$onclick='if(!this.checked) { window.localPage.switchAddr(0, \'shipping\'); } '.$onclick;
}else{
$onclick='if(!this.checked) { hikashopEditAddress(document.getElementById(\'hikashop_checkout_shipping_address_edit_'.$address->address_id.'\'),1,false); } '.$onclick;
}
}
}
?>
<label for="same_address">
<input class="hikashop_checkout_shipping_same_address inputbox" <?php echo $checked; ?>type="checkbox" id="same_address" name="same_address" value="yes" alt="Same address" onclick="<?php echo $onclick; ?>" />
<?php echo JText::_('SAME_AS_BILLING');?>
</label>
<?php
} else {
$style = '';
}
?>
<div class="hikashop_checkout_shipping_div" id="hikashop_checkout_shipping_div" <?php echo $style;?>>
<?php
$this->type = 'shipping';
if(!empty($address_selector)) {
echo $this->loadTemplate('select');
} else {
echo $this->loadTemplate('view');
}
?>
</div>
<?php
}
}
?>
</fieldset>
</div>
</div>
<div style="clear:both"></div>
<?php
}else{
}
2) When in the checkout the customer can't move back to the previous step. E.g. if the customer chose to checkout as guest, and he fills in the email and his address in the first step, and then he is send to the second step, choosing the billing and shipping address, he can't go back to the first step to look at the cart or edit the email address anymore.
3) The checkout flow steps that are can be displayed are not working properly as they are hardcoded links to further steps in teh checkout process. So e.g. if I chose Login-Adress-Shipping choice-Payment choice checkout steps, the customer that is at the first step will be able to hover its mouse above the last step without going through the whole process and it will show as active link. Upon click it will move him to the last step, but that will cause an error obviously.
4) How can I let the customer see the total price of his order including the shipping costs? If I chose one shipping method to be automatic it will add the price to the shopping cart price, but it won't show any line with the "shipping costs" in the cart on the checkout. When I let the customer to chose the shipping method at the same step as when displaying the cart, it won't show it either. There's also no total overview of the total costs including the shipping or e.g. banking or other custom costs. It's quite crucial that the customers get to see the total amount due, including shipping etc, before they are going to payment.
Thank you
Last edit: 10 years 4 months ago by Osindelka.
Please Log in or Create an account to join the conversation.
10 years 4 months ago - 10 years 4 months ago #239461
by Osindelka
Replied by Osindelka on topic checkout, billingXshipping, steps, shippping price
Thank you for the great, fast and clear support. I thought its better to put all issues together as they all concern the checkout.
I would like to update, but when I got to the HikaShop update tab in Joomla it shows that my 2.6.2 as up to date.
1) It worked out great, however there are still two issues.
a) The delete buttons are gone but when you click on the edit button and get to fill the address, there's still the cross button at the right top corner when you edit the address.
b) When you click on the tick button at the top right corner next to it, it should save the edited address. But it also instantly sends you to the next step of the checkout process, just like if you clicked on next. That should not happen I think. The customer should first see that he successfully edited and filled a new address and then click on next. But I am not sure if that is a good approach as the customer might just as well want to edit the address and then click on next right away, without having first saved the new address.
I think the best approach would be
=> keep the tick button to allow the customer to save the changes, but without sending him to the next step.
=> in the case that he edits the address and clicks the next button, without saving the changes first, automatically save the changes and send the customer to the next step.
I mean the tick buttons in the circles. The cross buttons should go away.
2) OK, its not really necessary. But maybe such option could be interesting for a future Hika versions? I think that in anyway it would be handy if the customers could see the email address they filled in the guest mode. Maybe in the final overview?
3) What I meant is that there would be active links only for the already made steps. I.e. the customer could move back in step via the link, but he could move forward only via the button Next. As it is now, the customers can chose to click on the end step directly from the first step, without going through all the other steps.
4) I meant that when I had the chose a shipping method and the cart together in the first step, checking the shipping does not change the amounts in the cart. But that is not really necessary. I just follow you advice and add a cart also in the last step as well, when the total price is displayed including the shipping.
It works just fine. Thank you.
PS: Would you remove the address bar from you print screen in the previous post. Thank you.
I would like to update, but when I got to the HikaShop update tab in Joomla it shows that my 2.6.2 as up to date.
1) It worked out great, however there are still two issues.
a) The delete buttons are gone but when you click on the edit button and get to fill the address, there's still the cross button at the right top corner when you edit the address.
b) When you click on the tick button at the top right corner next to it, it should save the edited address. But it also instantly sends you to the next step of the checkout process, just like if you clicked on next. That should not happen I think. The customer should first see that he successfully edited and filled a new address and then click on next. But I am not sure if that is a good approach as the customer might just as well want to edit the address and then click on next right away, without having first saved the new address.
I think the best approach would be
=> keep the tick button to allow the customer to save the changes, but without sending him to the next step.
=> in the case that he edits the address and clicks the next button, without saving the changes first, automatically save the changes and send the customer to the next step.
I mean the tick buttons in the circles. The cross buttons should go away.
2) OK, its not really necessary. But maybe such option could be interesting for a future Hika versions? I think that in anyway it would be handy if the customers could see the email address they filled in the guest mode. Maybe in the final overview?
3) What I meant is that there would be active links only for the already made steps. I.e. the customer could move back in step via the link, but he could move forward only via the button Next. As it is now, the customers can chose to click on the end step directly from the first step, without going through all the other steps.
4) I meant that when I had the chose a shipping method and the cart together in the first step, checking the shipping does not change the amounts in the cart. But that is not really necessary. I just follow you advice and add a cart also in the last step as well, when the total price is displayed including the shipping.
It works just fine. Thank you.PS: Would you remove the address bar from you print screen in the previous post. Thank you.
Last edit: 10 years 4 months ago by Osindelka.
Please Log in or Create an account to join the conversation.
10 years 4 months ago - 10 years 4 months ago #239758
by Osindelka
Replied by Osindelka on topic checkout, billingXshipping, steps, shippping price
Hi,
I see. So there is no way that Hikashop can't simply put just one billing and one shipping address (independent) next to each other in the checkout process? Like here under? That is quite a drawback then.
This is what I certainly expect from a standard webshop checkout.
Please note that there are similar threads about this same issue and more people run to it. Like e.g. here:
www.hikashop.com/forum/checkout/884307-e...g-address-issue.html
www.hikashop.com/forum/checkout/883690-d...address-problem.html
www.hikashop.com/forum/checkout/877232-c...kashop-checkout.html
As I am looking at the address_select file wouldn't it be also possible with a css trick? If only the first and second address on the page would get a specific ID or class. I could then specify the style to not display either the second address on the left pane or not display the first address on the right pane.
I see. So there is no way that Hikashop can't simply put just one billing and one shipping address (independent) next to each other in the checkout process? Like here under? That is quite a drawback then.
This is what I certainly expect from a standard webshop checkout.
Please note that there are similar threads about this same issue and more people run to it. Like e.g. here:
www.hikashop.com/forum/checkout/884307-e...g-address-issue.html
www.hikashop.com/forum/checkout/883690-d...address-problem.html
www.hikashop.com/forum/checkout/877232-c...kashop-checkout.html
As I am looking at the address_select file wouldn't it be also possible with a css trick? If only the first and second address on the page would get a specific ID or class. I could then specify the style to not display either the second address on the left pane or not display the first address on the right pane.
Last edit: 10 years 4 months ago by Osindelka. Reason: more links to forum with this topic
Please Log in or Create an account to join the conversation.
10 years 4 months ago #239868
by Osindelka
Replied by Osindelka on topic checkout, billingXshipping, steps, shippping price
Is there a way how to add the custom CSS just to the address with the lowest ID using php address select file? I did not find one using php. I guess that would require adjusting that javascrip there?
It goes about adding custom CSS to this html:
to this line:
I tried adding also this or other condtitions like this
here:
but that just gives the same class to all the divs, irrespective of whether there is 1 or more addresses. They all get the same class, which makes it impossible to select one with a custom style. Is there no way how to do it? I see that the php is fired just when the page loads or re-loads. Nothing happens when new address is created. Otherwise there is the onchange javascript that choses which address will be displayed. I would not know how to edit it.
It would also be enough to give a custom class to the this div for the first address.
All this in order to be able to get rid of the edit button for the first address on the right side via CSS.
So at the moment what I got is using the drop down menu, getting rid of it using CSS on the left side of the screen. It looks like this for the first address.
and for the second address, which serves as shipping address.
Any idea as about how to get rid of that edit button on the first address would be appreciated.
It goes about adding custom CSS to this html:
Code:
<div id="hikashop_checkout_shipping_address_selection" style="">
<select id="hikashop_checkout_address_shipping_selector" class="hikashop_field_dropdown" onchange="window.localPage.switchAddr(this, 'shipping',156);" name="hikashop_address_shipping">
<option selected="selected" value="156">The BILLING Address This should be - a, (Netherlands)</option>
<option value="157">The Shipping Address This should be - b, (Netherlands)</option>
<option value="0">- Nieuw adres -</option>
</select>
<div id="hikashop_checkout_selected_shipping_address">
<div id="hikashop_address_shipping_156">
<div class="hika_edit">
<div class="hikashop_address_content" onclick="return window.addressMgr.click(this,156,'hikashop_address_shipping_156','shipping');">
to this line:
Code:
<div id="hikashop_checkout_selected_shipping_address">
I tried adding also this or other condtitions like this
Code:
class="<?php $nb_myaddresses = count(@$this->addresses); ?><?php if($nb_myaddresses == 1) {echo hikashop_custom_first_address;} ?>"
here:
Code:
echo JHTML::_('select.genericlist', $values, 'hikashop_address_'.$this->type, 'class="hikashop_field_dropdown" onchange="window.localPage.switchAddr(this, \''.$this->type.'\','.(int)$current.');"', 'value', 'text', $current, 'hikashop_checkout_address_'.$this->type.'_selector');
?><div id="hikashop_checkout_selected_<?php echo $this->type; ?>_address" class="<?php $nb_myaddresses = count(@$this->addresses); ?><?php if($nb_myaddresses == 1) {echo hikashop_custom_first_address;} ?>">
but that just gives the same class to all the divs, irrespective of whether there is 1 or more addresses. They all get the same class, which makes it impossible to select one with a custom style. Is there no way how to do it? I see that the php is fired just when the page loads or re-loads. Nothing happens when new address is created. Otherwise there is the onchange javascript that choses which address will be displayed. I would not know how to edit it.
It would also be enough to give a custom class to the this div for the first address.
Code:
<div class="hika_edit">
All this in order to be able to get rid of the edit button for the first address on the right side via CSS.
So at the moment what I got is using the drop down menu, getting rid of it using CSS on the left side of the screen. It looks like this for the first address.
and for the second address, which serves as shipping address.
Any idea as about how to get rid of that edit button on the first address would be appreciated.
Please Log in or Create an account to join the conversation.
Time to create page: 0.455 seconds