Product in content plugin Ajax / javascript problem

  • Posts: 243
  • Thank you received: 7
  • Hikashop Business
6 months 2 weeks ago #285307

-- HikaShop version -- : 3.2.1
-- Joomla version -- : 3.8.2
-- PHP version -- : 7.1.5

Happy New Year Nicolas and team!

There appears to be a javascript problem with the output of the product in content plugin...
I am noticing two problems..

1. When a product is displayed in content the add to cart button doesn't trigger the ajax "product added to cart" display whereas this works fine on normal product pages

2. The product in content plugin breaks the standard bootstrap carousel if on the same page.

The site isn't public but I can pm a link to show what's going on.

Thanks,

Ian

Last Edit: 6 months 2 weeks ago by iedwards.

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

  • Posts: 243
  • Thank you received: 7
  • Hikashop Business
6 months 2 weeks ago #285339

Update on this: I have found that if I have the Hikashop cart module on the page the content plugin "add to cart" ajax function works, so presumably there is some script that the content plugin needs that is loaded by the cart module.

I still have the issue where the Bootstrap carousel breaks with the content plugin displayed on the same page.

This is the code I am using for the carousel which is loaded in a custom module

<div id="testimonialCarousel" class="carousel slide" data-ride="carousel"><!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="testimonial style-2 text-left"><span class="author-img"><img src="/images/testimonials/claire-elliott.jpg" alt="Claire Elliott - Creativity Backgrounds testimonial" /></span>
<h4>Claire Elliott</h4>
<p class="testimonial-text">Amazing products and service. Now to get some new backdrops!</p>
</div>
</div>
<div class="item">
<div class="testimonial style-2 text-left"><span class="author-img"><img src="/images/testimonials/Marko-Dutka-Portrait.jpg" alt="Marko Dutka Creativity Backgrounds testimonial" /></span>
<h4>Marko Dutka</h4>
<p class="testimonial-text">The backgrounds are a joy to work with and enabled me to really push my creative boundaries with regard to the lighting, colour palette, and composition of my images.</p>
</div>
</div>
<div class="item">
<div class="testimonial style-2 text-left"><span class="author-img"><img src="/images/testimonials/hoss-mahdavi.jpg" alt="Hooss Mahdavi - Creativity Backgrounds testimonial" /></span>
<h4>Hoss Mahdavi</h4>
<p class="testimonial-text">Shades of Red, Pink, Blue, Green, Yellow, Black and White are the most used in my portraits as I can generally match a clients dress or accessories with the backdrop. And each of these reacts differently in B&amp;W photography.</p>
</div>
</div>
<div class="item">
<div class="testimonial style-2 text-left"><span class="author-img"><img src="/images/testimonials/Nicole-of-The-Hourglass.jpg" alt="Nicole of The Hourglass - Creativity backgrounds testimonial" /></span>
<h4>Nicole Klein</h4>
<p class="testimonial-text">just wanted to let you know that your service is fantastic, your backgrounds are superb quality and your delivery time is the fastest I have come across. Thank you very much.</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#testimonialCarousel" data-slide-to="0" class="active"></li>
<li data-target="#testimonialCarousel" data-slide-to="1"></li>
<li data-target="#testimonialCarousel" data-slide-to="2"></li>
<li data-target="#testimonialCarousel" data-slide-to="3"></li>
</ol></div>

Thanks

Ian

Last Edit: 6 months 2 weeks ago by iedwards.

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

  • Posts: 1788
  • Thank you received: 248
  • MODERATOR
6 months 2 weeks ago #285310

Hello,

No PM please, Use our Contact us form to provide Url link (page with issue) and required references access, and important : add an Url link in your message to this topic.

Regards

Last Edit: 6 months 2 weeks ago by Philip.

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

  • Posts: 62780
  • Thank you received: 9006
  • MODERATOR
6 months 2 weeks ago #285376

Hi,

Regarding the carousel, I would recommend installing and configuring the extension jQuery Easy.

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

  • Posts: 243
  • Thank you received: 7
  • Hikashop Business
5 months 3 weeks ago #286616

Hi Nicolas,

Sorry to have to return to this.

I have spent some time with jQuery Easy and it doesn't help in this instance.

I have narrowed the issue down to the "add to cart " ajax element generated by the product in content plugin. If I don't include the add to cart option everything works fine. If I do include it a div is added inside the carousel, the height of which reduces to zero (by means of a transition) with every other slide, causing the slide to disappear.

I would appreciate your thoughts on this, I've spent two days trying to debug this but I'm sure you'd be able to identify the problem straight away.

Thanks,

Ian

Last Edit: 5 months 3 weeks ago by iedwards.

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

  • Posts: 22544
  • Thank you received: 3510
  • MODERATOR
5 months 3 weeks ago #286630

Hello,

Opening page, seeing the error message :

Uncaught TypeError: $ is not a function
    at photography-news:125:5
Checking around the line 125
	<!-- Custom code -->
	<script type='text/javascript'>
    $(document).ready(function() {
         $('#testimonialCarousel').carousel({
             interval: 2000
         })
    });    
</script>	<!-- // Custom code -->
As we can read, thanks to the commentaries, it's some "custom code".
And as you will understand, it's not something added by HikaShop so that's not something related to our support.
But for sure, by generating JS errors ; it stop the all JS processing of the page, whatever the component which is generating the page...

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: 243
  • Thank you received: 7
  • Hikashop Business
5 months 3 weeks ago #286697

Hi Jerome,

Thank you for the reply.

Actually that's nothing to do with it, that custom code is some javascript that is intended to kick start the carousel on page load. I have removed that and the problem is still there, it just means you have to click on the carousel navigation before it starts animating (it's something I did have working, then removed it to test and just put it back wrong). The behavior is exactly the same with or without that code.

I do know that if I configure the product in content plugin to show the ad to cart button I have a problem, if I don't show the ad to cart button the problem goes away. Simple cause and effect suggests it is Hikashop code that is causing the problem and I would really appreciate some engagement from you to help me solve it.

Many thanks,

Ian

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

  • Posts: 22544
  • Thank you received: 3510
  • MODERATOR
5 months 3 weeks ago #286709

Hello,

Since you were talking about a carousel and a jQuery easy issue ; I was thinking that this JS error was the source of your issue.

The JS code of the carousel is wrong since it's using "$" and not "jQuery" at it should be by convention.
That's why you can see a lot of code like

jQuery(function ($) {
	initChosen();
In order to make the code work using a "$" for jQuery...
But once again, I don't see the point or the relation with HikaShop or our support.

I have to admit that I don't understand what you're talking about and I don't know what's the content you're mentioning.
Maybe we do not have the right link of the page you're talking about ; maybe you changed things after posting your message. It's hard to say !
But what is sure is that we will need some indication to understand what is your issue ; and it will require a bit more than just a descriptions because there are a lot of pages in your website and for the link we got there is just a category listing and no product listing (so not possible "add to cart").

A carousel is just some JS ; if you have some JS error by adding some HikaShop content via the content plugin ; best would be to give us details about that JS error.
But right now, we cannot see the problem you're trying to describe.

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: 243
  • Thank you received: 7
  • Hikashop Business
5 months 3 weeks ago #286740

Hi Jerome,

Because this is not yet a public facing site I sent the links via your contact form some time ago as requested by Philip. Presumably you haven't seen that so I will send again.

The carousel code I am using is from the JA Simpli template as documented here
https://www.joomlart.com/documentation/joomla-templates/ja-simpli
Scroll down to "4. [Landing page] Testimonials - Custom HTML module"

I have taken that code, changed the content and it works perfectly on every other page of the site, the code is simply html, it doesn't add any javascript itself.

I have setup two pages as a test.

The menu item "News" is a category blog listing with one article which include the "products in content plugin" with the add to cart button (see link in message via contact form) on this page the carousel is broken, every other slide the height collapses.

The menu item "News2" is identical to "News" except I have excluded the add to cart button from the product plugin, without the add to cart button the carousel works fine.

I am presuming there is Javascript in Hikashop that is called by the "add to cart" button that also uses the jquery carousel function and it's causing a conflict, but I can only guess - I was hoping that as Hikashop developers you'd be able to identify this pretty quickly.

Please check messages from the contact form for links.

Regards,

Ian

Last Edit: 5 months 3 weeks ago by iedwards.

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

  • Posts: 62780
  • Thank you received: 9006
  • MODERATOR
5 months 3 weeks ago #286777

Hi,

We actually did identify the issue sicne the beginning.
Be it my answer or Jerome's, we provided potential solutions for the problem which, as Jerome explained, come from this:
When the add to cart button is added there, HikaShop has to add his jQuery to the page and it also adds mootools. Because of that, the jQuery code of your carousel, which is using $ instead of jQuery gets affected by that because mootools rewrites $ as his own.
Using jQuery Easy can sometimes help, but as Jerome said, I think you want to change the way the carousel javascript is coded to use jQuery instead of $.
I can recommend trying using another carousel module for Joomla.

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

  • Posts: 243
  • Thank you received: 7
  • Hikashop Business
5 months 3 weeks ago #286784

Hi Nicolas,

Thank you for your reply.

Jerome did identify an issue, but as I have said it isn't relevant to the problem, I have removed that javascript and still have the problem.

The code I have added in the custom module for the carousel (posted above) CONTAINS NO JAVASCRIPT WHATSOEVER. It is simply HTML markup and jQuery does the rest. IT WORKS ON EVERY PAGE APART FROM WHEN the "product in content" plugin includes an add to cart button.

I have product category pages with add to cart buttons - they work fine
Product pages with add to cart buttons - they work fine

There is just something different about the "product in content" plugin which breaks this. Why does this appear not to use the same add to cart code as the rest of Hikashop?

Yes, there are other carousel solutions out there, I am using one on the home page, but this is a simple and lightweight way, documented in the JASimpli template, of providing a particular feature and it is only Hikashop that is making this problematic.

Ian

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

  • Posts: 22544
  • Thank you received: 3510
  • MODERATOR
5 months 3 weeks ago #286785

Hello,

The code which is added does not have JS or HTML errors.
I cannot tell you why your carousel is acting wrongly and do not set correct height values for slides, but since there is no HTML error and the code is just some regular HTML code ; I'm afraid that we can't help you.
If there was an HTML error, like a missing tag ; we could do something but in such situation, we are not useful.

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: 243
  • Thank you received: 7
  • Hikashop Business
5 months 3 weeks ago #286918

I am not asking you to find the problem with my code, I'm asking you to find the problem with your code that breaks my page.

I have, simply by removing lines in the code of the "product in content" plugin, narrowed it down to line 151 in hikashopproductinsert_view.php

$add_to_cart = hikashop_getLayout('product','add_to_cart_listing',$params,$js);

If I remove that line from the plugin then the problem goes away, but of course I don't see the add to cart button.

I have done a search for hikashop_getLayout('product','add_to_cart_listing and this plugin is the only place that function call appears - so it appears the plugin is using it's own code for displaying the add to cart button.

Perhaps you could tell me where this function call is processed so that, in the absence of help from you, I can trace it further?

Thank you,

Ian

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

  • Posts: 62780
  • Thank you received: 9006
  • MODERATOR
5 months 3 weeks ago #287025

Hi,

We already know where the problem comes from.
It's an issue in the javascript of the slider which isn't done properly and breaks as the add to cart display function add its javascript on the page. This code is added in the function add_to_cart_listing of the file components/com_hikashop/views/product/view.html.php

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

  • Posts: 243
  • Thank you received: 7
  • Hikashop Business
5 months 3 weeks ago #287026

I don't think you are reading my posts properly, I have not added any javascript, the slider uses jQuery as loaded by the template, the code I have added to the custom module to make the slider is html only, and it is boiler plate html from the JASimpli template documentation which in itself is based on bootstrap documentation.

What I have noticed is that the product in content plugin includes inline styling which I thought was bad practice and is impossible to override. It doesn't pass validation anyway.

Ian

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

  • Posts: 62780
  • Thank you received: 9006
  • MODERATOR
5 months 3 weeks ago #287092

Hi,

I never said that you added any javascript.
And while you've added only HTML in the module, it doesn't change the fact that the slider uses javascript, be it directly in the module or added by the template.

Inline styling is bad practice as it's better to use classes to define CSS so that it can be changed more easily. Now it doesn't mean that it's not valid or that it can cause problems. Sometimes, it's the only thing you can do or the thing which makes the most sense.
www.codecademy.com/articles/html-inline-styles
And in any case, there is no issue in overriding inline styling. Why do you say you can't override it ?
In any case, it's not related to this topic.

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

  • Posts: 243
  • Thank you received: 7
  • Hikashop Business
5 months 3 weeks ago #287125

As part of my attempts to debug this issue I ran validation tests on the page. I know validation tests aren't everything but the product in content plugin failed, amongst other things, because it had script tags inside a span tag, which doesn't appear to be very good practice.

As you know the order of priority of css styles is..
1 inline
2. internal
3. external

so an external stylesheet will not override an inline style unless it is flagged as !important, which in itself is bad practice, but, even then, at least one of the inline parameters was flagged as !important anyway which, given the priorities above, is unnecessary and makes it impossible to override. Happy to be corrected if I am wrong.

This is only relevant to the issue in that it undermines my confidence in how well the "product in content" plugin has been coded, and reinforces my suspicion that it is the cause of my problem. It is also suspicious that it seems to use different code to generate the "add to cart" button to the rest of Hikashop - it has a different effect anyway.

I have been a customer of Hikashop for a long time now and contributed to this forum often, and when needed usually received excellent support. I would have hoped I had established that I am not a newbie and earned sufficient credibility to have this issue taken seriously, it is disappointing to have to expend so much energy trying to get this investigated.

Ian

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

  • Posts: 62780
  • Thank you received: 9006
  • MODERATOR
5 months 2 weeks ago #287171

Hi,

I'm not sure what you want me to do here.
I've already investigated the problem (and so did Jerome) and my conclusion is that the issue comes from the way the javascript of the slider is done.
Nevertheless, I also told you where to find the javascript code from the add to cart button inserted by this plugin which lead to the javascript of the slider not working. If you remove that javascript code, you'll get your slider to work again with the add to cart button still on the page.
If you're asking me to modify HikaShop to circumvent the bug occurring with your slider because the slider javascript is not done properly, I'm afraid that's not possible.
But there are two ways you can solve the issue:
- fix the javascript code of the slider to use jQuery instead of $ as Jerome proposed
- remove the javascript code added in the add_to_cart_listing function as I explained above (but you'll have to do it after each update of HikaShop)

As for the inline CSS with the !important, that's indeed a special case which you can't easily override. It was done on purpose like that because templates were breaking the display of the add to cart plugin and there was no other way to fix that without impacting people already using the plugin and having it already customized the way they wanted. I unfortunately don't have a solution here. Moving that CSS in a css file will create update issues to some merchants updating their HikaShop, and I hope you can understand that we want to avoid that as much as possible.

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

Time to create page: 0.164 seconds
Powered by Kunena Forum