2334bs - formatting issue

[ArtcoInc]

I am trying to install the Pop Up Customer Stock Alert add-on

 

http://addons.oscommerce.com/info/8750

 

While I am working with the developer on one issue, I have another small formatting issue with the add-on in 2334bs ...

 

When the customer displays an item in the catalog, this add-on is supposed to display both a color indicator and a short sentence describing the amount of inventory in stock (Out of Stock, Low Stock, Limited Stock, and Plenty of Stock). The color dot is supposed to be to the left of the sentence, as shown below.

 

 

 

However, when I added this to 2334bs, the formatting gets messed up. The color dot is moved above the sentence, as shown below:

 

 

 

The relevant bit of code is as follows (towards the bottom):

<div class="contentContainer">
  <div class="contentText">

<?php
    if (tep_not_null($product_info['products_image'])) {
      $photoset_layout = '1';

      $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");

      if (tep_db_num_rows($pi_query) > 0) {
        $photoset_layout = '1' . (tep_db_num_rows($pi_query) > 1 ? tep_db_num_rows($pi_query) - 1 : '');
?>

    <div id="piGal" data-imgcount="<?php echo $photoset_layout; ?>" class="pull-right">

<?php
        $pi_counter = 0;
        $pi_html = array();

        while ($pi = tep_db_fetch_array($pi_query)) {
          $pi_counter++;

          if (tep_not_null($pi['htmlcontent'])) {
            $pi_html[] = '<div id="piGalDiv_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div>';
          }

          echo tep_image(DIR_WS_IMAGES . $pi['image'], '', '', '', 'id="piGalImg_' . $pi_counter . '"');
        }
?>

    </div>

<?php
        if ( !empty($pi_html) ) {
          echo '    <div style="display: none;">' . implode('', $pi_html) . '</div>';
        }
      } else {
?>

    <div id="piGal" class="pull-right">
      <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name'])); ?>
    </div>

<?php
      }
    }
?>

<div itemprop="description">


  <p>
    <?php
      if($product_info['products_quantity'] <= 0){
        echo '<p><a href="'.tep_href_link(basename($HTTP_SERVER_VARS['PHP_SELF'])). ' "class="newt" id="AlertButton"><span style="color:red;">'.NO_STOCK_MESSAGE.'</span></a></p>';
          if(tep_session_is_registered('notify')){
            ?>
            <div id="notify">Thank you, you will be notified when "<?php echo $product_info['products_name']; ?>" is back in stock.
            </div>
            <?php
              tep_session_unregister('notify');
            }
          }
          elseif($product_info['products_quantity'] <= NOTIFY_LOWER_LIMIT){
            echo tep_image(DIR_WS_IMAGES . 'l_stock.png') . TEXT_LOWER_LIMIT;
          }
        elseif($product_info['products_quantity'] <= NOTIFY_MEDIUM_LIMIT){
          echo tep_image(DIR_WS_IMAGES . 'm_stock.png') . TEXT_MEDIUM_LIMIT;
        }
      else {
        echo tep_image(DIR_WS_IMAGES . 'p_stock.png') . TEXT_PLENTY_LIMIT;
      }
    ?>
  </p>

  <?php echo stripslashes($product_info['products_description']); ?>
</div>

Can someone offer some assistance in formatting this correctly?

 

Thanks in advance!

 

Malcolm

[♥mattjt83]

@@ArtcoInc

 

I would suggest using the bootstrap labels instead of the image.

 

Just wrap the text in the proper <span></span> as found here: http://getbootstrap.com/components/#labels 

 

Then you can use the contextual classes to display the info and save a tiny bit of bandwidth not loading the image :)

[ArtcoInc]

@@mattjt83

 

Thanks! Worked like a charm!

  <p>
    <?php
      if($product_info['products_quantity'] <= 0){
        echo '<p><a href="'.tep_href_link(basename($HTTP_SERVER_VARS['PHP_SELF'])). '" class="newt" id="AlertButton"><span

style="color:red;">'.NO_STOCK_MESSAGE.'</span></a></p>';
        if(tep_session_is_registered('notify')){
          ?>
          <div id="notify">Thank you, you will be notified when "<?php echo $product_info['products_name']; ?>" is back in

stock.
          </div>
          <?php
            tep_session_unregister('notify');
        }
      }
          elseif($product_info['products_quantity'] <= NOTIFY_LOWER_LIMIT){
            echo '<span class="label label-danger"> ' . TEXT_LOWER_LIMIT . '</span>' ;
          }
        elseif($product_info['products_quantity'] <= NOTIFY_MEDIUM_LIMIT){
          echo '<span class="label label-warning"> ' . TEXT_MEDIUM_LIMIT . '</span>' ;
        }
      else {
        echo '<span class="label label-success"> ' . TEXT_PLENTY_LIMIT . '</span>' ;
      }
    ?>
  </p>

I'm still working with the developer to get the pop-up to work.

 

Thanks again!

 

Malcolm