[Résolu] Updating Cred plugin is breaking my form

[Auteur]

Publications

[sjC-2]

I am trying to: Update CRED plugin (from 1.6 to 1.8.8) & Types plugin (from 2.0.1 to 2.2.9)

I visited this URL: hidden link
U - flywheel
P - 1234567

I expected to see: Before the update all CRED forms were working fine. I could sing in and edit a product.

Instead, I got: After update the CRED "edit post" form no longer submits and multiple image type fields are looking distorted.

I'm stuck on WordPress 4.6.1 because Toolset had issues with 4.7 - as Amir had blogged about.

Please make reply private so I can give credentials access.

[Christian Cox]

Private reply fields enabled.

[sjC-2]

One thing I noticed - on clicking submit on the CRED edit product form - it goes to the current URL but with a parameter "_tt" appended -
example -
hidden link

Before the plugin update the normal behavior was to go back to the post with the changes reflecting there.

[Christian Cox]

Hi, I'll be glad to take a look. Please find my responses below.

Click on EDIT button - try changing some text in the description - and click submit - it will not work.
It appears to work and the page reloads, but the actual product isn't edited. When I return to the product page the edits didn't stick. This isn't normal, I'll need to continue to investigate.

Also area for screenshots is supposed to look like beforeupdate screenshot attached - but is looking like afterupdate screenshot.
After some troubleshooting, it looks like this function is modifying each image container's height based on the image container's width.

function screenshot_resize()
	{
		$('.wpt-repctl').css('height',$('.wpt-repctl').width());
		$('.wpt-repadd').css('height',$('.wpt-repctl').width());
		$('.wpt-repadd').css('width',$('.wpt-repctl').width());
	}

Combined with this CSS, results in very tall, stretched out images:

.wpt-repctl img {
    width: 100%!important;
    height: 100%!important;
}

My guess is that the .wpt-repctl divs were inline-block before, which gave them a smaller width and in turn a smaller height.

on clicking submit on the CRED edit product form - it goes to the current URL but with a parameter "_tt" appended

The _tt part is normal, but the form doesn't respect the redirect settings. Again, not normal. I'll keep digging on this. Please stand by.

[Christian Cox]

Well I think I have it narrowed down to something going on in your Edit Current Product template PHP file. If I switch the edit current product page to use the Default Template, and add the CRED form using this shortcode:

[cred_form form='Edit Current Product' post='1020']

Everything works as expected - submission redirects the user to the post page and edits are applied correctly. I left that change in place on your staging site for now as a reference. I will continue to investigate.

[Christian Cox]

Aha - here's the culprit:

$("input[name='wpcf-product-pricing-model']").attr('disabled', 'disabled');

The reason the form does not submit as expected is that you have disabled a required input. This is causing an error to be generated. However, your custom theme has hidden this error message, so it's not apparent that an error has been thrown. Please see the attached screenshot. You can see that an error should be displayed.

So, my advice is to update your jQuery to make these radios "readonly" instead of "disabled". This will allow the form inputs to continue to transmit data correctly. You may need to rework some of your custom radio styles to work with "readonly" instead of "disabled", but I think you should be able to get this working.

[sjC-2]

Thank you very much Christian for keeping at this until you figured it out! 🙂

Unfortunately, the developer who helped out with CSS no longer is around to help fix this. And I barely know CSS! I only know Toolset shortcodes! 🙂

Couple of clarifications on how I can proceed -

1. I could not locate the temp form on default template you are referring to have created to test this - just wanted to try it out myself and perhaps see if I can just use that if it's not too ugly. 🙂

2. Since the field is not supposed to be be edited, perhaps I could remove it from this form and just use some types shortcode to 'show' the current value? (it doesn't have to look like a radio button) Will removing the field from the form & displaying just the value resolve the issue of it not submitting without CSS changes?

3. With respect to the image fields - Any reason that just updating the CRED plugin is causing this visual nastiness? Apart from size distortion, there are too many X [remove] buttons on hovering over an uploaded image! 🙁 is there a way to resolve these issues apart from CSS?

Thanks a ton once again! And I hope you had a blessed weekend!

Cheers!

[Christian Cox]

Hi! You're welcome 🙂 Please find my responses below:

1. I could not locate the temp form on default template you are referring to have created to test this - just wanted to try it out myself and perhaps see if I can just use that if it's not too ugly. ?
Please see template.png, this is where I changed the template used.

2. Since the field is not supposed to be be edited, perhaps I could remove it from this form and just use some types shortcode to 'show' the current value?
You can remove this field from the CRED form editor assuming it is not used by any other forms and you want to keep the original value.

With respect to the image fields - Any reason that just updating the CRED plugin is causing this visual nastiness?
Your site's custom theme was written to override some styles that were provided by the older CRED plugin. That worked at the time, but then the CRED update added some additional styles. Your theme doesn't account for those (really there's no way it could unless the developer knew what the changes would be), so the design looks different. It's pretty common with very custom themes like this.

Apart from size distortion, there are too many X [remove] buttons on hovering over an uploaded image! ? is there a way to resolve these issues apart from CSS?
No, this is a related CSS issue. Again, custom theme styles need to be updated here.

You may have some luck adding the following styles. Please go to Appearance > Customize and find the additional CSS section. Add the following code:

.wpt-repetitive .wpt-credfile-delete {
 background-repeat: no-repeat;
 left: auto;
 right: -110px;
}

.wpt-repctl {
 display:inline-block;
 margin-right:30px;
}

I didn't do a thorough test, but this at least gets your image height and delete button behaving somewhat normally. If you see any issues this causes in the rest of the site, let me know and I can help with those.

[sjC-2]

Thank you very much Christian for that CSS snippet - helped somewhat.. but I'm discovering many complications -

1. Using default template is not an option, as the edit current page template has code to 'check' if the user is the owner of the product listing & is thus eligible to edit the page.

2. Removing the main Pricing Model field also stops displaying the conditional sub fields. For eg - if Pricing Model is "Free", conditional sub field of "Open Source/Proprietary" drop down also disappears even though they are still in the form. Is this expected behavior? Any way around it? (I want to display the Main field using a types shortcode, but also allow user to edit the respective sub field via a CRED shortcode)

3. While the CSS snippet has fixed the size visually - Removing any of the existing ones is causing problems. Also Clicking ADD to put an additional image is making an existing one disappear. This is also used in Submit a New Product and there too clicking add button is not doing anything -
hidden link

Any ideas? 🙂

[Christian Cox]

Using default template is not an option
Okay that makes sense. We isolated the problem in the other template so we should be able to fix it there.

Removing the main Pricing Model field also stops displaying the conditional sub fields
Hmm okay I see. Instead of completely removing the radio buttons from the form, we'll need to keep them in place. How about simply hiding them with CSS? Add the field back to your form, and surround it in this code:

<div style="display: none;"> ... your field shortcode here ... </div>

Conditional logic built around the form elements will continue to work, they just won't be shown on the page.

While the CSS snippet has fixed the size visually - Removing any of the existing ones is causing problems. Also Clicking ADD to put an additional image is making an existing one disappear. This is also used in Submit a New Product and there too clicking add button is not doing anything -
hidden link
Hmmm it sounds like fixing one problem here has introduced 3 others. We're getting to a point where you need a dedicated JavaScript development resource because I don't know what's wrong, and I would need to spend time to understand how your custom theme works. Debugging your custom theme is outside the scope of the support I'm able to provide in the forum, unfortunately, and this is a very unique, custom implementation. If you have individual questions about specific bits of code, I can help analyze them and troubleshoot.

More about our support policy here:
https://toolset.com/toolset-support-policy/

[sjC-2]

Thanks Christian - I certainly appreciate that you have already gone above & beyond the call of duty in helping sort this out. 🙂

To help quickly resolve this I've removed all the custom JavaScript I could identify related to it and seek your help only to get this functional at a basic level. If there is anything in my queries below, that is beyond the scope in your view - please let me know and I'll mark it as resolved.

1. Pricing Model sub fields - great point of using the div to hide it! Worked like a charm along with removing the 'disabled' attribute. This part is resolved. 🙂

2. Product Logo -

2a. Once an image is chosen, there doesn't seem to be any way to remove it? How can I give the user a way to remove it our change his file selection?
e.g. - hidden link

2b. When an image is not yet selected, user can click "browse" button to select a file, but somehow in addition, clicking the field label (Product Logo) is also opening the same file selection dialog box. Is this expected behavior or I'm doing something wrong?

3. Screenshots -

3a. Default Text inside the Buttons is too long (ie. "Delete Product - Screenshots repetition" ). How do I make it something simple like - "Delete Screenshot" / "Add Screenshot" and make the color of the button similar to the other ones on the page?

3b. Any way to have only 1 screenshot per row? (currently adding new ones to the side and then wrapping to next row)

Thanks once again for your patient help! 🙂

[Christian Cox]

Hi, here are my responses:
2a. Once an image is chosen, there doesn't seem to be any way to remove it? How can I give the user a way to remove it our change his file selection?
There's a delete button hidden by your theme's CSS. I tried to it visible with this CSS, but it also changes some properties of the other buttons:

.wpt-repetitive .wpt-credfile-delete {
    text-indent: 0;
    display: block;
    background: #607D8B;
}

2b. When an image is not yet selected, user can click "browse" button to select a file, but somehow in addition, clicking the field label (Product Logo) is also opening the same file selection dialog box. Is this expected behavior or I'm doing something wrong?
I think this is expected, because the Product Logo label element uses the "for" attribute, which points to the input field. This is good practice for usability (although not every site implements it): http://stackoverflow.com/questions/698001/whats-the-for-for-in-a-label-tag

Default Text inside the Buttons is too long (ie. "Delete Product - Screenshots repetition" ).
You can add this code to your theme's functions.php file:

add_filter('toolset_button_delete_repetition_text', 'toolset_button_delete_repetition_text', 10, 2);
function toolset_button_delete_repetition_text($text, $config)
{
    return 'Delete Screenshot';
}

add_filter('toolset_button_add_repetition_text', 'toolset_button_add_repetition_text', 10, 2);
function toolset_button_add_repetition_text($text, $config)
{
    return 'Add Screenshot';
}

You can change the text from 'Delete Screenshot' and 'Add Screenshot' to whatever you want.

make the color of the button similar to the other ones on the page?
Your theme is set up to use the pink button color only on "submit" type buttons. For consistency, I wouldn't recommend this change.

Any way to have only 1 screenshot per row?
The screenshots only appear one per row for me here:
hidden link
Screenshot attached. Can you explain further?

[sjC-2]

Thanks Christian - all your solutions have helped a lot! ?

2a. Thanks for the snippet - the 'delete' button is now showing up! Initially it did not, so I ran a search and found the same name in the style.css file. Once I deleted those lines of code it is showing up now! ? (albeit in an obnoxiously large size)
Also when I click it, another button "Restore Previous Value" shows up. (see screenshot - delete restore button). Could guide how to fix the size & change the names on both these buttons?

2b. Good point about usability - specially for screenreaders! I'll leave it as it is.

3a. The filters you gave worked like a charm!

3b. Earlier, multiple screenshots were showing up per row. (refer attached screenshot - OLD Rows) But now it seems fixed, perhaps due to the massive delete button. Will let you know if the issue comes up again once the delete button size is fixed.

[Christian Cox]

Okay you can modify those strings by adding the following code to functions.php:

add_filter('gettext', 'clear_button_func', 20, 3);
function clear_button_func($translated_text, $text, $domain ) {
    if($domain == 'wpv-views'){
        if($text == 'delete'){
            $translated_text = "Custom delete button";
        }
        if($text == 'Restore Previous Value'){
            $translated_text = "Custom restore";
        }
    }
    return $translated_text;
}

The width of the Delete button is something I'm not sure about because there are styles applied directly to the element:

<input type="button" data-action="delete" class="js-wpt-credfile-delete wpt-credfile-delete" value="delete" style="width:100%;margin-top:2px;margin-bottom:2px;">

The width:100% is what is causing the button to stretch out to fill the horizontal space.

[sjC-2]

Thank you Christian for the prolonged troubleshooting and help!