checkout, billingXshipping, steps, shippping price

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239080

-- 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:
<?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: 8 years 6 months ago by Osindelka.

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
8 years 6 months ago #239159

Hi,

Please create different threads for different questions in the future.

1. First, we've improved the address system behavior with HikaShop 2.6.3 so I would first recommend to update.
Second, what you ask will require several modifications in the different view files involved.
a. To remove the new button, you can remove the code:

<div class="" style="margin-top:6px;">
		<a class="btn btn-success" href="#newAddress" onclick="return window.localPage.switchAddr(0, '<?php echo $this->type; ?>', <?php echo (int)$current; ?>);"><?php echo JText::_('HIKA_NEW'); ?></a>
	</div>
in the file "address_select" via the menu Display>Views.
b. To only display one address for each billing/shipping, you want to add the code:
else continue;
after the code:
if($address->address_id == $current)
				$checked = ' checked="checked"';
in the same view file.
c. To remove the radio, you can change the code:
<input id="hikashop_checkout_<?php echo $this->type;?>_address_radio_<?php echo $address->address_id;?>" class="checkout_<?php echo $this->type;?>_address_radio" type="radio" name="hikashop_address_<?php echo $this->type;?>" value="<?php echo $address->address_id;?>"<?php echo $checked; ?>/>
to:
<input id="hikashop_checkout_<?php echo $this->type;?>_address_radio_<?php echo $address->address_id;?>" class="checkout_<?php echo $this->type;?>_address_radio" type="hidden" name="hikashop_address_<?php echo $this->type;?>" value="<?php echo $address->address_id;?>"<?php echo $checked; ?>/>
in the same view file.
d. To remove the delete button, you want to edit the file "show" of the view "address" and remove:
<a href="<?php echo hikashop_completeLink($delete_url, true);?>" id="<?php echo $uniq_id; ?>_delete" onclick="return window.addressMgr.delete(this,<?php echo $this->address_id; ?>,'<?php echo $uniq_id; ?>','<?php echo $this->type; ?>');"><img src="<?php echo HIKASHOP_IMAGES; ?>delete.png" alt=""/><span><?php echo JText::_('HIKA_DELETE'); ?></span></a>

2. Editing the email address after entering it is not possible. The changes involved would be quite complex as the system hasn't been made to do that. Please contact a developer for help if that's necessary.
Regarding the cart, you can display the view several times on your workflow. So it's not really an issue. It's just a matter of how you choose to display the checkout. For example, in your case, since the cart is alone on the first step, you could just clcik on the "cart" link of the progress bar to go there.

3. Change the code:
if (count($this->steps) > $this->step+1) $link=true;
to:
$link = false;
in the file "step" of the view "checkout" and that will remove the links on the progress bar.

4. The total price is displayed by the cart, as will as the shipping fee.
For example:
-- removed --
For your cart module, I'm not sure. It should display it if you've activated the corresponding option of the module and if your template provider has properly customized the module.
For the fact that you don't get the fee in the cart on the first step, that's normal since you didn't select the shipping method yet. But you can turn on the auto select shipping and payment methods setting of the HikaShop configuration and that will avoid that.

I've checked your checkout and I would recommend to at least add the cart view again in the last step of the checkout so that your customers can check the total with the shipping fee before the final confirmation.

Last edit: 8 years 6 months ago by nicolas. Reason: screenshot removed
The following user(s) said Thank You: Osindelka

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239461

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.

Last edit: 8 years 6 months ago by Osindelka.

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
8 years 6 months ago #239463

Hi,

1. That's because you didn't follow my instructions.
You're supposed to first update and then apply the patches.
Remove the customizations, update your HikaShop and then apply your patches to the new versions of the view files.
The auto update via the Joomla updater is not activated yet as we released the 2.6.3 only a few days ago and are waiting for more feedbacks to do so. In the mean time, you can download the install package via the menu My account>My subscriptions and then install it on your website to update.

2. We're currently working on a new checkout system. Adding in the future once the new system is finished and the kinks are ironed out is indeed a good idea.

3. Doing that is a simple modification. Just add the line:

$link = ( $k > $this->step ? false : true );
after the code
foreach($this->steps as $k => $step){
in the step view file.

The following user(s) said Thank You: Osindelka

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239572

Hallo,

I did not realize that there were changes made in the views that the template override used. I made a backup of the old views and deleted them and updated to 2.6.3.

As I thought, that breaks up the StoreFront template from Gavick. If I just copy the backuped com_hikashop views in the override, the template works just fine with the update. But then joomla won't use the updated views from Hikashop that you want me to use.

As you see now I have a problem. The template used modified views in the override. There's been changes in the Hikashop views files in the meantime. I do need to override the newest Hikashop views to not break the template, while keeping them up to date and then I need to patch them with these customisations up on that.

How do you think should I proceed?

Last edit: 8 years 6 months ago by Osindelka.

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239576

Eh. I just checked again, and the checkout view was not modified by the template, so I should be able to just apply the update to it and then patch it!

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239596

Great! That worked out quite well. All the issues I mentioned seems to be solved. I could not remove the crosses in the address edit, but I think that maybe it is better if they stay there.

I am impressed with your customer care!

Last edit: 8 years 6 months ago by Osindelka.

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239622

There's still a problem I did not notice before.

When the customer now edits the shipping address, the billing address is updated as well and vice versa. Those should be independent.

This is the checkout/address_select view I use:

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	2.6.3
 * @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');
?><div id="hikashop_checkout_<?php echo $this->type; ?>_address_selection"<?php if(empty($this->addresses)) { echo ' style="display:none;"'; } ?>>
<?php
$config = hikashop_config();
$address_selector = (int)$config->get('checkout_address_selector', 0);
$other_type = ($this->type == 'billing') ? 'shipping' : 'billing';

$t = $this->type . '_address';
$current = $this->$t;

if($address_selector == 1) {
	if(!empty($this->addresses)) {
		foreach($this->addresses as $address) {
			$checked = '';
			if($address->address_id == $current)
				$checked = ' checked="checked"';
				else continue;
			if($config->get('auto_submit_methods', 1) && empty($checked))
				$checked = ' onclick="this.form.submit();return false;"';
?>
<div id="hikashop_address_<?php echo $this->type; ?>_selection_<?php echo $address->address_id; ?>" class="address_selection<?php echo ($address->address_id == $current) ? ' address_selected':''; ?>">
	<input id="hikashop_checkout_<?php echo $this->type;?>_address_radio_<?php echo $address->address_id;?>" class="checkout_<?php echo $this->type;?>_address_radio" type="hidden" name="hikashop_address_<?php echo $this->type;?>" value="<?php echo $address->address_id;?>"<?php echo $checked; ?>/>
<?php
			$js = '';
			$params = new stdClass();
			$params->type = $this->type;
			$params->address_id = (int)$address->address_id;
			$params->fieldset_id = 'hikashop_checkout_'.$this->type.'_address_zone';
			echo hikashop_getLayout('address', 'show', $params, $js);
?>
</div>
<?php
		}
	}
?>
	<div id="hikashop_checkout_<?php echo $this->type; ?>_address_template" class="address_selection" style="display:none;">
		<input id="hikashop_checkout_<?php echo $this->type;?>_address_radio_{VALUE}" class="checkout_<?php echo $this->type;?>_address_radio" type="radio" name="hikashop_address_<?php echo $this->type;?>" value="{VALUE}"/>
		{CONTENT}
	</div>

	
	
<?php
}

if($address_selector == 2) {
	$values = array();
	if(!empty($this->addresses)) {
		$addressClass = hikashop_get('class.address');
		foreach($this->addresses as $k => $address) {
			$addr = $addressClass->miniFormat($address);
			$values[] = JHTML::_('select.option', $k, $addr);
		}
	}
	$values[] = JHTML::_('select.option', 0, JText::_('HIKASHOP_NEW_ADDRESS_ITEM'));
	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">
<?php
	if(isset($this->addresses[$current]))
		$address = $this->addresses[$current];
	else
		$address = reset($this->addresses);

	$js = '';
	$params = new stdClass();
	$params->type = $this->type;
	$params->address_id = (int)$address->address_id;
	$params->fieldset_id = 'hikashop_checkout_'.$this->type.'_address_zone';
	$params->cancel_url = '';
	echo hikashop_getLayout('address', 'show', $params, $js);
?>
</div>
<?php
}
?>
</div>
<div id="hikashop_checkout_<?php echo $this->type; ?>_address_zone">
<?php
if(empty($this->addresses)) {
	$js = '';
	$params = new stdClass();
	$params->type = $this->type;
	$params->address_id = 0; //(int)$address->address_id;
	$params->edit = true;
	$params->fieldset_id = 'hikashop_checkout_'.$this->type.'_address_zone';
	echo hikashop_getLayout('address', 'show', $params, $js);
}
?>
</div>

<?php
static $hikashop_address_select_once = false;
if(!$hikashop_address_select_once) {
	$hikashop_address_select_once = true;
?>
<script type="text/javascript">
if(!window.localPage) window.localPage = {};
window.localPage.currentsAddr = {};
window.localPage.switchAddr = function(el, type, old) {
	var d = document, w = window, o = w.Oby, target = d.getElementById('hikashop_checkout_selected_' + type + '_address');
	if(el === 0 || el.value == '0') {
		window.localPage.currentsAddr[type] = old;
		if(target)
			target.innerHTML = '';
		var dest = d.getElementById('hikashop_checkout_' + type + '_address_zone'),
			url = '<?php echo hikashop_completeLink('address&task=edit&cid=0&address_type={TYPE}&fid=hikashop_checkout_{TYPE}_address_zone', true, true); ?>'.replace(/\{TYPE\}/g, type);
		o.xRequest(url, {update:dest});
		if(el === 0)
			return false;
		return;
	}
<?php if($config->get('auto_submit_methods', 1)) { ?>
	if(old === undefined || (old !== undefined && old !== 'reset')) {
		el.form.submit();
		return;
	}
<?php }?>
	if(!target)
		return;
	var url = '<?php echo hikashop_completeLink('address&task=show&cid={CID}&address_type={TYPE}&fid=hikashop_checkout_{TYPE}_address_zone', true, true); ?>'.replace(/\{CID\}/g, el.value).replace(/\{TYPE\}/g, type);
	o.xRequest(url, {update:target});
}
window.Oby.registerAjax('hikashop_address_changed', function(params) {
	if(!params || !params.type)
		return;

	var d = document,
		other_type = (params.type == 'billing') ? 'shipping' : 'billing',
		el_show = d.getElementById('hikashop_checkout_'+params.type+'_address_selection'),
		el_edit = d.getElementById('hikashop_checkout_'+params.type+'_address_zone'),
		el_sel = d.getElementById('hikashop_checkout_address_'+params.type+'_selector');

	var radios = document.getElementsByName("checkout_'+params.type+'_address_radio");
	var selected = false;
	if(radios){
		for (var i = 0, len = radios.length; i < len; i++) {
			if (radios[i].checked) {
				selected = true;
			}
		}
	}

	if(params.edit) {
		el_show.style.display = 'none';
		el_edit.style.display = '';
		return;
	}else if(params.cid == 0 && params.task == 'show' && window.localPage.currentsAddr[params.type]) {
		if(el_sel) {
			el_sel.value = window.localPage.currentsAddr[params.type];
			window.localPage.switchAddr(el_sel, params.type, 'reset');
		}
	}else if(params.type=='shipping' && params.task == 'save' && (!selected || d.getElementById('hikashop_shipping_methods') || d.getElementById('hikashop_payment_methods') || d.getElementById('hikashop_checkout_cart') )){
		d.forms['hikashop_checkout_form'].submit();
	}else if(window.localPage.currentsAddr[params.type] == params.cid && params.cid != 0 && params.type=='billing' && (!d.getElementById('hikashop_checkout_shipping_address') || (d.getElementById('same_address') && d.getElementById('same_address').checked) || !selected) && (d.getElementById('hikashop_shipping_methods') || d.getElementById('hikashop_payment_methods') || d.getElementById('hikashop_checkout_cart') )){
		window.location.reload();
	}
	if(el_edit.children.length == 0)
		return;

	var el_cur = d.getElementById('hikashop_checkout_selected_'+params.type+'_address'),
		content = el_edit.firstChild.innerHTML,
		reg = new RegExp(params.type, 'g');

	el_edit.style.display = 'none';
	el_edit.innerHTML = '';

	if(el_sel && el_cur && params.cid > 0) {
		for(var k in el_sel.options) {
			if(!el_sel.options.hasOwnProperty(k))
				continue;
			if(params.previous_cid && el_sel.options[k].value == params.previous_cid && params.previous_cid != 0 && params.previous_cid != params.cid)
				el_sel.options[k].value = params.cid;
			if(el_sel.options[k].value == params.cid)
				el_sel.options[k].text = params.miniFormat;
		}
		if(params.previous_cid !== undefined && params.previous_cid === 0) {
			var o = d.createElement('option');
			o.text = params.miniFormat;
			o.value = params.cid;
			el_sel.add(o, el_sel.options[el_sel.selectedIndex]);
			el_sel.selectedIndex--;
		}
		if(el_sel.options[el_sel.selectedIndex].value == params.cid)
			el_cur.innerHTML = content;

		var ot_cur = d.getElementById('hikashop_checkout_selected_'+other_type+'_address'),
			ot_sel = d.getElementById('hikashop_checkout_address_'+other_type+'_selector');
		if(ot_sel) {
			for(var k in ot_sel.options) {
				if(!ot_sel.options.hasOwnProperty(k))
					continue;
				if(params.previous_cid && ot_sel.options[k].value == params.previous_cid && params.previous_cid != 0 && params.previous_cid != params.cid)
					ot_sel.options[k].value = params.cid;
				if(ot_sel.options[k].value == params.cid)
					ot_sel.options[k].text = params.miniFormat;
			}
			if(params.previous_cid !== undefined && params.previous_cid === 0) {
				var o = d.createElement('option');
				o.text = params.miniFormat;
				o.value = params.cid;
				ot_sel.add(o, el_sel.options[el_sel.options.length]);
			}
			if(ot_sel.options[ot_sel.selectedIndex].value == params.cid)
				ot_cur.innerHTML = content.replace(reg, other_type);
		}
		if(params.type=='billing' && params.task == 'save' && (!d.getElementById('hikashop_checkout_shipping_address') || (d.getElementById('same_address') && d.getElementById('same_address').checked) || !selected) && (d.getElementById('hikashop_shipping_methods') || d.getElementById('hikashop_payment_methods') || d.getElementById('hikashop_checkout_cart') )){
			d.forms['hikashop_checkout_form'].submit();
		}
	} else if(!el_sel || !el_cur) {
		var target_id = params.previous_cid || params.cid,
			target = d.getElementById('hikashop_address_'+params.type+'_' + target_id),
			other_target = d.getElementById('hikashop_address_'+other_type+'_' + target_id);

		if(target) {
			target.innerHTML = content;
		} else if(params.cid > 0) {
			window.hikashop.dup('hikashop_checkout_'+params.type+'_address_template', {'VALUE':params.cid, 'CONTENT':content}, null);
			window.hikashop.dup('hikashop_checkout_'+other_type+'_address_template', {'VALUE':params.cid, 'CONTENT': content.replace(reg, other_type) }, null);
		}

		if(other_target)
			other_target.innerHTML = content.replace(reg, other_type);
	}
	el_show.style.display = '';
});

window.Oby.registerAjax('hikashop_address_deleted', function(params) {
	if(!params || !params.type)
		return;

	var d = document, w = window, o = w.Oby,
		other_type = (params.type == 'billing') ? 'shipping' : 'billing',
		el_show = d.getElementById('hikashop_checkout_'+params.type+'_address_selection'),
		el_edit = d.getElementById('hikashop_checkout_'+params.type+'_address_zone'),
		el_cur = d.getElementById('hikashop_checkout_selected_'+params.type+'_address'),
		el_sel = d.getElementById('hikashop_checkout_address_'+params.type+'_selector');
		reg = new RegExp(params.type, 'g');

	if(params.cid <= 0)
		return;

	if(el_sel && el_cur) {
		for(var k in el_sel.options) {
			if(!el_sel.options.hasOwnProperty(k))
				continue;
			if(el_sel.options[k].value == params.cid) {
				el_sel.remove(k);
				break;
			}
		}
		o.fireEvent(el_sel,'change');

		var ot_cur = d.getElementById('hikashop_checkout_selected_'+other_type+'_address'),
			ot_sel = d.getElementById('hikashop_checkout_address_'+other_type+'_selector');
		if(ot_sel) {
			for(var k in el_sel.options) {
				if(!el_sel.options.hasOwnProperty(k))
					continue;
				if(ot_sel.options[k].value == params.cid) {
					ot_sel.remove(k);
					break;
				}
			}
			o.fireEvent(ot_sel,'change');
		}
	} else {
		var targets = ['hikashop_address_' + params.type + '_selection_' + params.cid, 'hikashop_address_' + other_type + '_selection_' + params.cid];
		for(var i = 0; i < targets.length; i++) {
			var s = d.getElementById(targets[i]);
			if(s)
				s.parentNode.removeChild(s);
		}
	}
});

window.Oby.registerAjax('hikashop_address_click', function(params) {
	if(!params.type || !params.cid)
		return;
	var d = document, w = window, o = w.Oby,
		r = d.getElementById('hikashop_checkout_' + params.type + '_address_radio_' + params.cid);
	if(r)
		r.checked = 'checked';
	r = d.getElementById('hikashop_checkout_' + params.type + '_address_selection');
	for(var i = r.childNodes.length - 1; i >= 0; i--) {
		var e = r.childNodes[i];
		if(!e) continue;
		if(!e.tagName || e.tagName.toLowerCase() != 'div') continue;
		o.removeClass(e, 'address_selected');
	}
	r = d.getElementById('hikashop_address_' + params.type + '_selection_' + params.cid);
	o.addClass(r, 'address_selected');
});
</script>
<?php
}

However the same bug happens also when I use the default 2.6.3 checkout/address_select.php file

In fact in all versions of the view file it is the same. Those changes don't solve the problem, it just makes the shipping and billing address the same and the changes happening to both of them. That is pointless.

I need one billing address on the left side that can be edited and one independent pre filled shipping address on the right side that can be edited.

Last edit: 8 years 6 months ago by Osindelka.

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
8 years 6 months ago #239672

Hi,

It's not a bug. It's normal. You're using the same address for both the billing and the shipping. So when you edit the address, it updates the address for both. If you want a different address between them, you have to click on the "new" button and that will create a new address for the area where you clicked on "new" and that will use that address instead.
It would require duplicating automatically the address used in the billing area and auto select it instead of the other one to do what you want.
It's possible but more involved.
Please understand that the address views haven't been made to work like you want.
I already spent a lot of time providing you custom modifications which are outside of user support.
If you need someone to work on such modifications please contact our partners:
www.hikashop.com/home/our-partners.html

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239758

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.

Last edit: 8 years 6 months ago by Osindelka. Reason: more links to forum with this topic

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239761

There's certainly a CSS trick possible using something like

<?php if($address->address_id > $current)

Last edit: 8 years 6 months ago by Osindelka.

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239763

This works partially. It gives a custom class to the bottom and top addresses which can then be used in CSS for display: none;
It should be possible to do this better. The key is to be able to select between addresses with the highest and lowest address-id and assign them custom styles.

in place of this in the address_select view php file

<div id="hikashop_address_<?php echo $this->type; ?>_selection_<?php echo $address->address_id; ?>" class="address_selection<?php echo ($address->address_id == $current) ? ' address_selected':''; ?>">

this
<div id="hikashop_address_<?php echo $this->type; ?>_selection_<?php echo $address->address_id; ?>" class="<?php if($address->address_id > $current) {echo hikashop_custom_address_left_css_id;} else {echo hikashop_custom_address_right_css_id;}?> address_selection<?php echo ($address->address_id == $current) ? ' address_selected':''; ?>">

and CSS styling
.hikashop_checkout_address_left_part .hikashop_custom_address_left_css_id,
.hikashop_checkout_address_right_part .hikashop_custom_address_right_css_id  {
display: none;
}

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
8 years 6 months ago #239781

Hi,

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?

How about changing the "address selector" to "dropdown" in the HikaShop configuration ? Maybe it will better fit what you're looking for ?

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239833

That would work for the billing address. If use the CSS beneath and get rid of the dropdown on the left side the customer sees only one billing address.

.hikashop_checkout_address_left_part .hikashop_field_dropdown {
display: none;
}

However that doesn't solve the confusion on the right side. If there would be a way how to get rid of the first address and the "new" out of the dropdown, that would help, but it would not look that nice anyway.

You see, the problem is that multiple shipping and billing addresses are too confusing for the customers. Especially when those addresses show on both sides.

Last edit: 8 years 6 months ago by Osindelka.

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239849

Hallo,

I think that this solution is not so bad. But I need a little help with it. I need to be able to add a custom class to the address with the lowest address ID (this will be default the billing address) when using the drop down menu.

The idea is as follows. I get rid of the drop down menu on the left side using CSS:

.hikashop_checkout_address_left_part .hikashop_field_dropdown {
display: none;
}

Then I need to get rid of the edit button for the address wit the lowest address ID on the right side using CSS. For that I need to assign a custom class to it using:
?php if($address->address_id == $current) {echo hikashop_custom_address_left_css_id;}

But I am not sure where should I find and assign the custom class to this div when the dropdown menu selector is selected. I don't see it in the view file. I see just the other two variants i.e if($address_selector == X}. Could you hint me?

Then I can get rid of it using CSS:
.hikashop_checkout_address_right_part #hikashop_checkout_selected_shipping_address.my_custom_class .hika_edit {
display: none;
}

The result would be that on the left side there would be just one billing address, it would be already prefilled from the registration. The customer could edit this address.

On the right side there would be drop down menu, the same address chosen and displayed under. There would be no edit button for this adders. In the drop down menu there would be choice to make a new address. When the customer would make a new address, it would display under as chose and it would be possible to edit it.

Last edit: 8 years 6 months ago by Osindelka.

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239868

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:

<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:
<div id="hikashop_checkout_selected_shipping_address">

I tried adding also this or other condtitions like this
class="<?php $nb_myaddresses = count(@$this->addresses); ?><?php if($nb_myaddresses == 1) {echo hikashop_custom_first_address;} ?>"

here:
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.
<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.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
8 years 6 months ago #239835

Hi,

I understand what you mean. We actually want to allow for a simpler interface with something close to what you're talking about for HikaShop 3. We're currently working on redoing the whole checkout and this is part of it.
So that will be solved in a few months when we can finally release it. But until then, I don't see any easy solution where you can just change/add a few lines of code to the current system to do that. It can be done, but it would require a developer to spend one or several days on it.

Regarding your question with the class, you could try something like that:
<?php $app = JFactory::getApplication(); ?>
<div class="<?php echo $this->type.($this->type=='shipping' && $this->address_id==$app->getUserState(HIKASHOP_COMPONENT.'.billing_address') ? '_same_as_billing' : '' ); ?>">

That should give you three CSS classes:
billing
shipping
shipping_same_as_billing

Last edit: 8 years 6 months ago by nicolas.

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #239990

Hi,

Thank you for the hint. I tried the code. It works only partially, but it doesn't do what is needed the most. Maybe I am doing something wrong.

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 $app = JFactory::getApplication(); ?><?php echo $this->type.($this->type=='shipping' && $this->address_id==$app->getUserState(HIKASHOP_COMPONENT.'.billing_address') ? '_same_as_billing' : '' ); ?>">

It gives class "billing" to every address on the left side, i.e. every billing address and it gives class "shipping" to every shipping address.

However it doesn't give "shipping_same_as_billing" to any address.

The idea would be to give the class "shipping_same_as_billing" to the address with the lowest id, right? That's in fact the only thing you need as the billing and shipping containing divs already have different classes anyway.

It would need the script to check which address from all the addresses has the lowest ID (address_id) and assigns that containing div a custom class "shipping_same_as_billing"

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
8 years 6 months ago #240009

Hi,

What the code I gave do is that it set the class shipping_same_as_billing when the current address being edited/shown is a shipping address and that it is the same as the billing address.
But looking at your code it seems that you added your div in the address/select view file after the dropdown, while I coded that piece for the address/show view file to replace the div there: <div class="hika_edit">
So I would recommend to put it there and it should work better.

The following user(s) said Thank You: Osindelka

Please Log in or Create an account to join the conversation.

  • Posts: 32
  • Thank you received: 0
8 years 6 months ago #240334

YES, thank you.

It needs to go to the viewfile show.php in address folder. Like this:

?><div id="<?php echo $uniq_id; ?>">
<?php
	if(!isset($this->edit) || $this->edit !== true ) {
?>		<div class="hika_edit <?php $app = JFactory::getApplication(); ?><?php echo $this->type.($this->type=='shipping' && $this->address_id==$app->getUserState(HIKASHOP_COMPONENT.'.billing_address') ? '_same_as_billing' : '' ); ?>">
			<a href="<?php echo hikashop_completeLink($update_url, true);?>" onclick="return window.hikashop.get(this,'<?php echo $this->fieldset_id; ?>');"><img src="<?php echo HIKASHOP_IMAGES; ?>edit.png" alt=""/><span><?php echo JText::_('HIKA_EDIT'); ?></span></a>
		</div>

The custom CSS class allows to not display the edit button for the shipping address that is the same as the billing address.

There´s one problem. When the customer edits the billing address, the custom class on the shipping address edit button gets changed to shipping, as the system on that moment doesn´t see the addresses as being the same as it probably first checks and assigns the class and just then edits the shipping address to be the same.

But this helps anyway. I have implemented that. Thank you!

Please Log in or Create an account to join the conversation.

Time to create page: 0.097 seconds
Powered by Kunena Forum