Options Images

[artfulweb]

Hi Rainer,
Just installed your latest version 3.0r1 on a vanilla install of 1.1.0.0 and shop side the images do not show, though they are showing in the Attributes Values admin side as well as in Attribute Manager. No errors in the error logs. Any idea why? Thanks in advance.

[raiwa]

Do you have the alternative options attributes image module installed on product info? Content or Layout Module.
If yes, please provide a screenshot of the module with an example containing images.

[artfulweb]

Do you have the alternative options attributes image module installed on product info? Content or Layout Module.
If yes, please provide a screenshot of the module with an example containing images.

Hello Rainer,
I have it in the Layout module and have the screenshots of the addon in Layout, the options in Attribute Manager showing the images, the Attribue Values showing the images, and then shopside where no images show.

[raiwa]

Couold you check in devloper tools in your browser the html source for the module. Or see the source code (Ctrl + U) in your browser and post the part of the module.
If your test/develop store is public available, you can PM the URL and I'll have a look.

[artfulweb]

Couold you check in devloper tools in your browser the html source for the module. Or see the source code (Ctrl + U) in your browser and post the part of the module.
If your test/develop store is public available, you can PM the URL and I'll have a look.

Hi,
This is what is in the source code

<label for="input_3" class="col-form-label col-sm-3 text-left text-sm-right">Box Color</label>
<div class="col-sm-9">
<div class="dropdown">
<button class="btn btn-light dropdown-toggle w-100 text-start" type="button" id="dropdownMenuButtonid[3]" data-bs-toggle="dropdown" aria-expanded="false">
--- Please Select ---
</button>
<ul class="dropdown-menu w-100" aria-labelledby="dropdownMenuButtonid[3]">
<li>
<a class="dropdown-item d-flex align-items-center" href="#" data-value="4">
Green
</a>
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="#" data-value="5">
Red
</a>
</li>
</ul><input name="id[3]" type="hidden" value="selectedOption" id="selectedOptionId" class="form-control" />
</div>

</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.dropdown-item').forEach(item => {
item.addEventListener('click', function(event) {
event.preventDefault();
const dropdown = this.closest('.dropdown');
dropdown.querySelector('#selectedOptionId').value = this.getAttribute('data-value');
const selectedContent = this.getAttribute('data-content') || this.innerHTML.trim();
dropdown.querySelector('.dropdown-toggle').innerHTML = selectedContent;
});
});
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
const selectedOption = ;
if (selectedOption) {
const selectedItem = document.querySelector('.dropdown-item[data-value="' + selectedOption + '"]');
if (selectedItem) {
const dropdown = selectedItem.closest('.dropdown');
dropdown.querySelector('#selectedOptionId').value = selectedOption;
const selectedContent = selectedItem.getAttribute('data-content') || selectedItem.innerHTML.trim();
dropdown.querySelector('.dropdown-toggle').innerHTML = selectedContent;
}
}
});
</script>
</div>

[raiwa]

I dropped the addon in a new vanilla Phoenix 1.1.0.0 installation. Installed the layout module, added 2 images to Shiny red Apples option and it shows correct.
Here the relevant source code:

Code: Select all

<div class="dropdown">
<button class="btn btn-light dropdown-toggle w-100 text-start" type="button" id="dropdownMenuButtonid[1]" data-bs-toggle="dropdown" aria-expanded="false">
--- Please Select ---
</button>
<ul class="dropdown-menu w-100" aria-labelledby="dropdownMenuButtonid[1]">
<li>
<a class="dropdown-item d-flex align-items-center" href="#" data-value="1" data-content='<img title="12" width="30" height="30" src="images/options/black.jpg" border="0" class="img-fluid me-2" /> 12'>
<img title="12" width="30" height="30" src="images/options/black.jpg" border="0" class="img-fluid" />&nbsp;
12
</a>
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="#" data-value="2" data-content='<img title="24 (+$5.00) " width="30" height="30" src="images/options/blue.jpg" border="0" class="img-fluid me-2" /> 24 (+$5.00) '>
<img title="24 (+$5.00)" width="30" height="30" src="images/options/blue.jpg" border="0" class="img-fluid" />&nbsp;
24 (+$5.00) 
</a>
</li>
</ul><input name="id[1]" type="hidden" value="selectedOption" id="selectedOptionId" class="form-control" />
</div>

</div>
</div>

I can only recommend to start over and check if any other addon or modification can interfere.
Maybe try in an unmodified vanilla installation.

[artfulweb]

Think I found the problem :

const PI_OI_ADMIN_OPTIMAGES_HOOK_WARNING = '<strong>"swOptImages" Admin SiteWide Hook</strong> is not present.<br>It is required, please copy the hook into includes/hooks/admin/siteWide.';

... is missing in the v 3.0.r1 upload package. There is only the includes/hooks/admin/siteWide/product_attributes/OptImages hook

[raiwa]

You are using a wrong version. The hook has been renamed and moved to products_attributes in version 2.2.
Please start over and update you layout module to the correct version.

[artfulweb]

<?php
/*
* $Id: pi_options_images.php
* $Loc: /includes/languages/english/modules/pi/product_info/
*
* Name: OptionsImages
* Version: 3.0
* Release Date: 2025-03-22
* Author: Rainer Schmied
* phoenixcartaddonsaddons.com / raiwa@phoenixcartaddons.com
*
* License: Released under the GNU General Public License
*
* Comments: Author: [Rainer Schmied @raiwa]
* Author URI: [www.phoenixcartaddons.com]
*
* CE Phoenix, E-Commerce made Easy
* https://phoenixcart.org
*
* Copyright (c) 2021 Phoenix Cart
*
*
*/

const PI_OI_TITLE = 'Options & Attributes Images';
const PI_OI_DESCRIPTION = 'Shows the Product Options with Images on the product_info Page.<div class="alert alert-info">This is a child module for use with the &Pi; system.</div>';

const PI_OI_HEADING_TITLE = 'Available Options';

const PI_OI_ENFORCE_SELECTION = '--- Please Select ---';

const PI_OI_SHOP_BS_SELECT_HOOK_WARNING = '<strong>"bsSelect" Shop SiteWide Hook</strong> is not present and/or the override template is not selected.<br>It is required, please copy the hook into your selected template or select the override template in your store configuration.';
const PI_OI_ADMIN_OPTIMAGES_HOOK_WARNING = '<strong>"swOptImages" Admin SiteWide Hook</strong> is not present.<br>It is required, please copy the hook into includes/hooks/admin/siteWide.';

[raiwa]

This is outdated. bs_select has also been removed in version 3.0.

I downloaded the 3.0r1 package from here. Unzipped and this is what I have in the layout module:

Code: Select all

<?php
/*
* $Id: pi_options_images.php
* $Loc: /includes/modules/pi/product_info/
*
* Name: OptionsImages
* Version: 3.0
* Release Date: 2025-03-22
* Author: Rainer Schmied
* 	 phoenixcartaddonsaddons.com / raiwa@phoenixcartaddons.com
*
* License: Released under the GNU General Public License
*
* Comments: Author: [Rainer Schmied @raiwa]
* Author URI: [www.phoenixcartaddons.com]
* 
* CE Phoenix, E-Commerce made Easy
* https://phoenixcart.org
* 
* Copyright (c) 2021 Phoenix Cart
* 
* 
*/

  class pi_options_images extends abstract_module {

    const CONFIG_KEY_BASE = 'PI_OI_';

    public $group = 'pi_modules_c';
    public $content_width;

    function __construct() {
      parent::__construct();

      $this->group = basename(dirname(__FILE__));

      $this->description .= '<div class="alert alert-warning">' . MODULE_CONTENT_BOOTSTRAP_ROW_DESCRIPTION . '</div>';
      $this->description .= '<div class="alert alert-info">' . cm_pi_modular::display_layout() . '</div>';
      if (!file_exists(DIR_FS_CATALOG . 'includes/hooks/admin/products_attributes/OptImages.php')) {
        $this->enabled = false;
        $this->description = '<div class="alert alert-danger" role="alert">' .
                                 PI_OI_ADMIN_OPTIMAGES_HOOK_WARNING .
                             '</div>' .
                             $this->description;
      }

      if ( $this->enabled ) {
        $this->group = 'pi_modules_' . strtolower(PI_OI_GROUP);
        $this->content_width = (int)PI_OI_CONTENT_WIDTH;
      }
    }

same in the content module