variables for rules between products on product pages

[Vernontnh]

Need to figure out how to write code that creates a variable.

Please see this link:
http://www.stellaandjames.com/store/Necklaces.html

I have set up grids using CSS within a table.
Set up for three products in a row before returning to a new line. The first two on the left have CSS that places a rule on the right and bottom. The box on the right, just the bottom rule.

Which works fine until you get to the last row, and you DO NOT WANT a rule going across the bottom.

So I was thinking that it could be something like this:

Starting from left to right:

I'd set up panels for each scenario (with and without a bottom rule) So in CSS they might be titled:

left panel with rule
middle panel with rule
right panel with rule

left panel no rule
middle panel no rule
right panel no rule

Then on the product template, it would say something like:
FOR THE LEFT PANEL: if three or more products, use left panel with rule, else, use left panel no rule.

FOR THE MIDDLE PANEL: if two or more products, use middle panel with rule, else, use middle panel no rule

FOR THE RIGHT PANEL: if one or more products, use right panel with rule, else, use right panel no rule.

But I have no idea how to set this up: HELP PLEASE!!!

[Jim]

Since you never know when it is going to be the last row (unless you limit the number of rows on a page) I would go about it a different way.

The rule is really between the two rows, not at the bottom of the row. So try putting the rule at the top of second and succeeding rows.


Set an initial value to a VAR to tell if you are on the first row. This would be done on the page template before the loop products

[-- VAR.first yes --]
[-- loop products --]


when you get to the end of the first row set
[-- VAR.first no --]

in your looping code for the rows
[-- if VAR.first no --]
put out your rule
put out the product info.
[-- else --]
put out the product info.
[-- end_if --]

At the end of the [-- end_loop products --] set the
[-- VAR.first yes --]
so you don't leave the VAR in the "no' state.

[Vernontnh]

Hi Jim:

So I would need to remove the rule from all of my CSS panels for the individual products. Currently, the horizontal rule between the products IS built into the CSS for each of three products across a row. In other words, there are actually three separate horizontal rules coming together to make the appearance of one long rule all across the row.

I thought my idea with saying if there are X more products, use the CSS box with the bottom rule, if not use the CSS box without the bottom rule was cleaner and would not require me to change the CSS for the product boxes.

Isn't there then a way for Shopsite to know there are X number of products assigned to the page, so therefore it could know which CSS box to use?

If not, I'll have to remove the bottom rule CSS. Then, it looks to me like I'd need to add a rule somehow to run after every 3 products. I guess I could add that by writing some css calling for a rule after the third product in the template?

is this the actual code i would use:

"put out your rule
put out the product info.
[-- else --]
put out the product info.
[-- end_if --] "


What does this mean:
"set the
[-- VAR.first yes --]" Were exactly would that go? is "set the" part of the code, or would I just copy and paste, [-- VAR.first yes --] somewhere. OR is there some additional code I would need to insert.

Never having used VAR before, I have no idea what I'm doing.

Thanks,

Vernon

If not, I don't know what to replace it with.

[Jim]

So I would need to remove the rule from all of my CSS panels for the individual products. Currently, the horizontal rule between the products IS built into the CSS for each of three products across a row. In other words, there are actually three separate horizontal rules coming together to make the appearance of one long rule all across the row.

No you don't need to remove the rule, you just need to put it at the top instead of the bottom and you need to not include the CSS rule for the first row of products.

I thought my idea with saying if there are X more products, use the CSS box with the bottom rule, if not use the CSS box without the bottom rule was cleaner and would not require me to change the CSS for the product boxes.

Good idea but there is no way to determine the "X more products"

Isn't there then a way for Shopsite to know there are X number of products assigned to the page, so therefore it could know which CSS box to use?

ShopSite knows how many products there are but there is no evaluator operators in the template language other than saying if two values are equal [-- if x y --] syntax where it looks at x and y and if they are the same it returns true and if not it is false. So in order to determine if there are more products you would need to check [-- productsonpage 1 --], [-- productsonpage 2 --] [-- productsonpage 3 --] [-- productsonpage n --] etc which would be to cumbersome to do.

If not, I'll have to remove the bottom rule CSS. Then, it looks to me like I'd need to add a rule somehow to run after every 3 products. I guess I could add that by writing some css calling for a rule after the third product in the template?

Yes that is what I was trying to explain how to do. You know when you output the code to make a new row just add the CSS at that point.

A VAR is just a variable and can be used at any point to check or set the value of something. For example [-- VAR.first yes --] just creates a variable called "yes". [-- IF VAR.first yes --] checks the value of variable, VAR.first, to see if it is set to "yes". [-- VAR.first no --] resets the value of the variable to "no" instead of "yes". Using this method you can see what the value is and execute different code depending on the state of the variable.

Some thing like this would be in your product template.

Code: Select all

[-- IF VAR.first yes --]
   just output the normal product information
   [-- product.name --] [-- product.price --] etc what ever your code currently does to display the product information.
[-- else --]  (var.first is not equal to yes)
   put out your CSS for the rule
   now put out the product information
  [-- product.name --] [-- product.price --] etc what ever your code currently does to display the product information.
[-- END_IF --]

Something like this would be in your page template.

Code: Select all

[-- define page --]
. . .
[-- VAR.first yes --]
[-- loop products --]
     [-- product --]
your code to see if you need to output a new row
if you did then you need to change VAR.first to no
   [-- VAR.first no --]
[-- end_loop products --]
clean up VAR.first so we're ready for next time around
   [-- VAR.first yes --]
. . .
[-- end_define page --]

NOTE: the ShopSite template tags are not case sensitive so you can have [-- VAR.first --] or [-- Var.First --] or [-- var.first --] or [-- VaR.fIrSt --] and they all mean the same thing.

In order to be more exact I would need to have both your page and product templates to see where thing would need to change. That is a bit much for the forum so if you need to do that please send them by way of the Email option on the bottom of the post.

[Vernontnh]

Hey Jim:

This post goes back a ways and I'm just getting to it again. I think I understand what you have instructed pretty well at this point. But actually there's a second variable issue. in addition to horizontal rules, there are also vertical rules separating the products so that it looks like the products occupy a tick tac toe board.
http://www.stellaandjames.com/store/bracelets.html

The css is set up so the first two products across a row have a rule on the right border. But the third product does not have a rule. So I would need to write a variable for that.

How the heck would I make a conditional statement so that the first two have rules the the right drawn, but the third does not all the while drawing the horizontal rule only if there is another product to follow.


Here's the product page template:

[-- DEFINE PRODUCT --]
<div class=".product_pg_prod_photo_bracelets" id=".product_pg_prod_photo_bracelets">[-- IF PRODUCT.Graphic --][-- IF PRODUCT.DisplayMoreInformationPage --]
<a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Graphic --]</a><br>[-- ELSE --][-- PRODUCT.Graphic --]<br></div>[-- END_IF --][-- END_IF --]

[-- IF PRODUCT.DisplayMoreInformationPage --]
<a href="[-- PRODUCT.MoreInfoURL --]"><div class=".product_pg_product_name_bracelets" id=".product_pg_product_name_bracelets">[-- PRODUCT.Name --]</a>
[-- ELSE --]
[-- PRODUCT.Name --]
[-- END_IF --]</div>

<div class=".product_pg_prod_price" id=".product_pg_prod_price">[-- IF PRODUCT.Price --]
[-- PRODUCT.Price --]<br></div>
[-- END_IF --]
[-- END_DEFINE PRODUCT --]


[-- DEFINE PAGE --]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>[-- IF PAGE.Title --][-- PAGE.Title --]</title>[-- ELSE --][-- PAGE.Name REMOVE_HTML --]</title>[-- END_IF --]

[-- IF PAGE.MetaKeywords --]<meta name="keywords" content="[-- PAGE.MetaKeywords --]">[-- END_IF --]

[-- IF PAGE.MetaDescription --]<meta name="description" content="[-- PAGE.MetaDescription --]">[-- END_IF --]

<link rel="stylesheet" type="text/css" href="[-- OUTPUT_DIRECTORY_URL --]/media/css/stella-james.css">

</head>

<body>
</div>
<table width="935" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse: collapse">
<tr>
<th width="935" style="border-collapse: collapse"border="0" scope="col"><table width="935" style="border-collapse: collapse"border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="935" style="border-collapse: collapse"border="0" align="left" valign="top" scope="col">[-- INCLUDE Stella-James-Header PROCESS --][-- INCLUDE Stella-James-TopNav PROCESS --]</th>
</tr>
<tr>
<td><table width="935"border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
<tr>
<th width="170" align="left" valign="top" bgcolor="#f7eff4" scope="col" >[-- INCLUDE Stella-James-LeftNav PROCESS --] </th>
<th width="1" align="left" valign="top" bgcolor="#000000" ></th>
<th width="15" align="left" valign="top" bgcolor="#FFFFFF" ></th>
<th width="702"align="left" valign="top" scope="col"><table width="702" style="border-collapse: collapse"border="0" cellspacing="0" cellpadding="0"></
<tr>
[-- IF PAGE.DisplayName --]<th width="729" align="left" valign="top" scope="col"><div class="productcategoryname2">[-- PAGE.Name --][-- END_IF --] [-- IF PAGE.Text1 --] [-- PAGE.Text1 --]

[-- END_IF --] </div></th>
</tr>
<tr>
<td><div class="content_bottom" id="content_bottom2"> [-- IF PAGE.NumLinks "0" --]
[-- ELSE --]
[-- LOOP LINKS --]
<div class="content_bottom_left_bracelets"id="content_bottom_left2"align="center">[-- LINK stella-and-james-bracelets.html --]</div>
<div class="content_bottom_middle_bracelets"id="content_bottom_left2"align="center">[-- LINK Stella-and-James --]</div>
<div class="content_bottom_middle_bracelets"id="content_bottom_left2"align="center">[-- LINK stella-and-james-bracelets.html --]</div>
<div class="content_bottom_right_bracelets" id="content_bottom_left2"align="center">[-- LINK stella-and-james-bracelets.html --]</div>
[-- END_LOOP LINKS --]
[-- END_IF --]

[-- IF PAGE.Text2 --]
<p>[-- PAGE.Text2 --]</p>
[-- END_IF --]

[-- IF PAGE.NumProducts "0" --]
[-- ELSE --]
[-- LOOP PRODUCTS --]
<div class="content_bottom_left_bracelets id="content_bottom_left2"align="center">[-- PRODUCT Stella-And-James_product-bracelets.html --]</div>
<div class="content_bottom_middle_bracelets" id="content_bottom_left2" align="center">[-- PRODUCT Stella-And-James_product-bracelets.html --]</div>
<div class="content_bottom_middle_bracelets" id="content_bottom_left2"align="center">[-- PRODUCT Stella-And-James_product-bracelets.html --]</div>
<div class="content_bottom_right_bracelets" id="content_bottom_left2"align="center">[-- PRODUCT Stella-And-James_product-bracelets.html --]</div>
[-- END_LOOP PRODUCTS --]
[-- END_IF --]

[-- IF PAGE.Text3 --]
<p>[-- PAGE.Text3 --]</p>
[-- END_IF --] </div>
</tr>
<tr>
<td><div class="cross-sell-spacer" id=".cross-sell-spacer"></div><div align="center">[-- INCLUDE Stella-James-Footer PROCESS --]</div></td>
</tr>
</table></th>
</tr>
</table></td>
</tr>
</table></th>
</tr>
</table>
</body>
</html>
[-- END_DEFINE PAGE --]


Thanks,

Vernon

[Jim]

Sorry, I have been swamped at work and haven't had a chance to look into this deeper. However, looking at the code you included in the post, you still are using multiple product output in a single loop call. Although this appears to work the code is not designed in such a way that it should be relied on to work properly when done like that. You also would not be able to use a VAR to determine when to output the horizontal and vertical lines as you want them because you never know at what point in the output the last product will be output, it could be after 1 or 2 or 3 or all 4 columns. The only way to be able to know what position the product is being output in is to display a single product during each [-- Loop Products --] tag, That way you can set a VAR to count the number of product that have been output in a row by incrementing the VAR each time you enter the product code. Based on the value of the VAR you can then output the particular horizontal and vertical lines you need.

I gave an example of how this should be done in an earlier post so please reread the previous posts and see if that helps.