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?
Hello.
Check for javascript errors in your browser console
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.
Hello.
Only one jQuery can be added to the page
I'm not sure I know what you mean, but I've tried it with and without the jquery-migrate. No difference.
Hello.
Can you post an URL (add spaces to URL if forum does not allow you to post)?
Let's see if this works:
https: //bridgesofloveshow.com /store/store.php
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,
<!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>
Thank you for your suggestion abolabo, but unfortunately it did not make any difference.
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.
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.
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.
Hello.
You have a CSS rules conflict.
Please add the following rule to your page style
.fade:not(.not) {
opacity: 1 !important;
}
Issue reported to bug tracker https://github.com/abantecart/abantecart-src/issues/1514
Thank you Basara! That did the trick.
Quote from: Karmelga on December 13, 2021, 01:29:22 AM
Thank you Basara! That did the trick.
Thank you for reporting!