Currently I am trying to build such customization of product in Bigcommerce Storefront that allows to display image with dynamic text, which was entered in Textbox. That means product image preview should be shown INSTANTLY with new image with written text.
so that the end user will know how the final product will looks like and also same image should go in shopping cart as well.
I know that there is an app on Shopify named as Product Builder.
Is this possible to do it on Bigcommerce?
Thanks in Advance
It's definitely possible with some fairly advanced client-side code. Unfortunately I don't know of any plug and play systems or apps for Bigcommerce that will achieve what you're looking for, but there are a couple ways to get a live updating product preview if you're willing to get your hands dirty.
Here's an example from my site. Click the button under "personalize this item", and you'll see a live preview image like you describe in the modal. Enter some text and change the monogram style and color, the preview image should update pretty quickly every time you change an option. A solution exactly like mine may not be feasible for you, since that site is using a pretty complex React/Redux implementation built on an extensively customized Stencil theme... it's far from a turnkey solution. That said, you could implement something similar without needing a totally custom app.
The image preview itself in the example above is powered by IMGIX.com. They offer a great service at a fantastic price. Basically my system translates the user-selected Bigcommerce option into a URL string per IMGIX's URL-based API. Displaying the live preview is then as simple as changing the image's src attribute to the corresponding IMGIX URL on every input change. I do this in a React component that consumes a Redux store, but something similar could definitely be done in the framework of your choice, or plain old vanilla JavaScript. Cloudinary offers a similar (maybe even a little bigger) feature set to IMGIX, but I found IMGIX to be a bit faster, and the pricing was considerably less for my usage.
You could also write something that uses the HTML5 canvas to overlay text and effects on an image, and thereby avoid using a third-party service. I found such a solution to be way more work and way more taxing on the client-side device, but it'd definitely be another way to skin the proverbial cat.
There may be other viable solutions out there, but the above has been my experience in implementing something similar to what you're looking for on Bigcommerce. I hope this is helpful!
Related
Im making a videoplayer in a wp7 app. Im using mediaelement to show the video, and sets its source from a url. Functionality i wanted are play/stop-buttons, forwarding/rewinding, a progressindicator (for the progress of the video itself) and show a progressbar when it buffers. I have accomplished all above, using some customized grids, buttons and so on.
I did get some trouble though, which i dont want to bother you with here (its a mess) and which is why im asking the following:
Is there a standard (or downloadable) control for wp7 that does all these things for me and that works perfectly. Ive searched "everywhere" but couldnt find anything. It surprises me that this isnt an easy to use, built in control that is easy to customize, since standard videoplayers are something id guess alot of apps could take advantage of.
Anyone?
Here is a tutorial on how to create a Windows Phone 7 View Model Style Video Player.
This question is more philosophical than technical.
I've trained myself as a web developer back when web developers were called webmasters and my tool of choice was FrontPage, moving onto Evrsoft 1st Page 2000.
That was the last time I used an HTML image map.
Now it's HTML5, AJAX, vector canvasses, CSS 3D, jQuery, local storage, touchscreen Safari, you name it. The image map has faded into an obscurity where not even Google comes up with too many relevant results; a mandatory W3C Schools entry and some forum posts from 2004.
Obviously creating a website navigation or similar triviality using an image map was a bad idea back then and it certainly is inexcusable today.
But right now I have a task to create a polygon clickable area on top of a div with a background image.
I'd have no issue doing this in image map since it seems like it was designed for a use case exactly like this, and while I've done no tests, I couldn't imagine any browser dropping support for an element that worked beautifully for years. But I can't help but think that there must be a better way to do this today.
My web creation philosophy is to develop for IE5.5, and then design for Chrome edge. This means that the site first needs to work on a basic level on even the most antiquated browser, and then start adding JS & CSS to make it more beautiful, more usable, faster, simpler, friendlier and better.
As such, while I know I could do a canvas in Raphaël and add all kinds of snazzy hover effects and things, I think making functionality as simple as this shouldn't require a 89 kb (or X kb) JS library. Or even JS at all.
I don't know if CSS3 has capabilities to define polygonal areas, but while recognizing the great possibilities introduced by CSS3, I prefer keeping anything defined there as non-essential flair that would degrade gracefully.
So in today's webdev world, what would be the most cross-browser way to define a polygonal click area (preferably in a way that's grabbable by a jQuery .hover(), or at least a CSS :hover), that isn't dependent on JavaScript or CSS attributes available in a minority of browsers? Is image map really the only way to do it? What of mobile devices?
Why is using image maps for navigation inexcusable? It's a tool like any other; it has a time and place. Using imagemaps with javascript enhancements is backward compatible, degrades gracefully, and has 100% browser support. They don't need a plugin like flash.They've been supported practically since the dawn of the web browser. Just because something's old doesn't mean it isn't useful; quite the opposite, it means it's well supported.
I wrote a jquery plugin called ImageMapster to add effects to imagemaps so you could create interactive images without using flash. It would be easy to implement a tool that had the same functonality without Javascript support by replacing with a list in those cases. Personally, I think trying to write for the web without javascript is like trying to drive a car without tires. 99% of the web doesn't work without it any more. This isn't 1995. But if you really are concerned, the nice thing about imagemaps is the basic navigation functionality still works. There's no way to accomplish that just with CSS -- not even CSS3 if you have irregular shaped areas.
I want to make an app that shows pictures. But I want to be able to zoom in and out with gestures. I fixed this by including a toolkit into my project. But my actual question is, can I use or is there a control that's already created for me to show pictures like the picture library of the WP7 phone itself. I thought there wasn't but the Facebook app has a similar way of showing the pictures. Did Facebook rewrite the whole thing or is there a control somewhere that someone made?
The SlideView control in Telerik's RadControls for Windows Phone sounds like what you're looking for.
Have you tried a MultiScaleImage control? It's designed to work with multiple layers, but if you only specify one layer, it might suit what you're trying to do.
Anyone know of a Flash file (image) uploader that will force a user to resize and/or crop their image BEFORE uploading it? To then upload it as well.
Basically, I don't want my server processing the image resize/crop. I want to specify a target aspect ratio and have the user resize and crop their image to make it fit.
I've seen cropping uploaders before but they all seem to be server side. I saw a Flex one but I'm not sure it's "mandatory" -- Basically if the user just uploads the image without making edits, then I'd like the Flash to scale and fit the image into set dimensions...Leaving it I guess short in one direction to not stretch.
Anything like this out there?
Thanks!
I have a bounty running with a very similar question, be sure to take a peek - there isn't anything there yet that does client side resizing, though.
Also, SWFUpload is said to support it in the new Beta, but the feature is very sparsely documented right now. You would probably have to work on it to get it running the way you want.
http://www.adylevy.com/index.php/2009/07/22/multiple-files-uploader-with-preview-on-client-side/
there was another one called resize before upload but the site went down. though while I'm updating this and we're on the subject -- I don't see why you'd want to use Flash these days for this task. There are plenty of JavaScript options and now we also have Google's Dart (which builds JavaScript).
I'd like to implement a date picker using a calendar. Before I go ahead and try to build one, is there something that does this already?
I've looked at the date picker in Interface Builder and it's pretty much just a text field as far as I can tell. And looking (albeit quickly) through the developer docs, it seems there's plenty of date related functionality available, but not very much in the way of an interface. So If I do go ahead and build my own, what's the best line of attack
I've already built what i need in HTML/CSS and Javascript with jQuery for a website I'm working on, so my initial thought was that I could use a web view and display that, assuming there's some way to detect events happening inside a web view. But this feels a bit cheap to me. What would be the recommended route?
Use NSDatePicker. You can change it to be a Calendar or Clock, or both, using the Inspector:
(source: quicksnapper.com)
This is what it looks like:
(source: quicksnapper.com)