Klikalny cały wiersz wyboru przewoźnika

Większość przycisków i etykiet w Preście jest łatwych do kliknięcia, z wyjątkiem wyboru przewoźnika, gdzie klienci muszą celować w malutkie kółeczko. Aktywny obszar jest taki jak na poniższym obrazku:

Zmieniając parę linijek szablonu oraz dostosowując reguły css, można sprawić aby był znacznie większy:

(zobacz tę poprawkę w działaniu w naszym sklepie demo)

Aby uzyskać taki efekt, musisz zmienić kilka linijek w pliku order-carrier.tpl w folderze swojego szablonu.

Dodaj poniższy kod do wszystkich komórek wiersza wyboru przewoźnika z wyjątkiem pierwszej:

onclick="$('#delivery_option_{$id_address|intval}_{$option@index}').click().click();"

Czyli na przykład, musisz zmienić:

<td class="delivery_option_logo">

na:

<td class="delivery_option_logo" onclick="$('#delivery_option_{$id_address|intval}_{$option@index}').click().click();">

Następnie dodaj poniższe reguły do pliku global.css (lub dopasuj je tak, aby pasowały do Twojego szablonu):

/* Delivery option row clickable */

#order .delivery_option > div > table.resume td,
#order .delivery_option > div > table.resume td.delivery_option_logo,
#order-opc .delivery_option > div > table.resume td,
#order-opc .delivery_option > div > table.resume td.delivery_option_logo {
   border: none;
   cursor: pointer;
}

#order .delivery_option > div > table.resume td:first-child,
#order-opc .delivery_option > div > table.resume td:first-child {
   cursor: default;
}

#order .delivery_option > div > table.resume,
#order-opc .delivery_option > div > table.resume {
   height: 90px;
}

#order .delivery_option > div > table.resume:hover,
#order-opc .delivery_option > div > table.resume:hover {
   background: #fdfdfd;
}

#order .delivery_option > div > table.resume td.delivery_option_radio,
#order-opc .delivery_option > div > table.resume td.delivery_option_radio {
   width: 13px;
   padding-left: 20.5px;
}

#order .delivery_option > div > table.resume td.delivery_option_logo,
#order-opc .delivery_option > div > table.resume td.delivery_option_logo {
   padding-left: 41.5px;
}

---

Ta strona jest elementem naszej listy najczęstszych poprawek w skrypcie Prestashop, aby otrzymać pełną listę, podaj swój mail w formularzu na tej stronie