Edycja pierwszego kroku realizacji zamówienia - PrestaShop1.7
13/12/2021 04:00:00
Komentarze
0

Dodaj dodatkowa opcje podczas realizacji zamówienia, tworzymy trzy opcje logowanie, tworzenie konta oraz zakupy bez rejestracji
Plik personal-information.tpl
{extends file='checkout/_partials/steps/checkout-step.tpl'}
{block name='step_content'}
{hook h='displayPersonalInformationTop' customer=$customer}
{if $customer.is_logged && !$customer.is_guest}
<p class="identity">
{* [1][/1] is for a HTML tag. *}
{l s='Connected as [1]%firstname% %lastname%[/1].'
d='Shop.Theme.Customeraccount'
sprintf=[
'[1]' => "<a> href='{$urls.pages.identity}'>",
'[/1]' => "</a>",
'%firstname%' => $customer.firstname,
'%lastname%' => $customer.lastname
]
}
</p>
<p>
{* [1][/1] is for a HTML tag. *}
{l
s='Not you? [1]Log out[/1]'
d='Shop.Theme.Customeraccount'
sprintf=[
'[1]' => "<a> href='{$urls.actions.logout}'>",
'[/1]' => "</a>"
]
}
</p>
{if !isset($empty_cart_on_logout) || $empty_cart_on_logout}
<p><small>{l s='If you sign out now, your cart will be emptied.' d='Shop.Theme.Checkout'}</small></p>
{/if}
<div class="clearfix">
<form method="GET" action="{$urls.pages.order}">
<button>
class="continue btn btn-primary float-xs-right"
name="controller"
type="submit"
value="order"
>
{l s='Continue' d='Shop.Theme.Actions'}
</button>
</form>
</div>
{else}
<ul class="nav nav-inline my-2" role="tablist">
<li class="nav-item">
<a>
id="show_pass"
class="nav-link {if !$show_login_form}active{/if}"
data-toggle="tab"
href="#checkout-guest-form"
role="tab"
aria-controls="checkout-guest-form"
{if !$show_login_form} aria-selected="true"{/if}
>
{l s='Create an account' d='Shop.Theme.Customeraccount'}
</a>
</li>
<li class="nav-item">
<span> class="nav-separator"> | </span>
</li>
<li class="nav-item">
<a>
id="hide_pass"
class="nav-link"
data-toggle="tab"
href="#checkout-guest-form"
role="tab"
aria-controls="checkout-guest-form"
{if !$show_login_form} aria-selected="true"{/if}
>
{if $guest_allowed}
{l s='Order as a guest' d='Shop.Theme.Checkout'}
{else}
{l s='Create an account' d='Shop.Theme.Customeraccount'}
{/if}
</a>
</li>
<li class="nav-item">
<span> class="nav-separator"> | </span>
</li>
<li class="nav-item">
<a>
id="show_login"
class="nav-link {if $show_login_form}active{/if}"
data-link-action="show-login-form"
data-toggle="tab"
href="#checkout-login-form"
role="tab"
aria-controls="checkout-login-form"
{if $show_login_form} aria-selected="true"{/if}
>
{l s='Sign in' d='Shop.Theme.Actions'}
</a>
</li>
</ul>
<div class="tab-content">
<div> class="tab-pane {if !$show_login_form}active{/if}" id="checkout-guest-form" role="tabpanel" {if $show_login_form}aria-hidden="true"{/if}>
{render file='checkout/_partials/customer-form.tpl' ui=$register_form guest_allowed=$guest_allowed}
</div>
<div> class="tab-pane {if $show_login_form}active{/if}" id="checkout-login-form" role="tabpanel" {if !$show_login_form}aria-hidden="true"{/if}>
{render file='checkout/_partials/login-form.tpl' ui=$login_form}
</div>
</div>
{/if}
{/block}
Plik customer-form.tpl
{extends "customer/_partials/customer-form.tpl"}
{block "form_field"}
{$smarty.block.parent}
{/block}
{block "form_buttons"}
<button>
class="continue btn btn-primary float-xs-right"
name="continue"
data-link-action="register-new-customer"
type="submit"
value="1"
>
{l s='Continue' d='Shop.Theme.Actions'}
</button>
{/block}
Plik form-fields.tpl
{if $field.type == 'hidden'}
{block name='form_field_item_hidden'}
<input type="hidden" name="{$field.name}" value="{$field.value}">
{/block}
{else}
<div {if $field.type === 'password'}id="pass_label"{/if} class="form-group row {if !empty($field.errors)}has-error{/if}">
<label class="col-md-3 form-control-label{if $field.required} required{/if}">
{if $field.type !== 'checkbox'}
{$field.label}
{/if}
</label>
<div class="col-md-6{if ($field.type === 'radio-buttons')} form-control-valign{/if}">
{if $field.type === 'select'}
{block name='form_field_item_select'}
<select class="form-control form-control-select" name="{$field.name}" {if $field.required}required{/if}>
<option value disabled selected>{l s='-- please choose --' d='Shop.Forms.Labels'}</option>
{foreach from=$field.availableValues item="label" key="value"}
<option value="{$value}" {if $value eq $field.value} selected {/if}>{$label}</option>
{/foreach}
</select>
{/block}
{elseif $field.type === 'countrySelect'}
{block name='form_field_item_country'}
<select
class="form-control form-control-select js-country"
name="{$field.name}"
{if $field.required}required{/if}
>
<option value disabled selected>{l s='-- please choose --' d='Shop.Forms.Labels'}</option>
{foreach from=$field.availableValues item="label" key="value"}
<option value="{$value}" {if $value eq $field.value} selected {/if}>{$label}</option>
{/foreach}
</select>
{/block}
{elseif $field.type === 'radio-buttons'}
{block name='form_field_item_radio'}
{foreach from=$field.availableValues item="label" key="value"}
<label class="radio-inline">
<span class="custom-radio">
<input
name="{$field.name}"
type="radio"
value="{$value}"
{if $field.required}required{/if}
{if $value eq $field.value} checked {/if}
>
<span></span>
</span>
{$label}
</label>
{/foreach}
{/block}
{elseif $field.type === 'checkbox'}
{block name='form_field_item_checkbox'}
<span class="custom-checkbox">
<label>
<input name="{$field.name}" type="checkbox" value="1" {if $field.value}checked="checked"{/if} {if $field.required}required{/if}>
<span><i class="material-icons rtl-no-flip checkbox-checked"></i></span>
{$field.label nofilter}
</label>
</span>
{/block}
{elseif $field.type === 'date'}
{block name='form_field_item_date'}
<input name="{$field.name}" class="form-control" type="date" value="{$field.value}" placeholder="{if isset($field.availableValues.placeholder)}{$field.availableValues.placeholder}{/if}">
{if isset($field.availableValues.comment)}
<span class="form-control-comment">
{$field.availableValues.comment}
</span>
{/if}
{/block}
{elseif $field.type === 'birthday'}
{block name='form_field_item_birthday'}
<div class="js-parent-focus">
{html_select_date
field_order=DMY
time={$field.value}
field_array={$field.name}
prefix=false
reverse_years=true
field_separator='<br>'
day_extra='class="form-control form-control-select"'
month_extra='class="form-control form-control-select"'
year_extra='class="form-control form-control-select"'
day_empty={l s='-- day --' d='Shop.Forms.Labels'}
month_empty={l s='-- month --' d='Shop.Forms.Labels'}
year_empty={l s='-- year --' d='Shop.Forms.Labels'}
start_year={'Y'|date}-100 end_year={'Y'|date}
}
</div>
{/block}
{elseif $field.type === 'password'}
{block name='form_field_item_password'}
<div class="input-group js-parent-focus">
<input
id="pass_req"
class="form-control js-child-focus js-visible-password"
name="{$field.name}"
title="{l s='At least 5 characters long' d='Shop.Forms.Help'}"
type="password"
value=""
pattern=".{literal}{{/literal}5,{literal}}{/literal}"
{if $field.required}required{/if}
>
<span class="input-group-btn">
<button
class="btn"
type="button"
data-action="show-password"
data-text-show="{l s='Show' d='Shop.Theme.Actions'}"
data-text-hide="{l s='Hide' d='Shop.Theme.Actions'}"
>
{l s='Show' d='Shop.Theme.Actions'}
</button>
</span>
</div>
{/block}
{else}
{block name='form_field_item_other'}
<input
class="form-control"
name="{$field.name}"
type="{$field.type}"
value="{$field.value}"
{if isset($field.availableValues.placeholder)}placeholder="{$field.availableValues.placeholder}"{/if}
{if $field.maxLength}maxlength="{$field.maxLength}"{/if}
{if $field.required}required{/if}
>
{if isset($field.availableValues.comment)}
<span class="form-control-comment">
{$field.availableValues.comment}
</span>
{/if}
{/block}
{/if}
{block name='form_field_errors'}
{include file='_partials/form-errors.tpl' errors=$field.errors}
{/block}
</div>
<div class="col-md-3 form-control-comment">
{block name='form_field_comment'}
{if (!$field.required && !in_array($field.type, ['radio-buttons', 'checkbox']))}
{if $field.type !== 'password'}
{l s='Optional' d='Shop.Forms.Labels'}
{/if}
{/if}
{/block}
</div>
</div>
{/if}
Plik custom.js
const hide_pass = document.getElementById('hide_pass')
const show_pass = document.getElementById('show_pass')
const pass_label = document.getElementById('pass_label')
const show_login = document.getElementById('show_login')
const pass_req = document.getElementById('pass_req')
const checkout_guest_form = document.getElementById('checkout-guest-form')
const checkout_login_form = document.getElementById('checkout-login-form')
if (hide_pass) {
hide_pass.addEventListener('click', function() {
pass_label.classList.add('hidden_pass')
pass_req.removeAttribute('required')
})
}
if (show_pass) {
show_pass.addEventListener('click', function() {
pass_label.classList.remove('hidden_pass')
hide_pass.classList.remove('active')
show_login.classList.remove('active')
checkout_login_form.classList.remove('active')
checkout_guest_form.classList.add('active')
pass_req.setAttribute("required", "")
})
}
Plik custom.css
.hidden_pass {
display: none;
}
Zostaw komentarz Anuluj komentarz