How to change product attribute image swatches to display side-by-side

[Fjolsvith]

Okay, I have my website up for selling sheds on, and I have an option for shingle color. Each of the option values has an image for the color of each shingle type.

Zencart was showing these image swatches in a vertical line, and I was really unhappy with it, and started researching how to change this. I found this thread here but it didn't seem to help. So, being a hobbyist programmer, I started searching and experimenting with the PHP files and finally found where I could change a line to remove "<br class="clearBoth>" from between the image swatches to display them side-by-side:



Where I finally found this change to make was in the "/includes/modules/attributes.php" file. Line 478 has the text:

$tmp_attributes_image .= '<br class="clearBoth">' . "\n";

Here is the section of code starting about line 470:

// collect attribute image if it exists and to be drawn in table below
                  if ($products_options_names->fields['products_options_images_style'] == '0' or ($products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_FILE or $products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_TEXT or $products_options_names->fields['products_options_type'] == '0') ) {
                    if ($products_options->fields['attributes_image'] != '') {
                      $tmp_attributes_image_row++;

                      //              if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .= '<br class="clearBoth">' . "\n";
                        $tmp_attributes_image_row = 1;
                      }

                      $tmp_attributes_image .= '<div class="attribImg">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . '</div>' . "\n";
                    }
                  }

Change it like this:

// collect attribute image if it exists and to be drawn in table below
                  if ($products_options_names->fields['products_options_images_style'] == '0' or ($products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_FILE or $products_options_names->fields['products_options_type'] == PRODUCTS_OPTIONS_TYPE_TEXT or $products_options_names->fields['products_options_type'] == '0') ) {
                    if ($products_options->fields['attributes_image'] != '') {
                      $tmp_attributes_image_row++;

                      //              if ($tmp_attributes_image_row > PRODUCTS_IMAGES_ATTRIBUTES_PER_ROW) {
                      if ($tmp_attributes_image_row > $products_options_names->fields['products_options_images_per_row']) {
                        $tmp_attributes_image .=  "\n";
                        $tmp_attributes_image_row = 1;
                      }

                      $tmp_attributes_image .= '<div class="attribImg">' . zen_image(DIR_WS_IMAGES . $products_options->fields['attributes_image']) . (PRODUCT_IMAGES_ATTRIBUTES_NAMES == '1' ? '<br />' . $products_options->fields['products_options_values_name'] : '') . '</div>' . "\n";
                    }
                  }

Be sure to remove the "." before the "\n"; . If you forget that, the compiler won't run the page.

[Fjolsvith]

Okay, now I feel a little sheepish. I found a setting under the Option Names Manager to change this.

In the Option Names Manager, click Edit for the option you want to modify. Down below is a setting called "Attribute Images per Row:". Change this to how many you want across and it does the same thing as my code edit.

[kobra]

I found a setting under the Option Names Manager to change this.

Hopefully, you have used the override system and your edited file is in a folder named for your template
https://www.zen-cart.com/content.php...verride-system
https://www.zen-cart.com/content.php...late-overrides

Either way, you need to restore the original code by deleting the override file or replacing the edited core file

[mc12345678]

Hopefully through reading those links will also see that you can/should establish your template in it's own unique folder structure rather than using the classic folder template override path. There are some hobbyist programmer benefits to it besides always having a clean copy of the original file. For example if you wanted to figure out if your change caused something or it is always that way you can swap between your version and the classic to see the difference. :) but as identified, not everything can be overriden, some things are either modified directly or something called an observer can be used to modify specific aspects.

[margecc]

You may feel a little "Sheepish" but you just made my life easier because you posted what you did! I appreciate it!

[dbltoe]

Also, check out adding an image to each Value of the dropdown. When the selection is made in the dropdown, the image will change with the selection.

Select Vanilla Almond, Chocolate Fudge, and Sweet-n-Spicy at https://allpecans.com/index.php?main...roducts_id=133