[SOLVED] Attribute summary above Add to Cart button

[venom2506]

You think you're done but the requests keep coming...

anyway, I got a new problem to solve, this one should be pretty simple I believe :

I'm requested to add a summary of the selected attributes on the product page (because there's a page long of attributes to choose from) so the client knows what he has chosen before adding the product to his cart.

I already know where to put it in the product.tpl file, etc, it's the code itself I can't figure out. At first I tried to get the one that displays those very informations in the cart, but then I decided to be intelligent for a change, and realised that those were validated AFTER the add to cart button was activated; therefore I can't use that, as this is code I'm not yet familiar with. I tried to get the code from the form submit as I assume it has to come through there, but it's too complicated for me unfortunately.

So any help would be much welcome, thank you in advance

Edited December 23, 2013 by venom2506 (see edit history)

[venom2506]

Any idea? I am supposed to make my presentation at the end of the week/next monday at latest, if I could have this to work by then, it'd save me from looking like a fool

[CartExpert.net]

Hi.

 

You can use javascript to find the attribute name.

 

Regards.

Robin.

The CartExpert Team

[venom2506]

If I knew how to code in javascript, I'd have done so from the beginning I can do html, css just fine, I'm dabbling in php, but I have zero JS knowledge for now. I'm in block release training, I haven't yet reached that part of my courses, but that doesn't mean my employer doesn't need me to do that kind of stuff, unfortunately.

edit: Any hint on what kind of code I should use, at the very least?

Edited December 18, 2013 by venom2506 (see edit history)

[venom2506]

Would I be correct in assuming that somewhere in the following code I should be able to get a bit that should do what I want?

 

I've been trying to play around with the bit that starts with "{foreach from=$group.attributes key=id_attribute item=group_attribute}", but to no avail. Getting pretty desperate here...

<div class="product_attributes">
				{if isset($groups)}
				<!-- attributes -->
				<div id="attributes">
				<div class="clear"></div>
				{foreach from=$groups key=id_attribute_group item=group}
					{if $group.attributes|@count}
						<fieldset class="attribute_fieldset">
							<label class="attribute_label" for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} : </label>
							<br/>
							{assign var="groupName" value="group_$id_attribute_group"}
							<div class="attribute_list">
							{if ($group.group_type == 'select')}
								<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select" onchange="findCombination();getProductAttribute();">
									{foreach from=$group.attributes key=id_attribute item=group_attribute}
										<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
									{/foreach}
								</select>
							{elseif ($group.group_type == 'color')}
								<ul id="color_to_pick_list" class="clearfix">
									{assign var="default_colorpicker" value=""}
									{foreach from=$group.attributes key=id_attribute item=group_attribute}
									<li{if $group.default == $id_attribute} class="selected"{/if}>
										<a id="color_{$id_attribute|intval}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}" style="background: {$colors.$id_attribute.value};" title="{$colors.$id_attribute.name}" onclick="colorPickerClick(this);getProductAttribute();">
											{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
<!-- product image size changed : original was 20/20-->	<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="100%" height="100%" /><br />	
											{/if}
										</a><!-- <div class="attributename">{$colors.$id_attribute.name}</div> --> <!-- name of attribute shown under box -->
									</li>
									{if ($group.default == $id_attribute)}
										{$default_colorpicker = $id_attribute}
									{/if}
									{/foreach}
								</ul>
								<input type="hidden" class="color_pick_hidden" name="{$groupName}" value="{$default_colorpicker}" />
							{elseif ($group.group_type == 'radio')}
								<ul>
									{foreach from=$group.attributes key=id_attribute item=group_attribute}
										<li>
											<input type="radio" class="attribute_radio" name="{$groupName}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} onclick="findCombination();getProductAttribute();" />
											<span>{$group_attribute|escape:'htmlall':'UTF-8'}</span>

										</li>
									{/foreach}
								</ul>
							{/if}
							</div>
						</fieldset>
					{/if}
				{/foreach}
				</div>

Edited December 19, 2013 by venom2506 (see edit history)

[CartExpert.net]

You can use the getProductAttribute() function (product.js) for inspiration:

attributesCombinations['group'] - gets the group name

attributesCombinations['attribute'] - gets the attribute name

 

In fact you can add the code to that function and populate an HTML element with the attribute names.

 

 

 

Regards.

Robin.

The CartExpert Team

Edited December 19, 2013 by CartExpert.net (see edit history)

[venom2506]

I guess I'm hopeless, I just can't figure it out

[CartExpert.net]

You need to create the place where you want the attributes displayed, give it an ID and in the getProductAttribute()'s first IF statement you add the names:

 

$('#[iD_OF_HTML_ELEMENT]').html($('#[iD_OF_HTML_ELEMENT]').html() + attributesCombinations['group']+': '+attributesCombinations['attribute']+'<br/>')

 

This should do the trick.

 

Regards.

Robin.

The CartExpert Team

[venom2506]

Thanks a bunch. Not working for now, but I suppose it's my fault. For the html area, any plain empty div in my product.tpl should do?

Edited December 19, 2013 by venom2506 (see edit history)

[CartExpert.net]

if (attributesCombinations[i]['id_attribute'] === tab_attributes[a])
{
request += '/'+attributesCombinations[i]['group'] + '-' + attributesCombinations[i]['attribute'];
$('#[ID_OF_HTML_ELEMENT]').html($('#[ID_OF_HTML_ELEMENT]').html() + attributesCombinations[i]['group']+': '+attributesCombinations[i]['attribute']+'<br/>')

}

Yes, an empty div will do it.

 

Regards.

 

Robin.

 

The CartExpert Team

[venom2506]

I'm really sorry to waste your time like that, but it still appears not to work. I've joined my files (rename .txt to .rar) if you have a couple minutes to check where I went wrong; if you don't have time I understand, I'll try to find during the weekend, I have until monday in the end.

 

edit: modification is at line 664 in product.js and line 328 in product.tpl (there's a span there that I added after a while so I could find the div easily, forgot to remove it before sending the file, sorry).

files.txt

Edited December 20, 2013 by venom2506 (see edit history)

[CartExpert.net]

You didn't put the braces there:

if (attributesCombinations[i]['id_attribute'] === tab_attributes[a])
{
				request += '/'+attributesCombinations[i]['group'] + '-' + attributesCombinations[i]['attribute'];
			$('#attsummary').html($('#attsummary').html() + attributesCombinations[i]['group']+': '+attributesCombinations[i]['attribute']+'<br/>')// 
}

And you don't need to use the brackets when you select an item by id: $('#attsummary')

 

Make sure you empty the contents of the attsummary before you start populating it.

 

Regards.

Robin.

The CartExpert Team

[venom2506]

Ah, thank you very much! I thought the braces there were just to show where it went. It works fine know, thanks again Just one last thing, is there any way for it to show the default selection? Otherwise it only appears if the client clicks an option. If not, I'll just force the client to make a selection first somehow, I guess.

[CartExpert.net]

Normally, the default combination is selected, so calling the function when the page loads should work.

 

Regards.

Robin.

The CartExpert Team

[venom2506]

Ah yeah, silly me, thanks, I guess I need rest, can't wait for the winter break. Now to find how to replace the underscores with spaces. Anyway thank you, I consider this solved

[CartExpert.net]

You can do a replace on the string.

 

Regards.

Robin.

The CartExpert Team

[venom2506]

I can't recognize what the string part is in the JQuery, but I'll figure it out on my own. Thank you

 

Edit: hargh, problem: it won't refresh the summary if I click on another combination, it'll just add a new one under it >_<

Edited December 20, 2013 by venom2506 (see edit history)

[CartExpert.net]

The description of the replace funciton:

 

http://www.w3schools.com/jsref/jsref_replace.asp

 

Do you empty the div?

 

Regards.

Robin.

The CartExpert Team

[venom2506]

Small syntax error, the display updates fine now. Yeah, I've been perusing that w3school page, I understand the code (well it's like 10 characters, even I can't be -that- dense...), I just can't find what to apply it to.

[CartExpert.net]

To the string: attributesCombinations[i]['group'] and attributesCombinations[i]['attribute']

 

Regards.

Robin.

The CartExpert Team

[venom2506]

Well, it works now. For those interested, this is the code I had to use in the end:

 

$("#attsummary").empty(); //empties attsummary div so it refreshes the div instead of adding to it

// build new request
for (var i in attributesCombinations)
for (var a in tab_attributes)
if (attributesCombinations[i]['id_attribute'] === tab_attributes[a])
{
var a1 = attributesCombinations[i]['group'];
var a2 = attributesCombinations[i]['attribute'];
a1 = a1.replace(/_/g, ' ');
a2 = a2.replace(/_/g, ' ');
request2 += a1+' : '+a2+'<br />';
request += '/'+attributesCombinations[i]['group'] + '-' + attributesCombinations[i]['attribute'];


//$('#attsummary').html($('#attsummary').html() + attributesCombinations[i]['group']+': '+attributesCombinations[i]['attribute']+'<br/>');// DISPLAY ATTRIBUTES SUMMARY
$('#attsummary').html(request2);// DISPLAY ATTRIBUTES SUMMARY


}request = request.replace(request.substring(0, 1), '#/');

 

Combine that with the empty div used wherever you want the summary to appear in the product .tpl file (in this case, the div will be as follow:

<div id="attsummary"><:div>

Don't forget to load the script at the begining of product.tpl:

<body onload= "getProductAttribute()">

 

And you're good to go.