forked from brooksbingham/theme-elegance
wip: update checkout steps styles
This commit is contained in:
parent
6dbaef394c
commit
396fd2c141
@ -25,113 +25,115 @@
|
||||
{extends file='checkout/_partials/steps/checkout-step.tpl'}
|
||||
|
||||
{block name='step_content'}
|
||||
<div class="js-address-form">
|
||||
<form
|
||||
method="POST"
|
||||
action="{url entity='order' params=['id_address' => $id_address]}"
|
||||
data-refresh-url="{url entity='order' params=['ajax' => 1, 'action' => 'addressForm']}"
|
||||
>
|
||||
{if !$step_is_complete}
|
||||
<div class="js-address-form">
|
||||
<form
|
||||
method="POST"
|
||||
action="{url entity='order' params=['id_address' => $id_address]}"
|
||||
data-refresh-url="{url entity='order' params=['ajax' => 1, 'action' => 'addressForm']}"
|
||||
>
|
||||
|
||||
{if !$use_same_address}
|
||||
<h2 class="h4">{l s='Shipping Address' d='Shop.Theme.Checkout'}</h2>
|
||||
{/if}
|
||||
|
||||
{if $use_same_address && !$cart.is_virtual}
|
||||
<p>
|
||||
{l s='The selected address will be used both as your personal address (for invoice) and as your delivery address.' d='Shop.Theme.Checkout'}
|
||||
</p>
|
||||
{elseif $use_same_address && $cart.is_virtual}
|
||||
<p>
|
||||
{l s='The selected address will be used as your personal address (for invoice).' d='Shop.Theme.Checkout'}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{if $show_delivery_address_form}
|
||||
<div id="delivery-address">
|
||||
{render file = 'checkout/_partials/address-form.tpl'
|
||||
ui = $address_form
|
||||
use_same_address = $use_same_address
|
||||
type = "delivery"
|
||||
form_has_continue_button = $form_has_continue_button
|
||||
}
|
||||
</div>
|
||||
{elseif $customer.addresses|count > 0}
|
||||
<div id="delivery-addresses" class="address-selector js-address-selector">
|
||||
{include file = 'checkout/_partials/address-selector-block.tpl'
|
||||
addresses = $customer.addresses
|
||||
name = "id_address_delivery"
|
||||
selected = $id_address_delivery
|
||||
type = "delivery"
|
||||
interactive = !$show_delivery_address_form and !$show_invoice_address_form
|
||||
}
|
||||
</div>
|
||||
|
||||
{if isset($delivery_address_error)}
|
||||
<p class="alert alert-danger js-address-error" name="alert-delivery" id="id-failure-address-{$delivery_address_error.id_address}">{$delivery_address_error.exception}</p>
|
||||
{else}
|
||||
<p class="alert alert-danger js-address-error" name="alert-delivery" style="display: none">{l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>
|
||||
{if !$use_same_address}
|
||||
<h2 class="h4">{l s='Shipping Address' d='Shop.Theme.Checkout'}</h2>
|
||||
{/if}
|
||||
|
||||
<p class="add-address">
|
||||
<a href="{$new_address_delivery_url}"><i class="material-icons"></i>{l s='add new address' d='Shop.Theme.Actions'}</a>
|
||||
</p>
|
||||
|
||||
{if $use_same_address && !$cart.is_virtual}
|
||||
<p>
|
||||
<a data-link-action="different-invoice-address" href="{$use_different_address_url}">
|
||||
{l s='Billing address differs from shipping address' d='Shop.Theme.Checkout'}
|
||||
</a>
|
||||
{l s='The selected address will be used both as your personal address (for invoice) and as your delivery address.' d='Shop.Theme.Checkout'}
|
||||
</p>
|
||||
{elseif $use_same_address && $cart.is_virtual}
|
||||
<p>
|
||||
{l s='The selected address will be used as your personal address (for invoice).' d='Shop.Theme.Checkout'}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{/if}
|
||||
|
||||
{if !$use_same_address}
|
||||
|
||||
<h2 class="h4">{l s='Your Invoice Address' d='Shop.Theme.Checkout'}</h2>
|
||||
|
||||
{if $show_invoice_address_form}
|
||||
<div id="invoice-address">
|
||||
{if $show_delivery_address_form}
|
||||
<div id="delivery-address">
|
||||
{render file = 'checkout/_partials/address-form.tpl'
|
||||
ui = $address_form
|
||||
use_same_address = $use_same_address
|
||||
type = "invoice"
|
||||
type = "delivery"
|
||||
form_has_continue_button = $form_has_continue_button
|
||||
}
|
||||
</div>
|
||||
{else}
|
||||
<div id="invoice-addresses" class="address-selector js-address-selector">
|
||||
{elseif $customer.addresses|count > 0}
|
||||
<div id="delivery-addresses" class="address-selector js-address-selector">
|
||||
{include file = 'checkout/_partials/address-selector-block.tpl'
|
||||
addresses = $customer.addresses
|
||||
name = "id_address_invoice"
|
||||
selected = $id_address_invoice
|
||||
type = "invoice"
|
||||
name = "id_address_delivery"
|
||||
selected = $id_address_delivery
|
||||
type = "delivery"
|
||||
interactive = !$show_delivery_address_form and !$show_invoice_address_form
|
||||
}
|
||||
</div>
|
||||
|
||||
{if isset($invoice_address_error)}
|
||||
<p class="alert alert-danger js-address-error" name="alert-invoice" id="id-failure-address-{$invoice_address_error.id_address}">{$invoice_address_error.exception}</p>
|
||||
{if isset($delivery_address_error)}
|
||||
<p class="alert alert-danger js-address-error" name="alert-delivery" id="id-failure-address-{$delivery_address_error.id_address}">{$delivery_address_error.exception}</p>
|
||||
{else}
|
||||
<p class="alert alert-danger js-address-error" name="alert-invoice" style="display: none">{l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>
|
||||
<p class="alert alert-danger js-address-error" name="alert-delivery" style="display: none">{l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>
|
||||
{/if}
|
||||
|
||||
<p class="add-address">
|
||||
<a href="{$new_address_invoice_url}"><i class="material-icons"></i>{l s='add new address' d='Shop.Theme.Actions'}</a>
|
||||
<a href="{$new_address_delivery_url}"><i class="material-icons"></i>{l s='add new address' d='Shop.Theme.Actions'}</a>
|
||||
</p>
|
||||
|
||||
{if $use_same_address && !$cart.is_virtual}
|
||||
<p>
|
||||
<a data-link-action="different-invoice-address" href="{$use_different_address_url}">
|
||||
{l s='Billing address differs from shipping address' d='Shop.Theme.Checkout'}
|
||||
</a>
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{/if}
|
||||
|
||||
{/if}
|
||||
{if !$use_same_address}
|
||||
|
||||
{if !$form_has_continue_button}
|
||||
<div class="clearfix">
|
||||
<button type="submit" class="btn btn-primary continue float-xs-right" name="confirm-addresses" value="1">
|
||||
{l s='Continue' d='Shop.Theme.Actions'}
|
||||
</button>
|
||||
<input type="hidden" id="not-valid-addresses" value="{$not_valid_addresses}">
|
||||
</div>
|
||||
{/if}
|
||||
<h2 class="h4">{l s='Your Invoice Address' d='Shop.Theme.Checkout'}</h2>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
{if $show_invoice_address_form}
|
||||
<div id="invoice-address">
|
||||
{render file = 'checkout/_partials/address-form.tpl'
|
||||
ui = $address_form
|
||||
use_same_address = $use_same_address
|
||||
type = "invoice"
|
||||
form_has_continue_button = $form_has_continue_button
|
||||
}
|
||||
</div>
|
||||
{else}
|
||||
<div id="invoice-addresses" class="address-selector js-address-selector">
|
||||
{include file = 'checkout/_partials/address-selector-block.tpl'
|
||||
addresses = $customer.addresses
|
||||
name = "id_address_invoice"
|
||||
selected = $id_address_invoice
|
||||
type = "invoice"
|
||||
interactive = !$show_delivery_address_form and !$show_invoice_address_form
|
||||
}
|
||||
</div>
|
||||
|
||||
{if isset($invoice_address_error)}
|
||||
<p class="alert alert-danger js-address-error" name="alert-invoice" id="id-failure-address-{$invoice_address_error.id_address}">{$invoice_address_error.exception}</p>
|
||||
{else}
|
||||
<p class="alert alert-danger js-address-error" name="alert-invoice" style="display: none">{l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>
|
||||
{/if}
|
||||
|
||||
<p class="add-address">
|
||||
<a href="{$new_address_invoice_url}"><i class="material-icons"></i>{l s='add new address' d='Shop.Theme.Actions'}</a>
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{/if}
|
||||
|
||||
{if !$form_has_continue_button}
|
||||
<div class="clearfix">
|
||||
<button type="submit" class="btn btn-primary continue float-xs-right" name="confirm-addresses" value="1">
|
||||
{l s='Continue' d='Shop.Theme.Actions'}
|
||||
</button>
|
||||
<input type="hidden" id="not-valid-addresses" value="{$not_valid_addresses}">
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
@ -1,167 +1,166 @@
|
||||
{extends file='checkout/_partials/steps/checkout-step.tpl'}
|
||||
|
||||
{block name='step_content'}
|
||||
{if !$step_is_complete}
|
||||
<div class="w-full flex flex-col gap-4 p-4">
|
||||
|
||||
{hook h='displayPaymentTop'}
|
||||
{hook h='displayPaymentTop'}
|
||||
|
||||
{* used by javascript to correctly handle cart updates when we are on payment step (eg vouchers added) *}
|
||||
<div style="display:none" class="js-cart-payment-step-refresh"></div>
|
||||
{* used by javascript to correctly handle cart updates when we are on payment step (eg vouchers added) *}
|
||||
<div style="display:none" class="js-cart-payment-step-refresh"></div>
|
||||
|
||||
{if !empty($display_transaction_updated_info)}
|
||||
<p class="cart-payment-step-refreshed-info">
|
||||
{l s='Transaction amount has been correctly updated' d='Shop.Theme.Checkout'}
|
||||
</p>
|
||||
{/if}
|
||||
{if !empty($display_transaction_updated_info)}
|
||||
<p class="cart-payment-step-refreshed-info">
|
||||
{l s='Transaction amount has been correctly updated' d='Shop.Theme.Checkout'}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{if $is_free}
|
||||
<p>{l s='No payment needed for this order' d='Shop.Theme.Checkout'}</p>
|
||||
{/if}
|
||||
<div class="payment-options {if $is_free}hidden-xs-up{/if}">
|
||||
{foreach from=$payment_options item="module_options"}
|
||||
{foreach from=$module_options item="option"}
|
||||
<div>
|
||||
<div id="{$option.id}-container" class="payment-option clearfix">
|
||||
{* This is the way an option should be selected when Javascript is enabled *}
|
||||
<span class="custom-radio float-xs-left">
|
||||
<input
|
||||
class="ps-shown-by-js {if $option.binary} binary {/if}"
|
||||
id="{$option.id}"
|
||||
data-module-name="{$option.module_name}"
|
||||
name="payment-option"
|
||||
type="radio"
|
||||
required
|
||||
{if $selected_payment_option == $option.id || $is_free} checked {/if}
|
||||
{if $is_free}
|
||||
<p>{l s='No payment needed for this order' d='Shop.Theme.Checkout'}</p>
|
||||
{/if}
|
||||
<div class="payment-options flex flex-col gap-2 {if $is_free}hidden-xs-up{/if}">
|
||||
{foreach from=$payment_options item="module_options"}
|
||||
{foreach from=$module_options item="option"}
|
||||
<div>
|
||||
<div id="{$option.id}-container" class="payment-option clearfix">
|
||||
{* This is the way an option should be selected when Javascript is enabled *}
|
||||
<span class="custom-radio float-xs-left">
|
||||
<input
|
||||
class="ps-shown-by-js {if $option.binary} binary {/if}"
|
||||
id="{$option.id}"
|
||||
data-module-name="{$option.module_name}"
|
||||
name="payment-option"
|
||||
type="radio"
|
||||
required
|
||||
{if $selected_payment_option == $option.id || $is_free} checked {/if}
|
||||
>
|
||||
<span></span>
|
||||
</span>
|
||||
{* This is the way an option should be selected when Javascript is disabled *}
|
||||
<form method="GET" class="ps-hidden-by-js">
|
||||
{if $option.id === $selected_payment_option}
|
||||
{l s='Selected' d='Shop.Theme.Checkout'}
|
||||
{else}
|
||||
<button class="ps-hidden-by-js" type="submit" name="select_payment_option" value="{$option.id}">
|
||||
{l s='Choose' d='Shop.Theme.Actions'}
|
||||
</button>
|
||||
{/if}
|
||||
</form>
|
||||
|
||||
<label for="{$option.id}">
|
||||
<span>{$option.call_to_action_text}</span>
|
||||
{if $option.logo}
|
||||
<img src="{$option.logo}">
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{if $option.additionalInformation}
|
||||
<div
|
||||
id="{$option.id}-additional-information"
|
||||
class="js-additional-information definition-list additional-information{if $option.id != $selected_payment_option} ps-hidden {/if}"
|
||||
>
|
||||
<span></span>
|
||||
</span>
|
||||
{* This is the way an option should be selected when Javascript is disabled *}
|
||||
<form method="GET" class="ps-hidden-by-js">
|
||||
{if $option.id === $selected_payment_option}
|
||||
{l s='Selected' d='Shop.Theme.Checkout'}
|
||||
{$option.additionalInformation nofilter}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
id="pay-with-{$option.id}-form"
|
||||
class="js-payment-option-form {if $option.id != $selected_payment_option} ps-hidden {/if}"
|
||||
>
|
||||
{if $option.form}
|
||||
{$option.form nofilter}
|
||||
{else}
|
||||
<button class="ps-hidden-by-js" type="submit" name="select_payment_option" value="{$option.id}">
|
||||
{l s='Choose' d='Shop.Theme.Actions'}
|
||||
</button>
|
||||
<form id="payment-form" method="POST" action="{$option.action nofilter}">
|
||||
{foreach from=$option.inputs item=input}
|
||||
<input type="{$input.type}" name="{$input.name}" value="{$input.value}">
|
||||
{/foreach}
|
||||
<button style="display:none" id="pay-with-{$option.id}" type="submit"></button>
|
||||
</form>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
{/foreach}
|
||||
{foreachelse}
|
||||
<p class="alert alert-danger">{l s='Unfortunately, there are no payment method available.' d='Shop.Theme.Checkout'}</p>
|
||||
{/foreach}
|
||||
</div>
|
||||
|
||||
<label for="{$option.id}">
|
||||
<span>{$option.call_to_action_text}</span>
|
||||
{if $option.logo}
|
||||
<img src="{$option.logo}">
|
||||
{/if}
|
||||
</label>
|
||||
{if $conditions_to_approve|count}
|
||||
<p class="ps-hidden-by-js">
|
||||
{* At the moment, we're not showing the checkboxes when JS is disabled
|
||||
because it makes ensuring they were checked very tricky and overcomplicates
|
||||
the template. Might change later.
|
||||
*}
|
||||
{l s='By confirming the order, you certify that you have read and agree with all of the conditions below:' d='Shop.Theme.Checkout'}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<form id="conditions-to-approve" method="GET">
|
||||
<ul class="flex flex-col gap-2">
|
||||
{foreach from=$conditions_to_approve item="condition" key="condition_name"}
|
||||
<li>
|
||||
<div class="flex items-center gap-2 focus:border-0">
|
||||
<input id = "conditions_to_approve[{$condition_name}]"
|
||||
name = "conditions_to_approve[{$condition_name}]"
|
||||
required
|
||||
type = "checkbox"
|
||||
value = "1"
|
||||
class = "ps-shown-by-js"
|
||||
>
|
||||
</span>
|
||||
<label class="js-terms" for="conditions_to_approve[{$condition_name}]">
|
||||
{$condition nofilter}
|
||||
</label>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{if $option.additionalInformation}
|
||||
<div
|
||||
id="{$option.id}-additional-information"
|
||||
class="js-additional-information definition-list additional-information{if $option.id != $selected_payment_option} ps-hidden {/if}"
|
||||
>
|
||||
{$option.additionalInformation nofilter}
|
||||
</div>
|
||||
{/if}
|
||||
{if $show_final_summary}
|
||||
{include file='checkout/_partials/order-final-summary.tpl'}
|
||||
{/if}
|
||||
|
||||
<div
|
||||
id="pay-with-{$option.id}-form"
|
||||
class="js-payment-option-form {if $option.id != $selected_payment_option} ps-hidden {/if}"
|
||||
>
|
||||
{if $option.form}
|
||||
{$option.form nofilter}
|
||||
{else}
|
||||
<form id="payment-form" method="POST" action="{$option.action nofilter}">
|
||||
{foreach from=$option.inputs item=input}
|
||||
<input type="{$input.type}" name="{$input.name}" value="{$input.value}">
|
||||
{/foreach}
|
||||
<button style="display:none" id="pay-with-{$option.id}" type="submit"></button>
|
||||
</form>
|
||||
<div id="payment-confirmation">
|
||||
<div class="ps-shown-by-js">
|
||||
<button type="submit" {if !$selected_payment_option} disabled {/if} class="uppercase font-medium py-2 text-center w-full bg-blue-950 text-gray-50 disabled:bg-gray-600">
|
||||
{l s='Order with an obligation to pay' d='Shop.Theme.Checkout'}
|
||||
</button>
|
||||
{if $show_final_summary}
|
||||
<article class="alert alert-danger mt-2 js-alert-payment-conditions" role="alert" data-alert="danger">
|
||||
{l
|
||||
s='Please make sure you\'ve chosen a [1]payment method[/1] and accepted the [2]terms and conditions[/2].'
|
||||
sprintf=[
|
||||
'[1]' => '<a href="#checkout-payment-step">',
|
||||
'[/1]' => '</a>',
|
||||
'[2]' => '<a href="#conditions-to-approve">',
|
||||
'[/2]' => '</a>'
|
||||
]
|
||||
d='Shop.Theme.Checkout'
|
||||
}
|
||||
</article>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="ps-hidden-by-js">
|
||||
{if $selected_payment_option and $all_conditions_approved}
|
||||
<label for="pay-with-{$selected_payment_option}">{l s='Order with an obligation to pay' d='Shop.Theme.Checkout'}</label>
|
||||
{/if}
|
||||
</div>
|
||||
{/foreach}
|
||||
{foreachelse}
|
||||
<p class="alert alert-danger">{l s='Unfortunately, there are no payment method available.' d='Shop.Theme.Checkout'}</p>
|
||||
{/foreach}
|
||||
</div>
|
||||
|
||||
{if $conditions_to_approve|count}
|
||||
<p class="ps-hidden-by-js">
|
||||
{* At the moment, we're not showing the checkboxes when JS is disabled
|
||||
because it makes ensuring they were checked very tricky and overcomplicates
|
||||
the template. Might change later.
|
||||
*}
|
||||
{l s='By confirming the order, you certify that you have read and agree with all of the conditions below:' d='Shop.Theme.Checkout'}
|
||||
</p>
|
||||
|
||||
<form id="conditions-to-approve" method="GET">
|
||||
<ul>
|
||||
{foreach from=$conditions_to_approve item="condition" key="condition_name"}
|
||||
<li>
|
||||
<div class="float-xs-left">
|
||||
<span class="custom-checkbox">
|
||||
<input id = "conditions_to_approve[{$condition_name}]"
|
||||
name = "conditions_to_approve[{$condition_name}]"
|
||||
required
|
||||
type = "checkbox"
|
||||
value = "1"
|
||||
class = "ps-shown-by-js"
|
||||
>
|
||||
<span><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="condition-label">
|
||||
<label class="js-terms" for="conditions_to_approve[{$condition_name}]">
|
||||
{$condition nofilter}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{if $show_final_summary}
|
||||
{include file='checkout/_partials/order-final-summary.tpl'}
|
||||
{/if}
|
||||
|
||||
<div id="payment-confirmation">
|
||||
<div class="ps-shown-by-js">
|
||||
<button type="submit" {if !$selected_payment_option} disabled {/if} class="btn btn-primary center-block">
|
||||
{l s='Order with an obligation to pay' d='Shop.Theme.Checkout'}
|
||||
</button>
|
||||
{if $show_final_summary}
|
||||
<article class="alert alert-danger mt-2 js-alert-payment-conditions" role="alert" data-alert="danger">
|
||||
{l
|
||||
s='Please make sure you\'ve chosen a [1]payment method[/1] and accepted the [2]terms and conditions[/2].'
|
||||
sprintf=[
|
||||
'[1]' => '<a href="#checkout-payment-step">',
|
||||
'[/1]' => '</a>',
|
||||
'[2]' => '<a href="#conditions-to-approve">',
|
||||
'[/2]' => '</a>'
|
||||
]
|
||||
d='Shop.Theme.Checkout'
|
||||
}
|
||||
</article>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="ps-hidden-by-js">
|
||||
{if $selected_payment_option and $all_conditions_approved}
|
||||
<label for="pay-with-{$selected_payment_option}">{l s='Order with an obligation to pay' d='Shop.Theme.Checkout'}</label>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hook h='displayPaymentByBinaries'}
|
||||
|
||||
<div class="modal fade" id="modal">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="js-modal-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hook h='displayPaymentByBinaries'}
|
||||
|
||||
<div class="modal fade hidden" id="modal">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="js-modal-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
@ -25,100 +25,104 @@
|
||||
{extends file='checkout/_partials/steps/checkout-step.tpl'}
|
||||
|
||||
{block name='step_content'}
|
||||
<div id="hook-display-before-carrier">
|
||||
{$hookDisplayBeforeCarrier nofilter}
|
||||
</div>
|
||||
{if !$step_is_complete}
|
||||
<div id="hook-display-before-carrier">
|
||||
{$hookDisplayBeforeCarrier nofilter}
|
||||
</div>
|
||||
|
||||
<div class="delivery-options-list">
|
||||
{if $delivery_options|count}
|
||||
<form
|
||||
class="clearfix"
|
||||
id="js-delivery"
|
||||
data-url-update="{url entity='order' params=['ajax' => 1, 'action' => 'selectDeliveryOption']}"
|
||||
method="post"
|
||||
>
|
||||
<div class="form-fields">
|
||||
{block name='delivery_options'}
|
||||
<div class="delivery-options">
|
||||
{foreach from=$delivery_options item=carrier key=carrier_id}
|
||||
<div class="row delivery-option">
|
||||
<div class="col-sm-1">
|
||||
<span class="custom-radio float-xs-left">
|
||||
<input type="radio" name="delivery_option[{$id_address}]" id="delivery_option_{$carrier.id}" value="{$carrier_id}"{if $delivery_option == $carrier_id} checked{/if}>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<label for="delivery_option_{$carrier.id}" class="col-sm-11 delivery-option-2">
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-xs-12">
|
||||
<div class="row">
|
||||
{if $carrier.logo}
|
||||
<div class="col-xs-3">
|
||||
<img src="{$carrier.logo}" alt="{$carrier.name}" />
|
||||
<div class="flex w-full p-4">
|
||||
{if $delivery_options|count}
|
||||
<form
|
||||
class="flex flex-col w-full gap-4"
|
||||
id="js-delivery"
|
||||
data-url-update="{url entity='order' params=['ajax' => 1, 'action' => 'selectDeliveryOption']}"
|
||||
method="post"
|
||||
>
|
||||
<div class="form-fields">
|
||||
{block name='delivery_options'}
|
||||
<div class="delivery-options flex flex-col gap-2">
|
||||
{foreach from=$delivery_options item=carrier key=carrier_id}
|
||||
<div class="flex items-center delivery-option">
|
||||
<div class="col-sm-1">
|
||||
<span class="custom-radio float-xs-left">
|
||||
<input type="radio" name="delivery_option[{$id_address}]" id="delivery_option_{$carrier.id}" value="{$carrier_id}"{if $delivery_option == $carrier_id} checked{/if}>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<label for="delivery_option_{$carrier.id}" class="col-sm-11 delivery-option-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="col-sm-5 col-xs-12">
|
||||
<div class=" flex items-center gap-2">
|
||||
{if $carrier.logo}
|
||||
<div>
|
||||
<img src="{$carrier.logo}" alt="{$carrier.name}" />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="text-lg font-semibold">
|
||||
<span class="h6 carrier-name">{$carrier.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="{if $carrier.logo}col-xs-9{else}col-xs-12{/if}">
|
||||
<span class="h6 carrier-name">{$carrier.name}</span>
|
||||
</div>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<div class="">
|
||||
<span class="carrier-delay">( {$carrier.delay} )</span>
|
||||
</div>
|
||||
<div class="">
|
||||
<span class="carrier-price">( {$carrier.price} )</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 col-xs-12">
|
||||
<span class="carrier-delay">{$carrier.delay}</span>
|
||||
</div>
|
||||
<div class="col-sm-3 col-xs-12">
|
||||
<span class="carrier-price">{$carrier.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row carrier-extra-content"{if $delivery_option != $carrier_id} style="display:none;"{/if}>
|
||||
{$carrier.extraContent nofilter}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{/block}
|
||||
<div class="order-options">
|
||||
<div id="delivery">
|
||||
<label for="delivery_message">{l s='If you would like to add a comment about your order, please write it in the field below.' d='Shop.Theme.Checkout'}</label>
|
||||
<textarea rows="2" cols="120" id="delivery_message" name="delivery_message">{$delivery_message}</textarea>
|
||||
</div>
|
||||
|
||||
{if $recyclablePackAllowed}
|
||||
<span class="custom-checkbox">
|
||||
<input type="checkbox" id="input_recyclable" name="recyclable" value="1" {if $recyclable} checked {/if}>
|
||||
<span><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
|
||||
<label for="input_recyclable">{l s='I would like to receive my order in recycled packaging.' d='Shop.Theme.Checkout'}</label>
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{if $gift.allowed}
|
||||
<span class="custom-checkbox">
|
||||
<input class="js-gift-checkbox" id="input_gift" name="gift" type="checkbox" value="1" {if $gift.isGift}checked="checked"{/if}>
|
||||
<span><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
|
||||
<label for="input_gift">{$gift.label}</label >
|
||||
</span>
|
||||
|
||||
<div id="gift" class="collapse{if $gift.isGift} in{/if}">
|
||||
<label for="gift_message">{l s='If you\'d like, you can add a note to the gift:' d='Shop.Theme.Checkout'}</label>
|
||||
<textarea rows="2" cols="120" id="gift_message" name="gift_message">{$gift.message}</textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="row carrier-extra-content"{if $delivery_option != $carrier_id} style="display:none;"{/if}>
|
||||
{$carrier.extraContent nofilter}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{/block}
|
||||
<div class="flex w-full">
|
||||
<div id="delivery" class="flex w-full flex-col gap-2">
|
||||
<label for="delivery_message" class="text-sm">{l s='If you would like to add a comment about your order, please write it in the field below.' d='Shop.Theme.Checkout'}</label>
|
||||
<textarea rows="2" id="delivery_message" name="delivery_message">{$delivery_message}</textarea>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{if $recyclablePackAllowed}
|
||||
<span class="custom-checkbox">
|
||||
<input type="checkbox" id="input_recyclable" name="recyclable" value="1" {if $recyclable} checked {/if}>
|
||||
<span><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
|
||||
<label for="input_recyclable">{l s='I would like to receive my order in recycled packaging.' d='Shop.Theme.Checkout'}</label>
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{if $gift.allowed}
|
||||
<span class="custom-checkbox">
|
||||
<input class="js-gift-checkbox" id="input_gift" name="gift" type="checkbox" value="1" {if $gift.isGift}checked="checked"{/if}>
|
||||
<span><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
|
||||
<label for="input_gift">{$gift.label}</label >
|
||||
</span>
|
||||
|
||||
<div id="gift" class="collapse{if $gift.isGift} in{/if}">
|
||||
<label for="gift_message">{l s='If you\'d like, you can add a note to the gift:' d='Shop.Theme.Checkout'}</label>
|
||||
<textarea rows="2" cols="120" id="gift_message" name="gift_message">{$gift.message}</textarea>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="continue btn btn-primary float-xs-right" name="confirmDeliveryOption" value="1">
|
||||
{l s='Continue' d='Shop.Theme.Actions'}
|
||||
</button>
|
||||
</form>
|
||||
{else}
|
||||
<p class="alert alert-danger">{l s='Unfortunately, there are no carriers available for your delivery address.' d='Shop.Theme.Checkout'}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<button type="submit" class="uppercase font-medium py-2 text-center w-full bg-blue-950 text-gray-50" name="confirmDeliveryOption" value="1">
|
||||
{l s='Continue' d='Shop.Theme.Actions'}
|
||||
</button>
|
||||
</form>
|
||||
{else}
|
||||
<p class="font-semibold text-red-500">{l s='Unfortunately, there are no carriers available for your delivery address.' d='Shop.Theme.Checkout'}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div id="hook-display-after-carrier">
|
||||
{$hookDisplayAfterCarrier nofilter}
|
||||
</div>
|
||||
<div id="hook-display-after-carrier">
|
||||
{$hookDisplayAfterCarrier nofilter}
|
||||
</div>
|
||||
|
||||
<div id="extra_carrier"></div>
|
||||
<div id="extra_carrier"></div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user