Reload Checkout custom fields on shipping change

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

Hi,

You should be able to do that with such javascript code: 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 :

Thank You nicolas!

That's what I needed!

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. 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!

Hi,

What you want to do is simply to change the line: to: 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 :

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?
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?

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 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 containing the name of the view.

Thanks for the explanation.

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.

Hi,

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

Sorry, did not make myself clear ... this alert does not appear when an order custom field (select) changed.
One solution would be to change the field onchange(...) adding this to the end - i.e. emulating the update additional fields button.
I'd prefer the ajax when fields updated solution.

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