AbanteCart Community

eCommerce construction => Embedding => Topic started by: Karmelga on December 01, 2021, 11:24:27 PM

Title: Unable to get modal windows to open
Post by: Karmelga on 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?

Title: Re: Unable to get modal windows to open
Post by: Basara on December 02, 2021, 12:12:36 AM
Hello.
Check for javascript errors in your browser console
Title: Re: Unable to get modal windows to open
Post by: Karmelga on 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.
Title: Re: Unable to get modal windows to open
Post by: Basara on December 03, 2021, 01:37:00 AM
Hello.
Only one jQuery can be added to the page
Title: Re: Unable to get modal windows to open
Post by: Karmelga on 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.
Title: Re: Unable to get modal windows to open
Post by: Basara on 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)?
Title: Re: Unable to get modal windows to open
Post by: Karmelga on December 03, 2021, 05:45:43 PM
Let's see if this works:

https: //bridgesofloveshow.com /store/store.php
Title: Re: Unable to get modal windows to open
Post by: abolabo on 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>
Title: Re: Unable to get modal windows to open
Post by: Karmelga on December 06, 2021, 10:32:32 AM
Thank you for your suggestion abolabo, but unfortunately it did not make any difference.
Title: Re: Unable to get modal windows to open
Post by: Karmelga on 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.
Title: Re: Unable to get modal windows to open
Post by: Karmelga on 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.
Title: Re: Unable to get modal windows to open
Post by: Karmelga on 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.
Title: Re: Unable to get modal windows to open
Post by: Basara on 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
Title: Re: Unable to get modal windows to open
Post by: Karmelga on December 13, 2021, 01:29:22 AM
Thank you Basara!  That did the trick.
Title: Re: Unable to get modal windows to open
Post by: Basara on December 13, 2021, 02:23:39 AM
Thank you Basara!  That did the trick.
Thank you for reporting!