Jump to content

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


Recommended Posts

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 !

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

  • 3 months later...

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 by sevsev (see edit history)
Link to comment
Share on other sites

 Merci Eolia pour cette réponse rapide :D

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 :blush: 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 by sevsev (see edit history)
Link to comment
Share on other sites

  • 10 months later...
  • 4 weeks later...

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Klemart3D (see edit history)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :
 

Capture d’écran de 2019-05-02 16-21-01.png

Link to comment
Share on other sites

  • 9 months later...
  • 1 year later...

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 !

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...