Need help with product.js

[younks]

Hello, people

 

I am trying to make a product page display downloadable files depending on which attribute is selected. For example, if attribute "type 1" is selected the download tab displays files that have "type 1" in their names. 

Now I need to get a variable with customer choice, I think it is somewhere in this piece of code from product.js:

	//create a temporary 'choice' array containing the choices of the customer
	var choice = [];
	var radio_inputs = parseInt($('#attributes .checked > input[type=radio]').length);
	if (radio_inputs)
		radio_inputs = '#attributes .checked > input[type=radio]';
	else
		radio_inputs = '#attributes input[type=radio]:checked';

	$('#attributes select, #attributes input[type=hidden], ' + radio_inputs).each(function(){
		choice.push(parseInt($(selected).val()));
	});

	if (typeof combinations == 'undefined' || !combinations)
		combinations = [];

Can I somehow use this variable in .tpl file?

Please, help me I am struggling with this issue for a week.

Thanks in advance 

[younks]

Any ideas? Anyone?

[gr_fenix]

Hi,

 

As soon as I know, I think that you can't do it on TPL because a lot of feature are with jquery. So, you had to modify the product.js not TPL.

[younks]

Hi,

 

As soon as I know, I think that you can't do it on TPL because a lot of feature are with jquery. So, you had to modify the product.js not TPL.

Hi,

Thanks for your answer!

 

I know about javascript already. Here is what i achieved by now:

 

Changed getProductAttribute function in Product.js (in theme folder) on the basics of this post: https://www.prestashop.com/forums/topic/296422-solved-attribute-summary-above-add-to-cart-button/

function getProductAttribute()
{
    // get product attribute id
    product_attribute_id = $('#idCombination').val();
    product_id = $('#product_page_product_id').val();

    // get every attributes values
    request = '';
    //create a temporary 'tab_attributes' array containing the choices of the customer
    var tab_attributes = [];
    $('#attributes select, #attributes input[type=hidden], #attributes input[type=radio]:checked').each(function(){
        tab_attributes.push($(this).val());
    });

    $("#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])
{
				request += '/'+attributesCombinations[i]['group'] + '-' + attributesCombinations[i]['attribute'];
			$('#attsummary').html($('#attsummary').html() + attributesCombinations[i]['group']+': '+attributesCombinations[i]['attribute']+'<br/>')// 
}
    
    request = request.replace(request.substring(0, 1), '#/');    
    url = window.location + '';

    // redirection
    if (url.indexOf('#') != -1)
        url = url.substring(0, url.indexOf('#'));

    // set ipa to the customization form
    $('#customizationForm').attr('action', $('#customizationForm').attr('action') + request);
    window.location = url + request;
}

And added empty <div> with id="attsummary" to the beginning of product.tpl.

 

Now customer's choice is displayed like this: 

diameter: 44mm

length: 55

type: din

 

And problem has changed now: I need somehow convert this text to an array or get only "Type" value with an other method, and make attachment part of Product.tpl file compare "type" name to the beginning of the file name, and display files related to one type.  

Edited July 15, 2015 by younks (see edit history)

[younks]

Updated the .js code to output only attribute value, e.g. "din".

 $("#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])
{
				request += '/'+attributesCombinations[i]['group'] + '-' + attributesCombinations[i]['attribute'];
    //read only 'type' value
	if (attributesCombinations[i]['group'] == ('type'))	{	
   //output attribute to "id= "attsummary""
    $('#attsummary').html($('#attsummary').html() +attributesCombinations[i]['attribute'])// 
[spam-filter]

 Then tried to output it and capture in product.tpl:

{capture name="attsummary"}
    <div id="attsummary"></div>
    {/capture}

and compare with $attachment.name later on with function:

{if $attachment.name == $smarty.capture.attsummary}

attachment display code here

{/if}

However, it is not working.

After a research I figured out that I need to make the bound between template and javascript with AJAX. I have no clue how to work with it, anyone familiar with it? Also, I have no idea where to find an array with attachment names. 

[younks]

Bump

[musicmaster]

Personally I would prefer the rough method. 

 

I would create a page with all downloads available and then I would connect to the attributes a script that hides those that are not needed. It is not as nice as your solution, but by avoiding Ajax issues it makes the job much easier.

[younks]

Personally I would prefer the rough method. 

 

I would create a page with all downloads available and then I would connect to the attributes a script that hides those that are not needed. It is not as nice as your solution, but by avoiding Ajax issues it makes the job much easier.

 

A new page or window? 

Also I was thinking about making page to reload if certain attribute is chosen...