The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 02-21-2015, 12:14 AM
DHA's Avatar
DHA is offline
Junior Member
 
Join Date: Feb 2015
Posts: 7
Default


OK, I think it's finally time to get Pablo, Quetzal, & Makefruit's code together in harmony. (LOL!)
I’m using WYSIWYG Website Builder (v9.4.4), which as you know, is static and outputs a lot of proprietary code, which often conflicts with 3rd party plugins and widgets like Ecwid. Just like Ecwid, WB’s code is editable if you can define the code that needs to be edited. Which is where my problem lies. I’m attempting to work out Ecwid & WB’s code differences on a test page here…

Store Test Site URL: http://www.test.discountfurnituresho...com/page1.html

Screenshots:

On this page I have everything integrated fine; however, once you click on the carousel and the page forwards to the “Clearance_Deals” test page where I have the Ecwid product browser embedded the issues begin…

1. First of all, notice the search box widget in the upper left header know has CSS issues. I'm having JQuery Fancybox errors, which cause none of my lightbox pop-ups to work on this page where I have the Ecwid product browser embedded. I'm getting a,"TypeError: $.fancybox is not a function" (relating to "$"), in Firebug. I can see that there are conflicting JQuery scripts. I can see the line of code, but I need help identifying & fixing the script that's causing this. WTFruit? I need these lightbox links to work!


2. If you click on any product, it will take you to the product browser, product details pages, of that product. Once you add the product to the cart, the user has the option to press the "Go to Checkout" button. I would like this "Go to Checkout" button to also open in a lightbox (the cart). What script can I use to achieve this?

Thank you in advance for your much needed assistance!
DH&A

Screenshots:







OK

Screenshots:

https://www.flickr.com/photos/89812008@N06/15974390583/

https://www.flickr.com/photos/898120...n/photostream/

https://www.flickr.com/photos/898120...n/photostream/

OK I hope these show...

Last edited by Wendy; 02-21-2015 at 07:50 AM.
  #2  
Old 02-21-2015, 03:18 AM
smoothsailingco.com's Avatar
smoothsailingco.com smoothsailingco.com is offline
 
Join Date: Dec 2011
Location: CA / FL
Posts: 345
Default

Quote:
Originally Posted by DHA View Post
1. First of all, notice the search box widget in the upper left header know has CSS issues. DH&A
Adding the bold part will move the Search text off the button and will have it only show the magnifying glass:
Code:
html#ecwid_html body#ecwid_body button.ecwid-SearchPanel-button {
    background: url("http://discountfurnitureshowroom.com/images/DFS_searchboxbutton.png") no-repeat scroll center bottom transparent !important;
    border: medium none;
    height: 23px;
    text-indent: -9999px;
    width: 55px;
}

Quote:
I'm having JQuery Fancybox errors, which cause none of my lightbox pop-ups to work on this page where I have the Ecwid product browser embedded. I'm getting a,"TypeError: $.fancybox is not a function" (relating to "$"), in Firebug. I can see that there are conflicting JQuery scripts. I can see the line of code, but I need help identifying & fixing the script that's causing this. WTFruit? I need these lightbox links to work!
If I block this from loading the lightboxes work, try removing this from Clearance_Deals.html:
Code:
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Quote:
2. If you click on any product, it will take you to the product browser, product details pages, of that product. Once you add the product to the cart, the user has the option to press the "Go to Checkout" button. I would like this "Go to Checkout" button to also open in a lightbox (the cart). What script can I use to achieve this?
I don't know if there's a simple way to do this. With javascript you can do it this way:
Code:
<script>
Ecwid.OnPageLoad.add(function(page) {
  $(".ecwid-productBrowser-details-openBagButton, .ecwid-minicart-clickArea, .ecwid-minicart-link span.gwt-InlineLabel").click(function(){
    displaylightbox('http://www.test.discountfurnitureshowroom.com/cart.html#!/~/cart',{'width':1024,'height':615});
    history.back();
  });
}); 
</script>
Also you need to add the bold part below to your css:
Code:
html#ecwid_html body#ecwid_body div.ecwid-minicart {
    background-image: url("http://discountfurnitureshowroom.com/images/DFS_minicart_box.png");
    z-index: 9999;
}
Right now, at least for me the mini cart was unclickable because the other "Layers" are above it. This moves it above them.

Last edited by smoothsailingco.com; 02-21-2015 at 03:37 AM.
The Following 3 Users Say Thank You to smoothsailingco.com For This Useful Post:
DHA (02-22-2015), Sergio87 (03-23-2015), Rick G (02-21-2015)
  #3  
Old 02-21-2015, 09:22 AM
DHA's Avatar
DHA DHA is offline
Junior Member
 
Join Date: Feb 2015
Posts: 7
Default

OK. Thank you for your quick reply! Sorry for my late reply because I was in the studio. I will try these fixes and get back to you.

Thanks! I owe U!
DH&A
  #4  
Old 03-23-2015, 03:56 AM
DHA's Avatar
DHA DHA is offline
Junior Member
 
Join Date: Feb 2015
Posts: 7
Default JQuery Lightbox Issues Reply to Thread

OK, I fixed all of my issues with the desktop version of this site.
I’m using WYSIWYG Website Builder (v10.3.2) and I’m testing a mobile version of my site here…

https://www.discountfurnitureshowroo...ile/index.html

As you can see, I’m using jQuery mobile 1.4.5 and jQuery 2.1.1. I need help identifying and remedying a few problems…

1. If you press “Sign In” on the top header nav bar, you’ll be redirected to an Ecwid account sign in page. Using the same method to open the cart (“#!/~/cart”), on the bottom footer nav bar select “View Cart”, and you’ll see that the link doesn’t force open the cart (you get an error instead). For test purposes, the “View Cart” link on the top header nav bar, when pressed, goes to the cart page with the product browser on it, but has no script to force open the cart… My point is, I would like the “View Cart” buttons on the nav bars to first link to the “cart” page and then force open the cart contents in the Ecwid product browser embedded on the “cart” page. How do I accomplish this?

2. If you press on the image slider underneath the image that states “Clearance Deals!”, you’ll be redirected to this page…

https://www.discountfurnitureshowroo...nce_Deals.html

If you select any product, you get an “Error Loading Page”.

I don’t have these problems on the desktop version of this site. I get a,
"jQuery requires a window with a document" error in Firebug. It seems like the layers I embedded Ecwid in aren’t being recognized in jQuery mobile. Is this because WB’s layout gird takes first presidence in layer orders? Or is this CSS related? Or is this something else? How can I fix these problems? I would strongly appreciate your help Team Ecwid. I really appreciate your clean and accurate code! And I look forward to making a lot more of these sites! Thanks to Team Ecwid, smoothsailingco, or anyone else who can help in advance!

Thank you in advance for your much needed assistance!
DH&A
  #5  
Old 03-23-2015, 04:26 AM
smoothsailingco.com's Avatar
smoothsailingco.com smoothsailingco.com is offline
 
Join Date: Dec 2011
Location: CA / FL
Posts: 345
Default

Quote:
Originally Posted by DHA View Post
1. If you press “Sign In” on the top header nav bar, you’ll be redirected to an Ecwid account sign in page. Using the same method to open the cart (“#!/~/cart”), on the bottom footer nav bar select “View Cart”, and you’ll see that the link doesn’t force open the cart (you get an error instead). For test purposes, the “View Cart” link on the top header nav bar, when pressed, goes to the cart page with the product browser on it, but has no script to force open the cart… My point is, I would like the “View Cart” buttons on the nav bars to first link to the “cart” page and then force open the cart contents in the Ecwid product browser embedded on the “cart” page. How do I accomplish this?
I think you can add cart to the url like this:
Code:
https://www.discountfurnitureshowroom.com/mobile/Smartphones_account.html#ecwid:mode=cart
Does that work?

Quote:
Originally Posted by DHA View Post
2. If you press on the image slider underneath the image that states “Clearance Deals!”, you’ll be redirected to this page…

https://www.discountfurnitureshowroo...nce_Deals.html

If you select any product, you get an “Error Loading Page”.

I don’t have these problems on the desktop version of this site. I get a,
"jQuery requires a window with a document" error in Firebug. It seems like the layers I embedded Ecwid in aren’t being recognized in jQuery mobile. Is this because WB’s layout gird takes first presidence in layer orders? Or is this CSS related? Or is this something else? How can I fix these problems? I would strongly appreciate your help Team Ecwid. I really appreciate your clean and accurate code! And I look forward to making a lot more of these sites! Thanks to Team Ecwid, smoothsailingco, or anyone else who can help in advance!

Thank you in advance for your much needed assistance!
DH&A
It appears you have some script redirecting the hash to a real url. For example:

Queen Sleigh Bed is set to this url:
Code:
https://www.discountfurnitureshowroom.com/mobile/Smartphones_Clearance_Deals.html#!/Queen-Sleigh-Bed/p/46725609/category=12126589
But when you click the Queen Sleigh Bed, it's changed to:
Code:
https://www.discountfurnitureshowroom.com/mobile/!/c/12126589/!/Queen-Sleigh-Bed/p/46725609/category=12126589
If you visit the first link directly, it gets changed to:
Code:
https://www.discountfurnitureshowroom.com/mobile/!/Queen-Sleigh-Bed/p/46725609/category=12126589
That's why your getting Error Loading Page. It's trying to load something that doesn't exist. It might be JQuery Mobile.

Edit:

Try adding: hashListeningEnabled = false to the mobileinit area:
Code:
$(document).on("mobileinit", function()
{
   $.mobile.ajaxEnabled = false;
   $.mobile.defaultPageTransition = "none";
   $.mobile.hashListeningEnabled = false;
});

Last edited by smoothsailingco.com; 03-23-2015 at 04:34 AM.
The Following User Says Thank You to smoothsailingco.com For This Useful Post:
Sergio87 (03-23-2015)
  #6  
Old 03-23-2015, 05:11 PM
DHA's Avatar
DHA DHA is offline
Junior Member
 
Join Date: Feb 2015
Posts: 7
Default

OK, the cart fix worked; however, this:

HTML Code:
   $.mobile.hashListeningEnabled = false;
});
Did not. Which could be due to my insertion point, since I’m only able to insert it after the WB script where it is currently lined, but it is in the header. Yes, it seems a script is disassociating Ecwid content from the page. Why? What script? Is the question? A Little help Team Ecwid?

Thank you in advance for your much needed assistance!
DH&A
  #7  
Old 03-23-2015, 08:03 PM
smoothsailingco.com's Avatar
smoothsailingco.com smoothsailingco.com is offline
 
Join Date: Dec 2011
Location: CA / FL
Posts: 345
Default

Try adding this to your page:
Code:
<script>
$(document).on("mobileinit", function()
{
   $.mobile.hashListeningEnabled = false;
});
</script>
I believe the script causing the problem is JQuery Mobile. If I block that from loading then the page appears to work.
  #8  
Old 03-23-2015, 11:18 PM
DHA's Avatar
DHA DHA is offline
Junior Member
 
Join Date: Feb 2015
Posts: 7
Default

No. That didn't work either, as you can see in the code...
  #9  
Old 03-23-2015, 11:22 PM
smoothsailingco.com's Avatar
smoothsailingco.com smoothsailingco.com is offline
 
Join Date: Dec 2011
Location: CA / FL
Posts: 345
Default

EDIT: I was able to get this working offline:

Code:
$.mobile.hashListeningEnabled = false;
This needs to be BEFORE
Code:
<script src="jquery.mobile-1.4.5.min.js"></script>
So the final JQuery Mobile code needs to look like this:
Code:
<script>
$(document).on("mobileinit", function()
{
   $.mobile.ajaxEnabled = false;
   $.mobile.defaultPageTransition = "none";
   $.mobile.hashListeningEnabled = false;
});
</script>
<script src="jquery.mobile-1.4.5.min.js"></script>
Currently it's this:
Code:
<script>
$(document).on("mobileinit", function()
{
   $.mobile.ajaxEnabled = false;
   $.mobile.defaultPageTransition = "none";
});
</script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="wwb10.min.js"></script>
<script>
$(document).on("mobileinit", function()
{
   $.mobile.hashListeningEnabled = false;
});
</script>
You can see the test here:
http://smoothsailingco.com/test/ecwid-127445.html
http://smoothsailingco.com/test/ecwi...egory=12126589

Last edited by smoothsailingco.com; 03-24-2015 at 12:04 AM.
  #10  
Old 04-04-2015, 08:54 PM
DHA's Avatar
DHA DHA is offline
Junior Member
 
Join Date: Feb 2015
Posts: 7
Default

Ok, because of instability issues in WB’s jQuery Mobile pages, I decided to scrap those pages so I can finish the job; however, I have 2 issues left…

1. I’m getting a “Function” return error, “property value” script error (looks like line 148). I’m using this script…

Code:
<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page) {
    if (page.type == "PRODUCT") {       jQuery("div.ecwid-productBrowser-details-GalleryPanel").insertAfter(".ecwid-productBrowser-details-thumbnail");
    }
})
</script>
to move the product browsers image gallery panel to underneath the product browser’s product thumbnail. It functions properly in my desktop and mobile site as can be viewed here…

https://www.discountfurnitureshowroo...nce_Deals.html

https://www.discountfurnitureshowroo...nce_Deals.html

but, on my tablet site I get this error using the same script. WTFruit! Is it something else? Or, are my eyes tired of looking at code that it’s something super silly simple?
Click on any product and you’ll see what I’m talking about.

2. Until my client narrows down the few hundred products that I will upload on this site, I will be linking to unsecured catalog sites. I have scripts to link from https to http…

Ex.
Code:
<a href="https://www.discountfurnitureshowroom.com/out.php?http://www.discountfurnitureshowroom.com">http://www.poundex.com/CatalogSite/Default.aspx</a>
or

Code:
https://www.discountfurnitureshowroom.com/origin.html?goto=http://www.poundex.com/CatalogSite/Default.aspx/destination.html
My questions are, which would be a better choice to use, or is there a better way? Where should my insertion points be (between which lines)?
Thank you in advance for your much needed assistance!

“D”
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
design, jquery, lightbox, script issues, scripts, wysiwyg, wysiwyg web builder

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:39 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.