css badge au lieu des images produits sur listing

  • Posts: 148
  • Thank you received: 13
  • Hikashop Business Hikashop Essential
11 months 3 days ago #358474

-- HikaShop version -- : 5.0.2
-- Joomla version -- : 5
-- PHP version -- : 8.1.23
-- Browser(s) name and version -- : firefox

Bonjour ,

Je souhaite afficher plusieurs badges sur la même ligne à la place de l'image produit.
c'est faisable via css , j'ai commencé un peu mais avant d'aller plus loin et taper dans l’éditeur de vue ou autre je préfère avoir votre avis ..

Par exemple pour la positon : Haut droite /top right "hikashop_badge_div hikashop_badge_topright "

code généré pour chaque badge :

élément {
  position: absolute;  pointer-events: none;  z-index: 3;  top: -10px;  right: 0px;  margin-top: 10px;

Résultat souhaité plus au moins j'ai dupliquer les Badges pour l’aperçu :


Merci et désolé le dérangement

Attachments:
Last edit: 11 months 1 day ago by naizak.

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

  • Posts: 83025
  • Thank you received: 13404
  • MODERATOR
11 months 3 days ago #358477

Bonjour,

Personnellement, je ne ferais pas comme cela.
J'utiliserais un champ personnalisé de la table "produit" de type "multiple dropdown" ou "checkbox". Et dans les valeurs dans le champ "titre" je mettrais un tag img pour l'icone correspondante à afficher.
Je désactiverais l'affichage sur le listing frontend, et à la place, dans la vue product / listing_table, je remplacerais le code pour l'affichage de l'image par ceci:

<?php echo implode('',explode(',',$this->row->xxx)); ?>
où xxx est le nom de colonne du champ.
Je pense qu'en faisant ainsi, vous allez bien moins galérer.

The following user(s) said Thank You: naizak

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

  • Posts: 148
  • Thank you received: 13
  • Hikashop Business Hikashop Essential
11 months 2 days ago #358493

Bonjour ,

Merci bien, je vais bien-sûr tester votre méthode "du développeur :) ".
Je trouve que les badges semblent pratiques, pour les assigner directement sur les catégories et/ou produits en questions .
Je comprendrais mieux et je verrai la difference en testant vos conseils.

Merci pour votre aide et conseils

Last edit: 11 months 2 days ago by naizak.

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

  • Posts: 148
  • Thank you received: 13
  • Hikashop Business Hikashop Essential
11 months 2 days ago #358515

Je suis un peu perdu ...
Pourriez vous me précisez ou insérer le code, :

<!-- IMAGE -->
<?php if($this->config->get('thumbnail')) { ?>
					<td class="hikashop_product_image_row">
						<div style="height:<?php echo $divHeight;?>px;text-align:center;clear:both;" class="hikashop_product_image">
							<div style="position:relative;text-align:center;clear:both;width:<?php echo $divWidth;?>px;margin: auto;" class="hikashop_product_image_subdiv">
<?php if($this->haveLink) { ?>
								<a href="<?php echo $link;?>" title="<?php echo $this->escape($this->row->product_name); ?>">
<?php } ?>


                                  
<?php
	$image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside'));
	$img = $this->image->getThumbnail(@$this->row->file_path, array('width' => $this->image->main_thumbnail_x, 'height' => $this->image->main_thumbnail_y), $image_options);
	if($img->success) {
		$html = '<img class="hikashop_product_listing_image" title="'.$this->escape((string)@$this->row->file_description).'" alt="'.$this->escape((string)@$this->row->file_name).'" src="'.$img->url.'"/>';
		if($this->config->get('add_webp_images', 1) && function_exists('imagewebp') && !empty($img->webpurl)) {
			$html = '
			<picture>
                                 
				<source srcset="'.$img->webpurl.'" type="image/webp">
				<source srcset="'.$img->url.'" type="image/'.$img->ext.'">
				'.$html.'
			</picture>
			';
		}
		echo $html;
?>		<meta itemprop="image" content=<?php echo HIKASHOP_LIVE.$img->url; ?>/>
<?php
	}
	$main_thumb_x = $this->image->main_thumbnail_x;
	$main_thumb_y = $this->image->main_thumbnail_y;
	if($this->params->get('display_badges',1)){
		$this->classbadge->placeBadges($this->image, $this->row->badges, array('vertical' => -10, 'horizontal' => 0, 'thumbnail' => $img));
	}
	$this->image->main_thumbnail_x = $main_thumb_x;
	$this->image->main_thumbnail_y = $main_thumb_y;
?>
<?php if($this->haveLink) { ?>
								</a>
<?php } ?>
								<meta itemprop="url" content="<?php echo $link;?>">
							</div>
						</div>
					</td>
<?php } ?>
<!-- EO IMAGE -->

Last edit: 11 months 2 days ago by naizak.

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

  • Posts: 83025
  • Thank you received: 13404
  • MODERATOR
11 months 2 days ago #358517

Bonjour,

Vous pouvez remplacer tout le code:

<div style="height:<?php echo $divHeight;?>px;text-align:center;clear:both;" class="hikashop_product_image">
							<div style="position:relative;text-align:center;clear:both;width:<?php echo $divWidth;?>px;margin: auto;" class="hikashop_product_image_subdiv">
<?php if($this->haveLink) { ?>
								<a href="<?php echo $link;?>" title="<?php echo $this->escape($this->row->product_name); ?>">
<?php } ?>


                                  
<?php
	$image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside'));
	$img = $this->image->getThumbnail(@$this->row->file_path, array('width' => $this->image->main_thumbnail_x, 'height' => $this->image->main_thumbnail_y), $image_options);
	if($img->success) {
		$html = '<img class="hikashop_product_listing_image" title="'.$this->escape((string)@$this->row->file_description).'" alt="'.$this->escape((string)@$this->row->file_name).'" src="'.$img->url.'"/>';
		if($this->config->get('add_webp_images', 1) && function_exists('imagewebp') && !empty($img->webpurl)) {
			$html = '
			<picture>
                                 
				<source srcset="'.$img->webpurl.'" type="image/webp">
				<source srcset="'.$img->url.'" type="image/'.$img->ext.'">
				'.$html.'
			</picture>
			';
		}
		echo $html;
?>		<meta itemprop="image" content=<?php echo HIKASHOP_LIVE.$img->url; ?>/>
<?php
	}
	$main_thumb_x = $this->image->main_thumbnail_x;
	$main_thumb_y = $this->image->main_thumbnail_y;
	if($this->params->get('display_badges',1)){
		$this->classbadge->placeBadges($this->image, $this->row->badges, array('vertical' => -10, 'horizontal' => 0, 'thumbnail' => $img));
	}
	$this->image->main_thumbnail_x = $main_thumb_x;
	$this->image->main_thumbnail_y = $main_thumb_y;
?>
<?php if($this->haveLink) { ?>
								</a>
<?php } ?>
								<meta itemprop="url" content="<?php echo $link;?>">
							</div>
						</div>
par votre nouveau code.

The following user(s) said Thank You: naizak

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

  • Posts: 148
  • Thank you received: 13
  • Hikashop Business Hikashop Essential
11 months 1 day ago #358527

Bonjour ,

Merci bien de votre retour.
ça semble marcher , reste un comportement étrange sauf si le cache me fait des tours
parfois ça s'affiche parfois c'est le titre au lieu du champ et ....
donc j'ai activer pour tester Listing partie publique dans ce cas elle s'affiche en image , par contre via le code parfois image parfois texte !! j'ai basculer entre "text / Valeur" ca passe des fois ..

<!-- IMAGE -->
<?php if($this->config->get('thumbnail')) { ?>
					<td class="hikashop_product_image_row">
                      <?php echo implode('',explode(',',$this->row->iconeproduitcouleur)); ?>
					</td>
<?php } ?>
<!-- EO IMAGE -->

Attachments:
Last edit: 11 months 1 day ago by naizak.

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

  • Posts: 83025
  • Thank you received: 13404
  • MODERATOR
11 months 1 day ago #358532

Bonjour,

En effet, j'avais oublié un détails.
Faites comme ça plutôt:

<!-- IMAGE -->
<?php if($this->config->get('thumbnail')) { ?>
					<td class="hikashop_product_image_row">
                      <?php
$field = $this->fieldsClass->getField('iconeproduitcouleur','product');
echo $this->fieldsClass->show($field, $this->row->iconeproduitcouleur);
?>
					</td>
<?php } ?>
<!-- EO IMAGE -->

The following user(s) said Thank You: naizak

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

  • Posts: 148
  • Thank you received: 13
  • Hikashop Business Hikashop Essential
11 months 1 day ago #358542

Bonsoir ,
Merci Bien , c'est parfait :woohoo:
Juste si vous avez une idée pour la virgule elle semble généré lors d'insertion 2 images !

Attachments:
Last edit: 11 months 1 day ago by naizak.

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

  • Posts: 83025
  • Thank you received: 13404
  • MODERATOR
11 months 1 day ago #358545

Bonjour,

Ajoutez une entrée avec le namekey fields_multiple_values_separator et une valeur vide dans la table hikashop_config via votre PHPMyAdmin et cela enlèvera la virgule.

The following user(s) said Thank You: naizak

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

  • Posts: 148
  • Thank you received: 13
  • Hikashop Business Hikashop Essential
11 months 1 day ago #358555

Merci bien

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

Time to create page: 0.108 seconds
Powered by Kunena Forum