Hype and Ecwid eCommerce Platform

I was wondering if the script generated from an ecommerce platform such as ecwid could be integrated into a hype document? I have the provided ecwid store code below:

<div id="my-store-9017192"></div>
<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?9017192&data_platform=code&data_date=2016-03-03" charset="utf-8"></script><script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","id=my-store-9017192");</script>
</div>

Can incorporate this into a Hype document? This code essentially allows provides the user a scalable / responsive interface to shop from your ecwid products

Create an HTML Widget in Hype and paste your code in the Inner HTML editor. Then you can adjust the width and height of the HTML Widget accordingly.

@rjmahesh @gasspence

Something (rough cut) like this?

Project file: EcwidDemo_JHSv1.hype.zip (20.7 KB)

1 Like

Hi Jim, thanks for the lightning quick response! This works, but is a little tricky with defined widget sizes. One trouble I’ve been facing however is that the ecwid cart (unfortunately) changes height once you select a product, but the widget height is already defined in hype. As a result the bottom half the ecwid widget gets cut off.

Is there a way to have the widget size update with the cart size as well? This would also need anything below it to get pushed down as well though…

Hi Arjun!

Is there a way to have the widget size update with the cart size as well? This would also need anything below it to get pushed down as well though.

Wrangling with widgets (in Hype) in not really in my realm of experience - answering your question was the first time I had used one. There might be a slick JavaScript solution for this issue but it is beyond my knowledge.

So another approach - see what You think... EcwidDemo_JHSv2.hype.zip (21.0 KB)

Demo here.

My experience was everything in the "960px" layout was larger than it needed to be anyway, so I made a change to that layout: the widget is now 700 pixels wide (instead of 960 px). The breakpoint is still the same. Page height & widget height have not changed.

One more adjustment - I selected the "Zoom contents"checkbox ("Metrics Inspector" > "Flexible Layout" area - just below the "Scale Behavior" menu).

The "600px" layout has this same checkbox selected - at these smaller sizes the "Zoom contents" settings makes things a bit smoother when adjusting the page size.