Modifer dispositon des éléments de la page produit

gil
Topic Author
Offline

13 years 11 months ago - 13 years 11 months ago #69515 by gil

Modifer dispositon des éléments de la page produit was created by gil

Bonsoir,
Est il possible de modifier l'ordre des élements des pages produits :
L'ordre par défaut semble être :

Titre
Photos du produit
Prix et ajouter au panier
Champs personnalisés Item
Puis description

Est il possible de changer cet ordre pour par exemple mettre la description du produit sous le titre et le reste dessous (1-5-2-3-4).
Merci d'avance.

Last edit: 13 years 11 months ago by gil.

Please Log in or Create an account to join the conversation.

Xavier
Offline

13 years 11 months ago #69604 by Xavier

Replied by Xavier on topic Re: Modifer dispositon des éléments de la page produit

Bonjour gil,

Oui les vues sont totalement personnalisables dans HikaShop, tant au niveau css que de la disposition des éléments.
Pour modifier la disposition allez dans HikaShop > Display > Views et modifiez la vue "product / show_default".

Dans ce fichier vous pouvez déplacer les éléments comme bon vous semble.

The following user(s) said Thank You: gil

Please Log in or Create an account to join the conversation.

gil
Topic Author
Offline

13 years 11 months ago - 13 years 11 months ago #69614 by gil

Replied by gil on topic Re: Modifer dispositon des éléments de la page produit

Bonjour Xavier,
Génial, merci !
Si cela peut servir à d'autres voici mon fichier PHP "product / show_default" modifié dans l'ordre (1-5-2-3-4) :

Code:

<?php
/**
 * @package    HikaShop for Joomla!
 * @version    1.6.0
 * @author    hikashop.com
 * @copyright  (C) 2010-2012 HIKARI SOFTWARE. All rights reserved.
 * @license    GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?>
<div id="hikashop_product_top_part" class="hikashop_product_top_part">
  <h1>
    <span id="hikashop_product_name_main" class="hikashop_product_name_main">
      <?php
      if (hikashop_getCID('product_id')!=$this->element->product_id && isset ($this->element->main->product_name))
        echo $this->element->main->product_name;
      else
        echo $this->element->product_name;
      ?>
    </span>
    <?php if ($this->config->get('show_code')) { ?>
    <span id="hikashop_product_code_main" class="hikashop_product_code_main">
      <?php
      echo $this->element->product_code;
      ?>
    </span>
    <?php } ?>
  </h1>
  <?php
  $pluginsClass = hikashop_get('class.plugins');
  $plugin = $pluginsClass->getByName('content', 'hikashopsocial');
  if (@ $plugin->published || @ $plugin->enabled) {
    echo '{hikashop_social}';
  }
  ?>
</div>
 <div id="hikashop_product_description_main" class="hikashop_product_description_main">
    <?php
    echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
    ?>
  </div>
<div id="hikashop_product_left_part" class="hikashop_product_left_part">
  <?php
  $this->row = & $this->element;
  $this->setLayout('show_block_img');
  echo $this->loadTemplate();
  ?>
</div>
<div id="hikashop_product_right_part" class="hikashop_product_right_part">
  <div id="hikashop_product_vote_mini" class="hikashop_product_vote_mini">
    <?php
    $config =& hikashop_config();
    if($this->params->get('show_vote_product') == '-1'){
      $this->params->set('show_vote_product',$config->get('show_vote_product'));
    }
    if($this->params->get('show_vote_product')){
      $js = '';
      $params = null;
      $this->params->set('vote_type','product');
      if(isset($this->element->main)){
        $product_id = $this->element->main->product_id;
      }else{
        $product_id = $this->element->product_id;
      }
      $this->params->set('product_id',$product_id);
      echo hikashop_getLayout('vote', 'mini', $this->params, $js);
    }
    ?>
  </div>
  <span id="hikashop_product_price_main" class="hikashop_product_price_main">
    <?php
    if ($this->params->get('show_price')) {
      $this->row = & $this->element;
      $this->setLayout('listing_price');
      echo $this->loadTemplate();
    }
    ?>
  </span>
  <?php
    $this->setLayout('show_block_dimensions');
    echo $this->loadTemplate();
  ?><br />
  <?php
  $this->setLayout('show_block_characteristic');
  echo $this->loadTemplate();
  ?>
  <br />
  <?php
  $form = ',0';
  if (!$this->config->get('ajax_add_to_cart', 1)) {
    $form = ',\'hikashop_product_form\'';
  }
  if (hikashop_level(1) && !empty ($this->element->options)) {
  ?>
    <div id="hikashop_product_options" class="hikashop_product_options">
      <?php
      $this->setLayout('option');
      echo $this->loadTemplate();
      ?>
    </div>
    <br />
    <?php
    $form = ',\'hikashop_product_form\'';
    if ($this->config->get('redirect_url_after_add_cart', 'stay_if_cart') == 'ask_user') {
    ?>
      <input type="hidden" name="popup" value="1"/>
    <?php
    }
  }
  if (!$this->params->get('catalogue') && ($this->config->get('display_add_to_cart_for_free_products') || !empty ($this->element->prices))) {
    if (!empty ($this->itemFields)) {
      $form = ',\'hikashop_product_form\'';
      if ($this->config->get('redirect_url_after_add_cart', 'stay_if_cart') == 'ask_user') {
      ?>
        <input type="hidden" name="popup" value="1"/>
      <?php
      }
      $this->setLayout('show_block_custom_item');
      echo $this->loadTemplate();
    }
  }
  $this->formName = $form;
  if($this->params->get('show_price')){ ?>
    <span id="hikashop_product_price_with_options_main" class="hikashop_product_price_with_options_main">
    </span>
  <?php } ?>
  <div id="hikashop_product_quantity_main" class="hikashop_product_quantity_main">
    <?php
    $this->row = & $this->element;
    $this->ajax = 'if(hikashopCheckChangeForm(\'item\',\'hikashop_product_form\')){ return hikashopModifyQuantity(\'' . $this->row->product_id . '\',field,1' . $form . ',\'cart\'); } else { return false; }';
    $this->setLayout('quantity');
    echo $this->loadTemplate();
    ?>
  </div>
  <div id="hikashop_product_contact_main" class="hikashop_product_contact_main">
    <?php
    $contact = $this->config->get('product_contact',0);
    if (hikashop_level(1) && ($contact == 2 || ($contact == 1 && !empty ($this->element->product_contact)))) {
      $empty = '';
      $params = new JParameter($empty);
      echo $this->cart->displayButton(JText :: _('CONTACT_US_FOR_INFO'), 'contact_us', $params, hikashop_completeLink('product&task=contact&cid=' . $this->row->product_id), 'window.location=\'' . hikashop_completeLink('product&task=contact&cid=' . $this->row->product_id) . '\';return false;');
    }
    ?>
  </div>
  <?php
  if(!empty($this->fields)){
    $this->setLayout('show_block_custom_main');
    echo $this->loadTemplate();
  }
  ?>
  <span id="hikashop_product_id_main" class="hikashop_product_id_main">
    <input type="hidden" name="product_id" value="<?php echo $this->element->product_id; ?>" />
  </span>
</div>
<div id="hikashop_product_bottom_part" class="hikashop_product_bottom_part">
 
  <span id="hikashop_product_url_main" class="hikashop_product_url_main">
    <?php
    if (!empty ($this->element->product_url)) {
      echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>');
    }
    ?>
  </span>
  <?php
  $this->setLayout('show_block_product_files');
  echo $this->loadTemplate();
  ?>
  <div id="hikashop_product_vote_listing" class="hikashop_product_vote_listing">
    <?php
    if($this->params->get('show_vote_product')){
      $js = '';
      if(isset($this->element->main)){
        $product_id = $this->element->main->product_id;
      }else{
        $product_id = $this->element->product_id;
      }
      $this->params->set('product_id',$product_id);
      echo hikashop_getLayout('vote', 'listing', $this->params, $js);
      ?>
  </div>
  <div id="hikashop_product_vote_form" class="hikashop_product_vote_form">
      <?php
      $js = '';
      if(isset($this->element->main)){
        $product_id = $this->element->main->product_id;
      }else{
        $product_id = $this->element->product_id;
      }
      $this->params->set('product_id',$product_id);
      echo hikashop_getLayout('vote', 'form', $this->params, $js);
    }
    ?>
  </div>
</div>

Last edit: 13 years 11 months ago by gil.

The following user(s) said Thank You: lclaude

Please Log in or Create an account to join the conversation.

lclaude
Offline

13 years 7 months ago - 13 years 7 months ago #90463 by lclaude

Replied by lclaude on topic Modifer dispositon des éléments de la page produit

Merci à vous pour ce topic et aussi à gil pour ton code,

De mon côté j'aimerai arriver à peu pret à ce résultat, sauf que le texte de description je voudrais qu'il soit à droite de l'image et au dessus du prix.
Et donc qu'il ne s'étende pas sur toute la largeur de la zone du composant, ce qui se passe quand je fait mes essais.

Je n'arrive pas à modifier le php "show_default" pour obtenir mon résultat, déplacer le bloc

<div id="hikashop_product_description_main" class="hikashop_product_description_main">
<?php
echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
?>
</div>

ne suffit pas, car la description du produit s'étale toujours en pleine largeur et éclate la disposition des autres éléments.

...mais alors il faut que je modifie quoi et où ? Please

Last edit: 13 years 7 months ago by lclaude. Reason: précisions

Please Log in or Create an account to join the conversation.

Xavier
Offline

13 years 7 months ago #90640 by Xavier

Replied by Xavier on topic Modifer dispositon des éléments de la page produit

Bonjour,

Vous pouvez ajouter une propriété CSS afin de limiter la largeur de la div "hikashop_product_description_main".

Please Log in or Create an account to join the conversation.

lclaude
Offline

13 years 7 months ago #90724 by lclaude

Replied by lclaude on topic Modifer dispositon des éléments de la page produit

Bonjour et merci Xavier,

je viens de faire quelques essais et je me rend compte que le problème ne vient peut être pas de ce qu'on pense, et que la mise en place d'un CSS ne suffira peut être pas.

Ce que je viens de constater c'est qu'en fonction de la longueur de texte de ma description, l'affichage va s'éclater ou non.
Si mon texte est court alors ma description va s'afficher au bon endroit, voir :

si mon texte est long, la disposition pète, voir :

Une piste ?

Please Log in or Create an account to join the conversation.

lclaude
Offline

13 years 7 months ago #90728 by lclaude

Replied by lclaude on topic Modifer dispositon des éléments de la page produit

Ayé ! Ca à l'air d'aller !

Alors voici ce que j'ai fait :

La partie du 'show_default.php' où j'ai placé l'affichage de la description :

Code:

<div id="hikashop_product_right_part" class="hikashop_product_right_part span6">
  <?php
  if(!empty($this->element->extraData->rightBegin))
    echo implode("\r\n",$this->element->extraData->rightBegin);
  ?>  
    
  <div id="hikashop_product_description_main" class="hikashop_product_description_main">
    <?php
    echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
    ?>
  </div>
  
  
  <div id="hikashop_product_vote_mini" class="hikashop_product_vote_mini">
... etc

et le 'frontend_default.css' dans lequel j'ai ajouté :

Code:

.hikashop_product_description_main{
	text-align: center;
	display:block;
	max-width: 350px;
	margin-top: 15px;
	margin-bottom: 15px;
}

Voilà, je suis loin d'être bon dans ce genre de manips, donc si vous avez des idées ou si vous voyez des horreurs : dites le moi.
Et en espérant que ça serve à d'autres.

Merci à tous.

Please Log in or Create an account to join the conversation.

Xavier
Offline

13 years 7 months ago #90836 by Xavier

Replied by Xavier on topic Modifer dispositon des éléments de la page produit

Bonjour,

Ca me semble bon. La largeur est limitée.

Please Log in or Create an account to join the conversation.

nicashdown
Offline

12 years 11 months ago #126725 by nicashdown

Replied by nicashdown on topic Modifer dispositon des éléments de la page produit

Bonjour,
Je cherche désespérément à déplacer le fabricant juste en-desous du code produit, mais ne trouve pas quelque chose qui ressemble à "manufacturer" dans show_default.php

Voici ma page actuelle:
www.apogee-vapeur.ch/nouveau/hikashop-me...category_pathway-747

Merci d'avance pour votre aide

Cordialement,

Nicholas

Please Log in or Create an account to join the conversation.

Xavier
Offline

12 years 11 months ago #126771 by Xavier

Replied by Xavier on topic Modifer dispositon des éléments de la page produit

Bonjour,

Êtes vous sûr de ne pas avoir une ligne tel que:

Code:

echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>');

Si vous ne l'avez pas, il y a peut être eu une édition de vue auparavant où cela aurait été supprimé.

Please Log in or Create an account to join the conversation.

nicashdown
Offline

12 years 11 months ago #127264 by nicashdown

Replied by nicashdown on topic Modifer dispositon des éléments de la page produit

bon ... j'ai effectivement pas trouvé le fameux code dans la vue show_default.php. Je l'ai trouvé dans show.php. Copier-coller mais rien à faire. Ca ne fonctionne pas. Je vais récupérer le fichier show_default.php de base et recommencer à partir de là.

Please Log in or Create an account to join the conversation.

nicashdown
Offline

12 years 11 months ago #127287 by nicashdown

Replied by nicashdown on topic Modifer dispositon des éléments de la page produit

Après plusieurs essais, je reviens à la charge car même avec le fichier par défaut je ne trouve rien. J'ai mis en pièce jointe des captures écran. C'est plus simple que de tout expliquer.

Ce que j'aimerais faire :
Identifier l'affichage du fabricant dans show_default.php pour le déplacer et le mettre juste en-dessous de la référence (product_code) que j'ai réussi à trouver sans probllème pour avoir ensuite une présentation comme suit:

En haut (top_part): simplement le h1 (facile, j'ai trouvé)

A gauche:
- code produit (product_code) - J'ai trouvé
- Fabricant (???) - pas trouvé
- Description (product_description) - J'ai trouvé

A droite (right_part):
- l'image - J'ai trouvé
- Prix et panier - plus ou moin trouvé mais pas sur.

Merci d'avance pour votre précieuse aide.

Please Log in or Create an account to join the conversation.

Xavier
Offline

12 years 11 months ago #127306 by Xavier

Replied by Xavier on topic Modifer dispositon des éléments de la page produit

Avez vous la dernière version d'HikaShop, la 2.2.2.
Je confirme que la ligne:

Code:

echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>');

est présente dans la vue show_default.

Pour l'affichage du prix il s'agit en effet de la partie avec "listing_price" et pour le ajouter au panier, c'est "quantity".

Please Log in or Create an account to join the conversation.

nicashdown
Offline

12 years 11 months ago #127312 by nicashdown

Replied by nicashdown on topic Modifer dispositon des éléments de la page produit

J'ai la version 2.2.1 actuellement.

Pour le code que vous m'indiquez Ok:
echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>');

J'ai mis "-1234-" dans le php pour voir ou ça s'affiche... mais cela ne coresponds à quoi. Je vous ai remis une capture écran pour vous montrer ce que je tente de déplacer dans le template show_default.php

Voir éléments entourés dans la capture écran:
En rouge: ce que je cherche à déplacer (le fabricant).
En vert: le fameux "MANUFACTURER_URL" dont vous me parlez.

Qu'est-ce que je n'ai pas compris ?!?!?

Please Log in or Create an account to join the conversation.

nicashdown
Offline

12 years 11 months ago #127313 by nicashdown

Replied by nicashdown on topic Modifer dispositon des éléments de la page produit

Oups !

Oublié le print sc

reen

Please Log in or Create an account to join the conversation.

Xavier
Offline

12 years 11 months ago #127342 by Xavier

Replied by Xavier on topic Modifer dispositon des éléments de la page produit

Mes excuses, je ne parlais pas de la bonne chose.
Cette ligne de fabricant est affichée grâce au code suivant de la vue "product / show_default".

Code:

$this->setLayout('show_block_dimensions');
		echo $this->loadTemplate();

Qui appel la vue "product / show_block_dimensions", en effet cette partie est affichée en même temps que les dimensions.

Donc vous pouvez soit déplacer les lignes données dans la vue show_default, ou récupérer seulement celle qui affiche le lien vers le fabricant de la vur show_block_dimensions.

En espèrant que cela réponde à votre question.

The following user(s) said Thank You: nicashdown

Please Log in or Create an account to join the conversation.

nicashdown
Offline

12 years 11 months ago #127348 by nicashdown

Replied by nicashdown on topic Modifer dispositon des éléments de la page produit

Pas de problème

Grâce à votre dernière explication, j'ai pu faire ce que veux en déplaçant ce code à l'endroit souhaité dans show_default.php:
<?php
$this->setLayout('show_block_dimensions');
echo $this->loadTemplate();
?>

Pour moi, affaire résolue !

Merci encore

Please Log in or Create an account to join the conversation.

nicashdown
Offline

12 years 11 months ago #127482 by nicashdown

Replied by nicashdown on topic Modifer dispositon des éléments de la page produit

Encore un petit soucis avec la vue des produits avec variantes (caractéristiques > gérer les variantes).

L'affichage frontend de la page n'as pas tout à fait le même layout pour les variantes de produits que pour un produit simple.
Sur quelle vue dois-je intervenir pour cela ?

Voir print screen ci-dessous:

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

12 years 11 months ago #127525 by Jerome

Replied by Jerome on topic Modifer dispositon des éléments de la page produit

Bonjour,

Je ne sais pas ou vous avez collé votre code PHP mais il ne semble pas être affiché lorsque le produit possède des variantes.

Cordialement,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Please Log in or Create an account to join the conversation.

nicashdown
Offline

12 years 11 months ago #127533 by nicashdown

Replied by nicashdown on topic Modifer dispositon des éléments de la page produit

Oui, c'est exactement pour ça que je demande de l'aide et que j'ai fait des print screen.
Dans quel fichier de vue dois-je intervenir ? dans show_default.php ou ailleurs ?
Pensez-vous que j'ai coiler le code au mauvais endroit dans mon fichier php ?

Please Log in or Create an account to join the conversation.

Time to create page: 0.331 seconds