Modify on shipping method selection block

[DARKF3D3]

I'm trying to customize the courier selection at checkout with a different style depending on whether it is selected or not.

This is the 'container' of the courier block:

<div class="row delivery-option js-delivery-option">
</div>

I then modified it by adding the class "selected", if the selected delivery method ($delivery_option) is equal to the current delivery method ($carrier_id):

<div class="row delivery-option js-delivery-option{if $delivery_option == $carrier_id} selected{/if}">
</div>

The problem is that the change does not happen automatically but only when the page loads or if you update it manually.
Do you know how to make the class update every time the selected carrier changes?

[Eutanasio]

There's an error apparently with Cloudflare that doesn't allow me to answer you here in the post, so I write the instructions on a PDF you can find here attached

instructions.pdf

[DARKF3D3]

@Eutanasio I'm unable to download pdf, can't you post it in a different way? Also a screenshow could be ok...

Thanks

[Eutanasio]

22 minutes ago, DARKF3D3 said:

@Eutanasio I'm unable to download pdf, can't you post it in a different way? Also a screenshow could be ok...

Thanks

can't share coding on an image, it's worth nothing. PDF is perfectly downloadable

[endriu107]

Content from @Eutanasio file below:

Quote

You can achieve this by using JavaScript to add event listeners on the radio buttons representing the couriers. When a courier is selected, update the class accordingly.
First, update your template code to include a unique identifier for each delivery option:

 

<div class="row delivery-option js-delivery-option" datacarrier-id="{$carrier_id}"></div>

 

Quote

Next, create a JavaScript function that updates the class based on the selected carrier:

 

function updateSelectedCarrier() {
 const deliveryOptions = document.querySelectorAll('.jsdelivery-option');
 const selectedCarrierInput = document.querySelector('input[name="delivery_option"]:checked');
 const selectedCarrierId = selectedCarrierInput ? selectedCarrierInput.value.split(',')[0] : null;
 deliveryOptions.forEach(option => {
 const carrierId = option.dataset.carrierId;
 if (carrierId === selectedCarrierId) {
 option.classList.add('selected');
 } else {
 option.classList.remove('selected');
 }
 });
}

 

Quote

Now, add event listeners to the radio buttons representing the couriers. You can use the input[name="delivery_option"] selector to target these elements. You should also call updateSelectedCarrier() once at the beginning to set the initial state.

 

document.addEventListener('DOMContentLoaded', () => {
 const carrierInputs = document.querySelectorAll('input[name="delivery_option"]'
);
 carrierInputs.forEach(input => {
 input.addEventListener('change',
 updateSelectedCarrier);
 });
 updateSelectedCarrier();
});

 

Quote

This script should be added in your theme's JavaScript file or included within a  script  tag on the page where you want the functionality to be active. With this implementation, the "selected" class will be updated dynamically whenever the selected carrier changes.

 

[DARKF3D3]

Hi, I just tried adding that code to my website but it seem not working. No js error are showed.

On the carrier div I see additional datacarrier-id class. What i noticed it's that after the carrier id there's a comma. That's correct?

<div class="delivery-option js-delivery-option" datacarrier-id="44,">

I also noticed a missing hyphen into the function, on class "jsdelivery-option", so i corrected it to "js-delivery-option". But it still not working.

 const deliveryOptions = document.querySelectorAll('.js-delivery-option');