Virtuemart : mise en page des produits associés

[la brioche]

Re : Virtuemart : mise en page des produits associés

donc le container est dans notre cas

<div class="product-related-products">
</div>

un div standard a toujours une largeur(à la base) de 100%
admetons qu tu veuilles 4 colonnes.
SI tu veux ,il faut couper en 4 le total
nous il nous faut 100%/4 donc 25%. car 4 colonnes.
En admettant que l'on a pas de marge. car en css la largeur n'inclus pas la marge exterieur.
donc nos 1/4 de colonne(25%) veulent être aligner à gauche. en css pour que les colonnes de block se cole a gauche, il faut utiliser

float:left

On vas rassemblé le tout en ciblant les div a l'intérieur du container ici le div product-related-products est lui même le forcer à 100%: sans marge.

div.product-related-products{
  width:100%;
  margin:0;
}
div.product-related-products > div{
  float:left;
  width:24%;
  margin:0.5%;
}

on a bien 25% car la marge et a gauche+a droite(et en haut et en bas)
donc 24%+0.5+0.5=25%.
aprés le container product-related-products il faudra ajouter un

<div style="clear:both"></div>

Pour eviter que la suite du document se colle à gauche.
Voila le principe.
Sinon il y a des site spécialisé. Google is your friend

Cordiale salutation,
Patrick K.

Un grand merci à vous deux.
En fait, j'ai changé ma ligne 219 de vmsite-ltr.css :

.product-fields .product-field,.product-related-categories .product-field,.product-related-products .product-field {width:100%;float:left;display:inline-block;float:left;
width:24%;
margin:0.5%;}

Si ça peut aider certains.

[electrocity]

Re : Virtuemart : mise en page des produits associés

La derniére solution fonctionne mais englobe tous les products-fields.

[la brioche]

Re : Virtuemart : mise en page des produits associés

La derniére solution fonctionne mais englobe tous les products-fields.

Et cela pose-t-il un problème auquel je n'aurais pas pensé ?? Ou puis-je laisser comme cela ?
Merci

[bisoox]

Re : Virtuemart : mise en page des produits associés

Bonjour,

Juste une question con, si on veux virée le titre du produit qui est avec la photo du produit complémentaire ?
J'avais bien trouver ça :

 <div class="product-related-products"> 
        <h4><?php echo JText::_('COM_VIRTUEMART_RELATED_PRODUCTS'); ?></h4> 

    <?php 
    foreach ($this->product->customfieldsRelatedProducts as $field) { 
        if(!empty($field->display)) { 
    ?><div class="product-field product-field-type-<?php echo $field->field_type ?>"> 
            <span class="product-field-display"><?php echo $field->display ?></span> 
        </div> 
    <?php } 
        } ?> 
        </div>

Je pense que l'image et le texte est rangé ici :

 <span class="product-field-display"><?php echo $field->display ?></span>

mais ou je trouve ça ?

 <?php echo $field->display ?>

ça mene a quoi ?

Merci !!!!!!!!!

[bisoox]

Re : Virtuemart : mise en page des produits associés

Alors après moult recherche, sur le web anglophone, a savoir que je parle anglais comme une vache espagnol...

J'ai trouvé ceci sur ce forum:

Code pour remplacer le fichier "default_relatedproducts.php" que vous aurez preparé en overide dans le dossier "template/html/com_virtuemart/productdetails"

<?php


// Check to ensure this file is included in Joomla!
defined ( '_JEXEC' ) or die ( 'Restricted access' );
$model = new VirtueMartModelProduct();
$calculator = calculationHelper::getInstance();
$currency = CurrencyDisplay::getInstance();
?>


 <div class="product-related-products">
<h4><?php echo JText::_('COM_VIRTUEMART_RELATED_PRODUCTS'); ?></h4>
<div>
    <?php
    foreach ($this->product->customfieldsRelatedProducts as $field) {
    ?>

<div class="product-field">

<?php
$product = $model->getProductSingle($field->custom_value,true); 
?>

<h2><?php echo JHTML::link ($product->link, $product->product_name); ?></h2>

<a title="<?php echo $product->product_name ?>" rel="vm-additional-images" href="<?php echo $product->link; ?>">
<?php
    echo $this->product->images[0]->displayMediaThumb('class="browseProductImage"', false);
?>
 </a>


<div class="short_desc"><?php echo $product->product_s_desc; ?></div>

<?php include 'default_showprices.php'; ?>

<?php include 'default_addtocart.php'; ?>
</div>


    <?php } ?>
    </div>
    </div>

Donc en mettant ce code, vous aurez a la place du juste "photo et titre", la panoplie complète : photo / titre / prix / description / ajout panier / quantité...

Après si vous n'avez pas besoin de tous, vous virez le trop d'info.. et l'avantage (pour moi intégrateur css) c'est que je peux appliquer des class sur les éléments que je veux !!

du bonheur a l'état pur Donc je partage, ça pourra rendre heureux d'autre que moi

[bisoox]

Re : Virtuemart : mise en page des produits associés

RAAHHH, bon désolé, la méthode ci dessus, ça fonctionne pas vraiment, ca affiche bien le tout, mais ça coince quand on clique sur les liens... désolé...

Si quelqu'un trouve, je suis preneur, je repart a la recherche d'une solution...

Note a moi même (et pour les autres aussi bien sur...)
Début de piste possible ici