VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: ninad_jad on November 11, 2011, 15:51:59 PM

Title: Related Product Styling
Post by: ninad_jad on November 11, 2011, 15:51:59 PM
hi,
i need to modify look of related product, and add add tp cart button in that,

i have searched a lot but i didn't find where exactly the code of related product placed
can someone help to find the location of code of Related product

i got only <span class="product-field-display"><?php echo $field->display ?></span>   in productdetails page

eagerly waiting for solution ..
Title: Re: Related Product Styling
Post by: PRO on November 11, 2011, 16:43:13 PM
thats what prints out the field.

So you want to add an add to cart button?
Title: Re: Related Product Styling
Post by: ninad_jad on November 12, 2011, 09:59:48 AM
yeh i need to add the "add to cart" button and i would like to change its display,
currently my related products displayed very unprofessional (* screen shot attached ) i need to put product title on top of image

(https://lh4.googleusercontent.com/-z_msqQot37g/Tr40oMyatqI/AAAAAAAABHI/UKQBLjlcqec/s853/screen.jpg)

[attachment cleanup by admin]
Title: Re: Related Product Styling
Post by: PRO on November 12, 2011, 14:10:58 PM
I dont know about adding the cart button , but you can get it looking better with css.

It is hard because the picture and text is all 1 span etc.



[attachment cleanup by admin]
Title: Re: Related Product Styling
Post by: JtouchMobile.com on November 15, 2011, 03:19:24 AM
Here you are:

/components/com_virtuemart/view/productdetails/tmpl/default.php

Search for those code:

if (!empty($this->product->customfieldsRelatedProducts)) { ?>
      <div class="product-related-products">
      <h4><?php echo JText::_('COM_VIRTUEMART_RELATED_PRODUCTS'); ?></h4>

      <?php
      foreach ($this->product->customfieldsRelatedProducts as $field){
         ?><div style="display:inline-block;" class="product-field product-field-type-<?php echo $field->field_type ?>">
         <span class="product-field-display"><?php echo $field->display ?></span>
         <span class="product-field-desc"><?php echo jText::_($field->custom_field_desc) ?></span>
         </div>
         <?php
      } ?>
      </div>
      <?php
   } // Product customfieldsRelatedProducts END
Title: Re: Related Product Styling
Post by: ninad_jad on November 15, 2011, 08:35:53 AM
Thnx Gr8, i have solved my problem by modifying little css and little code.

to solve the problem in css you need to add override img in main related product class and put your formatting style..
Title: Re: Related Product Styling
Post by: b.nalta on December 23, 2011, 15:19:18 PM
Hi everyone,
I have the same problem :
I would like to add css classes in this code :
<a title="___" href="___">
    <img alt="___" src="____">
    table test
</a>

that is generated with <?php  echo $field->display ?> in

/components/com_virtuemart/view/productdetails/tmpl/default.php

if (!empty($this->product->customfieldsRelatedProducts)) { ?>
      <div class="product-related-products">
      <h4><?php echo JText::_('COM_VIRTUEMART_RELATED_PRODUCTS'); ?></h4>

      <?php
      foreach ($this->product->customfieldsRelatedProducts as $field){
         ?><div style="display:inline-block;" class="product-field product-field-type-<?php echo $field->field_type ?>">
         <span class="product-field-display"><?php echo $field->display ?></span>
         <span class="product-field-desc"><?php echo jText::_($field->custom_field_desc) ?></span>
         </div>
         <?php
      } ?>
      </div>
      <?php
   } // Product customfieldsRelatedProducts END



any ideas ?
Title: Re: Related Product Styling
Post by: PRO on December 23, 2011, 17:10:40 PM
you can strip and replace

<?php $field->display = str_replace( 'this', 'with-this', $field->display ); ?><?php echo $field->display ?>
Title: Re: Related Product Styling
Post by: solantis on August 08, 2012, 12:19:32 PM
Quote from: ninad_jad on November 15, 2011, 08:35:53 AM
Thnx Gr8, i have solved my problem by modifying little css and little code.

to solve the problem in css you need to add override img in main related product class and put your formatting style..

Please show me an example of the CSS
Title: Re: Related Product Styling
Post by: PRO on August 08, 2012, 13:25:51 PM
Guys I use this code to "clear" the image and the text going below always

It adds  break after the image, so the "product name"  does not float left
    <?php
    foreach ($this->product->customfieldsRelatedProducts as $field) {
   ?><div class="width25">
          <div class="border spacer center"><?php $field->display = str_replace( '"  />', '"  /><br/>', $field->display ); ?><?php echo $field->display; ?></div>
      </div>
   <?php } ?>
        </div>
Title: Re: Related Product Styling
Post by: solantis on August 08, 2012, 13:59:22 PM
Quote from: BanquetTables.pro on August 08, 2012, 13:25:51 PM
Guys I use this code to "clear" the image and the text going below always

It adds  break after the image, so the "product name"  does not float left
    <?php
    foreach ($this->product->customfieldsRelatedProducts as $field) {
   ?><div class="width25">
          <div class="border spacer center"><?php $field->display = str_replace( '"  />', '"  /><br/>', $field->display ); ?><?php echo $field->display; ?></div>
      </div>
   <?php } ?>
        </div>

Thank BanquetTables.pro it work! Coupled with that i insert the following into my css file:

.width25{float: left;width: 25%;}
.spacer2{margin:1px;padding:2px}
.center2{text-align:center}
.border2{border:1px solid #ccc;-moz-border-radius:6px;border-radius:6px}
Title: Re: Related Product Styling
Post by: baggiesmad on March 05, 2013, 21:44:24 PM
is it possible to add styling to the product title just on the 'related products' template?
Title: Re: Related Product Styling
Post by: PRO on March 05, 2013, 22:03:49 PM
Quote from: vannquish on March 05, 2013, 21:44:24 PM
is it possible to add styling to the product title just on the 'related products' template?


what do you mean?