Rendre toute la ligne du transporteur cliquable

[cedricDev1D]

Bonjour à tous,

 

j'aimerais pouvoir sélectionner un transporteur (étape 4 du processus de commande) en cliquant n'importe où sur sa ligne et pas seulement sur le tout petit bouton radio que plusieurs visiteurs m'ont dit ne pas avoir vu. Comme par défaut sur notre boutique c'est le retrait gratuit en magasin qui est coché ça pose problème à ceux qui ont passé commande et qui sont "à l'autre bout de la France"...

 

Merci d'avance de vos conseils.

[Nowis]

Bonjour,

 

Vous pouvez ajouter ce code sur le fichier /themes/votre_theme/order-carrier.tpl

$(document).ready(function() {
    $('.delivery_options>.delivery_option').click(function(){
        $(this).children('.delivery_option_radio').prop('checked', true);
    });
});

A mettre dans une balise script évidemment.

Edited March 7, 2015 by Nowis (see edit history)

[cedricDev1D]

Bon, après avoir passé quelques heures à essayer cette solution séduisante je n'y arrive toujours pas.

J'ai oublié de préciser que la boutique tourne sur la version 1.6 de prestashop...

Je ne désespère pas et ne manquerais pas de poster la solution quand je l'aurais.

 

Un grand merci à toi Nowis pour cette piste prometteuse.

[Nowis]

Bonjour,

 

Problème non résolu alorso on continu, il faut que ça marche !

Pourriez-vous mettre le contenu de votre fichier order-carrier.tpl (/themes/votre_theme/order-carrier.tpl)

 

Avec ce fichier je pourrais adapter mon script pour votre boutique (cela dépent de votre thème, je m'étais basé sur le thème par défaut de la boutique 1.5).

Il ne devrait pas y avoir grand chose à changer.

[cedricDev1D]

Bonjour

voici le code javascript que j'ai mis dans le fichier order-carrier.js :

 

$(document).on('click', '.delivery_option', function(e){
       e.preventDefault();

       $(this).children('.delivery_option_radio').prop('checked', true);//ne marche pas
       alert(clic);//marche
});

 

(Désolé j'ai pas trouvé comment faire un bloc de code js dans l'éditeur du site)

 

Le code du tpl (la partie concernée du moins) :

 

<div class="delivery_options">
                            {foreach $option_list as $key => $option}
                                <div class="delivery_option {if ($option@index % 2)}alternate_{/if}item">
                                    <div>
                                        <table class="resume table table-bordered">
                                            <tr>
                                                <td class="delivery_option_radio">
                                                    <input id="delivery_option_{$id_address}_{$option@index}" class="delivery_option_radio" type="radio" name="delivery_option[{$id_address}]" data-key="{$key}" data-id_address="{$id_address|intval}" value="{$key}"{if isset($delivery_option[$id_address]) && $delivery_option[$id_address] == $key} checked="checked"{/if} />
                                                </td>

 

J'ai pas pu m'y remettre hier mais je te remercie encore pour ton opiniâtreté!

[cedricDev1D]

c'est alert('clic');//qui marche...

 

si je colle le code html dans le post c'est illisible alors j'ai fait une capture d'écran :

[Nowis]

Bonjour,

 

Je viens de tester sur la version 1.6.

 

Dans le fichier order-carrier.js, vous pouvez ajouter cette fonction

$(document).on('click', '.delivery_option', function(){
        var $this = $(this).find('input.delivery_option_radio');
        $("input.delivery_option_radio").prop("checked", false);
        $this.prop("checked", true);
        $.uniform.update();
        var key = $this.data('key');
        var id_address = parseInt($this.data('id_address'));
	if (orderProcess == 'order' && key && id_address)
	    updateExtraCarrier(key, id_address);
	else if(orderProcess == 'order-opc' && typeof updateCarrierSelectionAndGift !== 'undefined')
	    updateCarrierSelectionAndGift();
});

[cedricDev1D]

Excellent!

Ça fait parfaitement l'affaire.

Merci encore.

[Coloranti]

 

Bonjour,

 

Je viens de tester sur la version 1.6.

 

Dans le fichier order-carrier.js, vous pouvez ajouter cette fonction

$(document).on('click', '.delivery_option', function(){
        var $this = $(this).find('input.delivery_option_radio');
        $("input.delivery_option_radio").prop("checked", false);
        $this.prop("checked", true);
        $.uniform.update();
        var key = $this.data('key');
        var id_address = parseInt($this.data('id_address'));
	if (orderProcess == 'order' && key && id_address)
	    updateExtraCarrier(key, id_address);
	else if(orderProcess == 'order-opc' && typeof updateCarrierSelectionAndGift !== 'undefined')
	    updateCarrierSelectionAndGift();
});

 

 

Excellent result, thank you for sharing this.

 

As I could not find similar information on English forum, I would like to go a little bit further: can you please educate me on how to make the customer understand that the entire area is actually clickable? (by adding a mouse hover feature, or mouse arrow become a pointing hand, or anything else)

 

Please feel free to respond in French if you wish.

 

Thank you.

[Jal-art]

Bonjour,

 

Votre code fonctionne correctement et je vous remercie pour le partage.

 

Cependant, dans mon cas il rentre en conflit avec le module Soflexibilité et il est impossible de choisir un point de retrait par exemple.

 

Je vais voir si je peux arranger ça.

 

Merci

[madj]

Bonjour Nowis et Cedric,

Je souhaiterai rendre egalement clickable  toute la zone du transporteur,  pouvez m'eclairer s'il vous plait :

 

1- Dois en mettre le script proposé dans le fichier order-carrier.tpl car je n'ai pas order-carrier.js sous prestashop 1.6 ?

 

2- A quel niveau dois-je inserer ces lignes de code dans le fichier ?

 

3- Comme Jal-art, j'ai socolissimo liberty, j'espere que ce code ne bloque pas le choix des points retrait.

 

Merci encore pour votre aide

Madj