Product in content plugin Ajax / javascript problem

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

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>

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

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

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

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

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

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

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