Solved Fix code error in custom.js

[Toulousain]

Hello,
The code below allows to refresh the product reference if the customer changes the color or the size.

 

prestashop.on(
	'updatedProduct',
 	function (event) {
 		updateReference();
	}
);

function updateReference() {
    ref = $('#product-details').data("product").attributes;
    if(ref) {
    	for (var i in ref)
        	$('#reference_product').html(ref[i].reference);
  	}
}

Unfortunately the code below, which is placed in custom.js does not work on prestashop 1.7.8, we have the error :

Uncaught TypeError: Cannot read properties of undefined (reading 'attributes')

 

We use the following theme : http://ps.ariestheme.com/themes/sp_autostore/fr/

Would you have a solution for me ?

Could you help me to correct?

Sorry for my English and thank you in advance.

 

 

 

 

 

Edited March 1, 2022 by Toulousain
solved (see edit history)

[Ress]

Check the source of the page, do you have #product-details item?

 

[Toulousain]

Hello and thank you 
Yes I have the item #product-details in the source code

 <div class="product-reference-page">
				
	  <div  id="product-details">
        <div class="product-reference">
           <label class="label">Référence: </label>
            <span itemprop="sku">147-965-06</span>
     </div>

 

[Ress]

I don't see that data-attributes, where do you want to get the information from, did you delete it here? Or can you provide a link to the site?

[Toulousain]

The code I retrieved must be incomplete.
In fact, I want to refresh elements of the product page when the customer changes color or size.
I need to refresh the product description or the name.

Would you have a link or a solution to propose me?

Another question: Could you explain me the code below?

.data("product").attributes; 

If I can understand it, I could retrieve and refresh in js the description or the name.

Thanks

[Toulousain]

With the code below, I can refresh the whole page when I change the color or size attribute.

$(document).ready(function(){	
	var variationValue = jQuery("#product .product-variants-item select");
	variationValue.change(function(){
		setTimeout(function(){
			window.location.reload();
		},800);
	});
});

Do you know how to refresh only the product description and the product name ?  

Thanks 

[Ress]

18 hours ago, Toulousain said:

The code I retrieved must be incomplete.
In fact, I want to refresh elements of the product page when the customer changes color or size.
I need to refresh the product description or the name.

Would you have a link or a solution to propose me?

Another question: Could you explain me the code below?

.data("product").attributes; 

If I can understand it, I could retrieve and refresh in js the description or the name.

Thanks

 

If you look in html, at the #product-details tag, you have the data-product attribute, where is a json with all the data about the product. You access those values with $('# product-details').data("product"). In json, the "attributes" value contains the data about the combination, which you access $('# product-details').data("product").attributes

 

I think that you don't have that attribute(data-product) that contains the product details in your #product-details tag, and that's why you get that error, that it can't read the property. Can you post the site link, can I check exactly?

 

[Toulousain]

24 minutes ago, Ress said:

 

Si vous regardez en html, à la balise #product-details, vous avez l'attribut data-product, où est un json avec toutes les données sur le produit. Vous accédez à ces valeurs avec $('# product-details').data("product"). Dans json, la valeur "attributes" contient les données sur la combinaison, auxquelles vous accédez $('# product-details').data("product").attributes

 

Je pense que vous n'avez pas cet attribut (data-product) qui contient les détails du produit dans votre balise #product-details, et c'est pourquoi vous obtenez cette erreur, qu'il ne peut pas lire la propriété. Pouvez-vous poster le lien du site, puis-je vérifier exactement?

 

 

Hello Ress Said and thank you for your very precise explanations, I have understood how the code works.
You are right, unfortunately there is no data-product attribute in my HTML which contains the product details.

My real need is to update the product description and name when the client changes the colour or size attribute.

Currently with prestashop's native operation only the images and price refresh when you change the attribute.

I can post the source code of my page if you want?

My site is under maintenance but I use this theme:
http://ps.ariestheme.com/themes/sp_autostore/fr/

Would you have another solution to solve my problem.

Thanks again Said

Translated with www.DeepL.com/Translator (free version)

[Ress]

In tpl, those values are set with {$product.embedded_attributes|json_encode} variable. You can put this json somewhere in html, on another tag, and take your value from it.

By changing the combination, it refreshes certain sections of the page. In the second picture, you can see the classes of the refreshing sections, so you should put that json in one of those sections, so that when the combination is changed, it will also be updated.

[Nickovitshj]

You could also contact whoever you bought the theme from.
Since it seems that their theme removed a functionality which is available in the classic PrestaShop theme.

[Ress]

Yes, especially since there are some modules that use that data.

[Toulousain]

1 hour ago, Ress said:

Dans tpl, ces valeurs sont définies avec la variable {$product.embedded_attributes|json_encode}. Vous pouvez mettre ce json quelque part en html, sur une autre balise, et en tirer votre valeur.

En changeant la combinaison, cela rafraîchit certaines sections de la page. Dans la deuxième image, vous pouvez voir les classes des sections d'actualisation, vous devez donc mettre ce json dans l'une de ces sections, de sorte que lorsque la combinaison est modifiée, elle sera également mise à jour.

 

Thank you Ress and Nickovitshj

Indeed you are right, the variable {$product.embedded_attributes|json_encode} does not exist in my theme.

the code below from the classic theme

<div class="js-product-details tab-pane fade{if !$product.description} in active{/if}"
     id="product-details"
     data-product="{$product.embedded_attributes|json_encode}"
     role="tabpanel"
  >

it is replaced by 

<div {if isset($SP_moreinfo) && $SP_moreinfo == 'tab'} class="tab-pane {if !$product.description} in active{/if}"  {/if} id="product-details">

 

should I add the missing code below to my theme's product-details file ?

     data-product="{$product.embedded_attributes|json_encode}"
     role="tabpanel"

 

Do you know in which file I can find the code for the second image ?

 

Thanks again for your support

[Ress]

The code from second image is in Product Controller, /controllers/front/ProductController.php

[Toulousain]

Hello Ress, thanks to your explanations, your help and your patience, I was able to make my modifications without any problem.
Everything is perfect.
Thanks again for your help.

[ipaelo]

Hi,

I have added In the productpage behind the price:

{if isset($product.reference_to_display) && $product.reference_to_display neq ''}
  {block name='product_reference'}
    <div class="product-reference">
        <label class="label">{l s='Reference' d='Shop.Theme.Catalog'} </label>
        <span>{$product.reference_to_display}</span>
    </div>
    {/block}
    
{/if}

 

, but it isn´t refresh on change.

 

It´s a child of classic theme in PS 1.7.8.6

 

 

 

May some of you help me, please?

 

 

Edited June 17, 2022 by ipaelo (see edit history)

[Nickovitshj]

4 hours ago, ipaelo said:

Hi,

I have added In the productpage behind the price:

{if isset($product.reference_to_display) && $product.reference_to_display neq ''}
  {block name='product_reference'}
    <div class="product-reference">
        <label class="label">{l s='Reference' d='Shop.Theme.Catalog'} </label>
        <span>{$product.reference_to_display}</span>
    </div>
    {/block}
    
{/if}

 

, but it isn´t refresh on change.

 

It´s a child of classic theme in PS 1.7.8.6

 

 

 

May some of you help me, please?

 

 

You'll need javascript to achieve this.
Can you link your page where it's happening?

[ipaelo]

Hi,

Thanks for your response.

I think that it will be same thing like this

prestashop.on('updatedProduct', function () { $('.product_reference').html($('.$product.reference_to_display).html()); })

bur I am not sure what classes or labels to be used.

You can check it here: https://cositaschulas.com/es/cuadro-nacimiento/1239-3108-cuadro-nacimiento-bebe-foto-personalizada.html#/83-tamano-a3_con_marco

Edited June 21, 2022 by ipaelo (see edit history)