isabelle/Falcon-PrestaShop-9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(isabelle-edits): Modify index page layout

Browse Source 
This new page structure for the home page makes it so you have more control over the index.tpl file. By default, if the index.tpl file is full width (meaning no side columns) the container becomes fluid and full-width.  For each section, you need to define a container, rows and columns.  This way you can easily have full-width background images for only certain sections.
This commit is contained in:
Isabelle Oving - Anno
2025-12-24 10:14:06 +01:00
parent 00b79f12e2
commit 6ff74d7cc8
4 changed files with 79 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
falcon/_dev/css/theme/custom/abstracts/_utilities.scss
View File

@ -1,16 +1,3 @@
// Header selector for interpolation // Header selector for interpolation
// Example usage: #{$headings} { ... } // Example usage: #{$headings} { ... }
$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6"; $headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
// Color utility classes
@each $name, $color in $theme-colors {
.bg-#{$name} {
background-color: $color;
}
}
@each $name, $color in $theme-colors {
.text-#{$name} {
color: $color;
}
}

17
falcon/templates/index.tpl
View File

@ -29,6 +29,23 @@
{block name='page_content_top'}{/block} {block name='page_content_top'}{/block}
{block name='page_content'} {block name='page_content'}
{* Define containers, rows and columns here for each section *}
{* Example:
<section id="home_hero" class="mt-0">
<div class="container">
<div class="row">
<div class="col-6 displayCustomhtml1">
{hook h='displayCustomhtml1'}
</div>
<div class="col-6 displayHomeBanner1">
{hook h='displayHomeBanner1'}
</div>
</div>
</div>
</section>
*}
{block name='hook_home'} {block name='hook_home'}
{$HOOK_HOME nofilter} {$HOOK_HOME nofilter}
{/block} {/block}

127
falcon/templates/layouts/layout-both-columns.tpl
View File

@ -25,101 +25,96 @@
<!doctype html> <!doctype html>
<html lang="{$language.locale}"> <html lang="{$language.locale}">
<head> <head>
{block name='head'} {block name='head'}
{include file='_partials/head.tpl'} {include file='_partials/head.tpl'}
{/block} {/block}
</head> </head>
<body id="{$page.page_name}" class="{$page.body_classes|classnames}"> <body id="{$page.page_name}" class="{$page.body_classes|classnames}">
{block name='hook_after_body_opening_tag'} {block name='hook_after_body_opening_tag'}
{hook h='displayAfterBodyOpeningTag'} {hook h='displayAfterBodyOpeningTag'}
{/block} {/block}
<main class="l-main"> <main class="l-main">
{block name='product_activation'} {block name='product_activation'}
{include file='catalog/_partials/product-activation.tpl'} {include file='catalog/_partials/product-activation.tpl'}
{/block}
<header id="header" class="l-header">
{block name='header'}
{include file='_partials/header.tpl'}
{/block}
</header>
<section id="wrapper">
{block name='notifications'}
{include file='_partials/notifications.tpl'}
{/block} {/block}
{hook h="displayWrapperTop"} <header id="header" class="l-header">
<div class="container"> {block name='header'}
{block name='breadcrumb'} {include file='_partials/header.tpl'}
{include file='_partials/breadcrumb.tpl'}
{/block}
<div class="row">
{block name="left_column"}
<div id="left-column" class="col-12 col-md-4 col-lg-3">
{if $page.page_name == 'product'}
{hook h='displayLeftColumnProduct' product=$product category=$category}
{else}
{hook h="displayLeftColumn"}
{/if}
</div>
{/block} {/block}
</header>
{block name="content_wrapper"} <section id="wrapper">
<div id="content-wrapper" class="js-content-wrapper left-column right-column col-md-4 col-lg-6"> {block name='notifications'}
{hook h="displayContentWrapperTop"} {include file='_partials/notifications.tpl'}
{block name="content"} {/block}
<p>Hello world! This is HTML5 Boilerplate.</p> {hook h="displayWrapperTop"}
<div class="{if $page.page_name == 'index' }container-fluid p-0 overflow-hidden{else} container {/if}">
{block name='breadcrumb'}
{include file='_partials/breadcrumb.tpl'}
{/block} {/block}
{hook h="displayContentWrapperBottom"} <div class="{if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}row{/if}">
</div> {block name="left_column"}
{/block} <div id="left-column" class="col-12 col-md-4 col-lg-3">
{if $page.page_name == 'product'}
{hook h='displayLeftColumnProduct' product=$product category=$category}
{else}
{hook h="displayLeftColumn"}
{/if}
</div>
{/block}
{block name="content_wrapper"}
<div id="content-wrapper" class="js-content-wrapper left-column right-column col-md-4 col-lg-6">
{hook h="displayContentWrapperTop"}
{block name="content"}
<p>Hello world! This is HTML5 Boilerplate.</p>
{/block}
{hook h="displayContentWrapperBottom"}
</div>
{/block}
{block name="right_column"}
<div id="right-column" class="col-12 col-md-4 col-lg-3">
{if $page.page_name == 'product'}
{hook h='displayRightColumnProduct'}
{else}
{hook h="displayRightColumn"}
{/if}
</div>
{/block}
</div>
</div>
{hook h="displayWrapperBottom"}
</section>
{block name="right_column"} <footer id="footer" class="l-footer js-footer">
<div id="right-column" class="col-12 col-md-4 col-lg-3"> {block name="footer"}
{if $page.page_name == 'product'} {include file="_partials/footer.tpl"}
{hook h='displayRightColumnProduct'}
{else}
{hook h="displayRightColumn"}
{/if}
</div>
{/block} {/block}
</div> </footer>
</div>
{hook h="displayWrapperBottom"}
</section>
<footer id="footer" class="l-footer js-footer">
{block name="footer"}
{include file="_partials/footer.tpl"}
{/block}
</footer>
</main> </main>
{block name='javascript_bottom'} {block name='javascript_bottom'}
{include file="_partials/password-policy-template.tpl"} {include file="_partials/password-policy-template.tpl"}
{include file="_partials/javascript.tpl" javascript=$javascript.bottom} {include file="_partials/javascript.tpl" javascript=$javascript.bottom}
{/block} {/block}
{block name='hook_before_body_closing_tag'} {block name='hook_before_body_closing_tag'}
{hook h='displayBeforeBodyClosingTag'} {hook h='displayBeforeBodyClosingTag'}
{/block} {/block}
{block name='mobile-modals'} {block name='mobile-modals'}
{include file="_partials/mobile-modals.tpl"} {include file="_partials/mobile-modals.tpl"}
{/block} {/block}
{block name='page-loader'} {block name='page-loader'}
{include file="_partials/page-loader.tpl"} {include file="_partials/page-loader.tpl"}
{/block} {/block}
</body> </body>
</html> </html>

2
falcon/templates/layouts/layout-full-width.tpl
View File

@ -28,7 +28,7 @@
{block name='right_column'}{/block} {block name='right_column'}{/block}
{block name='content_wrapper'} {block name='content_wrapper'}
<div id="content-wrapper" class="col-12 js-content-wrapper"> <div id="content-wrapper" class="{if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}col-12 {/if}js-content-wrapper">
{hook h="displayContentWrapperTop"} {hook h="displayContentWrapperTop"}
{block name='content'} {block name='content'}
<p>Hello world! This is HTML5 Boilerplate.</p> <p>Hello world! This is HTML5 Boilerplate.</p>