Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Grid / View Condition


CGhoST

Recommended Posts

Hi everyone

 

In product_listing.php i was trying to do an if .. else statement based on grid or list view.

 

if (MODULE_HEADER_TAGS_GRID_LIST_VIEW_STATUS == 'True') {

  <div class="ribbon ribbon_grid blue">

} else {

  <div class="ribbon ribbon_list blue">

}

 

Its not working. Any assistance would be much appreciated.

Link to comment
Share on other sites

Is that the actual code? You're mixing PHP and HTML, and that won't work. Here are two ways:

if (MODULE_HEADER_TAGS_GRID_LIST_VIEW_STATUS == 'True') {
  echo '<div class="ribbon ribbon_grid blue">';
} else {
  echo '<div class="ribbon ribbon_list blue">';
}

and

if (MODULE_HEADER_TAGS_GRID_LIST_VIEW_STATUS == 'True') {
?>
  <div class="ribbon ribbon_grid blue">
<?php
} else {
?>
  <div class="ribbon ribbon_list blue">
<?php
}

Both assume that you were already in PHP code.

Link to comment
Share on other sites

This is the actual code:

	if (MODULE_HEADER_TAGS_GRID_LIST_VIEW_STATUS == 'True') {
          $prod_list_contents .= '      <div class="ribbon ribbon_grid blue"><span>Special</span></div><div class="col-xs-6" itemprop="offers" itemscope itemtype="http://schema.org/Offer"><meta itemprop="priceCurrency" content="' . tep_output_string($currency) . '" /><div class="btn-group" role="group"><button type="button" class="btn btn-default"><del>' .  $currencies->display_price($listing[$x]['products_price'], tep_get_tax_rate($listing[$x]['products_tax_class_id'])) . '</del></span>  <span class="productSpecialPrice" itemprop="price" content="' . $currencies->display_raw($listing[$x]['products_price'], tep_get_tax_rate($listing[$x]['products_tax_class_id'])) . '">' . $currencies->display_price($listing[$x]['specials_new_products_price'], tep_get_tax_rate($listing[$x]['products_tax_class_id'])) . '</span></button></div></div>';
        } else {
          $prod_list_contents .= '      <div class="ribbon ribbon_list blue"><span>Special</span></div><div class="col-xs-6" itemprop="offers" itemscope itemtype="http://schema.org/Offer"><meta itemprop="priceCurrency" content="' . tep_output_string($currency) . '" /><div class="btn-group" role="group"><button type="button" class="btn btn-default"><del>' .  $currencies->display_price($listing[$x]['products_price'], tep_get_tax_rate($listing[$x]['products_tax_class_id'])) . '</del></span>  <span class="productSpecialPrice" itemprop="price" content="' . $currencies->display_raw($listing[$x]['products_price'], tep_get_tax_rate($listing[$x]['products_tax_class_id'])) . '">' . $currencies->display_price($listing[$x]['specials_new_products_price'], tep_get_tax_rate($listing[$x]['products_tax_class_id'])) . '</span></button></div></div>';
	}
Link to comment
Share on other sites

@@CGhoST,

 

This: MODULE_HEADER_TAGS_GRID_LIST_VIEW_STATUS is a configuration constant which is changed in the admin configuration settings. It will not dynamically change on switching  the view in the store side.

 

You have to address your changes by css.

Link to comment
Share on other sites

@@CGhoST,

 

I was just testing a bit without precise goal and here is a starting point to get different styling for list and for grid view:

in: user.css add these styles:

.list-group-item .inner {
  background: black;
}

.item {
  background: yellow;
}  

then depending on your desired changes, you have to address different child classes/elements.

 

Hope this helps

rgds

Rainer

Link to comment
Share on other sites

@@Rainer

 

This is what i have done:

/*RIBBON GRID*/
.ribbon_grid {
   left: 10px;
   top: -5px;
}

/*RIBBON LIST*/
.ribbon_list {
   left: 10px;
   top: 5px;
}

/*COMMON CODE FOR BOTH RIBBONS*/
.ribbon {
   position: absolute;
   z-index: 1;
   overflow: hidden;
   width: 75px; height: 75px; 
   text-align: right;
}

Is it correct? Its the condition that i do not know how to do.

Link to comment
Share on other sites

Hi,

try if that works:

/*RIBBON GRID*/
.grid-group-item .ribbon_grid {
   left: 10px;
   top: -5px;
}

/*RIBBON LIST*/
.list-group-item .ribbon_list {
   left: 10px;
   top: 5px;
}

Best regards

Christoph

Link to comment
Share on other sites

@@CGhoST,

 

 

this works for me to change the size of the product name (title):

.item h2 {
  font-size: 50px;
}

.list-group-item h2 {
  font-size: 2px;
}

so to change the ribbon style you could try this:

/*RIBBON GRID*/
.item .ribbon {
   left: 10px;
   top: -5px;
}

/*RIBBON LIST*/
.list-group-item .ribbon {
   left: 10px;
   top: 5px;
}

Put this below the main definition for ribbon class.

Observe that you do not need to use different class names. You just condition different values for the position depending if "ribbon" class is child of "item" for grid view or if it is child of "list-group-item for list view.

 

or you could just add the positions for grid view to the main ribbon class definition and overwrite it for list view.

Then all styles would look like this:

/*BASE CODE FOR BOTH RIBBONS*/
.ribbon {
   position: absolute;
   left: 10px;
   top: -5px;
   z-index: 1;
   overflow: hidden;
   width: 75px; height: 75px; 
   text-align: right;
}

/*RIBBON LIST*/
.list-group-item .ribbon {
   top: 5px;
}
Link to comment
Share on other sites

@@CGhoST, observe that there is a "like" button and a "best answer" button :thumbsup:

Link to comment
Share on other sites

  • 5 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...