Difference between revisions of "Layout"
PeterRobert (talk | contribs) |
PeterRobert (talk | contribs) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 18: | Line 18: | ||
---- | ---- | ||
| − | + | ==='''Module Groups'''=== | |
*Most groups are self explanatory. | *Most groups are self explanatory. | ||
| Line 29: | Line 29: | ||
---- | ---- | ||
| − | + | ==='''Enable/Disable modules'''=== | |
*Click the item in the '''Modules''' column list to select it. | *Click the item in the '''Modules''' column list to select it. | ||
| Line 39: | Line 39: | ||
---- | ---- | ||
| − | + | ==='''Module Content Container'''=== | |
*The Container of most content modules can be changed. | *The Container of most content modules can be changed. | ||
| Line 53: | Line 53: | ||
---- | ---- | ||
| − | + | ==='''Install Modules'''=== | |
*To install additional content modules: | *To install additional content modules: | ||
| Line 68: | Line 68: | ||
---- | ---- | ||
| + | ==='''Child - Parent'''=== | ||
| + | A Layout Module is a '''child''' module of it's '''parent''' Modular Content module. | ||
| − | + | The parent Modular Content module can also be positioned anywhere on the page using the Sort Order and Content Container settings. | |
| − | + | For example, the parent Product Info Modular Content Module (π Modular product_info) is with other content modules - from admin, go to [[File:adminnavbarmod.png|link=]] '''Modules → Content''' and scroll down to see this: | |
<div class="mainpage_box"> | <div class="mainpage_box"> | ||
[[File:layoutproductinfo.png]] | [[File:layoutproductinfo.png]] | ||
</div> | </div> | ||
| − | The Layout | + | The Modular Content Module is a container for it's child Layout Modules. |
| + | The child Layout Modules can then be positioned anywhere within the parent Modular Content Module. | ||
| + | This is achieved by assigning each module to a Display Slot (named A - I) and then, using the Sort Order and Content Container, the module can be positioned within that Display Slot. | ||
| − | + | The Display Slots are displayed in relation to each other on the page as illustrated in the graphic like this: | |
| − | |||
| − | |||
| − | The | ||
<div class="mainpage_box"> | <div class="mainpage_box"> | ||
[[File:layoutmodules.png]] | [[File:layoutmodules.png]] | ||
</div> | </div> | ||
| + | |||
| + | The width of every Display Slot can be changed by editing the Modular Content Module. | ||
This allows the shop owner to display the modules on the page in countless variations. | This allows the shop owner to display the modules on the page in countless variations. | ||
| Line 106: | Line 109: | ||
*'''What our customers say...''', with a sort order of '''120''' shows next on a new row (because the total width of the previous module is '''12''' - 100% of page width) with a content width of '''6''' - 50% of page width. | *'''What our customers say...''', with a sort order of '''120''' shows next on a new row (because the total width of the previous module is '''12''' - 100% of page width) with a content width of '''6''' - 50% of page width. | ||
| − | Look at '''Layout Modules → Product Info''' to see how the page displays the modules contained in the Product Info | + | Look at '''Layout Modules → Product Info''' to see how the page displays the modules contained in the Product Info Modular Content Module. |
| − | *'''Gallery''', assigned to | + | *'''Gallery''', assigned to Display Slot '''B''' (which has a set page width of '''7''' - 58.33% of page width) with a sort order of '''200''' shows first in '''B''' with a content width of '''12''' - 100% of Display Slot '''B''' width. |
| − | *'''Image Disclaimer''', assigned to | + | *'''Image Disclaimer''', assigned to Display Slot '''B''' with a sort order of '''230''' shows next in '''B''' on a new row (because the total width of the previous module is '''12''' - Display Slot '''B''' width) with a content width of '''12''' - 100% of Display Slot '''B''' width. |
| − | *'''Options & Attributes''', assigned to | + | *'''Options & Attributes''', assigned to Display Slot '''C''' (which has a set page width of '''5''' - 41.66% of page width) with a sort order of '''310''' shows first in '''C''' with a content width of '''12''' - 100% of Display Slot '''C''' width. |
| − | *'''Buy Button''', assigned to | + | *'''Buy Button''', assigned to Display Slot '''C''' (which has a set page width of '''5''' - 41.66% of page width) with a sort order of '''320''' shows next in '''C''' on a new row (because the total width of the previous module is '''12''' - Display Slot '''C''' width) with a content width of '''12''' - 100% of Display Slot '''C''' width. |
| − | Any | + | Any Display Slot that has no modules assigned to it does not display. |
Latest revision as of 10:28, 16 November 2024
From admin go to 
Modules → Layout - to see like this:
This list shows all the layout modules installed in the shop by default.
They are sorted into Groups according to the page on which they display.
They are also sorted by the Sort Order in which they are displayed on the page in relation to each other.
The Active column shows if they are enabled (currently displayed) on the page - green if they are enabled - red if they are disabled.
Module Groups
- Most groups are self explanatory.
- contact_us refers to the Contact Us page.
- index refers to the index or home/front page.
- info refers to Info Pages.
- product_info refers to the product page.
Enable/Disable modules
- Click the item in the Modules column list to select it.
- Click Edit to open the edit panel.
- Change the setting for Enable... Module to False.
- Click Save
- The Active column button will change from green to red to show it has been disabled.
Module Content Container
- The Container of most content modules can be changed.
- Click the item in the Modules column list to select it.
- Click Edit to open the edit panel.
- Change the Content Container setting according to the instructions shown.
- Click Save
For more information about using Bootstrap column width classes like, for example, col-sm-6, see - Bootstrap Grid
For more information about using Bootstrap Spacing like, for example, mb-4, see - https://getbootstrap.com/docs/5.0/utilities/spacing/
Install Modules
- To install additional content modules:
- Click Install Module shown top right of screen - the number shown next to it indicates the number of modules available.
- Click a module to use from the list.
- Click Install Module
- Click Edit
- Choose a Content Container setting according to the instructions shown.
- Enter a Sort Order value to order the display of the module in relation to the other modules in the same group.
- Do not leave 0 as the Sort Order on modules as it can cause problems.
- You can give it any number but note and follow the convention used as default which is helpful.
- Click Save
Child - Parent
A Layout Module is a child module of it's parent Modular Content module.
The parent Modular Content module can also be positioned anywhere on the page using the Sort Order and Content Container settings.
For example, the parent Product Info Modular Content Module (π Modular product_info) is with other content modules - from admin, go to Modules → Content and scroll down to see this:
The Modular Content Module is a container for it's child Layout Modules.
The child Layout Modules can then be positioned anywhere within the parent Modular Content Module. This is achieved by assigning each module to a Display Slot (named A - I) and then, using the Sort Order and Content Container, the module can be positioned within that Display Slot.
The Display Slots are displayed in relation to each other on the page as illustrated in the graphic like this:
The width of every Display Slot can be changed by editing the Modular Content Module.
This allows the shop owner to display the modules on the page in countless variations.
For example, in the default installation, the product page for Grapefruit shows this:
Look at Modules → Content to see how the page displays the modules.
- Name, with the lowest sort order of 40 shows first with a content width of 9 - 75% of page width (note that page width here refers to the product information area that is between the side boxes on the left and right).
- Price, with a sort order of 50 shows next with a content width of 3 - 25% of page width (note that the total width of all modules displayed in one row must not exceed 12 - 100% of page width).
- Review Stars/Link, with a sort order of 55 shows next on a new row (because the total width of the previous two modules adds to 12 - 100% of page width) with a content width of 12 - 100% of page width.
- π Modular product_info, with a sort order of 59 shows next on a new row (because the total width of the previous module is 12 - 100% of page width) with a content width of 12 - 100% of page width. This module contains other modules shown highlighted in grey in the screenshot.
- Description, with a sort order of 60 shows next on a new row (because the total width of the previous module is 12 - 100% of page width) with a content width of 12 - 100% of page width.
- Date Available, with a sort order of 70 shows next on a new row (because the total width of the previous module is 12 - 100% of page width) with a content width of 12 - 100% of page width.
- What our customers say..., with a sort order of 120 shows next on a new row (because the total width of the previous module is 12 - 100% of page width) with a content width of 6 - 50% of page width.
Look at Layout Modules → Product Info to see how the page displays the modules contained in the Product Info Modular Content Module.
- Gallery, assigned to Display Slot B (which has a set page width of 7 - 58.33% of page width) with a sort order of 200 shows first in B with a content width of 12 - 100% of Display Slot B width.
- Image Disclaimer, assigned to Display Slot B with a sort order of 230 shows next in B on a new row (because the total width of the previous module is 12 - Display Slot B width) with a content width of 12 - 100% of Display Slot B width.
- Options & Attributes, assigned to Display Slot C (which has a set page width of 5 - 41.66% of page width) with a sort order of 310 shows first in C with a content width of 12 - 100% of Display Slot C width.
- Buy Button, assigned to Display Slot C (which has a set page width of 5 - 41.66% of page width) with a sort order of 320 shows next in C on a new row (because the total width of the previous module is 12 - Display Slot C width) with a content width of 12 - 100% of Display Slot C width.
Any Display Slot that has no modules assigned to it does not display.
Tip: If you don't want to show a module, you can either disable (hide) it or remove (uninstall) it.
When playing with the design, it's a good option to disable it, as it saves the settings it has been given, meaning it will be exactly the same as it was if you choose to enable it again later.
However, this also means that it is loaded completely with every page, which in extreme circumstances might slow down your website
If you are sure you don't want to use a module, it is better to remove it than to hide it.
Many Addons and Extensions available in the CE Phoenix Cart Addons Library
If help is needed, support is available in the CE Phoenix Cart Support Forum
Phoenix Cart User Guide, like CE Phoenix Cart, is free to use but is maintained by unpaid volunteers.
All other content is the reserved Intellectual Property and Copyright of phoenixcart.org
