News:

Looking for documentation? Take a look on our wiki

Main Menu

how to change product listing style on category page?

Started by guybr, September 18, 2014, 08:38:54 AM

Previous topic - Next topic

guybr

Hi, my issue should be easy but I'm having trouble solving it: on the VM homepage /virtuemart/views/default_products.php I created a style I like for the displayed products - product name, image, price, details button in vertical order with background color and borders.

But on the category page (category/views/default.php), which shows the image to the left and then the title and price on the right, I can seem to get those changes to be accepted: my big changes were to include 2 new css classes for the product name and overall container for the product. When I try to include those changes around the existing php/html on the product display portion of the category page (with some movement in the placement of product title and image) - the whole page goes blank and firebug shows that no code appears on the page...

I'm using the Atomic template - any ideas what I can do?

THIS IS WHAT I HAVE FOR default_products.php:

      // Show Products ?>
      <div class="product floatleft<?php echo $cellwidth . $show_vertical_separator ?>">
         <!--<div class="productlistingbox">-->
         <!--<div class="spacer">-->

         <div class="producttitlebox">
               <h3>
               <?php // Product Name
               echo JHTML::link ( JRoute::_ ( 'index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $product->virtuemart_product_id . '&virtuemart_category_id=' . $product->virtuemart_category_id, FALSE ), $product->product_name, array ('title' => $product->product_name ) ); ?>
               </h3>
         </div>
         <div class="productlistingbox">
               <div>
               <?php // Product Image
               if ($product->images) {
                  //echo JHTML::_ ( 'link', JRoute::_ ( 'index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $product->virtuemart_product_id . '&virtuemart_category_id=' . $product->virtuemart_category_id, FALSE ), $product->images[0]->displayMediaThumb( 'class="featuredProductImage"',true,'class="modal"' ) );

                  echo   $product->images[0]->displayMediaThumb( 'class="featuredProductImage"',true,'class="modal"' ) ;
               }
               ?>
               </div>


               <div class="product-price">
               <?php
               if (VmConfig::get ( 'show_prices' ) == '1') {
               //            if( $featProduct->product_unit && VmConfig::get('vm_price_show_packaging_pricelabel')) {
               //                  echo "<strong>". JText::_('COM_VIRTUEMART_CART_PRICE_PER_UNIT').' ('.$featProduct->product_unit."):</strong>";
               //               } else echo "<strong>". JText::_('COM_VIRTUEMART_CART_PRICE'). ": </strong>";

               if ($this->showBasePrice) {
                  echo $this->currency->createPriceDiv( 'basePrice', 'COM_VIRTUEMART_PRODUCT_BASEPRICE', $product->prices );
                  echo $this->currency->createPriceDiv( 'basePriceVariant', 'COM_VIRTUEMART_PRODUCT_BASEPRICE_VARIANT', $product->prices );
               }
               echo $this->currency->createPriceDiv( 'variantModification', 'COM_VIRTUEMART_PRODUCT_VARIANT_MOD', $product->prices );
               if (round($product->prices['basePriceWithTax'],$this->currency->_priceConfig['salesPrice'][1]) != $product->prices['salesPrice']) {
                  echo '<div class="price-crossed">' . $this->currency->createPriceDiv( 'basePriceWithTax', 'COM_VIRTUEMART_PRODUCT_BASEPRICE_WITHTAX', $product->prices ) . "</div>";
               }
               if (round($product->prices['salesPriceWithDiscount'],$this->currency->_priceConfig['salesPrice'][1]) != $product->prices['salesPrice']) {
                  echo $this->currency->createPriceDiv( 'salesPriceWithDiscount', 'COM_VIRTUEMART_PRODUCT_SALESPRICE_WITH_DISCOUNT', $product->prices );
               }
               echo $this->currency->createPriceDiv( 'salesPrice', 'COM_VIRTUEMART_PRODUCT_SALESPRICE', $product->prices );
               if ($product->prices['discountedPriceWithoutTax'] != $product->prices['priceWithoutTax']) {
                  echo $this->currency->createPriceDiv( 'discountedPriceWithoutTax', 'COM_VIRTUEMART_PRODUCT_SALESPRICE_WITHOUT_TAX', $product->prices );
               } else {
                  echo $this->currency->createPriceDiv( 'priceWithoutTax', 'COM_VIRTUEMART_PRODUCT_SALESPRICE_WITHOUT_TAX', $product->prices );
               }
               echo $this->currency->createPriceDiv( 'discountAmount', 'COM_VIRTUEMART_PRODUCT_DISCOUNT_AMOUNT', $product->prices );
               echo $this->currency->createPriceDiv( 'taxAmount', 'COM_VIRTUEMART_PRODUCT_TAX_AMOUNT', $product->prices );
               } ?>
               </div>

               <div>
               <?php // Product Details Button
               echo JHTML::link ( JRoute::_ ( 'index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $product->virtuemart_product_id . '&virtuemart_category_id=' . $product->virtuemart_category_id , FALSE), JText::_ ( 'COM_VIRTUEMART_PRODUCT_DETAILS' ), array ('title' => $product->product_name, 'class' => 'product-details' ) );
               ?>
               </div>
         <!--</div> for spacer-->
         </div>
      </div>


THIS IS THE ORIGINAL coding for category/views/default.php:
      // Show Products
      ?>
      <div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">
         <div class="spacer">
            <div class="width30 floatleft center">
                <a title="<?php echo $product->product_name ?>"  href="<?php echo $product->link; ?>">
                  <?php
                     echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
                  ?>
                </a>
               <!-- The "Average Customer Rating" Part -->
               <?php // Output: Average Product Rating
               if ($this->showRating) {
                  $maxrating = VmConfig::get('vm_maximum_rating_scale', 5);
                  if (empty($product->rating)) {
                     ?>
                     <span class="vote"><?php echo JText::_('COM_VIRTUEMART_RATING') . ' ' . JText::_('COM_VIRTUEMART_UNRATED') ?></span>
                  <?php
                  } else {
                     $ratingwidth = $product->rating * 12; //I don't use round as percetntage with works perfect, as for me
                     ?>
                     <span class="vote">
                                <?php echo JText::_('COM_VIRTUEMART_RATING') . ' ' . round($product->rating) . '/' . $maxrating; ?><br/>
                                <span title=" <?php echo (JText::_("COM_VIRTUEMART_RATING_TITLE") . round($product->rating) . '/' . $maxrating) ?>" class="category-ratingbox" style="display:inline-block;">
                                    <span class="stars-orange" style="width:<?php echo $ratingwidth.'px'; ?>">
                                    </span>
                                </span>
                            </span>
                  <?php
                  }
               }
               if ( VmConfig::get ('display_stock', 1)) { ?>
                  <!--                   if (!VmConfig::get('use_as_catalog') and !(VmConfig::get('stockhandle','none')=='none')){?> -->
                  <div class="paddingtop8">
                     <span class="vmicon vm2-<?php echo $product->stock->stock_level ?>" title="<?php echo $product->stock->stock_tip ?>"></span>
                     <span class="stock-level"><?php echo JText::_ ('COM_VIRTUEMART_STOCK_LEVEL_DISPLAY_TITLE_TIP') ?></span>
                  </div>
               <?php } ?>
            </div>
            <div class="width70 floatright">
               <h2><?php echo JHTML::link ($product->link, $product->product_name); ?></h2>
               <?php // Product Short Description
               if (!empty($product->product_s_desc)) {
                  ?>
                  <p class="product_s_desc">
                     <?php echo shopFunctionsF::limitStringByWord ($product->product_s_desc, 40, '...') ?>
                  </p>
                  <?php } ?>
               <div class="product-price marginbottom12" id="productPrice<?php echo $product->virtuemart_product_id ?>">
                  <?php
                  if ($this->show_prices == '1') {
                     if ($product->prices['salesPrice']<=0 and VmConfig::get ('askprice', 1) and  !$product->images[0]->file_is_downloadable) {
                        echo JText::_ ('COM_VIRTUEMART_PRODUCT_ASKPRICE');
                     }
                     //todo add config settings
                     if ($this->showBasePrice) {
                        echo $this->currency->createPriceDiv ('basePrice', 'COM_VIRTUEMART_PRODUCT_BASEPRICE', $product->prices);
                        echo $this->currency->createPriceDiv ('basePriceVariant', 'COM_VIRTUEMART_PRODUCT_BASEPRICE_VARIANT', $product->prices);
                     }
                     echo $this->currency->createPriceDiv ('variantModification', 'COM_VIRTUEMART_PRODUCT_VARIANT_MOD', $product->prices);
                     if (round($product->prices['basePriceWithTax'],$this->currency->_priceConfig['salesPrice'][1]) != $product->prices['salesPrice']) {
                        echo '<div class="price-crossed" >' . $this->currency->createPriceDiv ('basePriceWithTax', 'COM_VIRTUEMART_PRODUCT_BASEPRICE_WITHTAX', $product->prices) . "</div>";
                     }
                     if (round($product->prices['salesPriceWithDiscount'],$this->currency->_priceConfig['salesPrice'][1]) != $product->prices['salesPrice']) {
                        echo $this->currency->createPriceDiv ('salesPriceWithDiscount', 'COM_VIRTUEMART_PRODUCT_SALESPRICE_WITH_DISCOUNT', $product->prices);
                     }
                     echo $this->currency->createPriceDiv ('salesPrice', 'COM_VIRTUEMART_PRODUCT_SALESPRICE', $product->prices);
                     if ($product->prices['discountedPriceWithoutTax'] != $product->prices['priceWithoutTax']) {
                        echo $this->currency->createPriceDiv ('discountedPriceWithoutTax', 'COM_VIRTUEMART_PRODUCT_SALESPRICE_WITHOUT_TAX', $product->prices);
                     } else {
                        echo $this->currency->createPriceDiv ('priceWithoutTax', 'COM_VIRTUEMART_PRODUCT_SALESPRICE_WITHOUT_TAX', $product->prices);
                     }
                     echo $this->currency->createPriceDiv ('discountAmount', 'COM_VIRTUEMART_PRODUCT_DISCOUNT_AMOUNT', $product->prices);
                     echo $this->currency->createPriceDiv ('taxAmount', 'COM_VIRTUEMART_PRODUCT_TAX_AMOUNT', $product->prices);
                     $unitPriceDescription = JText::sprintf ('COM_VIRTUEMART_PRODUCT_UNITPRICE', $product->product_unit);
                     echo $this->currency->createPriceDiv ('unitPrice', $unitPriceDescription, $product->prices);
                  } ?>
               </div>
               <p>
                  <?php // Product Details Button
                  echo JHTML::link ($product->link, JText::_ ('COM_VIRTUEMART_PRODUCT_DETAILS'), array('title' => $product->product_name, 'class' => 'product-details'));
                  ?>
               </p>
            </div>
            <div class="clear"></div>
         </div>
         <!-- end of spacer -->
      </div> <!-- end of product -->


AND THIS IS WHAT I TRIED TO DO (without success - the page displays blank without any code):
      // Show Products

      ?>

      <div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">
         <!--<div class="spacer"> -->
            <!--<div class="width30 floatleft center"> -->
            
            <div class="producttitlebox">
            <h3><?php echo JHTML::link ($product->link, $product->product_name); ?></h3>

               <?php /* // Product Short Description
               if (!empty($product->product_s_desc)) {
                  ?>
                  <p class="product_s_desc">
                     <?php echo shopFunctionsF::limitStringByWord ($product->product_s_desc, 40, '...') ?>
                  </p>
                  <?php } */ ?>
            </div>      
            <div class="productlistingbox">
                <a title="<?php echo $product->product_name ?>"  href="<?php echo $product->link; ?>">
                  <?php
                     echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
                  ?>
                </a>

               <!-- The "Average Customer Rating" Part -->
               <?php // Output: Average Product Rating
               if ($this->showRating) {
                  $maxrating = VmConfig::get('vm_maximum_rating_scale', 5);
                  if (empty($product->rating)) {
                     ?>
                     <span class="vote"><?php echo JText::_('COM_VIRTUEMART_RATING') . ' ' . JText::_('COM_VIRTUEMART_UNRATED') ?></span>
                  <?php
                  } else {
                     $ratingwidth = $product->rating * 12; //I don't use round as percetntage with works perfect, as for me
                     ?>
                     <span class="vote">
                                <?php echo JText::_('COM_VIRTUEMART_RATING') . ' ' . round($product->rating) . '/' . $maxrating; ?><br/>
                                <span title=" <?php echo (JText::_("COM_VIRTUEMART_RATING_TITLE") . round($product->rating) . '/' . $maxrating) ?>" class="category-ratingbox" style="display:inline-block;">
                                    <span class="stars-orange" style="width:<?php echo $ratingwidth.'px'; ?>">
                                    </span>
                                </span>
                            </span>
                  <?php
                  }
               }
               if ( VmConfig::get ('display_stock', 1)) { ?>
                  <!--                   if (!VmConfig::get('use_as_catalog') and !(VmConfig::get('stockhandle','none')=='none')){?> -->
                  <div class="paddingtop8">
                     <span class="vmicon vm2-<?php echo $product->stock->stock_level ?>" title="<?php echo $product->stock->stock_tip ?>"></span>
                     <span class="stock-level"><?php echo JText::_ ('COM_VIRTUEMART_STOCK_LEVEL_DISPLAY_TITLE_TIP') ?></span>
                  </div>
               <?php } ?>
            <!-- </div> width30 floatleft center -->

            <!--<div class="width70 floatright"> -->
               

               <div class="product-price marginbottom12" id="productPrice<?php echo $product->virtuemart_product_id ?>">
                  <?php
                  if ($this->show_prices == '1') {
                     if ($product->prices['salesPrice']<=0 and VmConfig::get ('askprice', 1) and  !$product->images[0]->file_is_downloadable) {
                        echo JText::_ ('COM_VIRTUEMART_PRODUCT_ASKPRICE');
                     }

                     //todo add config settings
                     if ($this->showBasePrice) {
                        echo $this->currency->createPriceDiv ('basePrice', 'COM_VIRTUEMART_PRODUCT_BASEPRICE', $product->prices);
                        echo $this->currency->createPriceDiv ('basePriceVariant', 'COM_VIRTUEMART_PRODUCT_BASEPRICE_VARIANT', $product->prices);
                     }
                     echo $this->currency->createPriceDiv ('variantModification', 'COM_VIRTUEMART_PRODUCT_VARIANT_MOD', $product->prices);
                     if (round($product->prices['basePriceWithTax'],$this->currency->_priceConfig['salesPrice'][1]) != $product->prices['salesPrice']) {
                        echo '<div class="price-crossed" >' . $this->currency->createPriceDiv ('basePriceWithTax', 'COM_VIRTUEMART_PRODUCT_BASEPRICE_WITHTAX', $product->prices) . "</div>";
                     }
                     if (round($product->prices['salesPriceWithDiscount'],$this->currency->_priceConfig['salesPrice'][1]) != $product->prices['salesPrice']) {
                        echo $this->currency->createPriceDiv ('salesPriceWithDiscount', 'COM_VIRTUEMART_PRODUCT_SALESPRICE_WITH_DISCOUNT', $product->prices);
                     }
                     echo $this->currency->createPriceDiv ('salesPrice', 'COM_VIRTUEMART_PRODUCT_SALESPRICE', $product->prices);
                     if ($product->prices['discountedPriceWithoutTax'] != $product->prices['priceWithoutTax']) {
                        echo $this->currency->createPriceDiv ('discountedPriceWithoutTax', 'COM_VIRTUEMART_PRODUCT_SALESPRICE_WITHOUT_TAX', $product->prices);
                     } else {
                        echo $this->currency->createPriceDiv ('priceWithoutTax', 'COM_VIRTUEMART_PRODUCT_SALESPRICE_WITHOUT_TAX', $product->prices);
                     }
                     echo $this->currency->createPriceDiv ('discountAmount', 'COM_VIRTUEMART_PRODUCT_DISCOUNT_AMOUNT', $product->prices);
                     echo $this->currency->createPriceDiv ('taxAmount', 'COM_VIRTUEMART_PRODUCT_TAX_AMOUNT', $product->prices);
                     $unitPriceDescription = JText::sprintf ('COM_VIRTUEMART_PRODUCT_UNITPRICE', $product->product_unit);
                     echo $this->currency->createPriceDiv ('unitPrice', $unitPriceDescription, $product->prices);
                  } ?>
               </div>
               <p>
                  <?php // Product Details Button
                  echo JHTML::link ($product->link, JText::_ ('COM_VIRTUEMART_PRODUCT_DETAILS'), array('title' => $product->product_name, 'class' => 'product-details'));
                  ?>
               </p>
            <!--</div> width70 floatright -->
            </div> <!--productlistingbox -->
            <div class="clear"></div>
         <!--</div> spacer-->
         <!-- end of spacer -->
      </div> <!-- end of product -->


guybr

At a minimum can someone suggest why changing pho code in one section of the page would cause the whole page to go blank?

jenkinhill

I'm not going to wade through that code, but if you get the syntax wrong, misplace a  <?php  or ?> or similar then you can get a page that will not work.

Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum