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

[Hasher]

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 !

[mcqueeneycoins]

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. Thanks!

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

[dbltoe]

https://www.w3schools.com/howto/tryi...olumns_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.

[mcqueeneycoins]

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.p...x&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!

https://www.w3schools.com/howto/tryi...olumns_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.

[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).

[mcqueeneycoins]

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

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).

[swguy]

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

https://docs.zen-cart.com/user/troub...gged_in_admin/

[mcqueeneycoins]

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!

[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.

[mcqueeneycoins]

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!

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.