Removing cost when radio-button is selected, Ruby on rails

Viewed 69

I´m learning ruby on rails by creating a Ecommerce app.

My problem is how would I remove the delivery cost if the customer has either selected Pick up in store or the total amount is higher than $100?

So when the Pick up in store or when total amount is grater than $100 the delivery cost should be removed.

I've used if and else to get the desired result. But by using that the Total cost is not updating when the radio buttons are selected.

This is the code with out the ifand else

    <tr>
            <th><p>Products Total: </p></th>
            <th><p>Delivery Cost: </p></th>
            <th><p>Total Cost: </p></th>
    </tr>
    <tr>
      <td><p ><%= @cart.total_price_usd %></p></td>
      <td><p ><%= @del_cost_usd %> </p></td>
      <td><p ><%= @cart.total_price_usd + @del_cost_usd%></p></td>   
    </tr>

    <div>   
      <li><%= f.radio_button :pick_up, "1", checked: false, class: 'delivery-options', data: { question: "Pick up items in store" }  %> 
      <%= f.label :pick_up, "Pick up items in store" %></li>

     <li><%= f.radio_button :pick_up, "0",  checked: true, class: 'delivery-options' , data: { question: "Have items sent by mail" } %> 
     <%= f.label :pick_up, "Have items sent by mail", class: ''  %></li> 
    </div>

Can someone inform me on the results I want.

This is probably easy points for the one with the experience

TIA Codegirl

1 Answers

I have a plan to solve that.

Give the DOMs you show label and value of Delivery Cost a class to toggle their display attribute:

<p class="delivery-cost-fields">Delivery Cost: </p>
<p class="delivery-cost-fields"><%= @del_cost_usd %> </p>

For your 'Pick up items in store' radio button, define it's 'onchange' like below:

<%= f.radio_button :pick_up, "1", checked: false, class: 'delivery-options', data: { question: "Pick up items in store" }, onchange: "$('.delivery-cost-fields').toggleClass('hidden', true)"  %> 

For your 'Have items sent by mail' radio button, define it's 'onchange' like below:

<%= f.radio_button :pick_up, "0",  checked: true, class: 'delivery-options' , data: { question: "Have items sent by mail" }, onchange: "$('.delivery-cost-fields').toggleClass('hidden', false)" %>

Define a hidden css class:

.hidden {display: none;}

Hope this help.

Related