[Heimatstcke Shop]

Hello everyone, I need some help concerning coding.

Well actually it's not really coding but more like "finding the right names". What I am trying to do is getting dependant product options. For Example: different Types of T-Shirts have different Colors available and depending on what shirttype the user chooses, the other options fitting to his choice appear.

I already found this topic: http://www.ecwid.com/forums/showthread.php?t=18333
The Code provided from Matt (https://gist.github.com/makfruit/530...kfruit/5302479) worked as intended on the product browser. But my situation is different and I am kind of lost because I tried so much to make it work.

The Code works for the product browser but my page is made in Muse and the only part of "ECWID-embed-html" is the box containing the options, the quantaty and the "to-bag" button (and the bag itself but it doesn't matter) as you can see here in my testpage (http://davidshoptest.businesscatalyst.com/magni-1.html) on the right, underneath the way too large priceimage . The company I work in uses Muse for webdesign which is why I really want to find a way to make it work so even someone with no programming skills can manipulate the code only with a little guideline. I still want to do all my designs in Muse and only use the product-options, the quantaty, the to-bag button and the bag itself from ecwid.

Now to the part about the code. Of course I changed the expanderName and Flag to the needed parameters which did work just fine in the regular product browser. But when it comes to the single-product-embedding it's not doing anything anymore. I've added a window.alert on the very end of the expander function to see when it goes off. It never did. Oh it did once, but I think that was a bug because everything on the website went bananas. I think the main problem is somewhere in this part:

Ecwid.OnPageLoaded.add(function(page) {
if ('PRODUCT' == page.type) {
checkExpandableOptions();

// Attach a handler to the 'expander' option
jQuery("div[class *= ecwid-productoption-" + expanderOptionName + "] input[type=radio]").click(function() {
checkExpandableOptions();
});
}

My java-knowledge makes me understand the code to a degree where I would say I can continue writing on it. But I just don't get the if-part from above... or at least I think it doesn't fit with the Single-Product-Embedding because it's not a whole page but a part of it...right? I also changed the .div's from productbrowser-details-etc. to singleproduct-options which had no effect.

Is anyone out there so kind to help me with this one? All I need is the examplecode from Matt to work on my Single-Product-Embedding... I would code the rest myself. We don't really like the product-browser, even with changed CSS. And making it look like the way we want would take too much time and require coding skills on a high level which we don't have. So unless we get this code working soon I have to look for another ecommerce solution unfortunately.

Thanks in advance!

Kind regards!

[enot]

Originally Posted by Kai Czauderna

Hello everyone, I need some help concerning coding.

Well actually it's not really coding but more like "finding the right names". What I am trying to do is getting dependant product options. For Example: different Types of T-Shirts have different Colors available and depending on what shirttype the user chooses, the other options fitting to his choice appear.

I already found this topic: http://www.ecwid.com/forums/showthread.php?t=18333
The Code provided from Matt (https://gist.github.com/makfruit/530...kfruit/5302479) worked as intended on the product browser. But my situation is different and I am kind of lost because I tried so much to make it work.

The Code works for the product browser but my page is made in Muse and the only part of "ECWID-embed-html" is the box containing the options, the quantaty and the "to-bag" button (and the bag itself but it doesn't matter) as you can see here in my testpage (http://davidshoptest.businesscatalyst.com/magni-1.html) on the right, underneath the way too large priceimage . The company I work in uses Muse for webdesign which is why I really want to find a way to make it work so even someone with no programming skills can manipulate the code only with a little guideline. I still want to do all my designs in Muse and only use the product-options, the quantaty, the to-bag button and the bag itself from ecwid.

Now to the part about the code. Of course I changed the expanderName and Flag to the needed parameters which did work just fine in the regular product browser. But when it comes to the single-product-embedding it's not doing anything anymore. I've added a window.alert on the very end of the expander function to see when it goes off. It never did. Oh it did once, but I think that was a bug because everything on the website went bananas. I think the main problem is somewhere in this part:



My java-knowledge makes me understand the code to a degree where I would say I can continue writing on it. But I just don't get the if-part from above... or at least I think it doesn't fit with the Single-Product-Embedding because it's not a whole page but a part of it...right? I also changed the .div's from productbrowser-details-etc. to singleproduct-options which had no effect.

Is anyone out there so kind to help me with this one? All I need is the examplecode from Matt to work on my Single-Product-Embedding... I would code the rest myself. We don't really like the product-browser, even with changed CSS. And making it look like the way we want would take too much time and require coding skills on a high level which we don't have. So unless we get this code working soon I have to look for another ecommerce solution unfortunately.

Thanks in advance!

Kind regards!

Hi!

The reason this script doesn't work with Single Product widget embedded to a page of your website, is the following part in the beginning:

Ecwid.OnPageLoaded.add(function(page) {
if ('PRODUCT' == page.type) {

I.e. it's only fired, if a page of Ecwid's product browser is loaded, and if this particular loaded page is "product details" page. You can read more about this in our documentation on JavaScript API, and it was created since Ecwid is an AJAX-based application, and without this API it wouldn't be possible to correctly (or, at least, easily) detect the loading of particular page inside product browser.
Single product widget, on the other hand, is located on full-featured page of your website, so in this case we won't need the part I mentioned above (and this particular event doesn't happen).

Yet, our JS API doesn't yet offer a way to detect complete loading of single product widget, so the script will have to be fired as soon as the page is loaded. Still, as a workaround, you could add delay to the script (to give the widget time to load completely), if it will be required.

Also, please refer to the following article for more info about our JavaScript API: http://help.ecwid.com/customer/porta...javascript-api

Hope this helps!

[Heimatstcke Shop]

Hey!

Thanks for the reply. Yeah I thought you would say something like that. It's quite unfortunate. But as a German saying goes "Problems make people creative", I kinda figuered another way of implementing the ecwidshop on the page using the old layout/design. Right now ecwid is more or less just the shopping card and the detail product view - everything wrapped in the standard popup ecwid provides when hitting the "shop now" button outside of the browser. I removed all the links that would bring the user back to the product browser to keep the popup just that. So it kinda works as intended and looks pretty nice and although it is not the way I wanted it in the first place I have to say, it might be better the way it is now. We plan on upgrading soon so that I can implement all the products.

Sincerely

[enot]

Originally Posted by Kai Czauderna

Hey!

Thanks for the reply. Yeah I thought you would say something like that. It's quite unfortunate. But as a German saying goes "Problems make people creative", I kinda figuered another way of implementing the ecwidshop on the page using the old layout/design. Right now ecwid is more or less just the shopping card and the detail product view - everything wrapped in the standard popup ecwid provides when hitting the "shop now" button outside of the browser. I removed all the links that would bring the user back to the product browser to keep the popup just that. So it kinda works as intended and looks pretty nice and although it is not the way I wanted it in the first place I have to say, it might be better the way it is now. We plan on upgrading soon so that I can implement all the products.

Sincerely

Well, our JavaScript API could be used with single product widget as well, and as in this case it shouldn't be executed immediately, simply adding a delay would be a relatively "safe" workaround.

Yet, the workaround that you implemented is great, thank you very much for sharing this on the forum!
Hopefully, it could help someone else with similar issue.

[Heimatstcke Shop]

I also fixed the problem that the popup partially disappears under my navigation menu simply by re-arranging the layers. Now I got a neat popup infront of everything which greys-out the shop/background when active and still doesn't block the users vision because it stays on the position where the "to the cart"-button was pressed. Once the product has been put into the cart, the popup disappears.

So for those who have a shop-layout and only want to use ecwid as a shoopingCART+payment-thingy, this is how I did it:

1) make space in your layout for the "to-cart" button and make a custom design if needed (just upload a picture on an image hoster and put the hotlink into the CSS - this worked fine for me. Remember to adjust min-height and min-width depending on your image size)
2) embed single product -> JUST THE BUTTON (you gotta do this for every product)
3) once you have the button, place it where you want
4) click on the button in the preview to make the popup appear
5) using inspect-tools from your browsers, change the font/style to what suits your design
6) IMPORTANT: since you don't want visitors to go to the ecwid productbrowser but to YOUR design, delete all the links by going "display:none;" on each one/all together (NOTE: If you still want to keep the log-in feature, this step might take a little longer. I have not done this so I don't know how well one can do that). Basic goal of this step: Prevent the user from getting back to the standard product-browser which would also be displayed in the pop-up.
7) OPTIONAL: arrange the layout of the detailed-product view so it looks the way you want

There you have it. That is basicly how I've done it. If you have problems with the popup disappearing behind content, try arranging the layers with z-index or have the popup in a position:fixed.

The Shop I am working on right now which uses this way of implementation can be found here: http://davidshoptest.businesscatalys...C3%A4nner.html (Site may change from time to time though).