new AJAX_FILE custom field

  • Posts: 118
  • Thank you received: 3
11 years 7 months ago #139885

-- HikaShop version -- : 2.2.3
-- www.quickcheapprint.co.nz

Hello and happy new year to the Hikashop team!

We just upgraded to the 2.2.3 version. The main reason was to see if a progress bar had been added to the file upload custom field. I had a play on your demo site to get the Ajax_File custom field set up and it looked good. Although, when I change our custom field from "File" to "Field_Ajax_File", the upload field disappears from the product list. Could you give me a clue as to what could be going wrong? We do have some custom CSS on that object but I took that out when I tried the Ajax file type. Let me know what other info you need .

Thanks
Alan

Please Log in or Create an account to join the conversation.

  • Posts: 26266
  • Thank you received: 4044
  • MODERATOR
11 years 7 months ago #139963

Hi,

You are using a custom CSS file, it means that you do not have the CSS for the upload box.
In the HikaShop CSS file, the upload part is:

div.hikashop_main_image_div,
div.hikashop_main_file_div {
	position:relative;
}
div.hikashop_uploader_image_add,
div.hikashop_uploader_file_add {
	position:absolute;
	top:5px;
	right:5px;
}
div.hikashop_uploader_image_add span,
div.hikashop_uploader_file_add span {
	display:inline-block;
	width:32px;
	height:32px;
}
div.hikashop_uploader_image_add span.hika_add_btn {
	background-image:url(../images/gallery.png);
}
div.hikashop_uploader_image_add span.hika_upload_btn,
div.hikashop_uploader_file_add span.hika_upload_btn {
	background-image:url(../images/upload2.png);
}

ul.hikashop_uploader_images .ui-sortable-placeholder {
	border:1px dotted black;
	visibility:visible !important;
	width:50px;
	height:50px !important;
}

ul.hikashop_uploader_images .ui-sortable-placeholder * {
	visibility:hidden;
}
ul.hikashop_uploader_images {
	list-style-type:none;
	margin:0 !important;
	padding:15px 0 0 0 !important;
}
div.hikashop_uploader_singleimage_content,
div.hikashop_uploader_singlefile_content {
	padding:15px 0 5px 8px !important;
	width:100px;
}

ul.hikashop_uploader_multiimage_content > li,
div.hikashop_uploader_singleimage_content > div,
div.hikashop_uploader_singlefile_content > div {
	position:relative;
}

ul.hikashop_uploader_multiimage_content .deleteImg,
div.hikashop_uploader_singleimage_content .deleteImg,
div.hikashop_uploader_singlefile_content .deleteImg {
	position:absolute;
	right:0px;
	top:0px;
	display:none;
}

ul.hikashop_uploader_multiimage_content:hover .deleteImg,
div.hikashop_uploader_singleimage_content:hover .deleteImg,
div.hikashop_uploader_singlefile_content:hover .deleteImg {
	display:block;
	opacity:0.5;
	filter:alpha(opacity=50);
}

ul.hikashop_uploader_multiimage_content .deleteImg:hover,
div.hikashop_uploader_singleimage_content .deleteImg:hover,
div.hikashop_uploader_singlefile_content .deleteImg:hover {
	opacity:1;
	filter:alpha(opacity=100);
}

.hkIcon {
	width:16px;
	height:16px;
	display:inline-block;
	line-height:16px;
}
.hkIcon-delete {
	background-image:url(../images/cancel.png);
}

.dropOver {
	background-color:#909090;
}

.hikashop_dropzone {
	border: 2px dashed #CCCCCC;
	width:100%;
	-webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px;
	min-height:100px;
}

.hikashop_uploader_image_empty,
.hikashop_uploader_file_empty {
	width:100%;
	padding:30px 0px;
	text-align:center;
}
Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 118
  • Thank you received: 3
11 years 7 months ago #140006

Wow, that would explain it! :)

Great job on this upload component BTW, it is exactly what we were hoping for plus more.

A couple of things we would like to alter regarding the styling:
1) the label is clickable (if we click on the text next to the dropzone, it opens up the file window), can we alter this?
2) the upload image is showing outside the dropzone, we would like to move this inside the dropzone
3) I copied and pasted your CSS into our custom CSS file, I'm assuming that was where I needed to put it?
I'm sure there will be a couple more styling tweaks to come but the above will allow us to put it on our live site.

Thanks
Alan

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 26266
  • Thank you received: 4044
  • MODERATOR
11 years 7 months ago #140038

Hi,

For the label, it's because the element is linked with the input. If you click on a label, it will give the focus to the input box, to the dropdown and in our case, to the file input (which is hidden but the effect will be the same).
So if you want to remove it, you will have to change how the labels are generated in HikaShop for the custom field and it will affect all custom fields in the all website.

For the upload image, it is possible that a CSS rule is missing.
The "position: relative" for the main div (hikashop_main_file_div) allow to the upload image to not be positioned using this element as reference and not using the full page.
Are you sure this rule is right applied ?

I gave you the part of the CSS which has been added for the upload part. You can find the same CSS for the backend style file.
If you inspect the uploader in the backend and in the front-end, you could find a difference, the missing rule.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 118
  • Thank you received: 3
11 years 7 months ago #140041

Thanks Jerome, I think we'll just leave the label part :)

I have checked the CSS and can't see why that is putting itself up in the corner. I played around with a few different CSS on the "span.hika_upload_btn" rule and they do move it around, although obviously it needs to change according to where the dropzone is located.

I checked against the backend CSS and it is exactly the same. I also noticed on our product listing pages which show a custom upload field for each product, the upload button only shows once up in the top left of the page again....

What are your thoughts, I know its early days with this Ajax component and I am not sure what is possible and what its limitations are at the mo.

Thanks
Alan

Please Log in or Create an account to join the conversation.

  • Posts: 118
  • Thank you received: 3
11 years 7 months ago #140045

ok, I went back to the default CSS and copied the new upload CSS section from the end of it, I then went into our custom CSS file and pasted it to the end. Now it is all good :)

Thanks
Alan

The following user(s) said Thank You: Jerome

Please Log in or Create an account to join the conversation.

Time to create page: 0.076 seconds
Powered by Kunena Forum