diff --git a/modules/ps_cashondelivery/views/templates/hook/paymentOptions-additionalInformation.tpl b/modules/ps_cashondelivery/views/templates/hook/paymentOptions-additionalInformation.tpl new file mode 100644 index 0000000..6df4033 --- /dev/null +++ b/modules/ps_cashondelivery/views/templates/hook/paymentOptions-additionalInformation.tpl @@ -0,0 +1,24 @@ +{** + * Copyright since 2007 PrestaShop SA and Contributors + * PrestaShop is an International Registered Trademark & Property of PrestaShop SA + * + * NOTICE OF LICENSE + * + * This source file is subject to the Academic Free License version 3.0 + * that is bundled with this package in the file LICENSE.md. + * It is also available through the world-wide-web at this URL: + * https://opensource.org/licenses/AFL-3.0 + * If you did not receive a copy of the license and are unable to + * obtain it through the world-wide-web, please send an email + * to license@prestashop.com so we can send you a copy immediately. + * + * @author PrestaShop SA and Contributors <contact@prestashop.com> + * @copyright Since 2007 PrestaShop SA and Contributors + * @license https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0 + *} + +<div class="px-4"> + <div class='w-full mt-2 p-2 bg-blue-100 border border-blue-300'> + <span>{l s='You pay for the merchandise upon delivery.' d='Modules.Cashondelivery.Shop'}</span> + </div> +</div> diff --git a/modules/ps_checkpayment/views/templates/front/payment_infos.tpl b/modules/ps_checkpayment/views/templates/front/payment_infos.tpl new file mode 100644 index 0000000..d9f2699 --- /dev/null +++ b/modules/ps_checkpayment/views/templates/front/payment_infos.tpl @@ -0,0 +1,38 @@ +{** + * Copyright since 2007 PrestaShop SA and Contributors + * PrestaShop is an International Registered Trademark & Property of PrestaShop SA + * + * NOTICE OF LICENSE + * + * This source file is subject to the Academic Free License 3.0 (AFL-3.0) + * that is bundled with this package in the file LICENSE.md. + * It is also available through the world-wide-web at this URL: + * https://opensource.org/licenses/AFL-3.0 + * If you did not receive a copy of the license and are unable to + * obtain it through the world-wide-web, please send an email + * to license@prestashop.com so we can send you a copy immediately. + * + * DISCLAIMER + * + * Do not edit or add to this file if you wish to upgrade PrestaShop to newer + * versions in the future. If you wish to customize PrestaShop for your + * needs please refer to https://devdocs.prestashop.com/ for more information. + * + * @author PrestaShop SA and Contributors <contact@prestashop.com> + * @copyright Since 2007 PrestaShop SA and Contributors + * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) + *} + +<div class="px-4"> + <div class='flex flex-col gap-2 w-full mt-2 p-2 bg-blue-100 border border-blue-300'> + <span>{l s='Please send us your check following these rules:' d='Modules.Checkpayment.Shop'}</span> + <dl> + <dt class="font-semibold">{l s='Amount' d='Modules.Checkpayment.Shop'}</dt> + <dd class="text-sm mb-3">{$checkTotal} {$checkTaxLabel}</dd> + <dt class="font-semibold">{l s='Payee:' d='Modules.Checkpayment.Shop'}</dt> + <dd class="text-sm mb-3">{$checkOrder}</dd> + <dt class="font-semibold">{l s='Send your check to this address:' d='Modules.Checkpayment.Shop'}</dt> + <dd class="text-sm">{$checkAddress nofilter}</dd> + </dl> + </div> +</div> diff --git a/modules/ps_wirepayment/views/templates/hook/_partials/payment_infos.tpl b/modules/ps_wirepayment/views/templates/hook/_partials/payment_infos.tpl new file mode 100644 index 0000000..9398bb8 --- /dev/null +++ b/modules/ps_wirepayment/views/templates/hook/_partials/payment_infos.tpl @@ -0,0 +1,30 @@ +{** + * 2007-2020 PrestaShop and Contributors + * + * NOTICE OF LICENSE + * + * This source file is subject to the Academic Free License 3.0 (AFL-3.0) + * that is bundled with this package in the file LICENSE.txt. + * It is also available through the world-wide-web at this URL: + * https://opensource.org/licenses/AFL-3.0 + * If you did not receive a copy of the license and are unable to + * obtain it through the world-wide-web, please send an email + * to license@prestashop.com so we can send you a copy immediately. + * + * @author PrestaShop SA <contact@prestashop.com> + * @copyright 2007-2020 PrestaShop SA and Contributors + * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) + * International Registered Trademark & Property of PrestaShop SA + *} + + +<dl> + <dt class="font-semibold">{l s='Amount' d='Modules.Wirepayment.Shop'}</dt> + <dd class="text-sm mb-3">{$total}</dd> + <dt class="font-semibold">{l s='Name of account owner' d='Modules.Wirepayment.Shop'}</dt> + <dd class="text-sm mb-3">{$bankwireOwner}</dd> + <dt class="font-semibold">{l s='Please include these details' d='Modules.Wirepayment.Shop'}</dt> + <dd class="text-sm mb-3">{$bankwireDetails nofilter}</dd> + <dt class="font-semibold">{l s='Bank name' d='Modules.Wirepayment.Shop'}</dt> + <dd class="text-sm">{$bankwireAddress nofilter}</dd> +</dl> diff --git a/modules/ps_wirepayment/views/templates/hook/ps_wirepayment_intro.tpl b/modules/ps_wirepayment/views/templates/hook/ps_wirepayment_intro.tpl new file mode 100644 index 0000000..6f58441 --- /dev/null +++ b/modules/ps_wirepayment/views/templates/hook/ps_wirepayment_intro.tpl @@ -0,0 +1,32 @@ +{** + * 2007-2020 PrestaShop and Contributors + * + * NOTICE OF LICENSE + * + * This source file is subject to the Academic Free License 3.0 (AFL-3.0) + * that is bundled with this package in the file LICENSE.txt. + * It is also available through the world-wide-web at this URL: + * https://opensource.org/licenses/AFL-3.0 + * If you did not receive a copy of the license and are unable to + * obtain it through the world-wide-web, please send an email + * to license@prestashop.com so we can send you a copy immediately. + * + * @author PrestaShop SA <contact@prestashop.com> + * @copyright 2007-2020 PrestaShop SA and Contributors + * @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0) + * International Registered Trademark & Property of PrestaShop SA + *} + +<div class="px-4"> + <div class='flex flex-col gap-2 w-full mt-2 p-2 bg-blue-100 border border-blue-300'> + <div class="flex flex-col gap-1"> + <span>{l s='Please transfer the invoice amount to our bank account. You will receive our order confirmation by email containing bank details and order number.' d='Modules.Wirepayment.Shop'}</span> + {if $bankwireReservationDays} + <span>{l s='Goods will be reserved %s days for you and we\'ll process the order immediately after receiving the payment.' sprintf=[$bankwireReservationDays] d='Modules.Wirepayment.Shop'}</span> + {/if} + <span>{l s='Payment is made by transfer of the invoice amount to the following account:' d='Modules.Wirepayment.Shop'}</span> + </div> + {include file='module:ps_wirepayment/views/templates/hook/_partials/payment_infos.tpl'} + {$bankwireCustomText nofilter} + </div> +</div> diff --git a/templates/checkout/_partials/cart-detailed-totals.tpl b/templates/checkout/_partials/cart-detailed-totals.tpl index 43615dd..f2ca009 100644 --- a/templates/checkout/_partials/cart-detailed-totals.tpl +++ b/templates/checkout/_partials/cart-detailed-totals.tpl @@ -24,10 +24,9 @@ *} {block name='cart_detailed_totals'} <div class="flex flex-col gap-4"> - <div class="flex flex-col gap-8"> {foreach from=$cart.subtotals item="subtotal"} - {if $subtotal.value && $subtotal.type !== 'tax'} + {if $subtotal && $subtotal.value|count_characters > 0 && $subtotal.type !== 'tax'} <div class="flex font-medium" id="cart-subtotal-{$subtotal.type}"> <span class="flex-1 label{if 'products' === $subtotal.type} js-subtotal{/if}"> {if 'products' == $subtotal.type} diff --git a/templates/checkout/_partials/steps/addresses.tpl b/templates/checkout/_partials/steps/addresses.tpl index 2dc14b6..a095b13 100644 --- a/templates/checkout/_partials/steps/addresses.tpl +++ b/templates/checkout/_partials/steps/addresses.tpl @@ -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} diff --git a/templates/checkout/_partials/steps/payment.tpl b/templates/checkout/_partials/steps/payment.tpl index 2f14dfd..81c9cde 100644 --- a/templates/checkout/_partials/steps/payment.tpl +++ b/templates/checkout/_partials/steps/payment.tpl @@ -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} diff --git a/templates/checkout/_partials/steps/shipping.tpl b/templates/checkout/_partials/steps/shipping.tpl index d6b5182..635476b 100644 --- a/templates/checkout/_partials/steps/shipping.tpl +++ b/templates/checkout/_partials/steps/shipping.tpl @@ -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}