Reload Checkout custom fields on shipping change

  • Posts: 6
  • Thank you received: 0
6 years 3 weeks ago #299924

-- HikaShop version -- : 4.0.0
-- Joomla version -- : 3.8.13
-- PHP version -- : 7.1.21

Hello!

First of all I want to say that I enjoy to build web shop with Hikashop. I am creating on-page checkout and all things are going well. I need to make costumers possibility to choose one of predefined shipping addresses. I did it with custom drop-down field which is perfect. There is only one thing I cant do by myself. The problem is that I want this Drop-down option to show only for one of three shipping options.

I have done that "show_block_fields.php" view understands which shipping_id is selected but only after full browser refresh button pressed (or F5) it gives the real value.
So I need than after changing shipping method AJAX is reloading also Fields block, not only Payment and Cart blocks.

Attachments:

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
6 years 3 weeks ago #299926

Hi,

You should be able to do that with such javascript code:

window.Oby.registerAjax(['checkout.shipping.updated'], function(params){
	// shipping has been changed
});
However, since you already have a registerAjax function in the show_block_field view file which refresh the fields block with the cart is updated, you could simply add the checkout.shipping.updated event to the list of events already registered there :
window.Oby.registerAjax(['checkout.fields.updated','cart.updated'], function(params){
	window.checkout.refreshFields(<?php echo (int)$this->step; ?>, <?php echo (int)$this->module_position; ?>);
});

The following user(s) said Thank You: kaurovs

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

  • Posts: 6
  • Thank you received: 0
6 years 3 weeks ago #299934

Thank You nicolas!

That's what I needed!

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

  • Posts: 292
  • Thank you received: 5
  • Hikashop Business
4 years 6 months ago #319244

Hikashop 4.2.3

I want to refresh custom fields when a different shipping method selected.
Selecting shipping method and pressing F5 works fine.

I've tried adding this line to show_block_shipping.php and nothing I try (lines 255 or 268) refreshes the fields.

window.checkout.refreshFields(<?php echo (int)$this->step; ?>, <?php echo (int)$this->module_position; ?>);
Where should I place it?

Rather than changing the template view an ideal solution would be a Joomla Hikashop plugin event which could be used to trigger this refresh. Then don't have to touch the view!

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
4 years 6 months ago #319253

Hi,

What you want to do is simply to change the line:

window.Oby.registerAjax(['checkout.fields.updated','cart.updated'], function(params){
to:
window.Oby.registerAjax(['checkout.fields.updated','cart.updated','checkout.shipping.updated'], function(params){
in the file checkout / show_block_fields.php view file so that it refreshes itself when the shipping is updated.

If you want to do it in a plugin, it's possible. You want to implement the trigger onCheckoutStepDisplay($layout, &$ret, &$obj, $pos, $options)
and use such code :
function onCheckoutStepDisplay($layout, &$ret, &$obj, $pos, $options) {
if($layout!='fields') return;
echo "<script>
window.Oby.registerAjax(['checkout.shipping.updated'], function(params){
 window.checkout.refreshFields(". (int)$obj->step.", ".(int)$pos.");
}
</script>";
}

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

  • Posts: 292
  • Thank you received: 5
  • Hikashop Business
4 years 6 months ago #319658

Thanks changing the view file worked great, although that's not my ideal solution.

However for my preferred solution the trigger onCheckoutStepDisplay($layout, &$ret, &$obj, $pos, $options) is not being called.

Worked around that using this instead - I set pos to 0, is that a good idea?

function onHikashopBeforeDisplayView(&$view)
{
	if (get_class($view) == 'CheckoutViewCheckout')
	{
		echo "<script>
window.Oby.registerAjax(['checkout.shipping.updated'], function(params){
 window.checkout.refreshFields(" . (int)$view->step . ", 0);
 })
</script>";
	}
}

An alternative would be to call ob_start() in onHikashopBeforeDisplayView and then finding and changing the window.Oby.registerAjax call in the html returned by ob_get_clean() in onHikashopAfterDisplayView trigger.

Other suggestions - ideas why onCheckoutStepDisplay not be being called?

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
4 years 5 months ago #319673

Hi,

Ah yes, onCheckoutStepDisplay will only be called for the plugin corresponding to a view added to the checkout workflow. That's why it was not triggered since you don't have a view for your plugin.
In that case onHikashopBeforeDisplayView is indeed better.
Note however that you can't put 0 for pos. It needs to be the position of the "fields" view on the current step.
You'll have to do a loop on

$view->workflow['steps'][$view->workflow_step]['content']
to get the pos of the fields view.
In that array, each element will be a view. The key of that element in the array will be the pos of the view on the current step. And the value will be an array with
$element['task']
containing the name of the view.

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

  • Posts: 292
  • Thank you received: 5
  • Hikashop Business
4 years 5 months ago #319706

Thanks for the explanation.

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

  • Posts: 292
  • Thank you received: 5
  • Hikashop Business
4 years 4 months ago #321268

Got this half-working now, problem I have is triggering changes when a custom field is changed.

This is my test example - ignoring what I want to do when change event occurs!
Comments below are self-explanatory.

window.Oby.registerAjax(['checkout.shipping.updated'], function(params){
    // Appears OK when shipping changed
    alert('Test1');
});

window.Oby.registerAjax(['checkout.fields.updated'], function(params){
    // Does appear when select custom field on order table changed
    alert('Test2');
});

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
4 years 4 months ago #321270

Hi,

So it looks like it's working. What is your question with this ?

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

  • Posts: 292
  • Thank you received: 5
  • Hikashop Business
4 years 4 months ago #321300

Sorry, did not make myself clear ... this alert does not appear when an order custom field (select) changed.

window.Oby.registerAjax(['checkout.fields.updated'], function(params){
    // Does appear when select custom field on order table changed
    alert('Test2');
});

One solution would be to change the field onchange(...) adding this to the end - i.e. emulating the update additional fields button.
window.checkout.submitFields(3,0);

I'd prefer the ajax when fields updated solution.

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
4 years 4 months ago #321307

Hi,

Ah, I see what you mean. You want to be triggered directly when the onchange happens on any custom order field, and not after the fields are submitted.

In that case, I would recommend to use the addEventListener javascript function to add your own callback to the onchange of each custom field.
You can get the list of the custom fields by searching for all the input tags inside the div of the custom fields area using the javascript function querySelectorAll

The following user(s) said Thank You: brainforge

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

Time to create page: 0.090 seconds
Powered by Kunena Forum