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

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

:blush: 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.php?226509-Adjusting-the-look-for-Shopping-Cart-and-steps-1-thru-3-of-the-Standard-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.

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

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

carlwhat:

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

oh but you ARE in that list too. ;)

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.php?main_page=index&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!

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

Hi Guys , I have asked this question before but it was a bit confusing , so I added another picture .Is it possible to change how categories are displayed . Currently they are vertical but i want them left to right. Even better would to have boxes behind them. Made a rough picture for clarification . Any help appreciated :)

How I would like it to look !

Thanks for the reply! I'll play around with this some, but if I'm not mistaken this is for the product info page, rather than the product listing page? I may just need to do something similar and add some extra <div> tags to get the effect I want, but to be honest I'm not the most savvy when it comes to this. Not sure if doing floats or setting widths, etc. would accomplish the same effect without having to modify core files. If I can figure it out I'll post back, or in the meantime if you make some more progress and want to share please do so. :smile: Thanks!

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

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_three_columns_unequal shows how to start what you are wanting to do. There are some additions to the process that are not listed as this example is how to control the CSS.

First, you will want to establish some parameters in the actual file. You can start by adding this code above the cat81_1_3List div

<div id="svdbWrapper">
    <div class="svdbImage">
        Place code for the image here.
    </div>
    <div id="svdbProdInfoWrapper">
        <div class="svdbTitle">
            Place the code for the Product's Title here.
        </div>
        <div class="svdbDesc">
            Place the code for the Product's Description here.
        </div>
    </div>
    <div id="svdbPriceAddWrapper">
        <div class="svdbPrice">
            Place the code for the Product's Price here.
        </div>
        <div class="svdbCartButton">
            Place the code for the Product's ATC button here.
        </div>
    </div>
</div>

This will get the framework up for what you want to do without changing what you have.

Next, you can copy the corresponding code from your original and replace the red items above with your site's code. Copy the old rather than delete it in order to have a fall back.

When through, you should have two examples of the listing: the original and your new trial.

The svdbWrapper would be width:100%
The svdbimage, svdbProdInfoWrapper, and the svdbCartButton would be something like width:20%, width:50%, and width:30% respectively. This establishes your three-column layout and can easily be adjusted with the CSS later.

That should get you a little closer to what you are after.

Thank you! I think this has gotten me much closer to the design I want. Now that I have the formatting, I'm having trouble getting the layout to remain responsive as the window shrinks. Can you identify what I'm doing wrong?

https://thecoinauthority.com/index.php?main_page=index&cPath=81_1_3

As the window shrinks I want it to go vertical, with the image on top, title and description in the next row, and the price/add to cart button in the third row, rather than retain the horizontal layout.

The other issue (and not sure if this is new or not), but when I click Add to Cart, it doesn't add anything. Thoughts on where to start troubleshooting that issue?

Thanks again!

dbltoe:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_three_columns_unequal shows how to start what you are wanting to do. There are some additions to the process that are not listed as this example is how to control the CSS.

First, you will want to establish some parameters in the actual file. You can start by adding this code above the cat81_1_3List div

<div id="svdbWrapper"> <div class="svdbImage"> Place code for the image here. </div> <div id="svdbProdInfoWrapper"> <div class="svdbTitle"> Place the code for the Product's Title here. </div> <div class="svdbDesc"> Place the code for the Product's Description here. </div> </div> <div id="svdbPriceAddWrapper"> <div class="svdbPrice"> Place the code for the Product's Price here. </div> <div class="svdbCartButton"> Place the code for the Product's ATC button here. </div> </div> </div> ``` > This will get the framework up for what you want to do without changing what you have. > > Next, you can copy the corresponding code from your original and replace the red items above with your site's code. Copy the old rather than delete it in order to have a fall back. > > When through, you should have two examples of the listing: the original and your new trial. > > The svdbWrapper would be width:100% > The svdbimage, svdbProdInfoWrapper, and the svdbCartButton would be something like width:20%, width:50%, and width:30% respectively. This establishes your three-column layout and can easily be adjusted with the CSS later. > > That should get you a little closer to what you are after.

Re: ATC. - When I go to add to cart on the product info page it redirects to timeout. Check your configure.php values. Both HTTP and HTTPS server should be "https" with same domain (both no www).

Disregard--your suggestion fixed the problem with ATC. Thank you!

swguy:

Re: ATC. - When I go to add to cart on the product info page it redirects to timeout. Check your configure.php values. Both HTTP and HTTPS server should be "https" with same domain (both no www).

OK go to Admin > Configuration > Sessions and check the values. See also

https://docs.zen-cart.com/user/troubleshooting/cant_stay_logged_in_admin/

I was being stupid and forgot to change the write permissions of the config files when editing it. Didn't realize it wasn't saving my changes. So far so good with the ATC. Still playing around with formatting to resolve my responsive layout issues :-)
Thanks again!

Can't be more specific with the site down for maintenance.

There are a couple of ways to handle movement of wrappers for responsive.

What I recommend is getting it to look correctly at something around 1600px or better.

Then, look at your site for an iphone 6, 6+, and ipad in portrait. There you will see any changes you need to make in responsive_mobile.css for the portrait.

Yesterday was review page day at silversageherbsDOTcom. The reviews page is setup almost exactly like what I got from your description. The only thing we changed on the page was a float:right; for the buttons. You can inspect and turn them off and on to see the diff.

When we looked at the page in mobile portrait, the only thing we felt needed to be changed was to justify the text.

You can take a look at that page for another possible way to your solution.

Sorry about that--I've removed the maintenance mode. I think I've managed to figure out my responsive issues, at least with the formatting for the listing page. I'm pretty sure I need to add at least one more <div> element, as I currently have a % set for each div and depending on the screen size it either fills the right amount of space or not enough. I'm guessing I need one more div element to help ensure the widths of each subsequent div fill the entire space. If I can't figure that piece out, the way it's set up is at least close enough to where I wanted it.

However, the newest issue I've noticed is that as I shrink the screen size, the left menus (leftboxcontainers) become so narrow that the text overflows and doesn't look right. If I adjust the width in Layout Settings, the box looks better, but then in full-screen mode it is approximately 1.5x as wide as I want it. The issue seems to be with the responsive.css and % for each col group. Is there an easy way to set a min-width for the left boxes so that regardless of screen size they won't shrink beyond a set pixel amount (say 200px)? At a certain size I convert it to the hamburger menu, but there's that in-between size I still want the menu to appear.

Thank you!

dbltoe:

Can't be more specific with the site down for maintenance.

There are a couple of ways to handle movement of wrappers for responsive.

What I recommend is getting it to look correctly at something around 1600px or better.

Then, look at your site for an iphone 6, 6+, and ipad in portrait. There you will see any changes you need to make in responsive_mobile.css for the portrait.

Yesterday was review page day at silversageherbsDOTcom. The reviews page is setup almost exactly like what I got from your description. The only thing we changed on the page was a float:right; for the buttons. You can inspect and turn them off and on to see the diff.

When we looked at the page in mobile portrait, the only thing we felt needed to be changed was to justify the text.

You can take a look at that page for another possible way to your solution.

I may have solved my own problem and hopefully didn't screw anything else up in the process. What I did was build in a specific width for .col150 (the column that houses the left boxes) and then used the calc function for the centercolumn to be 100% less the desired pixel width of the leftboxcontainer. I'm still playing with the responsive stylesheet to determine the right point to convert to the hamburger menu, but for now it appears that it achieves the look I wanted. Can anyone see a downside to doing it this way that I should be aware of before I continue building the site? All advice/suggestions appreciated, as always.

mcqueeneycoins:

However, the newest issue I've noticed is that as I shrink the screen size, the left menus (leftboxcontainers) become so narrow that the text overflows and doesn't look right. If I adjust the width in Layout Settings, the box looks better, but then in full-screen mode it is approximately 1.5x as wide as I want it. The issue seems to be with the responsive.css and % for each col group. Is there an easy way to set a min-width for the left boxes so that regardless of screen size they won't shrink beyond a set pixel amount (say 200px)? At a certain size I convert it to the hamburger menu, but there's that in-between size I still want the menu to appear.

Our procedure is generally to get what we want on full screen. All those css changes would go in the stylesheet_zcustom.css There is no need to touch any other stylesheet for this.

Next, respsonsive_mobile.css in the bottom of the portrait portion to fix minor items needed for portrait mobiles. Then the same for the landscape mobile.

Next, is the responsive_tablet.css in portrait in landscape.

Only then do we start looking at the desktop changes that happen at various widths. If any changes are needed at various widths above those covered by mobile or tablet, we make those in responsive_default.css.

It's always good to enter something to make it easy to find your changes when you need them later. Something like ```
/* SVDB */

This may or may not be related to the responsive template, but again hoping someone can help me troubleshoot the latest issue I'm having with the product listing page. When all products are in stock (and not marked call for price) the page looks exactly how I want. When a product is sold out or marked call for price, the background fills the space and I'm having trouble pinpointing what changes I need to make to fix it. What I really would like is to remove the "more info" link altogether and turn the "Sold Out" button into a link that takes you to the product details. Same with Call for price, except have the Call for Price button take you to the Contact us page. TIA!

https://thecoinauthority.com/index.php?main_page=index&cPath=81_1_3&sort=20a

Your background is controlled by the CSS and, it appears that you've dropped the call for the child. Sometimes called odd - even, sometimes parent - child.

Moreover, I'm concerned about your color choices. Check out https://contrast-ratio.com/#black-on-blue to see what your text looks like on the blue. Then click the swap colors button. Note that both options are less than 3 on the contrast scale. Change the black to white and note the difference.

Blue is a well-liked color by both male and female, but they both need to be able to read the text.

This is one of the major hits (along with font size) for mobiles and tablets.

Finally, what is your Product status in Catalog in the admin >> Configuration >> Stock, sixth item down.