Déplacer référence produit en haut de page

[Repitol]

Bonjour
(et bonne année à tous)

depuis la version 1.7, la référence du produit se trouve dans le champ "Détails du produit"

Pourquoi pas, mais pourquoi l'avoir supprimé du haut de page près du nom du produit de la page produit où il était très bien ?
Quelqu'un saurait-il me dire comment modifier le fichier product.tpl (je pense) de sorte que la réf se trouve en haut de page comme sur les versions, 1.3, 1.4, 1.5, 1.6... ?

Merci !

[Eolia]

Pourquoi mais pourquoi être passé en 1.7 ???

[Repitol]

Bonjour

eh bien parce que lorsqu'on propose une boutique PS à un nouveau client et que celui-ci se tient un peu informé, il souhaite la dernière version et pas une version 1.6 stable mais amenée à être remplacée à moyen terme avec peut-être une migration à prévoir.
Pas le choix.

je suppose qu"il me faut modifier le fichier product.tpl avec un override ?

[Mediacom87]

Bonjour,

pk un override ?????

il suffit de modifier votre template personnalisé pour déplacer ou dupliquer la variable que vous souhaitez afficher au bon endroit.

[sevsev]

Bonjour Mediacom87,

Je me permets ce message

Pour ma part j'ai déplacé la variable suivante du fichier product-details.tpl vers product.tpl.

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

Ma référence s'affiche bien sous le titre de mon produit.

En revanche lorsque mes produits possèdent des déclinaisons la référence ne change pas. Auriez-vous une suggestion ? Lorsque je déplace ce code cela ne change rien. Ce bout de code est présent dans le fichier product-details.tpl

  {* if product have specific references, a table will be added to product details section *}
    {block name='product_specific_references'}
      {if isset($product.specific_references)}
        <section class="product-features">
          <h3 class="h6">{l s='Specific References' d='Shop.Theme.Catalog'}</h3>
            <dl class="data-sheet">
              {foreach from=$product.specific_references item=reference key=key}
                <dt class="name">{$key}</dt>
                <dd class="value">{$reference}</dd>
              {/foreach}
            </dl>
        </section>
      {/if}
    {/block}

 

Merci d'avance pour votr aide

Edited May 7, 2018 by sevsev (see edit history)

[Eolia]

Si déclinaisons, c'est le js qui met à jour les champs. Regardez dans votre product.js^^

[sevsev]

 Merci Eolia pour cette réponse rapide

Je viens d'ouvrir mon product.js, mais je ne vois pas trop les lignes concernées. Ou plutôt je ne vois pas trop quoi ajouter  Aurais-tu une idée ?  Encore merci

 

/**
 * 2007-2017 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2017 PrestaShop SA
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 */
import $ from 'jquery';

$(document).ready(function () {
  createProductSpin();
  createInputFile();
  coverImage();
  imageScrollBox();

  prestashop.on('updatedProduct', function (event) {
    createInputFile();
    coverImage();
    if (event && event.product_minimal_quantity) {
      const minimalProductQuantity = parseInt(event.product_minimal_quantity, 10);
      const quantityInputSelector = '#quantity_wanted';
      let quantityInput = $(quantityInputSelector);

      // @see http://www.virtuosoft.eu/code/bootstrap-touchspin/ about Bootstrap TouchSpin
      quantityInput.trigger('touchspin.updatesettings', {min: minimalProductQuantity});
    }
    imageScrollBox();
    $($('.tabs .nav-link.active').attr('href')).addClass('active').removeClass('fade');
    $('.js-product-images-modal').replaceWith(event.product_images_modal);
  });

  function coverImage() {
    $('.js-thumb').on(
      'click',
      (event) => {
        $('.js-modal-product-cover').attr('src',$(event.target).data('image-large-src'));
        $('.selected').removeClass('selected');
        $(event.target).addClass('selected');
        $('.js-qv-product-cover').prop('src', $(event.currentTarget).data('image-large-src'));
      }
    );
  }

  function imageScrollBox()
  {
    if ($('#main .js-qv-product-images li').length > 2) {
      $('#main .js-qv-mask').addClass('scroll');
      $('.scroll-box-arrows').addClass('scroll');
        $('#main .js-qv-mask').scrollbox({
          direction: 'h',
          distance: 113,
          autoPlay: false
        });
        $('.scroll-box-arrows .left').click(function () {
          $('#main .js-qv-mask').trigger('backward');
        });
        $('.scroll-box-arrows .right').click(function () {
          $('#main .js-qv-mask').trigger('forward');
        });
    } else {
      $('#main .js-qv-mask').removeClass('scroll');
      $('.scroll-box-arrows').removeClass('scroll');
    }
  }

  function createInputFile()
  {
    $('.js-file-input').on('change', (event) => {
      let target, file;

      if ((target = $(event.currentTarget)[0]) && (file = target.files[0])) {
        $(target).prev().text(file.name);
      }
    });
  }

  function createProductSpin()
  {
    let quantityInput = $('#quantity_wanted');
    quantityInput.TouchSpin({
      verticalbuttons: true,
      verticalupclass: 'material-icons touchspin-up',
      verticaldownclass: 'material-icons touchspin-down',
      buttondown_class: 'btn btn-touchspin js-touchspin',
      buttonup_class: 'btn btn-touchspin js-touchspin',
      min: parseInt(quantityInput.attr('min'), 10),
      max: 1000000
    });

    quantityInput.on('change', function (event) {
      let $productRefresh = $('.product-refresh');
      $(event.currentTarget).trigger('touchspin.stopspin');
      $productRefresh.trigger('click', {eventType: 'updatedProductQuantity'});
      event.preventDefault();

      return false;
    });
  }
});

 

Edited May 7, 2018 by sevsev (see edit history)

[Eolia]

Ah on est en 1.7....

Alors non, désolé, je ne peux pas t'aider  

[sevsev]

mince, merci quand même.

 

Quelqu'un d'autre aurait une idée ??

[sevsev]

En fait, la référence de la déclinaison ne s'affiche que si je rafraîchis ma page  

[Prestashop user]

Bonjour @sevsev

Je suis dans le même cas que toi. As-tu trouvé quel morceau est à modifier du fichier product.js ?

Merci d'avance pour ton aide.

 

[Klemart3D]

Bonjour, pensez à remettre à la <div> ou <section> qui contient les valeurs à mettre à jour : id="product-details"

Edited April 30, 2019 by Klemart3D (see edit history)

[Prestashop user]

Bonjour @Klemart3D,

Merci pour votre réponse. Pouvez-vous me donner plus de précision concernant cette modification ?

Actuellement, pour avoir la référence sur la page produit, j'ai ajouté les modifications suivantes au fichier product.tpl :

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

 

Le problème est qu'un même produit peut avoir deux références différentes selon la couleur ou autre. Lorsque je change la déclinaison, la référence ne se met pas à jour comme elle le devrait. Votre solution permettrait le changement de référence ?

 

Merci d'avance.

[Eolia]

ca c'est le product.js du thème qui le fait normalement

[Prestashop user]

Bonjour @Eolia,

Effectivement, le fichier product.js devrait modifier cette référence. Depuis que le code de la référence a été basculé vers le fichier product.tpl, la modification de référence ne se fait pas sans rechargement de la page. Avez-vous une idée pour solutionner ce problème ?

Merci d'avance.

[Klemart3D]

Non c'est dans le core.js, il sélectionne l'id des contenus à mettre à jour :

(0,r.default)("#product-details").replaceWith(e.product_details)

Il faut donc que la div parente qui intégre les données à modifier comporte cet id. Par exemple :

<div id="product-details" class="product-reference">

 

Edited February 5, 2020 by Klemart3D (see edit history)

[Prestashop user]

Je viens d'ajouter id="product-details" à la div parente mais cela ne solutionne pas le problème. En effet, tout semble correct au premier abord mais lorsque je change de déclinaison, le contenu de la page est décalé et ne ressemble plus à l'original.

Je vous transmets une URL pour tester par vous-même : http://shop.mulliez-flory.fr/tuniques/18-14912-tunique-medicale-femme-tague.html

[Klemart3D]

Je n'ai pas réussi à sortir le bloc dans le product.tpl, j'avais la même problématique du coup je l'ai laissé dans le "product-detail.tpl" (ou alors "product-variants.tpl") car il s'agit des seuls blocs rafraîchi par la requête AJAX lors du changement de déclinaison. On voit d'ailleurs que la référence du produit est bien présente dans le bloc "product_detail" de la page appelée lors de ce changement :
 

[malorie]

Bonjour,

J'ai la même problématique : je souhaite déplacer la référence et le stock du bloc En détail vers le haut de la fiche produit.

Personne n'a trouvé de solution ?

Merci d'avance de vos réponses.

[Prestashop user]

Bonjour,

 

Je n'ai pas trouvé de solution, dans tous les cas essayés il fallait recharger la page pour que cette référence soit mise à jour.

 

Bon courage.

[malorie]

Bonjour,

En continuant mes recherches, je suis tombée là-dessus : https://www.prestashop.com/forums/topic/666075-références-et-déclinaisons/

A tester donc 😉

 

[Sophie06]

Bonjour,

Je ne sais pas si une solution a été trouvée depuis, mais j'apporte ma pierre à l'édifice car je n'ai jusque là trouvé aucune réponse à cette problématique sur le forum.

Après multiples essais, voici la solution (en 1.7.7.5) pour déplacer la référence et qu'elle se mette à jour au changement de déclinaison :

Dupliquez votre fichier product-details.tpl pour garder celui de base si vous faites une erreur et voici le nouveau :

<div class="product-details"
     id="product-details"
     data-product="{$product.embedded_attributes|json_encode}"
  >
  {block name='product_reference'}
    {if isset($product_manufacturer->id)}
      <div class="product-manufacturer">
        {if isset($manufacturer_image_url)}
          <a href="{$product_brand_url}">
            <img src="{$manufacturer_image_url}" class="img img-thumbnail manufacturer-logo" />
          </a>
        {else}
          <label class="label">{l s='Brand' d='Shop.Theme.Catalog'}</label>
          <span>
            <a href="{$product_brand_url}">{$product_manufacturer->name}</a>
          </span>
        {/if}
      </div>
    {/if}
    {if isset($product.reference_to_display)}
      <div class="product-reference">
        <label class="label">{l s='Reference' d='Shop.Theme.Catalog'} </label>
        <span itemprop="sku">{$product.reference_to_display}</span>
      </div>
    {/if}
  {/block}
  </div>

Dans votre fichier product.tpl (dupliquez le si vous le souhaitez également pour garder l'original sous la main), placez ce bout de code là où vous souhaitez voir apparaître votre référence :

{block name='product_reference'}          
              {include file='catalog/_partials/product-details.tpl'}
 {/block}

Ceci fonctionne parfaitement de mon côté.

J'espère avoir été claire car je ne suis pas une pro 😅

Bonne journée !