Ajout de valeurs à partir du modèle personnalisé comme CSS dans les modèles

Question

J'ai un module qui a besoin d'afficher des valeurs CSS spécifiques pour chaque entrée dans ma collection de modèle personnalisé.

Ceci est assez trivial, comme je peux simplement l'écho de ces valeurs avec PHP dans mon modèle au besoin; cependant, je ne peux pas obtenir sur le fait que cela me demande de planter une feuille de style intégré dans mon modèle.

Je fais essentiellement:

<?php $models = Mage::getModel('my/model')->getCollection() ?>

<style type="text/css">
    [class*='item-'] {
        display: block;
        padding: 20px;
    }
<?php foreach ($models as $model): ?>
    .item-<?php echo $model->getId() ?> {
        background: <?php echo $model->getMyColor() ?>;
    }
<?php endforeach ?>
</style>

<ul>
<?php foreach ($models as $model): ?>
    <li class="item-<?php echo $model->getId() ?>">
        <p><?php echo $model->getText() ?></p>
    </li>
<?php endforeach ?>
</ul>

Le puriste en moi ne aime pas vraiment cette approche. Je commence à s'agiter quand je vois le balisage mélangé avec PHP et CSS comme ça ... mais, en toute équité, il fait ce qu'il doit faire.

Y at-il une meilleure approche que je suis absent? Bien que je sois à l'aise avec SASS ou d'autres préprocesseurs CSS, je ne peux pas compter sur ceux-ci étant présent dans un environnement de serveur aléatoire.

Quelles sont vos méthodes vous pour injecter des variables PHP dans votre feuille de style?

Answer 1

Vous ne devriez pas essayer de modifier CSS avec PHP, vous avez d'autres options. Sans savoir que beaucoup sur votre module, il est difficile d'apporter une aide spécifique, mais voici quelques idées:

1 - Ajouter chaque couleur en tant que classe

<ul>
    <?php foreach ($models as $model): ?>
    <li class="item-<?php echo $model->getMyColour() ?>">
        <p><?php echo $model->getText() ?></p>
    </li>
    <?php endforeach ?>
</ul>

2 - Ajouter un style en ligne à l'élément

<ul>
    <?php foreach ($models as $model): ?>
    <li class="item-<?php echo $model->getId() ?>" 
        style="background-color:#<?php echo $model->getMyColor();?>">
        <p><?php echo $model->getText() ?></p>
    </li>
    <?php endforeach ?>
</ul>

Les styles en ligne sont parfaitement acceptables pour unique des styles, qui ressemble à ce que vous êtes après. Ce style ne sera pas réutilisés partout ailleurs et les règles individuelles pourraient être trop nombreux pour le code.

Answer 2

Si votre style est dynamique, pourquoi ne pas utiliser les styles en ligne. Je sais que ce n'est pas propre, mais il est plus propre que l'ajout d'une balise de style dans votre modèle. Il suffit d'ajouter dans l'un de vos fichiers css ceci:

.custom-item {
    display: block;
    padding: 20px;
}

Dans cette classe, vous pouvez ajouter toutes les propriétés communes pour vos articles et dans le modèle faire juste ceci:

<?php foreach ($models as $model): ?>
    <?php $color = $model->getMyColor()?>
    <li class="custom-item"<?php if ($color) : ?> style="background:<?php echo $color;?>"<?php endif;?>>
        <p><?php echo $model->getText() ?></p>
    </li>
<?php endforeach ?>

Answer 3

J'ai fini par ajouter quelques méthodes d'assistance pour divers articles. Ce qui était peu attrayante sur la méthode en ligne est que, alors qu'il est très bien pour un règlement display: none; ici ou là, ou tout autre base aléatoire, il ne convient pas de plâtre avec votre balisage CSS complexe dans les styles en ligne.

Ce que j'ai maintenant:

<ul>
<?php foreach ($models as $model): ?>
    <!-- Inline styles for each item -->
    <?php $styles = $myHelper->getListInlineCSS($model->getId()) ?>
    <li class="item-<?php echo $model->getId() ?>" style="<?php echo $styles ?>">
        <p><?php echo $model->getText() ?></p>
    </li>
<?php endforeach ?>
</ul>

La méthode d'aide ressemble à:

public function getListInlineCSS($id)
{
    $inlineCSS = '';
    // Getting colors from each model using these methods that support returning rgba values as well as rgb values for IE < 9 support.
    $inlineCSS .= 'background: ' . $this->textBoxBg($id, true) . '; '; // returns rgb(xxx,xxx,xxx)
    $inlineCSS .= 'background: ' . $this->textBoxBg($id) . '; '; // returns rgba(xxx,xxx,xxx,xxx)
    $inlineCSS .= 'color: ' . $this->textBoxText($id, true) . '; ';
    $inlineCSS .= 'color: ' . $this->textBoxText($id) . '; ';

    return $inlineCSS;
}

Ceci est une forme assez basique de ce que je cherchais, donc je vais probablement développer cette fonction pour gérer de nombreux éléments différents de façon appropriée.

Answer 4

Chaque page a sa propre mise en page poignée. De cette façon, vous pouvez ajouter un fichier css exactement à celui-ci la page, pour examle:

<catalog_product_compare_index translate="label">
    <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
</catalog_product_compare_index>

Vous pouvez laisser la déclaration de <if> si vous voulez.

En outre, la balise HTML a cette poignée de mise en page ajoutée en tant que nom de classe. Voir la page `/ 1column.phtml » modèle pour un exemple:

...
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
....

Le balisage résultant peut-être quelque chose comme:

<body class="cms-index-index cms-home">

L'utilisation de ces deux méthodes que vous pouvez facilement les éléments de style sur une base par page.