Carrier row clickable

Most buttons and labels in Prestashop are easy to click, except for the carrier selection, where you need to target the small radio button. In this case active area is very small, something like this:

Changing a few lines in your theme and css rules you can make it much bigger, like this:

(see it in action on our demo store)

To achieve this effect you need to modify your theme's order-carrier.tpl file.

Add the following code to all the table cells in carrier selection row, except for the first one:

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

So for example, you need to change:

<td class="delivery_option_logo">

to:

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

And add this style rules to your global.css file (or adjust existing rules to fit your theme):

/* 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;
}

This page is a part of our list of the most common Prestashop enhancements and fixes. To get the full list, subscribe to our newsletter.

Czym się zajmujemy?

Zajmujemy się tworzeniem modułów, szablonów, optymalizacją, a także kompletnymi wdrożeniami sklepów internetowych.

Sami prowadzimy własny sklep, dlatego możemy podpowiedzieć Ci co warto wdrożyć, aby uzyskać możliwie najlepsze rezultaty w handlu internetowym.



Programowanie

  • Tworzenie nowych modułów i szablonów
  • Integracje z hurtowniami
  • Dodatkowe funkcjonalności
  • Zmiany wyglądu
  • Naprawa błędów
Sklepy Internetowe GreenMouse

Opieka

  • Audyt sklepów
  • Poprawa szybkości
  • Optymalizacja kodu
  • Poprawa funkcjonalności
  • Opieka nad sklepem
TOP