Virtuemart Support :: Topic: Persistent JQuery conflicts (1/1)

Welcome, Guest

TOPIC: Persistent JQuery conflicts

Persistent JQuery conflicts 6 years 7 months ago #15220

VCOA Webmaster

Hello,

I just purchased the MaterialMart template and have it set up on both my dev and production servers. With both installations, I believe there are issues with JQuery conflicts that I haven’t been able to identify.

Some of the issues are:
Add to Cart button will not “add to cart” or display quantity, models do not work, pop-up windows non-functional such as the shopping cart view, tool-tips non-functional, tab views display all tab content at once, zoom view only partially functions and only on quick-look view and many more issues I won’t mention because I’m certain the cause is a common issue.

The site template is from JoomDev, J core is 3.7.5 and all extensions are current. I have installed jQuery Easy as instructed here: www.flexiblewebdesign.com/forum-virtuemart-2-template-puremart-support/523-the-easiest-way-to-solve-jquery-conflict-issues#2176, but it has had no effect in correcting the issues.

The dev site is here:
vcoa.org/mmp_upgrade/index.php/marketplace/marketplace Please ignore the images as they have not been updated yet.

Any ideas – have I missed something simple?

The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 7 months ago #15225

Support

Hi,

Your website has a jQuery conflict problem, you are right. This has to be resolved, otherwise "ALL" jquery dependent functions will fail (means, nothing will work with MaterialMart)

Attachment ScreenShot2017-09-11at10.46.12PM.png not found

Chrome Dev Tool says:
Uncaught TypeError: Cannot read property 'split' of undefined
and this error happens on this file:
vcoa.org/mmp_upgrade/templates/jd_dallas/js/scrolling-nav.js

Apparently, the file is trying to change the property of an undefined object, which is not cool. Try this patch:

1- Open this JS file:
2- find these lines:

getHash: function ($link) {
    return $link.attr('href').split('#')[1];
}

3- repalce them wit these:

getHash: function ($link) {
   return false;
   // return $link.attr('href').split('#')[1];
}

FYI: This patch will basically eliminate the console error by returning nothing for that function. That function doesn't work anyway, so nothing will change on your website.

Try this patch and let me know about the result.

Regards.

Last Edit: 6 years 7 months ago by Support.

The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 7 months ago #15230

VCOA Webmaster

That edit helped quite a bit on the main and category pages as the tool tips, tabs, add to cart and shopping cart pop-up all work fine now, but when viewing the quick look, all of the tabs display at once and zoom no longer functions in the modal.

On the product page add to cart now functions, but cart pop-up, ask question model, zoom and tabs are non-functional as before.

The Cart checkout page also has a few problems as well: the cart button hover is not functioning and prices are not displayed or totaled.

Your assistance is appreciated!

The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 7 months ago #15232

Support

Hi,

I need to investigate your case deeply to figure out what goes wrong. Please copy-paste this support-request-form below, fill out the necessary fields and email it to This email address is being protected from spambots. You need JavaScript enabled to view it.. I will take a look at your website ASAP.

[forum URL -- don't touch]
https://www.flexiblewebdesign.com/forum-virtuemart-template-materialmart-support/3654-persistent-jquery-conflicts
 
[The URL(s) to see the failure on your website  -- don't touch]
http://vcoa.org/mmp_upgrade/index.php/marketplace/marketplace/multimedia/rolling-magazine-1983-2013-detail?tmpl=component&flexible=quicklook
http://vcoa.org/mmp_upgrade/index.php/marketplace/marketplace
 
[Joomla Administrator Credentials]
<< Joomla Administrator URL & Username & Password >>
 
[FTP credentials] (Provide FTP credentials in this format below)
FTP server: ftp.yourdomain.com
FTP username: <<username>>
FTP password: <<password>>

regards.

Last Edit: 6 years 7 months ago by Support.

The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 7 months ago #15234

VCOA Webmaster	Email sent. Thank you!
	The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 7 months ago #15241

VCOA Webmaster	Have you been able to find a solution to this?
	The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 7 months ago #15250

Support	Hi, What happened to your website? I don’t see the MaterialMart on your website. Did you move it to some another folder? Please share the most recent folder-name where you installed the MaterialMart. Regards.
	The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 6 months ago #15257

VCOA Webmaster	There were some server issues that the host had to correct. Please try again. MaterialMart
	Last Edit: 6 years 6 months ago by VCOA Webmaster. The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 6 months ago #15264

Support	Hi, Please check your email box. I just sent you an email. Regards.
	The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 6 months ago #15266

VCOA Webmaster	Credentials sent. Thank you!
	The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 6 months ago #15267

VCOA Webmaster

Thank you for going through this and correcting these issues. I just made a quick look and it is much better; all modals, zooms, tabs, etc., are functioning fine now, but the prices do not display on Quick Look, cart popup, any of the list views or the check-out page. Is there something I need to set to display these?

I am aware that the site template bootstrap.css is causing problems and I have been trying to override some of these issues, but thank you for the explanation. I’m also in the process of standardizing all image sizes so the resulting appearance is more like your demo.

BTW: I had been looking for a template that applies only as an overlay to VM and not as shopping focused site. Every other VM template I’ve found is intended firstly as a shopping site with everything else as an afterthought. Thank you for creating VM only templates!

For anyone following this thread, here is the correction:

I managed to fix JS problems by tweaking the configurations in the backend. Zoom and TABs works fine on QuickLook, clicking neighbor buttons (to navigate next-pref item) works just fine. Can you check your website and let me know if you notice any further error, or broken functionality anywhere?

By the way, there are CSS layout problems on your website, in general. Those are all happening because of the “CSS Override” issues caused by your Joomla Template’s CSS file and MaterialMart’s CSS file. They need to be patched manually by creating stronger CSS rules to override the rules that were overridden already. I tried to fix some of them, but there are many more.

Think of it like this:

- MaterialMart has CSS rule to styles the add-to-cart button — using the the class names, i.e: .flexibleContainer .btn {}
- Your joomla template also wants to style the add-to-cart button — using a generic button rule, i.e: button[type=submit] {} or using class name, i.e: .btn {}

The button looks messy in the result, because text color rule is taken from MaterialMart’s CSS file, but the background rule is taken from Your Joomla Template’s CSS file or the other way around.

The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 6 months ago #15268

VCOA Webmaster	Sorry to be a pest, but after running through VM a bit more, I discovered that when on any detail page and clicking the previous/next arrows, the next detail page has all of the tab links expanded as before. Also the enlarged view of products now has the background overlay covering the image.
	The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 6 months ago #15277

VCOA Webmaster	I've been so busy trying to put out fires, I neglected to do a cross browser check on IE (there are people who still use it). When I checked IE 11 & 10, both would not display the Add to Cart text or icons. I found that if I disabled font-family:"Material Icons";, the item descriptors would display. Is there a quick css fix? Thanks again. Attachment Screenshot_5.png not found
	The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 6 months ago #15284

Support

Material Icons are actually Font (similar to Font Awesome) and that font-package gets loaded via fonts.googleapis.com/icon?family=Material+Icons

If IE doesn't support this font-type, then it means Microsoft has some problems with Google ;) Because the same font-type is being used in all official Google projects (including Google Material Design for AngularJS). I just did a quick search about it and found these Github threads:
github.com/google/material-design-icons/issues/536
github.com/google/material-design-lite/issues/1468

Here is also the official documentation about how to load Materials Icons to a webpage:
google.github.io/material-design-icons/#setup-method-1-using-via-google-web-fonts

By the way, are you sure you are not using any blocker plugin on IE, right? Maybe the plugin blocks loading fonts on the page?? (i don't know if IE support 3rd party plugins though)

Can you visit this page using IE10 and IE11 material.io/icons/ and see if you are able to see the Google Materials Icons?

Regards.

Last Edit: 6 years 6 months ago by Support.

The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 6 months ago #15287

john varsamis	Hi, I'm having exactly the same issues with Edge and i.e., add to cart button is not visible. I'd really need to have a solution on this one.
	The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 6 months ago #15292

Support	Hi John, What happens when you visit material.io/icons/ using IE? Are you able to see the icons on that website? (material.io/icons/ is the official Google page to preview Material Icons)
	The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 4 months ago #15389

Robert Loncaric

I found an issue with IE 11 on version 1.0.3 as well, stretching Add to Cart button and showing no text (though add to cart itself worked)

Sorted it by commenting out first parameter on line 440 of /your_template/html/com_virtuemart/assets/css/.flexible.css

.flexibleContainer .addtoCart:before {
 
>> /*content:'shopping_cart'*/[ <<
 
 font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;font-size: 1.6rem; line-height:54px; vertical-align:top;}

The administrator has disabled public write access.

Persistent JQuery conflicts 6 years 4 months ago #15396

Support	hi, That line you commented out was actually meant to display the "cart icon" before the "Add to Cart" wording. Did you try visiting material.io/icons/ using IE11? Were you able to see the icons on that website?
	The administrator has disabled public write access.