Unable to get modal windows to open

Karmelga · December 01, 2021, 11:24:27 PM

I am building a website with a Store page, into which each product is embedded with the code generated by Abantecart:

<script src=".../store/index.php?rt=r/embed/js" type="text/javascript"></script>
<div style="display:none;" class="abantecart-widget-container" data-url=".../store/" data-css-url=".../store/storefront/view/default/stylesheet/embed.css" data-language="en" data-currency="USD">
   <div id="abc_534" class="abantecart_product" data-product-id="1" data-language="en" data-currency="USD">
      <div class="abantecart_image"></div>
      <h3 class="abantecart_name"></h3>
      <div class="abantecart_price"></div>
      <div class="abantecart_quantity"></div>
      <div class="abantecart_addtocart"></div>
   </div>
</div>

Currently, there are only two products. If I understand the manual correctly, clicking on a product image is supposed to open the corresponding modal window - but doesn't. Instead, the whole screen greys out and freezes.

Can anyone explain what I'm doing wrong, please?

Basara · December 02, 2021, 12:12:36 AM

Hello.
Check for javascript errors in your browser console

Karmelga · December 02, 2021, 12:26:39 PM

Hello Basara. No javascript errors either before or after clicking on the image. The only messages showing in the Chrome console indicate that jquery-migrate-1.4.1.min.js and jquery.min.js (3.5.1) are installed. Edge browser gave several warnings - see attached.

Basara · December 03, 2021, 01:37:00 AM

Hello.
Only one jQuery can be added to the page

Karmelga · December 03, 2021, 02:01:27 AM

I'm not sure I know what you mean, but I've tried it with and without the jquery-migrate. No difference.

Basara · December 03, 2021, 08:18:29 AM

Hello.
Can you post an URL (add spaces to URL if forum does not allow you to post)?

Karmelga · December 03, 2021, 05:45:43 PM

Let's see if this works:

https: //bridgesofloveshow.com /store/store.php

abolabo · December 06, 2021, 04:41:54 AM

i guess you have a broken hrefs for elements on your html-page. Some of then loaded from cdn, other by relative link.. I think issue in relative link and <base> tag
You can try this instead to make it work,

Code Select

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<base href="https://bridgesofloveshow.com/store/">
	</head>
<body>
<script src="https://bridgesofloveshow.com/store/index.php?rt=r/embed/js" type="text/javascript"></script>
<div style="display:none;" class="abantecart-widget-container" data-url="https://bridgesofloveshow.com/store/" data-css-url="https://bridgesofloveshow.com/store/storefront/view/default/stylesheet/embed.css" data-language="en" data-currency="USD">
   <div id="abc_534" class="abantecart_product" data-product-id="1" data-language="en" data-currency="USD">
      <div class="abantecart_image"></div>
      <h3 class="abantecart_name"></h3>
      <div class="abantecart_price"></div>
      <div class="abantecart_quantity"></div>
      <div class="abantecart_addtocart"></div>
   </div>
</div>
</body>
</html>

Karmelga · December 06, 2021, 10:32:32 AM

Thank you for your suggestion abolabo, but unfortunately it did not make any difference.

Karmelga · December 07, 2021, 01:15:44 PM

Additional information:

Moved <script> lines for loading jquery and bootstrap to <head>
Activated .htaccess in store folder, with RewriteBase /store/

Result: No change. Modal windows still not opening.

Karmelga · December 10, 2021, 10:33:46 AM

Going to the store itself (i.e. at .../store/index.php) and then clicking on either of the two products works fine - the product-specific page appears as expected. So the problem must be something to do with the modal windows. Does anybody have any ideas on what else I could try? I need to resolve this asap.

Karmelga · December 12, 2021, 12:11:57 PM

I am very disappointed that there has been no further follow-up on this problem. The page on which I'm trying to get Abantecart working is very simple, so I would expect it should be easy to debug. In desperation, I started from scratch and downloaded a fresh copy of Abantecart and rebuilt the system on my GoDaddy server, but it made no difference - the modal windows still won't open.

It's a shame, because the functionality of Abantecart looks great, but if it doesn't work it's useless.

Basara · December 13, 2021, 12:36:07 AM

Hello.

You have a CSS rules conflict.
Please add the following rule to your page style

Code Select

.fade:not(.not) {
opacity: 1 !important;
}

Issue reported to bug tracker https://github.com/abantecart/abantecart-src/issues/1514

Karmelga · December 13, 2021, 01:29:22 AM

Thank you Basara! That did the trick.

Basara · December 13, 2021, 02:23:39 AM

Quote from: Karmelga on December 13, 2021, 01:29:22 AM
Thank you Basara! That did the trick.

Thank you for reporting!

News:

Unable to get modal windows to open