News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

Styling Custom Fields by Layout Position VM3

Started by PRO, March 21, 2015, 17:28:19 PM

Previous topic - Next topic

PRO

VM3 has different templating then VM2 with respect to custom fields.

Now the Custom fields, Related Products,Related Categories, and Add to Cart custom fields all use the same file.
sublayouts/customfields.php

BUT! You do not have to style them the same way.

A custom field is called like such
echo shopFunctionsF::renderVmSubLayout('customfields',array('product'=>$this->product,'position'=>'related_categories','class'=> 'product-related-categories'));

Too add a different style for the related categories field we just change
sublayouts/customfields.php

After this
if (!empty($product->customfieldsSorted[$position])) {
// Add this
if ($class !='product-related-categories' ){

Then before the closing tag , we must add another }
Change this

<?php
} ?>
To this
<?php
} }?>


NOW: We have to add our layout for the style product-related-categories
So we add this
<?php
if ($class=='product-related-categories' && $product->customfieldsSorted[$position]) {
   ?>
   <div class="<?php echo $class?>">
      <?php
      if($customTitle and isset($product->customfieldsSorted[$position][0])){
         $field = $product->customfieldsSorted[$position][0]; ?>
      <div class="product-fields-title-wrapper"><span class="product-fields-title"><strong><?php echo vmText::_ ($field->custom_title) ?></strong></span>
         <?php if ($field->custom_tip) {
            echo JHtml::tooltip (vmText::_($field->custom_tip), vmText::_ ($field->custom_title), 'tooltip.png');
         } ?>
      </div> <?php
      }
      $custom_title = null;
      foreach ($product->customfieldsSorted[$position] as $field) {
         if ( $field->is_hidden ) //OSP http://forum.virtuemart.net/index.php?topic=99320.0
         continue;
         ?><div class="product-field product-field-type-<?php echo $field->field_type ?>">
            <?php if (!$customTitle and $field->custom_title != $custom_title and $field->show_title) { ?>
               <span class="product-fields-title-wrapper"><span class="product-fields-title"><strong><?php echo vmText::_ ($field->custom_title) ?></strong></span>
                  <?php if ($field->custom_tip) {
                     echo JHtml::tooltip (vmText::_($field->custom_tip), vmText::_ ($field->custom_title), 'tooltip.png');
                  } ?></span>
            <?php }
            if (!empty($field->display)){
               ?><div class="product-field-display"><?php echo $field->display ?></div><?php
            }
            if (!empty($field->custom_desc)){
               ?><div class="product-field-desc"><?php echo vmText::_($field->custom_desc) ?></div> <?php
            }
            ?>
         </div>
      <?php
         $custom_title = $field->custom_title;
      } ?>
      <div class="clear"></div>
   </div>
<?php
} }?>


After we have added the separate style, you just modify it to display like you want to.
I use separate styles for every custom field position
Please note that for every style you add you must add an exclusion to the original default style display.
For example changing this

if ($class !='product-related-categories' ){
to add more like this

if ($class !='product-related-categories' && $class !='li' && $class!='drops' ){



d0ublezer0

OK! how to change $field->display; html code for related products, without change customfields.php model?
Because, i dont need "_blank" link opening.

PRO


TAIWAR

Hello

I need : not display custom field for all my product from my  catagorie page view but sorry I don't know what code I need to disable and in which files of VM ?

Thank you

VM 3 0 18

Studio 42

A better way is to replace
<div class="<?php echo $class?>">
with
<div class="<?php echo $class.' '.$position ?>">
So you have an extra parent class and can add some css eg.
.onbot  .product-fields-title-wrapper{float:left;width:100%}
.onbot  .product-field-display{float:left;width:33.33%}