[Problème] Virtuemart : mise en page des produits associés

[Math91]

Bonjour !
Je suis sous joomla 2.5 et VM 2.014
Est-ce que quelqu'un sait comment modifier la mise en page des produits associés. Chez moi ils se mettent à chaque fois à la ligne alors que je souhaiterai qu'ils apparaissent sur une même ligne...
Merci d'avance !

[ced1383]

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

oui j'ai le même souci. Il est quand même encore pas mal buggé ce virtuemart 2, un an après sa sortie...

[Math91]

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

c'est clair...:-(

[jisse03]

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

Bonjour,

VM2 est maintenant conforme au principe des Vues de Joomla (dans le composant, voir le répertoire views et pour chaque répertoire, le tmpl..)

Pour en modifier la présentation, faire une surcharge classique dans le template du site.

[ced1383]

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

j'ai pas tout compris
ça veut dire quoi "faire une surcharge classique" ?

[jisse03]

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

copier /components/ton_composant/views/une_vue/tmpl dans /templates/Ton_templte/html/toncomposant/une_vue/
et modifier dans cet endroit le code de la vue.

[ced1383]

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

ah d'accord, merci pour l'explication jisse03.
Me manque plus qu'a apprendre à coder en php.

Math91, si tu trouves la ligne de code à changer, n'hésites pas à partager

[Math91]

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

Je m'y met dès demain, c'est promis si je trouve, je te dis. Mais je ne suis pas très douée en php non plus...

[Math91]

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

Bon alors ça y est j'ai les produits sur une même ligne mais les vignettes sont énormes et du coup c'est vraiment moche... Quelqu'un sait comment je peux mettre les vignettes en plus petits ? (comme la présentation des produits de catégorie par exemple..)

[la brioche]

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

Bon alors ça y est j'ai les produits sur une même ligne mais les vignettes sont énormes et du coup c'est vraiment moche... Quelqu'un sait comment je peux mettre les vignettes en plus petits ? (comme la présentation des produits de catégorie par exemple..)

Bonjour,
Peux-tu détailler ta solution ?
Merci

[Math91]

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

Bonjour,
Peux-tu détailler ta solution ?
Merci

oh la la...je suis désolée, mais finalement c'est mon collègue qui s'est chargé du pb donc je ne peux pas t'aider.
Je vais voir avec lui s'il se souvient mais je te laisse peu d'espoir car il est difficilement joignable en ce moment.

Sinon, peux-tu expliquer ton pb ?

[la brioche]

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

oh la la...je suis désolée, mais finalement c'est mon collègue qui s'est chargé du pb donc je ne peux pas t'aider.
Je vais voir avec lui s'il se souvient mais je te laisse peu d'espoir car il est difficilement joignable en ce moment.

Sinon, peux-tu expliquer ton pb ?

Merci de me répondre. En fait, j'ai le même problème que toi "mise en page des produits associés" en colonne et non en ligne. Idem pour les catégories associées. J'ai regardé dans la configuration de la boutique mais je ne trouve pas...
J'ai l'impression que chaque produit ou catégorie associé est mis dans une div alors qu'il faudrait tout afficher dans un tableau. Malheureusement, je ne suis pas une experte dans la programmation...
Si quelqu'un peut nous aider, ce sera avec toute ma gratitude !!

[electrocity]

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

Bonjour,
D'abord la structure des fichiers pour la vue defautl et les produits/catégories en relation
répertoire MONSITE\components\com_virtuemart\views\productdet ails\tmpl\

default_relatedcategories.php
default_relatedproducts.php

avvantage : simple à trouver.
Idéalement, comme exliqué avant, copier les fichiers dans le template puis modifier.
que contient ce fichier ?

        <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 pas qu'une connaisance en PHP soit nécessaire ? juste du CSS ou HTML.
Donc soit en CSS vous ciblez le DIV dans la boucle foreach

div.product-field-type-R

ou vous modifiez la class ou encore utilisez des SPAN ou un style "inline" genre style="display:block"
Vraiment y a pas à connaitre le PHP ou un petit peu.

Cordialement,
patrick K.

[la brioche]

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

Merci pour ta réponse mais te serait-il possible de détailler un peu plus tes propositions car mes connaissances en CSS et HTML sont très limitées...

[electrocity]

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.