COMMUNITY FORUM

K2 Extra Fields - display mutliselect values as images

Start
Prev
1
Next
End

Jindřich Ekart
Topic Author
Offline
New Member

7 years 5 months ago - 7 years 5 months ago #159249 by Jindřich Ekart

K2 Extra Fields - display mutliselect values as images was created by Jindřich Ekart

I need advice on how to display mutliselect values in K2 Extra Fileds as images/icons.

I want to create in the K2 catalog for clothing, one extra field will be Colors, this extra fied will be mutliselect list - blue, red, yellow, green etc.
I want in frontend view for item in catalog display this colors as images or icons.

I found it in one of the older template nuFashion was something similar already solved:
https://www.joomlaworks.net/support/templates/commercial-templates/item/221-nufashion

Depending on the color name it was applied in the multiselect list, a class was added for each color name.

For example, for the color White, the CSS added is:

div.itemExtraFields ul li span.itemExtraFieldsValue span.White { 
background: #FFFFFF; border:1px solid #C6B299; margin: 0 5px 0 0; 
}

There is item view for catalog in nuFashion template, colors are display as images:
www.joomlaworks.net/images//template/documentation/galleries/nuFashion/nuFashion_03a_ItemCatalogStructure.png

Can you help me?

Last edit: 7 years 5 months ago by Jindřich Ekart.

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

Krikor Boghossian
Offline
Platinum Member

7 years 5 months ago - 7 years 5 months ago #159265 by Krikor Boghossian

Replied by Krikor Boghossian on topic K2 Extra Fields - display mutliselect values as images

Hello,

Based on the field's value or alias you can render a class in your HTML elements.

You can also differentiate the fields based on their group.

   	  <?php if($this->item->params->get('itemExtraFields') && count($this->item->extra_fields)): ?>
    	  <!-- Item extra fields -->
    	  <div class="itemExtraFields fontIsSansSerif">
    	  	<h3><?php echo JText::_('K2_ADDITIONAL_INFO'); ?></h3>
    	  	<ul>
    			<?php foreach ($this->item->extra_fields as $key=>$extraField): ?>
    			<?php if($extraField->value && $extraField->name!='Price'): ?>
    			  
    			  <?php if ($extraField->name=='Colors'): ?>
            <li class="<?php echo ($key%2) ? "odd" : "even"; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?> coloring">
            <?php  $colorValues=explode(',',$extraField->value); 
                   $colorCounter=count($colorValues);
            ?>      
              <span class="itemExtraFieldsLabel"><?php echo $extraField->name; ?>:</span>
              <?php foreach ($colorValues as $colorCounter=>$colorValue): ?>
                <span class="itemExtraFieldsValue itemExtraFieldsColor"><span class="<?php echo str_replace(" ","",$colorValues[$colorCounter]); ?>">&nbsp;</span><?php echo $colorValues[$colorCounter]; ?></span>
              <?php endforeach; ?>
            </li>
            
            <?php elseif ($extraField->name=='Available Sizes'): ?>
            
            <li class="<?php echo ($key%2) ? "odd" : "even"; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?> sizing">
            <?php  $sizeValues=explode(',',$extraField->value); 
                   $sizeCounter=count($sizeValues);
            ?>      
              <span class="itemExtraFieldsLabel"><?php echo $extraField->name; ?>:</span>
              <?php foreach ($sizeValues as $sizeCounter=>$sizeValue): ?>
                <span class="itemExtraFieldsValue itemExtraFieldsSize"><?php echo $sizeValues[$sizeCounter]; ?></span>
              <?php endforeach; ?>
            </li>
            
            <?php else: ?>
    			  
      			<li class="<?php echo ($key%2) ? "odd" : "even"; ?> type<?php echo ucfirst($extraField->type); ?> group<?php echo $extraField->group; ?>">
      				<span class="itemExtraFieldsLabel"><?php echo $extraField->name; ?>:</span>
      				<span class="itemExtraFieldsValue"><?php echo $extraField->value; ?></span>
      			</li>
    			  <?php endif; ?>
    			
    			<?php endif; ?>
    			<?php endforeach; ?>
    			</ul>
    	    <div class="clr"></div>
    	  </div>
    	  <?php endif; ?>

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Last edit: 7 years 5 months ago by Krikor Boghossian.

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

Jindřich Ekart
Topic Author
Offline
New Member

7 years 5 months ago #159275 by Jindřich Ekart

Replied by Jindřich Ekart on topic K2 Extra Fields - display mutliselect values as images

Thank you for a very elegant solution for render a class for different values of extra fields.
I tried to add Your PHP code for render a class to item.php and it works very nicely.

Template nuFashion was probably a very good example of the use of component K2 for creating catalog.
Why not have this template available? There are currently some JoomlaWorks template for creating the catalog similar nuFashion ?

As I understood from the picture Visual Walkthrough for this temaplate, there was a very interesting solved Media Tabs for item catalog view.

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

Krikor Boghossian
Offline
Platinum Member

7 years 5 months ago #159307 by Krikor Boghossian

Replied by Krikor Boghossian on topic K2 Extra Fields - display mutliselect values as images

nuFashion was a little dated so we decided to retire it.

You can use Toreda as a catalog site.
demo.nuevvo.com/#toreda

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

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

Start
Prev
1
Next
End