In prestashop 1.7, the checkout template file themes/classic/templates/checkout/checkout.tpl uses its own html structure instead of extending page.tpl, like every other checkout pages (cart, order confirmation, etc).
Why is that? Is there any security flaw we should be aware of?
I've overriden checkout.tpl in my own theme {extends file='page.tpl'} and I want to make sure that everything's alright:
{extends file='page.tpl'}
{block name='content'}
<section id="content">
<div class="row">
<div class="col-md-8">
{block name='cart_summary'}
{render file='checkout/checkout-process.tpl' ui=$checkout_process}
{/block}
</div>
<div class="col-md-4">
{block name='cart_summary'}
{include file='checkout/_partials/cart-summary.tpl' cart = $cart}
{/block}
{hook h='displayReassurance'}
</div>
</div>
</section>
{/block}
Thanks!
Florian
Related
hi i need to remove payment_address payment_method from checkout/checkout page Opencart 3.x.
i donot want extension, please some body help on this.
Theoretically, you can activate a COD payment method and then simply hide this step with basic CSS and a bit of JS to open the final step in the default checkout.
But Opencart heavily relies on Payment_address. Payment Address has several fields that are required like country, zone and often postcode.
Removing the payment_address will break the whole system. What you can do is via simple HTML and CSS, populate the fields with default values and then hide with CSS.
for example in catalog/view/theme/default/template/checkout/payment_address.twig
...html
<div class="form-group required">
<label class="col-sm-2 control-label" for="input-payment-firstname">{{ entry_firstname }}</label>
<div class="col-sm-10">
<input type="text" name="firstname" value="<MY_DEFAULT_FIRST_NAME>" placeholder="{{ entry_firstname }}" id="input-payment-firstname" class="form-control" />
</div>
</div>
...
do this for all the fields.
then in catalog/view/theme/default/template/checkout/checkout.twig do style="display:none'
<div class="panel panel-default" style="display:none">
<div class="panel-heading">
<h4 class="panel-title">{{ text_checkout_account }}</h4>
</div>
<div class="panel-collapse collapse" id="collapse-payment-address">
<div class="panel-body"></div>
</div>
</div>
{% else %}
<div class="panel panel-default" style="display:none">
<div class="panel-heading">
<h4 class="panel-title">{{ text_checkout_payment_address }}</h4>
</div>
<div class="panel-collapse collapse" id="collapse-payment-address">
<div class="panel-body"></div>
</div>
</div>
this will just hide the payment_address block but it will still be there.
and now you need to skip the payment address step by calling the Continue button via JavaScript
so in the same file catalog/view/theme/default/template/checkout/checkout.twig
after line 165
$('a[href=\'#collapse-payment-address\']').trigger('click');
//add this code to trigger continue button:
$('#button-payment-address').trigger('click');
You might need to wrap the trigger click action with setTimeout becuase you might trigger the click before the form is actually loaded.
I would also advise to do this in a CUSTOM theme folder, and not in the default opencart theme. this way you can do the modifications without touching the core file.
I'm Using materialize CSS scrollspy with Django to navigate to a specific section inside a page using section id. How can I navigate that specific section when I'm on a different page.
<li>Home</li>
<li><a href="#cat" >sample categories</a></li>
<li>Categories</li>
<li>Gallery</li>
<li>About Me</li>
<li>Blog</li>
<section id="cat">
<div class="container-fluid">
<div class="row">
<h3 class="center">Few Categories I do</h3>
{% for category in categories|slice:":3" %}
<div class="col s12 m4"> ```
add to your html code <section id="cat"><a name="cat"/>
and then you can use links like to category
You can just add it in the url if i understood the question right.
if your on /home, in href put: /category/#cat
You can do something like this:
<h3 class="center">Few Categories I do</h3>
{% for category in categories|slice:":3" %}
Click me!
home is the name or your target url.
I created different tabs in a view with the following code:
<!doctype html>
<html>
<head>
<meta name="layout" content="main-redesign" />
<title>Account Settings</title>
</head>
<body>
<%-- global header --%>
<%-- tab navigation your network --%>
<g:render template="accountSettingNavigation"/>
<%-- main content area --%>
<div class="container account-setting">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<h3 class="page-title">ACCOUNT SETTINGS</h3>
<%-- your network tab containers --%>
<div class="tab-content mb-100">
<div class="tab-pane active" id="personalInformation">
<g:render template="personalInfo"
model="[user:user,editable:editable]" />
</div>
<div class="tab-pane" id="changePassword">
<g:render template="changePassword"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In the changePassword template I have a form which includes 3 fields:
Current password
New password confirmation
After the user clicks on the "update password" the form is submitted to a controller to save the new password.
In have to render the view and to ensure that the changePassword template will be selected- How?
Provide in your model, what tab is active and by that means decide, where to put the active css class.
first add hidden fields into the templates, which mark the tab
(let say name="tabName" value"personalInformation")
in the controller you can access this field in
params (params.tabName)
at the end of the controller put this
field into the model
use this field in the gsp to decide what tab
is active
The below html was provided inside a <cfdocumentitem type="header"> block.
But the output is empty.
<div class="grid">
<div class="span5">
<div class="span5">
Label1
</div>
<div class="span5">
Data1
</div>
</div>
<div class="span5">
<div class="span5">
Label2
</div>
<div class="span5">
Data2
</div>
</div>
<div style="clear:both"></div>
</div>
But when I remove the nested 'class="span5"' divs and put some content there, it is working fine. Is there any problem with nested float in cfdocument???
Unfortunately, CSS support in CFDOCUMENT is kind of hit or miss.
2 rules to follow that might help:
Make sure your HTML validates as XHTML 1.0 Transitional
Import your style sheets using
<style type="text/css" media="screen">#import "style.css";</style>
This same information can be found here: http://rip747.wordpress.com/2007/09/10/cfdocument-it-works-if-you-know-how/
I'm using the CSS Framework Foundation and when I write the following code:
<div class="row">
<div class="two mobile-one columns"><label for="invoiceterm-summary" class="right inline">Become late <span class="required">*</span></label></div>
<div class="ten mobile-three columns"><input class="one" id="invoiceterm-late" name="invoiceterm[late]" type="text" value=""> days after invoice sent</div>
</div>
I get this :
But I want to display the text "days after invoice sent" like this:
You should place all of these elements into a single:
<div class="row">
<div class="twelve mobile-four columns"></div>
</div>
Otherwise it is behaving correctly, stacking the columns as the screen size is reduced.
I had to remove the display: block property from the css definition of the input[type="text"] on the foundation.css file