Jump to content

applicare una classe in base al contenuto


giuse

Recommended Posts

Sto cercando di applicare una classe specifica secondo quanto il DOM mi propone, spiego:

Sto lavorando con prestashop 1.7 dove inserendo le caratteristiche ai prodotti, poi queste lato front-end hanno questa organizzazione:

[HTML]
<dd class="value">"-0° C"<br>"indoor"<br>"outdoor"</dd>
[/HTML]

oppure (dipende dalla caratteristica)

[HTML]
<dd class="value">V3</dd>
<dd class="value">V2</dd>
<dd class="value">V1</dd>
<dd class="value">V0</dd>

[/HTML]

quindi verrà renderizzata una tabella con dentro i valori inseriti.

Il problema:
Vorrei abbinare una icona/immagine prima del testo, purtroppo però non so come agire in quanto la classe su cui applicarla è sempre la stessa, mentre io ne vorrei inserire una specifica per ogni voce.

Inoltre c'è il problema che nel primo esempio il contenuto di "dd", il valore è multiplo separato da doppi apici e un "br".

Speravo vi fosse una funzione avanzata dei CSS3 dove dato un certo valore venisse applicata una classe da personalizzare a piacere, ma mi pare che questa funzione non esista.

Come posso agire secondo voi?

Avevo pensato anche di fare un override del codice di prestashop, ma ho una sola stringa come la seguente:

[PHP]<dd class="value">{$feature.value|escape:'htmlall'|nl2br nofilter}</dd>[/PHP]
qui sotto la vedete con il codice completo

[PHP]
  <dl class="data-sheet">
          {foreach from=$product.grouped_features item=feature}
            <dt class="name">{$feature.name}</dt>
            <dd class="value">{$feature.value|escape:'htmlall'|nl2br nofilter}</dd>
          {/foreach}
        </dl>
[/PHP]

e non so da che parte rifarmi.

Grazie a quanti mi potranno aiutare

Link to comment
Share on other sites

Ciao,

non so se ho capito la tua richiesta al 100% ma supponendo che tu voglia aggiungere un'immagine/icona per ciascuna feature io farei così:

[PHP]
  <dl class="data-sheet">
          {foreach from=$product.grouped_features item=feature}
            <dt class="name {$feature.name}">{$feature.name}</dt>
            <dd class="value">{$feature.value|escape:'htmlall'|nl2br nofilter}</dd>
          {/foreach}
        </dl>
[/PHP]

in questo modo il <dt> oltre alla classe "name" avrebbe anche la classe "{$feature.name}" alla quale potresti agganciare l'immagine/icona che preferisci.

Lo stesso ragionamento si può eventualmente fare anche per i valori della caratteristica usando {$feature.value} come classe.

Buona giornata,
Federica

Link to comment
Share on other sites

In effetti ho anche effettuato questa operazione, inserendo {$feature.name} solo su value in quanto è solo sul value che voglio avere delle icone, purtroppo però quando la caratteristica è multipla succede che il dom mi restituisce 

 

<dd class="value">"pippo"<br>"topolino"<br>"pluto"</dd>

quindi posso solo applicare solo una classe identica per tutte e tre le voci.

 

pensavo di manipolare 

 <dl class="data-sheet">
          {foreach from=$product.grouped_features item=feature}
            <dt class="name {$feature.name}">{$feature.name}</dt>
            <dd class="value">{$feature.value|escape:'htmlall'|nl2br nofilter}</dd>
          {/foreach}
        </dl>

in modo tale da avere le voci ognuna in un unico dd, ma non ci sono riuscito.

Link to comment
Share on other sites

Ciao,

l'unica cosa che mi viene in mente è un {if} sul valore che ti interessa, ma è una soluzione ovviamente poco versatile, dipende da cosa esattamente hai in mente di fare.
Una cosa tipo:

<dl class="data-sheet">
{foreach from=$product.grouped_features item=feature} 
  <dt class="name {$feature.name}">{$feature.name}</dt>
  <dd class="value">
    {if $feature.value == 'pippo'}
    <span class="mia-classe">{$feature.value|escape:'htmlall'|nl2br nofilter}</span>
    {else}
    	{$feature.value|escape:'htmlall'|nl2br nofilter}
    {/if}
  </dd> 
{/foreach}
</dl>

Buon pomeriggio,
Federica

Link to comment
Share on other sites

1 hour ago, fedesib said:

 

Intanto grazie per la cortese risposta,

purtroppo il codice non funziona.

 

il motivo per cui desidero una classe specifica per ogni voce è che devo applicare una specifica classe, nel dettaglio devo abbinare una univoca ICONA a ogni singola voce.....no classe no party.

Link to comment
Share on other sites

Sono riuscito trasformando un campo di testo in textarea, sostituendo le istruzioni per la pulizia del codice e aggiungendo un istruzione all'array che lo componeva, potendo così avere a disposizione una textarea dove inserire codice html al bisogno: nel mio caso ho usato questo hack per abbinare delle icone univoche alle varie voci.

Vediamo come:

nel file
/httpdocs/controllers/admin/AdminFeaturesController.php

a riga 354 sostituire 'text' con 'textarea'

dopo la riga 360 aggiungere  'autoload_rte' => true,


nel file
/httpdocs/classes/FeaturesValue.php 

a riga 53 sostituire la riga con la seguente stringa

  'value' => ['type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml', 'required' => true, 'size' => 255],


nel file
/httpdocs/themes/thestoneage/templates/catalog/_partials/product-details.tpl

sostituire la riga 60 con la seguente stringa

<dd class="value">{$feature.value nofilter}</dd>

In attributi e funzionalità, nella tabs funzioni, questa avrà una textarea dove creare un link a cui applicare una classe, ad esempio

<p><a class="outdoor" href="#">outdoor</a></p>

infine ho creato gli ovverride dei file modificati per non perdere le modifiche apportate, vedi qui la guida:
https://prestacraft.com/adding-new-fields-to-the-registration-form-in-prestashop-1-7/#

istruzioni parziali in inglese qui:
https://stackoverflow.com/questions/52749893/ps-1-7-html-in-product-feature
https://stackoverflow.com/questions/30492642/prestashop-custom-field-in-product-feature-not-saving-on-edit

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...