News:

Support the VirtueMart project and become a member

Main Menu

how to display product (full) description on category page?

Started by guybr, November 24, 2014, 08:06:58 AM

Previous topic - Next topic

guybr

I created a grid/list toggle and would like to display a portion of the product full description on the list display, instead of the short description (because its content is identical to the product name - duplicate content).

The problem is, I can't seem to get the css(?) right:

This is what I have for the php, and it seems to work fine vis. the live display:

               <?php // replaced Product Short Description with full product description when on list-view
               if (!empty($product->product_desc)) {
                  ?>
                  <p class="product-description">
                     <?php
                     echo shopFunctionsF::limitStringByWord ($product->product_desc, 500, '...')
                     ?>
                  </p>


But for the css, where I used to have this callup (.grid-view p.product_s_desc{display:none;}), I can't get this variation to work: .grid-view p.product_desc{display:none;}

Does "product_desc" not exist as a callup? I duplicated it in vm-ltr identical to product_s_desc and it doesn't work:
p.product_s_desc{margin-bottom:6px;padding:0;}
p.product_desc{margin-bottom:6px;padding:0;}



GJC Web Design

You answer your own question!

<p class="product-description">
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

guybr

Actually I did try that before and it didn't work:

I see that class called up 1 time in vm-ltr.css here: .productdetails-view .product-description,.product-fields{margin:15px 0;}

but when I refer to it like this .grid-view p.product-description{display:none;} it still displays the text...

and if I create a callup, like this: p.product-description{margin:15px 0;}, and refer to it further down with .grid-view (as above) it still displays the text... what am I doing wrong?

GJC Web Design

I have no idea but your making it so complicated - just learn to use Firebug and it will be like a new day dawning
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

guybr

It looks like the problem is related to the text styling of the description: when I chose to display the full description it's displaying all the style elements (color, font size etc.) created in the editor.

Is there a way to call up the description but as text-only without any accompanying styling that gets displayed on the product details screen?

guybr

I'm zeroing in on the problem:

the description tag $product->product_desc was pulling in a lot of styling elements from TinyMCE which my simple css command ( .grid-view p.product-description{display:none;} ) wasn't able to block.

stripping out the styling, what is left is this in the html:
<p class="product-description"></p>
<p>the product description text...</p>

calling up .grid-view p.product-description{display:none;} doesn't block the text from appearing but using .grid-view p {display:none;} does... the problem is, it also blocks everything else that gets called up with <p...>, like the product details button.

Based on the html I have here, is there a more precise way of writing that css display none call-up so I don't block out everything called up with <p ?
I did try p.product-description p {} but that didn't work...

GJC Web Design

.grid-view p.product-description{display:none !important;}
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation