vmajor
October 30, 2009, 8:48am
1
Hi,
Help.
I am building a configurable product template for our brand shop and I am trying to hide the long list of variables.
Here is the example link, yes the site is not nice looking, but this is a test site, I am only focusing on the functionality: http://shop.velocite-bikes.com/BIKES-AND-FRAMES/Velocite-Millennium.html
What I want customers to see is just this:
The product variant title, image and price. I would like the “variants” to remain hidden until the custom clicks on “Configure your {product variant}”
When the customer click on “Configure your {product variant}”, the variants section should slide down - similar to the accordion menu, but allowing multiple sections to be open at once.
I started dabbling with jQuery and this is the variant portion of the code in product.tpl that needs to be collapsible:
<h2>Configure your <label>[{$product->oxarticles__oxvarselect->value}] [{$product->oxarticles__oxtitle->value}]</label> </h2>
<div class="variants">
[{ $oViewConf->getHiddenSid() }]
[{ $oViewConf->getNavFormParams() }]
<input type="hidden" name="cl" value="[{ $oViewConf->getActiveClassName() }]">
[{if $owishid}]
<input type="hidden" name="owishid" value="[{$owishid}]">
[{/if}]
[{if $toBasketFunction}]
<input type="hidden" name="fnc" value="[{$toBasketFunction}]">
[{else}]
<input type="hidden" name="fnc" value="tobasket">
[{/if}]
<input type="hidden" name="aid" value="[{ $product->oxarticles__oxid->value }]">
[{if $altproduct}]
<input type="hidden" name="anid" value="[{ $altproduct }]">
[{else}]
<input type="hidden" name="anid" value="[{ $product->oxarticles__oxnid->value }]">
[{/if}]
[{if $recommid}]
<input type="hidden" name="recommid" value="[{ $recommid }]">
[{/if}]
<input type="hidden" name="pgNr" value="[{ $pageNavigation->actPage-1 }]">
[{if $size!='thin' && $size!='thinest'}]
<input id="test_am_[{$testid}]" type="hidden" name="am" value="1">
[{/if}]
[{ if $product->getVariantList() && ($size!='thinest') }]
<label>[{ $product->oxarticles__oxvarname->value }]:</label>
[{ if $product->hasMdVariants() }]
<select id="mdVariant_[{$testid}]" name="mdVariant_[{$testid}]">
[{ if !$product->isParentNotBuyable()}]
<option value="[{$product->getId()}]">[{ $product->oxarticles__oxvarselect->value }] [{oxhasrights ident="SHOWARTICLEPRICE"}] [{ $product->getFPrice() }] [{ $currency->sign|strip_tags}]*[{/oxhasrights}]</option>
[{/if}]
[{foreach from=$product->getMdSubvariants() item=mdVariant}]
<option value="[{$mdVariant->getLink()}]">[{ $mdVariant->getName() }] [{oxhasrights ident="SHOWARTICLEPRICE"}] [{ $mdVariant->getFPrice()|strip_tags }]* [{/oxhasrights}]</option>
[{/foreach}]
</select>
[{else}]
<select id="test_varSelect_[{$testid}]" name="aid">
[{ if !$product->isParentNotBuyable()}]
<option value="[{$product->getId()}]">[{ $product->oxarticles__oxvarselect->value }] [{oxhasrights ident="SHOWARTICLEPRICE"}] [{ $product->getFPrice() }] [{ $currency->sign|strip_tags}]*[{/oxhasrights}]</option>
[{/if}]
[{foreach from=$product->getVariantList() item=variant}]
<option value="[{$variant->getId()}]">[{ $variant->oxarticles__oxvarselect->value }] [{oxhasrights ident="SHOWARTICLEPRICE"}] [{ $variant->getFPrice() }] [{ $currency->sign|strip_tags}]* [{/oxhasrights}]</option>
[{/foreach}]
</select>
[{/if}]
[{elseif $product->getDispSelList()}]
[{foreach key=iSel from=$product->selectlist item=oList}]
<label>[{ $oList.name }] :</label>
<select id="test_sellist_[{$testid}]_[{$iSel}]" name="sel[[{$iSel}]]" onchange="oxid.sellist.set(this.name,this.value);">
[{foreach key=iSelIdx from=$oList item=oSelItem}]
[{ if $oSelItem->name }]
<option value="[{$iSelIdx}]"[{if $oSelItem->selected }]SELECTED[{/if }]>[{ $oSelItem->name }]</option>
[{/if}]
[{/foreach}]
</select>
[{/foreach}]
[{/if}]
Can someone suggest jQuery code and method for achieving this?
Thanks,
V.
MBa
October 30, 2009, 4:20pm
2
Really I don’t understand you well. Ok, I’m not english
But I took a look on your page and I see, that you include jquery in the head area but not the jquery.tabs plugin (or jquery.ui) which you try to use later.
$("#accordion").tabs("#accordion div.variants", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
Without the ressource of jquery.tabs it cant work.
In first I suggest you to use firefox with the firebug plugin.
PS: I think you will use the accordium-plugin and not tabs. However in this way it can’t work.
vmajor
October 31, 2009, 3:48am
3
Thank you MBa,
yes the main problem was the missing plugin… so now it kind of works.
The toggle works for the first variant product, but not for the second one. I think I can fix this, but I will of course ask if I get lost since it can again be something simple.
Fixing the CSS is not a problem. I will set the height to “auto”
Once I have completed this mod, I will post the code here so that others can use it if they want.
V.
vmajor
October 31, 2009, 7:15am
4
OK it works now. As promised here is the code:
<!-- jsquery div toggle wrapper. Set unique id for class and div using appropriate smarty tag. -->
<a href="#" id="switch_[{$product->oxarticles__oxvarselect->value}]" class="ui-state-default ui-corner-all"><h2>Click here to configure [{$product->oxarticles__oxvarselect->value}] [{$product->oxarticles__oxtitle->value}] </h2></a>
<div id="toggle_[{$product->oxarticles__oxvarselect->value}]" class="ui-widget-content ui-corner-all">
<div class="variants">
[{ $oViewConf->getHiddenSid() }]
[{ $oViewConf->getNavFormParams() }]
<input type="hidden" name="cl" value="[{ $oViewConf->getActiveClassName() }]">
[{if $owishid}]
<input type="hidden" name="owishid" value="[{$owishid}]">
[{/if}]
[{if $toBasketFunction}]
<input type="hidden" name="fnc" value="[{$toBasketFunction}]">
[{else}]
<input type="hidden" name="fnc" value="tobasket">
[{/if}]
<input type="hidden" name="aid" value="[{ $product->oxarticles__oxid->value }]">
[{if $altproduct}]
<input type="hidden" name="anid" value="[{ $altproduct }]">
[{else}]
<input type="hidden" name="anid" value="[{ $product->oxarticles__oxnid->value }]">
[{/if}]
[{if $recommid}]
<input type="hidden" name="recommid" value="[{ $recommid }]">
[{/if}]
<input type="hidden" name="pgNr" value="[{ $pageNavigation->actPage-1 }]">
[{if $size!='thin' && $size!='thinest'}]
<input id="test_am_[{$testid}]" type="hidden" name="am" value="1">
[{/if}]
[{ if $product->getVariantList() && ($size!='thinest') }]
<label>[{ $product->oxarticles__oxvarname->value }]:</label>
[{ if $product->hasMdVariants() }]
<select id="mdVariant_[{$testid}]" name="mdVariant_[{$testid}]">
[{ if !$product->isParentNotBuyable()}]
<option value="[{$product->getId()}]">[{ $product->oxarticles__oxvarselect->value }] [{oxhasrights ident="SHOWARTICLEPRICE"}] [{ $product->getFPrice() }] [{ $currency->sign|strip_tags}]*[{/oxhasrights}]</option>
[{/if}]
[{foreach from=$product->getMdSubvariants() item=mdVariant}]
<option value="[{$mdVariant->getLink()}]">[{ $mdVariant->getName() }] [{oxhasrights ident="SHOWARTICLEPRICE"}] [{ $mdVariant->getFPrice()|strip_tags }]* [{/oxhasrights}]</option>
[{/foreach}]
</select>
[{else}]
<select id="test_varSelect_[{$testid}]" name="aid">
[{ if !$product->isParentNotBuyable()}]
<option value="[{$product->getId()}]">[{ $product->oxarticles__oxvarselect->value }] [{oxhasrights ident="SHOWARTICLEPRICE"}] [{ $product->getFPrice() }] [{ $currency->sign|strip_tags}]*[{/oxhasrights}]</option>
[{/if}]
[{foreach from=$product->getVariantList() item=variant}]
<option value="[{$variant->getId()}]">[{ $variant->oxarticles__oxvarselect->value }] [{oxhasrights ident="SHOWARTICLEPRICE"}] [{ $variant->getFPrice() }] [{ $currency->sign|strip_tags}]* [{/oxhasrights}]</option>
[{/foreach}]
</select>
[{/if}]
[{elseif $product->getDispSelList()}]
[{foreach key=iSel from=$product->selectlist item=oList}]
<label>[{ $oList.name }] :</label>
<select id="test_sellist_[{$testid}]_[{$iSel}]" name="sel[[{$iSel}]]" onchange="oxid.sellist.set(this.name,this.value);">
[{foreach key=iSelIdx from=$oList item=oSelItem}]
[{ if $oSelItem->name }]
<option value="[{$iSelIdx}]"[{if $oSelItem->selected }]SELECTED[{/if }]>[{ $oSelItem->name }]</option>
[{/if}]
[{/foreach}]
</select>
[{/foreach}]
[{/if}]
</div>
</div>
<!-- activate div with JavaScript -->
<script type="text/javascript">
// Start with the div closed
$('#toggle_[{$product->oxarticles__oxvarselect->value}]').hide();
$(function() {
//run the currently selected effect
function runEffect(){
//set effect type and parameters
var selectedEffect = 'blind'
var durationofEffect = 800
//most effect types need no options passed by default
var options = {};
//run the effect
$("#toggle_[{$product->oxarticles__oxvarselect->value}]").toggle(selectedEffect,options,durationofEffect);
};
//trigger the effect from select menu value
$("#switch_[{$product->oxarticles__oxvarselect->value}]").click(function() {
runEffect();
return false;
});
});
</script>
Make sure you upload jquery and jquery UI plugin to your document root and load them in _header.tpl template.
This is what I used just before the tag:
<!-- Include jquery script -->
<script type="text/javascript" src="/out/basic/tpl/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/out/basic/tpl/jquery-ui-1.7.2.custom.min.js"></script>
I hope this is useful to someone.
I have to say that working working with OXID and customising it has been so far the easiest task in my several years of struggle with other platforms.
I hope it all keeps working when we place our shops into production mode.
V.
