Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

[dbltoe]

Mentioned before is the addition of a <br /> on or around line 40 of includes/templates/template_default/templates/tpl_checkout_payment_default.php

There is a <br class="clearBoth"> just before the PAYPAL info.

Adding a <br /> after that first br will fix that problem. Or, you can install and use lat9's One Page Checkout.

All others are CSS fixes that we can't help with much without a link.

[RixStix]

TNX dbltoe,

I'll make that edit. EDIT: that corrected the Chrome layout. The fix might have been mentioned before but if a search doesn't yield results, it is difficult to go through 17 pages of comments.
There's too much stuff to fix with the out of the box install, that I didn't want to exacerbate the issue by adding more plugins. OPC is on the list of things to do once everything else is corrected.

Link is in my signature

[RixStix]

Neglected to say
156c install, drop db tables, restore live db, zcinstall

Clone a template
Responsive Classic color changes (tnx dbltoe)

[dbltoe]

There's too much stuff to fix with the out of the box install, that I didn't want to exacerbate the issue by adding more plugins. OPC is on the list of things to do once everything else is corrected.

THANX
My point was that BOTH problems would go away with OPC. If you need assistance or clarification, NO ONE is quicker or better than lat9

[RixStix]

Then maybe there needs to be a message to not use the built-in checkout because of bugs and to go straight to OPC. (sorry for the snark)
Better yet, include OPC with zc_install.

You and Cindy are two of a small handful that are top of my trustworthy list. TNX

[dbltoe]

To be listed in the same sentence as Cindy is an enormous compliment!

I feel your frustration as well. Haredo and I spent MANY hours trying to sort out the colors to get the color change mod going. It's nowhere near perfect. We find something new from time to time. The goal is to one day have the colors selectable in the admin for a more rapid development of a site's colors.

An undertaking the size of a template or Cindy's OPC is enormous. We all just try to come up with solutions as we run into them.

Such as https://www.zen-cart.com/showthread....ndard-Checkout

Just a small omission can make template or checkout a nightmare.

I wish I could send a lot of coffee to the developers but, I am just able to contribute in helping others with things while the devs do their magic.

[carlwhat]

Then maybe there needs to be a message to not use the built-in checkout because of bugs and to go straight to OPC. (sorry for the snark)
Better yet, include OPC with zc_install.

You and Cindy are two of a small handful that are top of my trustworthy list. TNX

you are dead to me..... ;)

[RixStix]

you are dead to me..... ;)

oh but you ARE in that list too. ;)

[mcqueeneycoins]

Hi all, looking for guidance here. Using 1.5.6 and currently working on the product listing pages. Having some trouble with the alignment/layout I'm trying to achieve. Please see https://thecoinauthority.com/index.p...x&cPath=81_1_3 for reference.

What I am hoping to achieve is more of a table layout with 3 columns--the first being the image, the second being the product title above and description below, and the third column being the price above and add to cart button below.

I have tried adjusting sort orders and other settings without much success. I want to keep the responsive aspect when viewing on a mobile device obviously, so building it as a table probably wouldn't allow that to happen (?), but not sure where to start/look to make the adjustments I'm looking for.

The other problem I'm having is that I cannot just get an Add To Cart button in lieu of the Qty box. I've changed those option settings as well but it doesn't change anything on the page. Any ideas what I'm doing wrong?

Thanks in advance!

[dbltoe]

Funny you should bring that up. Haredo and I have been working on this for a couple of days.

It's my belief that there is at least one missing </div> as the div#productGeneral .centerColumn call does not "engulf" the area it should when looking at the elements (right-click >> inspect)

Plus, were were working on getting the page setup so that the shop owner could have the options of setting the information up in different ways similar to the login page options lat9 put in the Log In page.

If you'd like to play along, you are welcome to play with what we have done to the file so far. NO GUARANTEES and MAKE SURE YOU BACKUP. Copy your includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php to includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.mqc so that both files are in YOUR_TEMPLATE's templates directory. That will give you a fall back option.

The file we are working with is

<?php/**
 * Page Template
 *
 * Loaded automatically by index.php?main_page=product_info.<br />
 * Displays details of a typical product
 *
 * @package templateSystem
 * @copyright Copyright 2003-2020 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: dbltoe haredo Fri Apr 3 10:37:10 2020 -0400 Modified for 1.5.6c responsive_classic
 */


//require(DIR_WS_MODULES . '/debug_blocks/product_info_prices.php');
?>
<div class="centerColumn" id="productGeneral">


<!--bof Form start-->
<?php echo zen_draw_form('cart_quantity', zen_href_link(zen_get_info_page($_GET['products_id']), zen_get_all_get_params(array('action')) . 'action=add_product', $request_type), 'post', 'enctype="multipart/form-data"') . "\n"; ?>
<!--eof Form start-->


<?php if ($messageStack->size('product_info') > 0) echo $messageStack->output('product_info'); ?>


<!--bof Category Icon -->
<?php if ($module_show_categories != 0) {?>
<?php
/**
 * display the category icons
 */
require($template->get_template_dir('/tpl_modules_category_icon_display.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_category_icon_display.php'); ?>
<?php } ?>
<!--eof Category Icon -->


<!--bof Prev/Next top position -->
<?php if (PRODUCT_INFO_PREVIOUS_NEXT == 1 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?>
<?php
/**
 * display the product previous/next helper
 */
require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?>
<?php } ?>
<!--eof Prev/Next top position-->


<div id="prod-info-top">
<!--bof Product Name-->
<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->
</div>
<div id="proTopWrapper">
<div id="pinfo-left" class="group">
<!--bof Main Product Image -->
<?php
  if (zen_not_null($products_image)) {
  ?>
<?php
/**
 * display the main product image
 */
   require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
  }
?>
<!--eof Main Product Image-->


<!--bof Additional Product Images -->
<?php
/**
 * display the products additional images
 */
  require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->
</div>
<div id="proDescWrapper">
<!--bof Product description -->
<?php if ($products_description != '') { ?>
<div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div>
<?php } ?>
<!--eof Product description -->
</div>
</div>
<div id="proBottomWrapper">
<div id="cart-boxWrapper">
<div id="cart-box" class="grids">
<h2 id="productPrices" class="productGeneral">
<?php
// base price
  if ($show_onetime_charges_description == 'true') {
    $one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span><br />';
  } else {
    $one_time = '';
  }
  echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
?></h2>
<!--eof Product Price block -->


<!--bof Attributes Module -->
<?php
  if ($pr_attr->fields['total'] > 0) {
?>
<?php
/**
 * display the product atributes
 */
  require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
<?php
  }
?>
<!--eof Attributes Module -->


<!--bof Quantity Discounts table -->
<?php
  if ($products_discount_type != 0) { ?>
<?php
/**
 * display the products quantity discount
 */
 require($template->get_template_dir('/tpl_modules_products_quantity_discounts.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_products_quantity_discounts.php'); ?>
<?php
  }
?>
<!--eof Quantity Discounts table -->


<!--bof Add to Cart Box -->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
<?php
    $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
    if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
      // hide the quantity box and default to 1
      $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
    } else {
      // show the quantity box
      $the_button = '<div class="max-qty">' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '</div><span class="qty-text">' . PRODUCTS_ORDER_QTY_TEXT . '</span><input type="text" name="cart_quantity" value="' . $products_get_buy_now_qty . '" maxlength="6" size="4" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
    }
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
?>
<?php if ($display_qty != '' or $display_button != '') { ?>
    <div id="cartAdd">
    <?php
      echo $display_qty;
      echo $display_button;
?>
          </div>
<?php   } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->
</div>
</div>
<div id="pinfo-right" class="group grids">
<!--bof Product Price block -->
<!--bof Product details list  -->
<?php if ( (($flag_show_product_info_model == 1 and $products_model != '') or ($flag_show_product_info_weight == 1 and $products_weight !=0) or ($flag_show_product_info_quantity == 1) or ($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name))) ) { ?>
<ul id="productDetailsList">
  <?php echo (($flag_show_product_info_model == 1 and $products_model !='') ? '<li>' . TEXT_PRODUCT_MODEL . $products_model . '</li>' : '') . "\n"; ?>
  <?php echo (($flag_show_product_info_weight == 1 and $products_weight !=0) ? '<li>' . TEXT_PRODUCT_WEIGHT .  $products_weight . TEXT_PRODUCT_WEIGHT_UNIT . '</li>'  : '') . "\n"; ?>
  <?php echo (($flag_show_product_info_quantity == 1) ? '<li>' . $products_quantity . TEXT_PRODUCT_QUANTITY . '</li>'  : '') . "\n"; ?>
  <?php echo (($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name)) ? '<li>' . TEXT_PRODUCT_MANUFACTURER . $manufacturers_name . '</li>' : '') . "\n"; ?>
</ul>
<?php
  }
?>
<!--eof Product details list -->


<!--bof free ship icon  -->
<?php if(zen_get_product_is_always_free_shipping($products_id_current) && $flag_show_product_info_free_shipping) { ?>
<div id="freeShippingIcon"><?php echo TEXT_PRODUCT_FREE_SHIPPING_ICON; ?></div>
<?php } ?>
<!--eof free ship icon  -->
</div>
</div>


</div>


<!--bof Prev/Next bottom position -->
<?php if (PRODUCT_INFO_PREVIOUS_NEXT == 2 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?>
<?php
/**
 * display the product previous/next helper
 */
 require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?>
<?php } ?>
<!--eof Prev/Next bottom position -->


<!--bof Reviews button and count-->
<?php
  if ($flag_show_product_info_reviews == 1) {
    // if more than 0 reviews, then show reviews button; otherwise, show the "write review" button
    if ($reviews->fields['count'] > 0 ) { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS, zen_get_all_get_params()) . '">' . zen_image_button(BUTTON_IMAGE_REVIEWS, BUTTON_REVIEWS_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<p class="reviewCount"><?php echo ($flag_show_product_info_reviews_count == 1 ? TEXT_CURRENT_REVIEWS . ' ' . $reviews->fields['count'] : ''); ?></p>
<?php } else { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, zen_get_all_get_params(array())) . '">' . zen_image_button(BUTTON_IMAGE_WRITE_REVIEW, BUTTON_WRITE_REVIEW_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<?php
  }
}
?>
<!--eof Reviews button and count -->




<!--bof Product date added/available-->
<?php
  if ($products_date_available > date('Y-m-d H:i:s')) {
    if ($flag_show_product_info_date_available == 1) {
?>
  <p id="productDateAvailable" class="productGeneral centeredContent"><?php echo sprintf(TEXT_DATE_AVAILABLE, zen_date_long($products_date_available)); ?></p>
<?php
    }
  } else {
    if ($flag_show_product_info_date_added == 1) {
?>
      <p id="productDateAdded" class="productGeneral centeredContent"><?php echo sprintf(TEXT_DATE_ADDED, zen_date_long($products_date_added)); ?></p>
<?php
    } // $flag_show_product_info_date_added
  }
?>
<!--eof Product date added/available -->


<!--bof Product URL -->
<?php
  if (zen_not_null($products_url)) {
    if ($flag_show_product_info_url == 1) {
?>
    <p id="productInfoLink" class="productGeneral centeredContent"><?php echo sprintf(TEXT_MORE_INFORMATION, zen_href_link(FILENAME_REDIRECT, 'action=product&products_id=' . zen_output_string_protected($_GET['products_id']), 'NONSSL', true, false)); ?></p>
<?php
    } // $flag_show_product_info_url
  }
?>
<!--eof Product URL -->


<!--bof also purchased products module-->
<?php require($template->get_template_dir('tpl_modules_also_purchased_products.php', DIR_WS_TEMPLATE, $current_page_base,'templates'). '/' . 'tpl_modules_also_purchased_products.php');?>
<!--eof also purchased products module-->


<!--eof Form close-->
</form>
<!--bof Form close-->
</div>

This is the complete file.

It is setup so that there are now some extra wrappers. #proTopWrapper with a #proDescWrapper inside it, and #proBottomWrapper

#proTopWrapper and #proBottomWrapper are there to establish basically a box with four equal squares. Upper left and upper right are in the #proTopWrapper. Lower left and lower right are in the #proBottomWrapper.

In the upper left, we have the product image and the additional images. In the upper right is the Product Description.

In the lower left is the cart-box which holds the attribute selections, price display, and add-to-cart button. In the lower right is the info-right which contains the review button, etc.

By manipulating the css with floats and widths, you can better control the display with this setup.

Again, a work in progress that can be seen at haredo.com.

Note that all the CSS changes are in the stylesheet_zcustom.css and labeled