VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: guybr on September 18, 2014, 08:38:54 AM

Title: how to change product listing style on category page?
Post by: guybr on September 18, 2014, 08:38:54 AM
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 -->

Title: Re: how to change product listing style on category page?
Post by: guybr on September 19, 2014, 10:43:45 AM
At a minimum can someone suggest why changing pho code in one section of the page would cause the whole page to go blank?
Title: Re: how to change product listing style on category page?
Post by: jenkinhill on September 19, 2014, 10:56:59 AM
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.