Hello world :-)
We decided to add shoping cart to our Customers portal
designer want to see it like this
I've tried to change Grid layout to Horisontal with 6 records per line, but it still a table
So why don't try CSS-Grid?
first of all I was need to add new brick
I've created new directory
c:\Program Files\PHPRunner9.8\templates\bricks\vo
and copied there original brick files
gridrow_h.htm
gridfieldsrow_h.htm
gridcolumnrow_h.htm
grid_horizontal.htm
grid.htm
Also we need to add new brick to bricks.xml
<brick>
<name>vo_grid</name>
<orientation></orientation>
<version>1</version>
<file>vo/grid</file>
<plexpr></plexpr>
<xtname>grid_block</xtname>
<noWrapper>true</noWrapper>
<wordWrap>true</wordWrap>
<parameters>
<parameter>
<name>vo_hgrid</name>
<default>vo/grid_horizontal.htm</default>
</parameter>
<parameter>
<name>vo_gridheader_horizontal</name>
<default>vo/gridheader_h.htm</default>
</parameter>
<parameter>
<name>vo_gridfooter_horizontal</name>
<default>vo/gridfooter_h.htm</default>
</parameter>
<parameter>
<name>vo_gridrow_horizontal</name>
<default>vo/gridrow_h.htm</default>
</parameter>
<parameter>
<name>vo_gridfieldsheader_horizontal</name>
<default>vo/gridfieldsheader_h.htm</default>
</parameter>
<parameter>
<name>vo_gridcolumnheader_horizontal</name>
<default>vo/gridcolumnheader_h.htm</default>
</parameter>
<parameter>
<name>vo_gridfieldsfooter_horizontal</name>
<default>vo/gridfieldsfooter_h.htm</default>
</parameter>
<parameter>
<name>vo_gridcolumnfooter_horizontal</name>
<default>vo/gridcolumnfooter_h.htm</default>
</parameter>
<parameter>
<name>vo_gridfieldsfooter2_horizontal</name>
<default>vo/gridfieldsfooter2_h.htm</default>
</parameter>
<parameter>
<name>vo_gridfieldsrow_horizontal</name>
<default>vo/gridfieldsrow_h.htm</default>
</parameter>
<parameter>
<name>vo_gridcolumnrow_horizontal</name>
<default>vo/gridcolumnrow_h.htm</default>
</parameter>
<parameter>
<name>vo_vgrid</name>
<default>vo/grid_vertical.htm</default>
</parameter>
<parameter>
<name>vo_gridfieldsrow_vertical</name>
<default>vo/gridfieldsrow_v.htm</default>
</parameter>
<parameter>
<name>vo_gridcolumnrow_vertical</name>
<default>vo/gridcolumnrow_v.htm</default>
</parameter>
</parameters>
</brick>
As you can see, I've added "vo_" to the name of brick and parameters and changed the path to directory "vo"
Now we need to make some changes with brick files.
This site's page have only "List page" so I didn't need record controls elements
And here is how changed files look now
vo/grid.htm
##if @TABLE.listGridLayout == gltVERTICAL##
##brick_param vgrid##
##else##
##brick_param vo_hgrid##
##endif##
vo/grid_horizontal.htm
<div class="grid-container">
##brick_param vo_gridrow_horizontal##
</div>
vo/gridcolumnrow_h.htm
{BEGIN ##@f.strName g##_fieldcolumn}
<div class="grid-item ##if @last##runner-clast##endif## {$##@f.strName g##_class}" {$##@f.strName g##_style}>
{$##@f.strName g##_value}
</div >
{END ##@f.strName g##_fieldcolumn}
vo/gridfieldsrow_h.htm
##foreach Fields as @f filter bListPage order nListPageOrder##
##brick_param vo_gridcolumnrow_horizontal##
##endfor##
vo/gridrow_h.htm
{BEGIN grid_row}
{BEGIN grid_record}
##brick_param vo_gridfieldsrow_horizontal##
{END grid_record}
{END grid_row}
Now we have to work with PHPRunner
first of all on the "Misc" tab change Records per page 30
After that go to "Style" tab and press Layouts modify button. find brick grid and change it to _vogrid
Should be like this:
begincontainer grid delimx=10 delimy=10 color=1 style=grid grid
brick vo_grid
endcontainer
Then we had to go to "Custom CSS" and make our css-grid
.grid-container {
display: grid;
}
.grid-container {
grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
grid-template-rows: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
}
.grid-container {
gap: 10px 10px;
position: relative;
padding: 10px;
background: #f2f0f3;
}
.grid-container .grid-item:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.grid-container .grid-item:nth-child(6) {
grid-column-start: 5;
grid-column-end: 7;
grid-row-start: 1;
grid-row-end: 3;
}
.grid-container .grid-item:nth-child(11) {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 5;
}
.grid-container .grid-item:nth-child(16) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 7;
}
.grid-container .grid-item:nth-child(21) {
grid-column-start: 5;
grid-column-end: 7;
grid-row-start: 5;
grid-row-end: 7;
}
.grid-container .grid-item:nth-child(26) {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 7;
grid-row-end: 9;
}
.grid-item {
position: relative;
}
Now Buildand Upload
And here is the result
