Would like "Dummies Guide To: Push Button Grid"

[bangers]

Hi All,
Some of you may know, I've done a number of sites over the years but never had to experience the joys of creating a push button grid.

I can't find a tutorial in the Advanced User Guide which would be a start (I know it must be somehwere) and my tinkering doesn't appear to be spawning the results I require.

Would love someone just to point me in a the direction of either or all of the below:

• a:tutorial in AUG
• b:relevant thread
• c:write a quick dummies guide
• d: let me know if I'm barking up the wrong tree.

Here's the project specifics if it helps:

• Most products available by size/age (just one attribute).
• Stock monitoring on each choice by attaching hidden products to each choice.
• I need to create a push button grid (button for each choice).
• When out of stock the button needs to be replaced with a image to represent of of stock and can't be ordered.
• Ideally when low on stock I'd like customer to be able to order button with a different id or class attached to the button...but that is ideally.

I have attached an image of what I would like to achieve.

Any thoughts or pointers much appreciated.

[RuralWeb]

norm has a plugin that will do all that

[bangers]

Thanks for the reply.
Though I can't find it on his site. Just NorMatrix which I don't think is meant for what I want it to do. If he does I'm more than willing to parse a few shillings his way.
regards
bangers

[NormanRouxel]

See http://www.kettlewellcolours.co.uk/a..._Wrap__35.html for a live example. And http://www.stardustkids.co.uk/acatal...s-clothes.html displays availability.

Neither are off-the-shelf patches as a bit of customisation was needed to add in these features.

[RuralWeb]

I'm sure I've seen something working like you describe on a recent site that norm posted.

[leehack]

Here is a good example - http://www.starduststore.com/acatalo...byclothes.html

[bangers]

Thanks, All good examples.
But I still haven't the foggest why I can't at least get a button to appear for each choice. Any ideas?

Norman, thanks I am more than happy customising buttons and layout etc as long as I can get a basic working example. If you want to give me an idea of cost then please email me by any means.

Regards
bangers

[NormanRouxel]

Unfortunately, the two sites I did tweaks like this for, used other custom code so there's no off-the-shelf patch available. I just looked at my notes regarding this patch and they are 901 lines long (and include a bug fix to actinic_main.php that still hasn't been put right). Not trivial!

I've no free time for the next month or so, so cannot really help much.

[bangers]

ok thanks norm.
Can anyone push me in the direction of instructions about push button lists at least. So I can at least produce buttons for each choice.

The community so far hasn't shown me what I need and I can't find it in the AUG even though I understand there is one there.

Help from anyone else would be appreciated,
cheers
bangers

[NormanRouxel]

Best look at http://community.actinic.com/showthread.php?t=35114 regarding the existing Actinic bug.

[RuralWeb]

look at v9 as it has something in it that may solve the problem. I've not played with it yet so let us know if it works and give the community the answer.

[bangers]

Thanks Norman,
I've already come across this but I hope I shouldn't have a problem at least this far as Product References are being generated by actinic (and they just produce numbers don't they?)
cheers
Bangers

[bangers]

look at v9 as it has something in it that may solve the problem. I've not played with it yet so let us know if it works and give the community the answer.

Will do though I wanted to leave well alone for a few months until I had a chance to read feedback on it.

The move to v8 was ugly and painful and cost me a huge amount in time and therefore money because I moved so quickly to it. Being more careful this time.

[Billy]

bangers I am with you on this one. I am trying to create the same thing as you.

I have added Normans fix into the actinic_main.php and that solved the problem with the reference numbers not working if they contain a '-' or '.' etc.

I then looked at trying to get the out of stock graphic to appear using block statements in the add to cart layout, but as you say the reference numbers for the products are not used here.

After alot of deduction i figured out that the php code in the actinic_main.php needs to be altered as that is where the main part of the push button grid is built.

I have added an extra 'elseif' statement to add an 'out of stock' graphic. The problem is that I have not figured how to add the relevent stock reference into an array which can then be tested by the 'elseif' statment in the actinic_main.php.

My php is fairly limited and I have been working mostly on trial and error, or more error and error.

What I can see from the php code for the push button grid is that there is an array which runs through every permutation creating a reference for each one. All it needs is an extra variable included in the array referencing the 'stock level' or 'in/out of stock' flag. This can then be tested in the 'if' statement at the bottom of the actinic_main.php adding either a blank space for an invalid permutation, an 'out of stock' graphic, or an 'add to cart' button.

Simple if you an expert on php!!!

If anyone is willing to have a go a this challenge I can post the code I have edited so far and let you have a go???

Hopefully
Billy

[bangers]

Hi Billy,
Glad I am not the only one.

Here's where I am with it:
I got the button to appear for each choice (should have been simple but like I say no real guide on how to do this).

Then if you look at the screenshot I produced I needed a change of layout where the choice label appears above the button rather than creating a seperate row for each choice I needed in effect a coloumn. So I changed the markup in pushbutton grid and actinic_main.php to use <ul><li> format which gave me more flexibilty (thought I was going mad at first because <tr><td> tags were still being created despite changing them in pushbutton grid template, wasn't until your post that I realised they must be in actinic_main.php).

I have creted the new cart button and I am just about to use AUG for how change button if out of stock.

If your post is correct and I can't use this method I too would apprectiate someone looking at how this can be done in the php file.

Here's my editting code:
Push Button Grid

<actinic:block PHP="true">
global $sATC;
global $sProdRef;
global $sInvalidPermutation;
$sATC = '<actinic:variable name="AddToCartButton" encoding="perl"/>';
$sProdRef = '<actinic:variable Name="ProductID" selectable="false" encoding="perl"/>';
$sInvalidPermutation = '';
//
// Code inside a PHP block will be rendered first in the standard way, i.e. variable references are substituted, content lists are looped.
// After that the result of standard rendering will be executed as a PHP script.
// The output of the PHP script will be the rendered result of this markup code block
//

//
// As this is an attribute design, we are inside an attribute list
// Store the index of current attribute, as we render the next N attribute in the button grid
//
$nBaseAttributeIdx = <actinic:variable name="ListIndex" selectable="false"/>;
//
// Get the number of attribute in Columns and number of attributes in Rows from local variables
//
<actinic:block type="AttributeList" >
$nAttributeCount = <actinic:variable name="AttributeCount" />;
</actinic:block>
$nAttribs = min( <actinic:variable name="NumberAttributesInPushButtonGrid" selectable="false" />, $nAttributeCount);
$n1 = round($nAttribs / 2);
$n2 = $nAttribs - $n1;

if ( $nAttribs == 1 )
{
$nXAttributeCount = 1;
$nYAttributeCount = 0;
}
else
{
if ($n1 > $n2)
{
$nYAttributeCount = $n1;
$nXAttributeCount = $n2;
}
else
{
$nYAttributeCount = $n2;
$nXAttributeCount = $n1;
}
}
//
// Now loop through all the attributes of the given product and collect all informatiuon for rendering in vectors
// We need to loop through all the attributes, as we can't loop content lists for a given range only
//
// This is a special in-place content list rendering.
// The block loops thorough all attributes of the current product, renders the enclosed block for each attribute, and concatenates the results
// In this case the output is intended to be a valid PHP code of course
//
unset( $listHeaderDesigns );
$listHeaderDesigns = array();
<actinic:block type="AttributeList" >
//
// Store current list index for PHP
//
$nAttributeListIdx = <actinic:variable name="ListIndex" selectable="false"/>;
//
// Remember attribute widget (e.g. v_9_2, which means 2nd attribute of product "ref=9"
//
$listAttributeWidgets[$nAttributeListIdx] = '<actinic:variable name="UIWidgetName" selectable="false"/>';
//
// Loop through all the choices of current attribute and render COLUMN/ROW HEADERS
//
$listHeaderDesigns[$nAttributeListIdx][0] = "";
$nChoiceListIdx = 1;
<actinic:block type="ChoiceList">
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22ChoiceID%22%20%2f%3e%20%21%3d%200%29%20OR%0d%28%28%3cactinic%3avariable%20name%3d%22ComponentIsOptional%22%20%2f%3e%20%3d%3d%20TRUE%20%29%20AND%20%28%3cactinic%3avariable%20name%3d%22IsUsedNoneChoiceLabel%22%20%2f%3e%20%3d%3d%20FALSE%29%29%20OR%0d%28%28%3cactinic%3avariable%20name%3d%22ComponentIsOptional%22%20%2f%3e%20%3d%3d%20TRUE%20%29%20AND%20%28%3cactinic%3avariable%20name%3d%22IsUsedNoneChoiceLabel%22%20%2f%3e%20%3d%3d%20TRUE%29%20AND%20%28%3cactinic%3avariable%20name%3d%22AttributeCount%22%20%2f%3e%20%3d%3d%201%29%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22ComponentIsOptional%22%20%2f%3e%20%3d%3d%20FALSE%29" >
//
// Render Column/Row header for current choice
//
$listHeaderDesigns[$nAttributeListIdx][$nChoiceListIdx] = <<<FREE_MARKUP_CODE_BLOCK
<actinic:variable name="ChoiceDisplayLabel" />
FREE_MARKUP_CODE_BLOCK;
//
// Remember Choice ID as well
//
$listChoiceIds[$nAttributeListIdx][$nChoiceListIdx][0] = <Actinic:Variable Name="ChoiceSelectedValue" selectable="false"/>;
$listChoiceIds[$nAttributeListIdx][$nChoiceListIdx][1] = <actinic:variable name="ChoiceID" />;
$nChoiceListIdx++;
</actinic:block>
</actinic:block>

</actinic:block>
//
// Fill the array of permutations
//
$listPermutations = array();
<actinic:block type="PermutationList">
$nPermutationListIdx = <actinic:variable name="ListIndex" />;
<actinic:block type="PermutationChoiceList">
$nChoiceListIdx = <actinic:variable name="ListIndex" />;
$listPermutations[ $nPermutationListIdx ][ 0 ][ $nChoiceListIdx - 1 ] = <actinic:variable name="ChoiceID" />;
</actinic:block>
$listPermutations[ $nPermutationListIdx ][ 1 ] = <actinic:variable name="PermutationIsValid" />;
</actinic:block>
//
// Validate parameters
//
if (($nYAttributeCount < 0) ||
($nYAttributeCount > 100))
{
echo '<br /><b>Wrong y attribute count</b><br />';
exit(0);
}

if (($nXAttributeCount < 0) ||
($nXAttributeCount > 100))
{
echo '<br /><b>Wrong x attribute count</b><br />';
exit(0);
}
//
// Check if we have enough attributes to display
//
if (($nBaseAttributeIdx - 1 + $nYAttributeCount + $nXAttributeCount) > count($listHeaderDesigns))
{
echo '<br /><b>There are not enough attributes for displaying the object</b><br />';
exit(0);
}
//
// If we have 1 or 2 attributes, then display attribute name in cell (0,0)
//
$sHeaderDesign = "";
if ($nXAttributeCount + $nYAttributeCount <= 2)
{
$sHeaderDesign .= "<b>";
for ($nAttributeIdx = count($listHeaderDesigns); $nAttributeIdx >= $nBaseAttributeIdx; $nAttributeIdx--)
{
$sHeaderDesign .= $listHeaderDesigns[$nAttributeIdx][0];
$sHeaderDesign .= ":";
if ($nAttributeIdx > $nBaseAttributeIdx)
{
$sHeaderDesign .= "&nbsp;/&nbsp;";
}
}
$sHeaderDesign .= "</b>";
}
//
// Start putting the table together
//

//
// We need hidden input fields so that scripts can identify the selected choice-combination
// However as initially we don't know which grid-cell will be selected, leave the value of these fields empty
// We will fill-in the values by JavaScript when a button is pressed
//
for ($nAttributeIdxOffset = 1; $nAttributeIdxOffset <= $nXAttributeCount + $nYAttributeCount; $nAttributeIdxOffset++)
{
echo "<input type='hidden' name='${listAttributeWidgets[$nBaseAttributeIdx + $nAttributeIdxOffset -1]}' value=''>";
}
//
// If there is only a single row, then display column header here
//
if ($nYAttributeCount == 0 && $nXAttributeCount == 1)
{
echo $sHeaderDesign;
echo "<br/>";
}
//
// Output table start tag
//
echo '<div class="clearfix" id="size"><div id="pushtext"><actinic:variable name="AttributeName" />:<img class="pushtext" src="img/push-addtext.gif" width="130" height="19" /></div><div id="push"><ul>';
//
// Draw table header rows
// Loop through Y-attributes and render a row for each of them
// Fields in second raw are repeated by the number of choices in first row,
// Fields in third row are repeated by the number of choices in first row and second row
//
$nRepeatChoicesBy = 1; // we clone the content of a row this times
for ($nColumnIdx = 1; $nColumnIdx <= $nYAttributeCount; $nColumnIdx++)
{
//
// Row start tag
//
echo "";
//
// (0,0) cell is exceptional, it's a big merged cell with no choice
//
if ($nColumnIdx == 1)
{
echo "<li>";
echo $sHeaderDesign;
echo "</li>";
}
//
// Get number of choices of current Y-attribute
//
$nAttributeChoiceCount = count($listHeaderDesigns[$nBaseAttributeIdx + $nColumnIdx - 1]) - 1;
//
// Determine table cell offset, i.e. how many columns this choice occupies
//
$nColSpan = 1;
for ($nAttributeIdx = $nColumnIdx + 1; $nAttributeIdx <= $nYAttributeCount; $nAttributeIdx++)
{
$nColSpan *= (count($listHeaderDesigns[$nBaseAttributeIdx + $nAttributeIdx - 1]) - 1);
}
//
// Draw header table cells - one for each choice
//
for ($nRepeat = 1; $nRepeat <= $nRepeatChoicesBy; $nRepeat++)
{
for ($nChoiceIdx = 1; $nChoiceIdx <= $nAttributeChoiceCount; $nChoiceIdx++)
{
echo "<li>";
echo $listHeaderDesigns[$nBaseAttributeIdx + $nColumnIdx - 1][$nChoiceIdx];
echo "</li>";
}
}
//
// Content of the next row should be repeated for each choice in this row
//
$nRepeatChoicesBy = $nRepeatChoicesBy * $nAttributeChoiceCount;
//
// Row end tag
//
echo "";
}
//
// Draw table rows
//
$listCellChoiceIndices = array();
$nAttributeIdx = 1;
$sRowHeader = "";
drawRows($nAttributeIdx, $listCellChoiceIndices, $sRowHeader);
//
// Close table tag
//
echo "</ul></div></div>";
</actinic:block>
<actinic:variable name="AttributeSeparator" />

actinic_main.php
Attached file

Hope this helps or someone can help,
regards
Bangers