css badge au lieu des images produits sur listing

naizak
Topic Author
Offline

2 years 8 months ago - 2 years 8 months ago #358474 by naizak

css badge au lieu des images produits sur listing was created by naizak

-- 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 :

Code:

é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

Last edit: 2 years 8 months ago by naizak.

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

nicolas
Away

2 years 8 months ago #358477 by nicolas

Replied by nicolas on topic css badge au lieu des images produits sur listing

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:

Code:

<?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.

naizak
Topic Author
Offline

2 years 8 months ago - 2 years 8 months ago #358493 by naizak

Replied by naizak on topic css badge au lieu des images produits sur listing

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: 2 years 8 months ago by naizak.

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

naizak
Topic Author
Offline

2 years 8 months ago - 2 years 8 months ago #358515 by naizak

Replied by naizak on topic css badge au lieu des images produits sur listing

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

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: 2 years 8 months ago by naizak.

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

nicolas
Away

2 years 8 months ago #358517 by nicolas

Replied by nicolas on topic css badge au lieu des images produits sur listing

Bonjour,

Vous pouvez remplacer tout le code:

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.

naizak
Topic Author
Offline

2 years 8 months ago - 2 years 8 months ago #358527 by naizak

Replied by naizak on topic css badge au lieu des images produits sur listing

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 ..

Code:

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

Last edit: 2 years 8 months ago by naizak.

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

nicolas
Away

2 years 8 months ago #358532 by nicolas

Replied by nicolas on topic css badge au lieu des images produits sur listing

Bonjour,

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

Code:

<!-- 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.

naizak
Topic Author
Offline

2 years 8 months ago - 2 years 8 months ago #358542 by naizak

Replied by naizak on topic css badge au lieu des images produits sur listing

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 !

Last edit: 2 years 8 months ago by naizak.

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

nicolas
Away

2 years 8 months ago #358545 by nicolas

Replied by nicolas on topic css badge au lieu des images produits sur listing

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.

naizak
Topic Author
Offline

2 years 8 months ago #358555 by naizak

Replied by naizak on topic css badge au lieu des images produits sur listing

Merci bien

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

Time to create page: 0.219 seconds