Sort Subproducts on the fly

[mwilcox8]

Hi,
I'm trying to sort subproducts as they are being brought in through the subproducts loop by a field value. Basically I have a black product and a white product and I'm trying to do something like this:

[-- VAR.black "Black" --]
[-- VAR.white "White" --]

[--LOOP SUBPRODUCTS --]
[-- IF VAR.black PRODUCT.Field4 --]
<div class="rightColumn">
[--SUBPRODUCTS--]
</div>
[-- END_IF --]
[--END_LOOP SUBPRODUCTS--]

[--LOOP SUBPRODUCTS --]
[-- IF VAR.white PRODUCT.Field4 --]
<div class="leftColumn">
[--SUBPRODUCTS--]
</div>
[-- END_IF --]
[--END_LOOP SUBPRODUCTS--]

This is just a general idea of what I'm trying to do (sort black colors to the right column and white colors to the left column). I think the problem I'm running into is that PRODUCT.Field4 in the IF statement is referring to the actual product and not its child subproduct, but as far as I know SUBPRODUCT.Field4 will not be recognized. Any suggestions? Am I being clear? It seems like a simple task, but I've been going at it for a few hours now (this is my first ShopSite template in my defense).

[loren_d_c]

Yes, in this case PRODUCT.Field4 would be referring to the Field 4 of the parent product. If you want to check the value of Field 4 of the subproducts, then you would need to move this check into the DEFINE SUBPRODUCT section of your product template.

-Loren

[tfoy]

Might Try this. Don't think it is necessary to check for both black and white, just black all others go in the left column.

[-- VAR.black "Black" --]
[-- VAR.white "White" --]

[-- LOOP SUBPRODUCTS --]

[-- IF VAR.black PRODUCT.Field4 --]

<div class="rightColumn">

[-- ELSE --]

<div class="leftColumn">

[--SUBPRODUCTS--]

</div>

[-- END_IF --]

[--END_LOOP SUBPRODUCTS--]


Then Color the Div to see if it is having the desired effect in shopsite.

<style type="text/css">
<!--
.rightColumn {
width: 50%;
float: right;
background-color:#000000;

}
.leftColumn {
width: 50%;
position:static;
background-color:#ffffff;

}
-->
</style>

[mwilcox8]

I'm afraid I misled you with the explanation. I'm looking to have just one right column div with all the black items in it and one left div with all the white items in it. I'm not sure if it can be done using just shopsite code. I'm still trying though, and will post the solution if I can figure it out.

[tfoy]

with a little modifying I was able to accomplish this, but using seperate div for each item. The sub products with Black in product.Field4 were placed on the right, the others were on the left just as if they had been typed in.

Example.

Main Item

White-----------------------------------------------Black
White-----------------------------------------------Black


If you needed to have them in the same Div then I would think a <span> could be used in place of div.

Anyhow for testing I made 5 products, 1 main and 4 sub products


Put this in my .css

<style type="text/css">
<!--
.rightColumn {
width: 50%;
float: right;
background-color:#000000;

}
.leftColumn {
width: 50%;
position:static;
background-color:#ffffff;

}
-->
</style>


This in my product template.

#########################
[-- DEFINE SUBPRODUCT --]
#########################
[-- VAR.black "Black" --]
[-- VAR.white "White" --]

[-- IF VAR.black PRODUCT.Field4 --]

<div class="rightColumn">
[-- PRODUCT.Field4 --]
[-- ELSE --]

<div class="leftColumn">
[-- PRODUCT.Field4 --]
[-- END_IF --]
</div>

#############################
[-- END_DEFINE SUBPRODUCT --]
#############################


######################
[-- DEFINE PRODUCT --]
######################

########################
# PRODUCT SUBPRODUCTS #
########################

[-- LOOP SUBPRODUCTS --]
[-- SUBPRODUCTS --]
[-- END_LOOP SUBPRODUCTS --]

######################
[-- END_DEFINE PRODUCT --]
######################

[mwilcox8]

If you needed to have them in the same Div then I would think a <span> could be used in place of div.

I'm trying to get all the white products in one single div with left class and all the black products in the other single div with right class. The left and right divs would be used as containers. This is the most important part because then I'm applying javascript to the divs to give a tabbed effect.

[mwilcox8]

Alright, I figured it out!

Code: Select all

#########################
[-- DEFINE SUBPRODUCT --]
#########################

[-- IF VAR.color PRODUCT.Field4 --]
<div class="row">
[-- PRODUCT.Field4 --]
</div>
[--END_IF--]

#############################
[-- END_DEFINE SUBPRODUCT --]
#############################


######################
[-- DEFINE PRODUCT --]
######################

########################
# PRODUCT SUBPRODUCTS #
########################
<div class="left">
[--var.color "Black"--]
[-- LOOP SUBPRODUCTS --]
[-- SUBPRODUCTS --]
[-- END_LOOP SUBPRODUCTS --]
</div>

<div class="right">
[--var.color "White"--]
[-- LOOP SUBPRODUCTS --]
[-- SUBPRODUCTS --]
[-- END_LOOP SUBPRODUCTS --]
</div>

######################
[-- END_DEFINE PRODUCT --]
######################


Works great, check it out http://65.18.168.123/product73.html (still styling the page). But I want to say thank you, tfoy because the solution was a combination of your code and my code. I really appreciate your help.

[tfoy]

Glad to see you got it figured out.

site looks nice very clean and professional




tom