mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-24 20:36:49 +00:00
Show/Hide shipping address form depending on the checkbox/radio state
This commit is contained in:
@@ -76,6 +76,7 @@
|
||||
checked: (shipping_method.id == selected_shipping_method),
|
||||
name: "shipping_method_id",
|
||||
"data-description": shipping_method.description,
|
||||
"data-requireAddress": shipping_method.require_ship_address,
|
||||
"data-action": "toggle#toggle shippingmethod#selectShippingMethod",
|
||||
"data-toggle-show": shipping_method.require_ship_address
|
||||
= shipping_method_form.label shipping_method.id, shipping_method.name, {for: "shipping_method_" + shipping_method.id.to_s }
|
||||
@@ -83,16 +84,7 @@
|
||||
= payment_or_shipping_price(shipping_method, @order)
|
||||
|
||||
|
||||
%div.checkout-input{ "data-toggle-target": "content", style: "display: none" }
|
||||
= f.check_box "Checkout.ship_address_same_as_billing", { id: "Checkout.ship_address_same_as_billing" }
|
||||
= f.label "Checkout.ship_address_same_as_billing", t(:checkout_address_same), { for: "Checkout.ship_address_same_as_billing" }
|
||||
|
||||
- if spree_current_user
|
||||
%div.checkout-input{ "data-toggle-target": "content", style: "display: none" }
|
||||
= f.check_box "Checkout.default_ship_address", { id: "Checkout.default_ship_address" }
|
||||
= f.label "Checkout.default_ship_address", t(:checkout_default_ship_address), { for: "Checkout.default_ship_address" }
|
||||
|
||||
%div.checkout-input{"data-shippingmethod-target": "shippingMethodDescription"}
|
||||
%div.checkout-input{"data-shippingmethod-target": "shippingMethodDescription", style: "display: none" }
|
||||
#distributor_address.panel
|
||||
%span{"data-shippingmethod-target": "shippingMethodDescriptionContent"}
|
||||
%br/
|
||||
@@ -100,6 +92,46 @@
|
||||
- if @order.order_cycle.pickup_time_for(@order.distributor)
|
||||
= t :checkout_ready_for
|
||||
= @order.order_cycle.pickup_time_for(@order.distributor)
|
||||
|
||||
%div.checkout-input{ "data-toggle-target": "content", style: "display: none" }
|
||||
= f.check_box "Checkout.ship_address_same_as_billing", { id: "Checkout.ship_address_same_as_billing", "data-action": "shippingmethod#showHideShippingAddress", "data-shippingmethod-target": "shippingAddressCheckbox" }
|
||||
= f.label "Checkout.ship_address_same_as_billing", t(:checkout_address_same), { for: "Checkout.ship_address_same_as_billing" }
|
||||
|
||||
%div{"data-shippingmethod-target": "shippingMethodAddress", style: "display: none" }
|
||||
= f.fields :ship_address, model: @order.ship_address do |ship_address|
|
||||
%div.checkout-input
|
||||
= ship_address.label :address1, t("split_checkout.step1.address.address1.label")
|
||||
= ship_address.text_field :address1, { placeholder: t("split_checkout.step1.address.address1.placeholder") }
|
||||
= f.error_message_on "ship_address.address1"
|
||||
|
||||
%div.checkout-input
|
||||
= ship_address.label :address2, t("split_checkout.step1.address.address2.label")
|
||||
= ship_address.text_field :address2, { placeholder: t("split_checkout.step1.address.address2.placeholder") }
|
||||
= f.error_message_on "ship_address.address2"
|
||||
|
||||
%div.checkout-input
|
||||
= ship_address.label :city, t("split_checkout.step1.address.city.label")
|
||||
= ship_address.text_field :city, { placeholder: t("split_checkout.step1.address.city.placeholder") }
|
||||
= f.error_message_on "ship_address.city"
|
||||
|
||||
%div.checkout-input
|
||||
= ship_address.label :state_id, t("split_checkout.step1.address.state_id.label")
|
||||
= ship_address.select :state_id, @countries_with_states, { }, { "data-dependant-select-target": "select" }
|
||||
|
||||
%div.checkout-input
|
||||
= ship_address.label :zipcode, t("split_checkout.step1.address.zipcode.label")
|
||||
= ship_address.text_field :zipcode, { placeholder: t("split_checkout.step1.address.zipcode.placeholder") }
|
||||
= f.error_message_on "ship_address.zipcode"
|
||||
|
||||
%div.checkout-input
|
||||
= ship_address.label :country_id, t("split_checkout.step1.address.country_id.label")
|
||||
= ship_address.select :country_id, @countries, { selected: @order.ship_address.country_id || DefaultCountry.id }, {"data-dependant-select-target": "source", "data-action": "dependant-select#handleSelectChange"}
|
||||
|
||||
- if spree_current_user
|
||||
%div.checkout-input{ "data-toggle-target": "content", style: "display: none" }
|
||||
= f.check_box "Checkout.default_ship_address", { id: "Checkout.default_ship_address" }
|
||||
= f.label "Checkout.default_ship_address", t(:checkout_default_ship_address), { for: "Checkout.default_ship_address" }
|
||||
|
||||
|
||||
.div.checkout-input
|
||||
= f.label :special_instructions, t(:checkout_instructions)
|
||||
|
||||
@@ -3,14 +3,19 @@ export default class extends Controller {
|
||||
static targets = [
|
||||
"shippingMethodDescription",
|
||||
"shippingMethodDescriptionContent",
|
||||
"shippingMethodAddress",
|
||||
"shippingAddressCheckbox",
|
||||
];
|
||||
connect() {
|
||||
// Hide shippingMethodDescription by default
|
||||
this.shippingMethodDescriptionTarget.style.display = "none";
|
||||
this.shippingMethodAddressTarget.style.display = "none";
|
||||
}
|
||||
|
||||
selectShippingMethod(event) {
|
||||
const input = event.target;
|
||||
if (input.tagName === "INPUT") {
|
||||
// Shipping method description
|
||||
if (input.dataset.description.length > 0) {
|
||||
this.shippingMethodDescriptionTarget.style.display = "block";
|
||||
this.shippingMethodDescriptionContentTarget.innerText =
|
||||
@@ -19,6 +24,23 @@ export default class extends Controller {
|
||||
this.shippingMethodDescriptionTarget.style.display = "none";
|
||||
this.shippingMethodDescriptionContentTarget.innerText = null;
|
||||
}
|
||||
// Require a ship address
|
||||
if (
|
||||
input.dataset.requireaddress === "true" &&
|
||||
!this.shippingAddressCheckboxTarget.checked
|
||||
) {
|
||||
this.shippingMethodAddressTarget.style.display = "block";
|
||||
} else {
|
||||
this.shippingMethodAddressTarget.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showHideShippingAddress() {
|
||||
if (this.shippingAddressCheckboxTarget.checked) {
|
||||
this.shippingMethodAddressTarget.style.display = "none";
|
||||
} else {
|
||||
this.shippingMethodAddressTarget.style.display = "block";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user