Results 1 to 4 of 4
  1. #1
    Join Date
    Jan 2008
    Posts
    76
    Plugin Contributions
    0

    Default Moved "Add to cart" below (additional images) and now it's misaligned

    URL: s t o r e . f r e n c h t e a c h e r s . o r g
    Zen Cart 1.5.5e (installed via FTP upload and run zc_install / customized template based on default temp)
    HTTP Server: Apache
    PHP Version: 5.6.31 (Zend: 2.6.0)
    Database: MySQL 5.7.19



    I moved the "add to cart" button to the bottom of the page directly below the "additional product images" code. However, now the "add to cart" renders on top of (and slightly below) the "Customers who bought this product also purchased..." divider.

    I've tried moving "add to cart" blurb further down the page but that doesn't help. I can't see that I cut anything off but ... ??? Any thoughts on how can I correct this? (It was actually misaligned BEFORE I moved it, btw).

    Thanks.

    Here's the the code from my "includes/templates/aatf_template/templates/tpl_product_info_display.php" file:

    Code:
    /**
     * Page Template
     *
     * Loaded automatically by index.php?main_page=product_info.<br />
     * Displays details of a typical product
     *
     * @package templateSystem
     * @copyright Copyright 2003-2014 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:  $
     */
     //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-->
    
    <!--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 Product Name-->
    <h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
    <!--eof Product Name-->
    
    <!--bof Product Price block -->
    <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 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  -->
    
     <!--bof Product description -->
    <?php if ($products_description != '') { ?>
    <div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div>
    <?php } ?>
    <!--eof Product description -->
    <br class="clearBoth" />
    
    
    
    <!--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" class="floatingBox back">
      <?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>
    <br class="clearBoth" />
    <?php
      }
    ?>
    <!--eof Product details list -->
    
    <!--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 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 -->
      
      
      
    
     <!--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 = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . 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-->
     
      
      
      
      
      
      
      
    
    <!--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-->
    
    <!--bof Form close-->
    </form>
    <!--bof Form close-->
    </div>

  2. #2
    Join Date
    Nov 2005
    Location
    los angeles
    Posts
    957
    Plugin Contributions
    1

    Default Re: Moved "Add to cart" below (additional images) and now it's misaligned

    in includes/templates/aatf_template/css/stylesheet.css line 362 for #cartAdd, you can remove float: right and maybe add width: 50% (or something like that), and i think the styling will be much closer to what you want.

    best.
    feel free to donate money to carl or to the Zen-Cart Team

  3. #3
    Join Date
    Jan 2008
    Posts
    76
    Plugin Contributions
    0

    Default Re: Moved "Add to cart" below (additional images) and now it's misaligned

    Hi Carl --

    The float right is definitely the problem and removing it helped. Now, is there any way to move the "add to cart" box to the right? Can I use the float: right; with some sort of hard return after to avoid the initial problem?

    Thx!

  4. #4
    Join Date
    Nov 2005
    Location
    los angeles
    Posts
    957
    Plugin Contributions
    1

    Default Re: Moved "Add to cart" below (additional images) and now it's misaligned

    hi linda,
    i am unfortunately not the design guy, nor am i the css king. in addition, you really need to test your changes against all of the devices/viewports that you think your customers may be using, ie phone, tablets, desktop, etc.

    you can take a look online at various css courses and get an idea as to how things work and go, as i can spend hours just trying to get something aligned up. try googling "css is awesome", and you can see how people feel about css.

    if i was you, i would make myself more aware of the developer tools contained in various browsers. these tools are invaluable for troubleshooting web design, coding problems. i'm partial to google chrome and its implementation.

    for your problem at hand, i would look at the same spot in the css and remove the margin element. and then add

    margin-left: 55%;

    in looking a little bit more, your template is NOT a responsive template so anyone on a phone or a tablet would not be too happy with how it looks. which i think is probably the most important thing to look at right now.....

    good luck!
    feel free to donate money to carl or to the Zen-Cart Team

 

 

Similar Threads

  1. Additional images overwrites "Add to Cart" (?)
    By donzi in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 28 Dec 2011, 11:11 PM
  2. Replies: 1
    Last Post: 10 Feb 2011, 06:36 AM
  3. How to add additional link beside the "home" and "Login" page above logo?
    By corditreasures in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 8 Apr 2010, 03:54 PM
  4. Moved "Add to cart below attributes" but broke the layout
    By ufi911 in forum Templates, Stylesheets, Page Layout
    Replies: 5
    Last Post: 31 Jan 2010, 06:55 PM
  5. How can I rename the "add to cart" to "checkout now"?
    By InterSign in forum General Questions
    Replies: 5
    Last Post: 6 May 2008, 08:45 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR