New Shopping Cart Widgets

Kevin, Check this thread http://fineartamerica.com/showmessages.php?messageid=2126195

Hi, Thanks so much for responding and for the link Christina. But I'm not sure if it answers my question. I am interested in using option 1 which is the stand alone shopping cart. Here is a picture of what my html looks like…

http://fineartamerica.com/widgetpreview.html?memberidtype=artistid&memberid=422622&widgetid=1&domainid=0

As you can see there are no key words or galleries visible on the left to filter the images. No tags to select from.

Now here is a link that FAA provided in their email….It is for a site that uses the stand-alone shopping cart and is presented upon clicking a "Buy Prints" link on their page.

http://www.photoblog.ie/buy-prints/

This link does have those filters. I can see where you can customize your HTML but it seems it's only for colors and such. Or do I need to go into the HTML itself and change it?

Thank you.
Kevin

Does Kevin's email refer to something out now with shopping carts that is newer than the year old post that Christina posted link to?

I believe so Carolyn. I just received the email 4 days ago (1/11/16) and they said it was all new, but when I read the year old link that Christina provided, it sounded like that message was describing what I just received. In any case, the example links they sent on 1/11 in their email for the stand-alone cart does not look like the HTML I have in my new widget section for the stand-alone cart (option #1).

Thanks,
Kevin

Kevin, that's the most recent information regarding widgets that I'm aware of. Have you tried adding your member id to Sean's example in the other thread to "make them open up to specific images"? That's the only one that has filters on the left hand side. Check this link, is that what you want?

https://fineartamerica.com/widgetshoppingcart/artwork.html?memberidtype=artistid&memberid=422622&domainid=0&showheader=0

Christina - Yes, that is exactly what I want! Did you just plug in my ID into the HTML from Sean's link? I had tried a bunch of things to alter my HTML to mimic his but it didn't work.
Thanks so much if this is what you did!!!!! I imagine I would just need to add the above to the HTML from my widget section?
BTW, here is part of the email I received...

Have you ever wanted to sell prints directly from your own website? Now you can! Fine Art America is pleased to announce the release of our new iframe shopping cart widgets. The new widgets are a huge... huge... huge improvement over the previous design. Simply login to your account, click on the "Shopping Cart Widget" icon, pick out the widget that you want use, and then copy and paste the provided HTML code onto your website. It's that easy. As soon as you paste the HTML code onto your website, the shopping cart will instantly appear. Your website is now a fully-functional e-commerce site with the ability to sell canvas prints, framed prints, metal prints, acrylic prints, greeting cards, iPhone cases, Galaxy cases, and more! Want to see one of these shopping carts out in the wild? Check these out: Example #1Example #2Example #3Example #4Example #5Example #6Example #7Example #8Example #9Example #10Example #11 Just copy... paste... and you're in business! It's really that easy. The shopping carts are 100% "responsive". That means that they'll automatically adapt to the size of the browser and display perfectly on iPads, iPhone, Galaxy tablets, etc. A sample screen capture is shown, below. For each widget, you can customize the appearance (e.g. font colors, background image, etc.) to match the theme of your website.

Regards,
Kevin

Here's another thread on the subject of opening to a specific page / products

http://fineartamerica.com/showmessages.php?messageid=1545623

Yay! I'm glad you figured it out Kevin. I'm not sure why you received the email? It doesn't look like anything has changed and all the tweeks to the widget code still works.

Christina - Thanks so much for your help!! I figured since I just got this email, it must be new (cause that's what they said) :-) Maybe they sent it to me since I've only been a member for about 2 months?
In any case, I'll check out that link you just gave me as well for the info I need.

Thanks again!
Kevin

Hmmm, What's interesting is that when I grab my URL contained in the HTML they provided (as described in your links) and place it in the URL line, the shopping cart displays like I want it!

So evidently it's something in the HTML they gave me OUTSIDE of the URL that is suppressing the display of galleries and keywords on the left. I'll have to see what it may be!

Thanks,
Kevin

Kevin,

I see the same thing with mine. It seems to have something to do with oprning the link in the iframe.

I've been playing with the widget code. You can see what I've done and how it's working here: http://selanderfineart.com/index.html

The "Buy Prints" page uses the widget code as grabbed from FAA.

In other places, I'm opening the widget in a Highslide window to display the shopping cart or specific images.

But I'm not getting the sidebar anywhere.

Kevin,

I just tried something I hadn't tried before. You need enough width to display the side bar. Try this page: http://selanderfineart.com/printstest.html

If you have enough screen width, you should see it.

Hello again,

I'm afraid I still have the problem of the galleries and key words NOT displaying on the left. Here is the HTML code that FAA provides: (I had to REMOVE the less than/greater than signs so this displayed properly here)

(script type='text/javascript' src='https://fineartamerica.com/widgetshoppingcart/widgetscripts.php'/script
iframe id='pixelsshoppingcartiframe' src='https://fineartamerica.com/widgetshoppingcart/artwork.html?memberidtype=artistid&memberid=422622&domainid=0&showheader=0&height=600&autoheight=true' style='display: inline-block; width: 100%; height: 820px; border: none; overflow: hidden;'/iframe)

When I put the URL contained above
(https://fineartamerica.com/widgetshoppingcart/artwork.html?memberidtype=artistid&memberid=422622&domainid=0&showheader=0&height=600&autoheight=true)
in the URL line, the shopping cart displays CORRECTLY.

I have tried removing the STYLE parameter
(style='display: inline-block; width: 100%; height: 820px; border: none; overflow: hidden;)
from the above HTML, and that did not change anything.

I also tried removing
(id='pixelsshoppingcartiframe')
And that did nothing.

Since the URL works, it must be something in the HTML that FAA provides that is suppressing the proper display of the list of galleries and key words on the left. Does anyone know what it could be???

Thanks,
Kevin

http://1stangel.co.uk/lady-isabella-francesca-abigail-shores-oil-paintings-and-photography-for-sale/ shows the sidebar because I am using a full width template
http://abbie-shores.com/canvas-prints-acrylic-and-metals/ doesnt because there is not enough room for it

Thanks William - I see yours so I should have enough screen width.

I understand about the width, but I AM seeing the sidebar when executing only the URL.

It's the width of the iframe that prevents it, if it's too narrow.

What's the pixel width of the area of your webpage where you're displaying the widget?

My oage mentioned aboive was laid out a while ago and I was formatting it for the old 4:3 montors. Now that essentially everyone has wide screens, I'll be expanding the width to what's available. This will give the iframe enough width to display the side bar as in my test page above.

When entering the url into a browser, you have the full screen width to display it.

When adding the code to a webpage, the width of the iframe is constrained by the space availabe on the page.

Kevin,

I did some quick edits on my site: http://selanderfineart.com/index.html (you may have to refresh the page ot load the changes)

Allowing a pixel width of 1200 for the iframe it shows the side bar with galleries and tags.

as said, it is the width of the area the iframe is able to fit into.

The full width page shows the sidebar but a narrow width template doesnt as there is not enough room for both

Thanks everyone. I'm on an iMac wide screen - I'll have to check the resolution but I'm sure I should be okay, Still not sure why the URL displays properly and the HTML does not. My screen resolution is 2560 X 1440 BTW and I'm not trying yet to display it in my web page. I'm merely trying to display it from FAA when I execute their HTML for my widgets!

Kevin

Kevin,

It's not just your screen resolution. It has more to do with how much space the webpage has to display the iframe.

For example, if a webpage has a fixed width of 1000 pixels, there isn't enough width to display what you hope to. Do you know how much width you have where you're placing the widget code?

Thanks William and everyone! I really appreciate you taking the time to answer.

So far I have NOT placed the code on my web page. I am merely executing the code from FAAs page - the "behind the scenes" page for me that contains the various shopping cart widgets. I am executing the FIRST - the stand-alone shopping cart.

What's interesting is that when I execute the code for any of the other widgets, the graphic for those widgets come up, and when I click on their "Click Here to Purchase" links, it brings up the Stand-Alone shopping cart #1 CORRECTLY.

So I am really confused. It seems strange to me. I'll keep trying.

Thanks,
Kevin

Don't worry that the preview doesn't show the side bar, mine doesn't either. They just didn't give quite enough width to the preview for the side bar to show. Once you copy the code to your page, you should get what you want as long as it can display with enough width. The code is the same, it displays according to the available width.

Notice that with the other previews, when you click to purchase, the window is much wider so you see the side bar options.

What I'm seeing, is It takes a width of 1200 pixels (actually it works at 1199) to get the side bar to diaplay.

ThanksWilliam. When I left the width set to 100% within the iframe, it doesn't work, when I actually set it to a number of pixels (1200) it DOES show. I thought the 100% would allow for viewing on different computers/mobile devices.

BTW, I usually have my browser (Safari) stretched to almost the size of my 27" screen. When I viewed Isabella's 1st link where she said the side bar should be shown, I didn't see it But when I dragged my browser window to make it SMALLER, it was then that I saw the sidebar on her page! When I stretch out the browser window to be larger, the sidebar disappears.

I'll try dropping the code in a custom window on my site and play around with it and see how it displays on my desktop, iPad and other devices.

Thanks again!
Kevin

William - I've been checking out your site - very nice! I noticed something with my page that I'm coding, and I notice it happens with yours as well.

When I go to your Purchase page, the stand-alone shopping cart appears at a certain height/width. When ever you click on a filter, either a gallery or a tag key word, the height of the table gets slightly larger. It seems every time you apply a filter, the height of the shopping cart continues to grow slightly at the bottom. It seems like FAAs code may be a little buggy or something.

Let me know if you notice this as well.

Thanks,
Kevin

All the 100% width means is, use all of the spae available. How much space is actually available depends on the html/css of the page containing the widget code.

I leave the width in the iframe code set to 100% and drop the code into a div on the webpage. That way, I can use CSS to contol size and positon of the div containing the widget code and the shopping cart then uses the entire width of the div. When the div is at least a 1200 pixel width, then the side bar displays.

This also allows you to use media queries to define an alternative layout for mobile devices.

Thanks William. Check out my post above about the height of the shopping cart...

Kevin,

I do see what you're describing. The initial height of the iframe is as defined in the code, but it grows from there as filters are applied.

Interstingly, if I eliminate the script from the code and just place the iframe code in the page, then that doesn't happen. It seems to me that the script isn't necessary for the full size cart anyway, but is needed for the functionality of the small widgets.

Thanks William - Appreciate all your help. I'm just trying to adjust my code so it accomodates mobile devices etc. I'm on Zenfolio and I see their mobil site is good but I'm having problems displaying correctly on an iPad for instance. iPhone seems good. I see that yours is displaying correctly and adjusting appropriately. Would you mind displaying theHTML you are using for your shopping cart? If you can't, I understand. I have a feeling Zenfolio has some restrictions in terms of max width of tables (944) which may cause problems with displaying FAAs shopping cart (1200px). Also, I'd like to see how you are accounting for diff devices - mine still seems to be fixed.
Thanks,
Kevin

You can see the html by viewibg the page source within your browser but I'm not sure that will help much for a zenfolio site. Mine is totally custom html/css.

As for what I did to get it to display properly on other devices, the short answer is nothing. I wrote the code years ago before media queries and responsive design came along. The site is actually in dire need of modernization. All I did was fix the width of the page to a constant value that would fit on most monitors. Back then, not everyone had widescreens. When a webpage is of fixed widrh with no media queries, mobile devices scale the page to fit their displays. This works ok as long as the page looks decent in both a vertical and horizontal view. Of course this often results in a lot of dead space on the sides of a widescreen display or bottom of the mobile. Hence the reason for media queries and alternate layouts.

I've never used zenfolio, but I suspect that they're handling the media queries and responsiveness behind the scenes. What you can do along these lines depends on what customizations the platform allows.

Thank William. Zenfolio has "custom" pages available where you can design it yourself basically with your own code if you want, and still use a general theme "look" if desired - that's where I'm going to create this shopping cart hopefully. On these custom pages you can directly edit the code or create your own. But generally most of the pages you use are part of their template.

Zenfolio has a mobile site which looks good, and the desktop site is supposed to be dynamic, but mine is off probably cause I chose a "theme" for the home page which takes advantage of a wide screen - I'll probably have to change this, at least the "home" screen. I think the gallery and image pages seem okay.

Thanks again. Now I just have to block out some time to really take a hard look at my site, especially as viewed from a tablet, and see what I can do!

Kevin

Kevin,

I created a trial account in Zenfolio to look at your issue. Check out this sample page: http://wstest.zenfolio.com/purchase-prints

To do this,I embed this code in the custom page (replace the XXXXXX with your memberid)

<style>
#cartbox{
margin-left: -130px
}
</style>

<div id="cartbox">
<iframe id='pixelsshoppingcartiframe' src='https://fineartamerica.com/widgetshoppingcart/artwork.html?memberidtype=artistid&memberid=XXXXXX&domainid=0&showheader=0&height=600&autoheight=true' style='display: inline-block; width: 1200px; height: 600px; border: none; overflow: hidden;'></iframe>
</div>



the column width they give to use is 944 pixels, I set the left margin of my div to -130 pixels to bring the iframe back to center.

If your theme uses a border here, you'll see it on the left where the iframe overflows the defined area.

To eliminate this, click on the source button above the box for the embedded code and change the "themeBorder" to false.

I hope this helps.

William,

Thanks so much! You've gone above and beyond the call of duty! :-)

That really is nice of you. I'm going to work on this this afternoon, as well as correct the home page. I've had this in place since I started the account and never considered tablets so much, especially since Zenfolio created a modification for mobile phone users.

Anyway what you coded on the site looks great, centered and everything which I wasn't getting Believe it or not, I was once an IT programmer, but I coded in COBOL so that doesn't count!

Thanks again William, you've saved me much time and headache!

Kevin

You're welcome, Kevin.

Zenfolio looks intriguing and not that expensive. I was interested to see the level of customization they offered and this seemed an interesting challenge.

I'd like to see your page when you're done.

I've coded in a number of languages going back to FORTRAN, if you can believe that. Now I'm focusing on html/css, php/MySQL and javascript.

I just looked at the sample page on a Kindle and saw that the 1200 pixel width and margin offset cause the cart to spill off the sides of the screen. Here's another solution that scales to the viewport using the html5 vw and vh units. (percent of viewport width and height) The div position is fixed a percentage of the width from the left.

<style>
#cartbox{
width: 90vw;
height: 70vh;
position: fixed;
left: 5vw;
}
</style>

<div id="cartbox">
<iframe id='pixelsshoppingcartiframe' src='https://fineartamerica.com/widgetshoppingcart/artwork.html?memberidtype=artistid&memberid=XXXXXX&domainid=0&showheader=0&height=600&autoheight=true' style='display: inline-block; width: 100%; height: 100%; border: none; overflow: hidden;'></iframe>
</div>

William - Great! From what I've read in some of the forums at Zenfolio, kindle display has been a problem but I'm not sure if it's ever been resolved. I'll try out your changes!
And yes, I let you know when I have the page completed. Right now I'm changing my home page using some of the older templates they offer. Haven't found one yet that works for me yet.
Thanks again,
Kevin