Image checkbox in Products admin

[Claudia]

My checkbox for additional categories in admin products has gone missing.  I've checked the layout.css and the images 0.png and everything looks ok. I know my admin - products - categories doesn't look like the demo admin.  Thanks for any and all help

PS: I have a 8 kb screenshot but the upload failed for some reason  Error Code 200

 

 

 

[bsmither]

CubeCart's standard admin skin, for the Categories tab of Add/Edit Product uses the common <input type="checkbox">, as opposed to the hidden input with a javascript powered image of a checkbox used some other places. (Which is somewhat irrelevant if your skin code is customized.)

(A screengrab of the page will not help us determine the problem.)

 

[Claudia]

Here's my code

 {foreach from=$CATEGORIES item=category}
            <tr>
               <td style="text-align:center"><input type="radio" name="primary_cat" class="check-primary" value="{$category.id}" rel="cat_{$category.id}"{$category.primary}></td>
               <td style="text-align:center"><input type="checkbox" id="cat_{$category.id}" name="categories[{$category.id}]" value="{$category.id}" class="check_cat" {$category.selected}></td>
               <td>{$category.name}</td>
            </tr>
            {/foreach}
         </tbody>
         <tfoot>
            <tr>
               <td>&nbsp;</td>
               <td style="text-align:center"><input type="checkbox" class="check-all" rel="check_cat"></td>
               <td><strong>{$LANG.form.check_uncheck}</strong></td>

What do I do to make it show?

[bsmither]

This looks very much like the standard code. So, let's look at the admin skin's javascript file "admin.js".

It might be really hard to find, but near line 950, look for:

    s > r && $("#page_content").css('min-height',s + 100 +'px'), $('input[type="checkbox"]').each(function() {
        $(this).parent().hasClass("custom-checkbox") || $(this).wrap("<div class='custom-checkbox'></div>"), $(this).is(":checked") ? $(this).parent().addClass("selected") : $(this).parent().removeClass("selected")
    }), $("body").on("click", "img.checkbox, .check-primary, .check_cat, .check-all, .custom-checkbox", function() {
        $('input[type="checkbox"]').each(function() {
            $(this).is(":checked") ? $(this).parent().addClass("selected") : $(this).parent().removeClass("selected")
        })
    });

Examine the first line shown above - there are actually two statements, the second statement starts with $('input[type="checkbox"]').each(function() {. There must be a careful examination of that part of the line and all the lines after.

Next, check the file "layout.css". Near line 81 find a rule for .custom-checkbox. The background property references the 0.png image file and a display of 'inline-block'.

If the above checks out, then there might be a newly implemented CSS rule that is overruling anything with a class of custom-checkbox.

 

[Claudia]

javascript as well as custom-checkbox are correct

.custom-checkbox {
    background: url(../images/0.png);
    width: 16px;
    height: 16px;
    display: inline-block
}

What now?

also this:

.custom-checkbox {
    background: url(../images/0.png);
    width: 16px;
    height: 16px;
    display: inline-block
}
fieldset .custom-checkbox {
    line-height: 24px;
    margin-top: 5px
}
.custom-checkbox.selected {
    background: url(../images/1.png)
}

I don't know if this means anything but if I change checkbox to radio I get a radio for each column and it works

[Claudia]

Ok just fooling around with a product listed in Listed on Etsy only and Kitchen gadgets.  The place where the checkbox should be if you hover it shows a pointing finger. I did this on my collectibles category area and think clicked. The item is now also shown in that category. So the only thing missing is the checkbox.

[bsmither]

Now, need to see if any other CSS rules are in play.

If using Firefox, right-click on the spot where the checkbox should be showing. Select 'Inspect' from the context menu. A "Developer Tools" window should display. (If using other than Firefox, getting to the Developer Tools should be similar.)

The line of HTML that represents the <input type="checkbox"> should be highlighted in the pane that shows HTML. Also, in a separate pane of the Developer Tools window should be a list of all the CSS rules that are affecting that element.

The HTML should be:

<td style="text-align:center">
  <div class="custom-checkbox">
    <input type="checkbox" id="cat_7" name="categories[7]" value="7" class="check_cat">
  </div>
</td>

Click on the <div> line of HTML. See what all CSS rules are being applied.

(Note: The <div> code was added via javascript - it is not the source template code.)

 

[Claudia]

I had already checked the css

When I change the code to this the box shows up (add the div code)  Is it ok to keep it like this?

<tr>
               <td style="text-align:center"><input type="radio" name="primary_cat" class="check-primary" value="{$category.id}" rel="cat_{$category.id}"{$category.primary}></td>
                               <td style="text-align:center"><div class="custom-checkbox"><input type="checkbox" id="cat_{$category.id}" name="categories[{$category.id}]" value="{$category.id}" class="custom-checkbox.selected" {$category.selected}></td>
              </div>
              <td>{$category.name}</td>
            </tr>
            {/foreach}
         </tbody>

[bsmither]

If you are having to manually add the <div> tags, then the javascript isn't doing it's job.

Did you see the <div> tags in the HTML pane of the Developer Tools window?

The Developer Tools window will have Console tab. If the javascript is having any problems, the Console tab will list those errors.

[Claudia]

It shows this warning and I just noticed (may have just started) it's not showing my thumbnails

Security Error: Content at https://www.cambargainstore.com/admin_VGwU48.php?_g=products&node=index&sort[updated]=DESC&action=edit&product_id=595 may not load or link to file:///C:/00-CC-Version-6.5.5/My%20Modified%20Files%20from%206.5.3/images/source/iron-sad-flat-no6-black-sc-3/08-antique-cast-iron-no-6-sad-flat-iron-black-schreiber-conchar-left-flat.webp.

I really want my images back to jpeg

And I was wrong - I forgot I had switched to the default admin skin.  That's when I saw the boxes.  When I switch to my custom skin , with or without the div, I don't see the boxes. 

 

[bsmither]

Somehow, the URLs for the image(s) assigned to this product are being created using the full path of your workstation. A web browser will NOT allow page resources be fetched directly from the computer's filesystem. Page resources must be a web address.

(This has nothing to do with whether the image is a jpg or webp. But I hear you.)

The Developer Tools will show why the 0.png image file is not getting shown.

 

[Claudia]

Could that image error be why Google is not indexing the webp images and my numbers have dropped. CC should have made webp an option - not automatically done it

This is what the tool shows.  I blocked on personal stuff. I don't know why it isn't showing my custom admin instead of default.  The image is there.

.custom-checkbox {
  background: url('../../../00-CC-Version-6.5.5/Original/admin_xxxxxx/skins/default/images/0.png');
  width: 16px;
  height: 16px;
  display: inline-block;
}

[bsmither]

CubeCart's web "base" starts at the /admin_xxxxxx/ folder. This folder is the second-top-most folder the web server has access to.

There is the need to find out why CubeCart is wanting to think that /00-CC-Version-6.5.5/Original/ is a part of it's web address.

In the file /includes/global.inc.php, if these variables exist, what values are given for:

$glob['storeURL']
$glob['standard_url']
$glob['rootRel']

 

[bsmither]

The CSS background property shown earlier is:

background: url(../images/0.png);

But in the post just above, it is shown to be:

background: url('../../../00-CC-Version-6.5.5/Original/admin_xxxxxx/skins/default/images/0.png');

I suggest changing that back, as well as 1.png, (and have CubeCart clear its internal cache and force the browser to reload the page resources).

[Claudia]

/00-CC-Version-6.5.5/Original/   that is where I put the original version of 6.5.5 on my computer.  I also have one called "used for edits"

 

I reinstalled the images and the checkbox is back!!!!!  Yeah thanks, Brian

 

Should I start a new topic for this:

Security Error: Content at https://www.cambargainstore.com/admin_VGwU48.php?_g=products&node=index&sort[updated]=DESC&action=edit&product_id=595 may not load or link to file:///C:/00-CC-Version-6.5.5/My%20Modified%20Files%20from%206.5.3/images/source/iron-sad-flat-no6-black-sc-3/08-antique-cast-iron-no-6-sad-flat-iron-black-schreiber-conchar-left-flat.webp.

I looked thru all the GitHubs trying to find where the code is to add the webp.  I want to remove it.  For the life of me I can't find it.  Can you head me in the right direction please?

I really want my images back to jpeg

[bsmither]

In admin.js, near line 568, there is:

        $("div.dropzone").dropzone({url: dropzone_url, resizeWidth: 2000, resizeMimeType: 'image/webp', acceptedFiles: 'image/gif,image/jpeg,image/png,image/webp', renameFile: function (file) {
            return file.name.substr(0, file.name.lastIndexOf(".")) + ".webp";

Change to:

        $("div.dropzone").dropzone({url: dropzone_url, resizeWidth: 2000, resizeMimeType: 'image/jpeg', acceptedFiles: 'image/gif,image/jpeg,image/png,image/webp', renameFile: function (file) {
            return file.name.substr(0, file.name.lastIndexOf(".")) + ".jpg";

This should name all future image uploads (via the DropZone) to have a jpg file extension.

As for the security error, that was discussed earlier.

[Claudia]

Thank you Brian ... All is working and I got my jpg back  Yeah!!!