Jump to content

Image checkbox in Products admin


Claudia

Recommended Posts

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

 

 

 

Link to comment
Share on other sites

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.)

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.)

 

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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']

 

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

/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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...