There is a shop on Ucoz, in the "Checkout" section there is a payment method. Modified using css form of payment.
Originally looked like this: Original view After did so: View after

So that's actually the problem, when you hover the mouse, you need to press on the "Title" or "Checkbox" for example: The title "Bank card" or "Checkbox" which is nearby to choose. The question actually is, how to connect so that you can click on the entire perimeter of the CSS shell and not just on the header or checkbox?

This is all in the $ PAYMENT_LIST $ variable

  • I hope to help! - Bozak
  • html-code at least show - andreymal
  • multisoc.ru look, I have no idea how to get it from a variable! See the code on the checkout page! - Bozak
  • β€œCode look” - so you do not hesitate to attach it to the question text - andreymal
  • Oh, finally the question on uCoz, and I really thought it would not haunt me: D - CbIPoK2513 February

1 answer 1

Alas, I did not work with the online store at uCoz .. So I’m not going to tell you where to insert this code, but look for something like a "payment page" ..

There before </body> insert the following code:

 <script> $('#payments-list').on('click', 'tr', function(){ var label = $(this).find('input[type="radio"]'); if(label.prop('checked') == false) { label.prop('checked', 'true'); } }); </script>

This is jQuery code, but it is unnecessary to connect the library itself, uCoz initially uses it.

Here is an example of how this will work.

 $('#payments-list').on('click', 'tr', function(){ var label = $(this).find('input[type="radio"]'); if(label.prop('checked') == false) { label.prop('checked', 'true'); } }); 
 table { border-collapse: collapse; border-spacing: 0; } #payments-list tr, #delivery-list tr { display: block; margin-bottom: 10px; cursor: pointer; } #payments-list th, #delivery-list th { width: 35px; } .methods-list td { position: relative; font-size: 12px; text-align: left !important; left: 5px; } элСмСнт {} #payments-list .label, #delivery-list .label { color: #777; display: block; font-weight: bold; } table.methods-list tr { float: left; width: 200px; height: 70px; margin: 2px; margin-bottom: 2px; padding: 5px; border: 1px solid rgba(52, 152, 219, .1); border-radius: 3px; transition: all .5s; overflow: hidden; position: relative; } label, .label { color: #333; display: inline-block; font-size: 15px; font-weight: lighter; margin-bottom: 5px; padding: 0; text-align: left; } table.methods-list tr:hover { border: 1px solid rgb(231, 76, 60); } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table id="payments-list" class="methods-list"> <tbody> <tr id="payment-block-2" valign="top"> <th><input type="radio" id="pay-type-2" class="payment-item" name="payment" value="2" onclick="shEvOrd('payment',this)" checked=""></th> <td><label class="label" for="pay-type-2">Банковская ΠΊΠ°Ρ€Ρ‚Π°</label>5% комиссия</td> </tr> <tr id="payment-block-4" valign="top"> <th><input type="radio" id="pay-type-4" class="payment-item" name="payment" value="4" onclick="shEvOrd('payment',this)"></th> <td><label class="label" for="pay-type-4">QIWI</label>7% комиссия</td> </tr> <tr id="payment-block-5" valign="top"> <th><input type="radio" id="pay-type-5" class="payment-item" name="payment" value="5" onclick="shEvOrd('payment',this)"></th> <td><label class="label" for="pay-type-5">ЯндСкс Π”Π΅Π½ΡŒΠ³ΠΈ</label>7% комиссия</td> </tr> <tr id="payment-block-7" valign="top"> <th><input type="radio" id="pay-type-7" class="payment-item" name="payment" value="7" onclick="shEvOrd('payment',this)"></th> <td><label class="label" for="pay-type-7">Free-Kassa</label>4% комиссия</td> </tr> <tr id="payment-block-8" valign="top"> <th><input type="radio" id="pay-type-8" class="payment-item" name="payment" value="8" onclick="shEvOrd('payment',this)"></th> <td><label class="label" for="pay-type-8">RoboKassa</label></td> </tr> </tbody> </table>

  • Thanks a lot , helped - Bozak
  • @Bozak, not at all, in return, thanks, you can click on the check mark next to my answer) - CbIPoK2513 February