Page 1 of 2 12 LastLast
Results 1 to 10 of 12
  1. #1
    Join Date
    Mar 2008
    Location
    Daytona Beach, FL.
    Posts
    22
    Plugin Contributions
    0

    Default Attribute Images Swatches Layout Preference

    I am using Zen Cart V1.3.9d
    I have Tiered pricing addon by XModules


    I am having trouble getting the Attribute Image Swatches to align the way I want them to... I have followed the instructions on page 186 & 187 in the "Start your web store" big black book...

    I can change the way each attribute displays its "name" and the Check Box that goes with it and their relationship to the "Image Swatch"

    I can not change the way the attribute swatches appear... I want them to run left to right in a couple of rows... No matter what parameters I put in they will only show in a single column... and Not a row.

    Any help will be greatly appreciated...

    Later/Steve
    Later/Steve Jasse

  2. #2
    Join Date
    Apr 2009
    Posts
    2,134
    Plugin Contributions
    3

    Default Re: Attribute Images Swatches Layout Preference

    this is most likely a simple issue in the stylesheet.css file. Most likely just adding a float:left to the images.

    But if you give a URL then we can give more accurate information.

  3. #3
    Join Date
    Jul 2010
    Location
    My heart will always be in the NorEast
    Posts
    106
    Plugin Contributions
    0

    Default Re: Attribute Images Swatches Layout Preference

    admin>catalog>option name manager> click edit on the attribute name and find "Attribute Images per Row:"

    Keep in mind if you only have so much space horizontally. if you have pics that are 500px wide and your page is only 800px wide then it will either push out your page or go directly to the next row.

    Or maybe im not understanding the issue

  4. #4
    Join Date
    Mar 2008
    Location
    Daytona Beach, FL.
    Posts
    22
    Plugin Contributions
    0

    Default Re: Attribute Images Swatches Layout Preference

    Here is the Url for the page;

    http://www.koisale.com/KoiStore/inde...roducts_id=290

    As you can see the attribute Images and the text input fields display in a long column I want them to display in rows from left to right...

    As I said in the original post the parameters for this do not appear to work... as descibed in the Zen Cart book or on the website...

    Later/WetSteve
    Later/Steve Jasse

  5. #5
    Join Date
    Apr 2009
    Posts
    2,134
    Plugin Contributions
    3

    Default Re: Attribute Images Swatches Layout Preference

    This issue is because each of your attributes only has one value so only has one image.

    What you are actually trying to do is make the layout so the attribute 'blocks' , which contain all the information about that attribute, form a row (a bit like column grid layout)

    You are going to have to edit tpl_modules_attributes.php in your template to do this. Basically you need to add a div around the attribute 'block' so that you can stack them up in a row.

    If you want to be talked through this then post again.

  6. #6
    Join Date
    Mar 2008
    Location
    Daytona Beach, FL.
    Posts
    22
    Plugin Contributions
    0

    Default Re: Attribute Images Swatches Layout Preference

    Yes I would really appreciate any help I have opened the file;
    tpl_modules_attributes.php

    But alas I am not a very proficient coder... I can read the code but I am not sure what it is you are instructing me to do....

    Here is the actual code from this file, if you could point out what changes I need to make... that would be great!

    <?php
    /**
    * Module Template
    *
    * Template used to render attribute display/input fields
    *
    * @package templateSystem
    * @copyright Copyright 2003-2005 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: tpl_modules_attributes.php 3208 2006-03-19 16:48:57Z birdbrain $
    */
    ?>
    <div id="productAttributes">
    <?php if ($zv_display_select_option > 0) { ?>
    <h3 id="attribsOptionsText"><?php echo TEXT_PRODUCT_OPTIONS; ?></h3>
    <?php } // show please select unless all are readonly ?>

    <?php
    for($i=0;$i<sizeof($options_name);$i++) {
    ?>
    <?php
    if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
    ?>
    <h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3>
    <?php
    }
    ?>

    <div class="wrapperAttribsOptions">
    <h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
    <div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
    <br class="clearBoth" />
    </div>


    <?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?>
    <div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>
    <?php } ?>


    <?php
    if ($options_attributes_image[$i] != '') {
    ?>
    <?php echo $options_attributes_image[$i]; ?>
    <?php
    }
    ?>
    <br class="clearBoth" />
    <?php
    }
    ?>


    <?php
    if ($show_onetime_charges_description == 'true') {
    ?>
    <div class="wrapperAttribsOneTime"><?php echo TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION; ?></div>
    <?php } ?>


    <?php
    if ($show_attributes_qty_prices_description == 'true') {
    ?>
    <div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) . '&nbsp;' . '<a href="javascriptopupWindowPrice(\'' . zen_href_link(FILENAME_POPUP_ATTRIBUTES_QTY_PRICES, 'products_id=' . $_GET['products_id'] . '&products_tax_class_id=' . $products_tax_class_id) . '\')">' . TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK . '</a>'; ?></div>
    <?php } ?>
    </div>
    Later/Steve Jasse

  7. #7
    Join Date
    Apr 2009
    Posts
    2,134
    Plugin Contributions
    3

    Default Re: Attribute Images Swatches Layout Preference

    OK.

    Basically, what this step involves is putting a div (which is just an invisible box) around all the items in the attribute 'block'.

    Then, once you have done this, we are going to style that div so that the attributes stack up in a row across the page.

    Attached is a version of the tpl_modules_attributes.php file. It has two changes. One is the start of the div and one is the end of the div. You will see that they are commented. Either transfer these changes to your version or just use this version if they are identical.

    Once that is done then we will do the styling to get them to line up the way you want.
    Attached Files Attached Files

  8. #8
    Join Date
    Mar 2008
    Location
    Daytona Beach, FL.
    Posts
    22
    Plugin Contributions
    0

    Default Re: Attribute Images Swatches Layout Preference

    Hey Nick;

    Thank you for your help... It is very greatly appreciated!

    I have uploaded the modified tpl_modules_attributes.php

    I am now anxiously awaiting the Next step...

    later/Steve
    Later/Steve Jasse

  9. #9
    Join Date
    Apr 2009
    Posts
    2,134
    Plugin Contributions
    3

    Default Re: Attribute Images Swatches Layout Preference

    Well done.

    Now add this lot the the bottom of your stylesheet :

    Code:
    #attribBlock{
    position:relative;
    border:1px solid #ddd;
    width:100px;
    height:260px;
    text-align:center;
    float:left
    }
    
    #attribBlock .back{
    float:none
    }
    
    #productTellFriendLink,#productReviewLink{
    clear:left;
    }
    That will get you far enough that you will be able to see if this technique is going to work for you. It's going to need more styling but you'll be able to see where it is going. Personally I'd not have the 'tell us how many' but that might just be me.

  10. #10
    Join Date
    Mar 2008
    Location
    Daytona Beach, FL.
    Posts
    22
    Plugin Contributions
    0

    Default Re: Attribute Images Swatches Layout Preference

    Thanks Nick;

    I still have a question... All of the Swatches are now lined up from left to right... how do I set the number of swatches... for instance, What if I only want to display 2 across... 2 columns and 5 rows?

    Or 3 across and 4 rows? ETC...

    As you can see I am really new to this Modifying code stuff!!!

    Here is how the page looks now:
    http://www.koisale.com/KoiStore/inde...roducts_id=290


    later/Steve
    Later/Steve Jasse

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. Color attribute - setting up swatches
    By vito in forum Setting Up Categories, Products, Attributes
    Replies: 2
    Last Post: 29 Jul 2010, 07:52 PM
  2. Attribute images (swatches) and how they display
    By Robert T in forum Templates, Stylesheets, Page Layout
    Replies: 12
    Last Post: 24 Oct 2009, 02:53 PM
  3. Mod for attribute swatches?
    By Tanzanite in forum All Other Contributions/Addons
    Replies: 1
    Last Post: 31 Jan 2007, 02:24 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