Have I missed something? Has there been any discussion on how elements will have eCommerce (online shopping cart) linked to 3rd party or built in to elements. I have watched all your videos Dan. will the be 3rd party plugins?
macca
We’ve not announced anything on this just yet, but we do have some ideas on how we’d like to officially integrate a store into Elements.
Elements is also open to third-parties, so anyone will be able to build components for Elements - over time I think they’ll be a whole host of options for online stores.
What store service are you currently using/want to use?
I have been testing integrating Ecwid into Elements via their code snippets and custom HTML components and have a working experiment. For it to be viable for building a store I would need to create a more generic HTML component that would accept a store and product ID. Seems very doable but have not had the time to do more experimentation.
Here is what it looks like in the browser.
Absolutely doable! You could hook up some of the unique values to some UI properties. Happy to help on this if you need me to whip something up…
If you paste your Ecwid code here I could convert it into a custom component to get you started!
1 Like
This is the typical format of the code for a product.
<div class="ecsp ecsp-SingleProduct-v2 ecsp-SingleProduct-v2-centered ecsp-Product ec-Product-610948373" itemtype="http://schema.org/Product" data-single-product-id="610948373"><div class="ecsp-title" itemprop="name" style="display:none;" content="GB24 STARTER KIT"></div><div customprop="options"></div><div customprop="qty"></div><div customprop="addtobag"></div></div><script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?9999999&data_platform=singleproduct_v2" charset="utf-8"></script><script type="text/javascript">xProduct()</script>
The two pieces of data that need to be collected to set this up are the STORE ID (in this case 9999999, not the real ID) and the PRODUCT ID (in this case 610948373). These are the only things that change. Although the store ID only really needs to be collected once, the product ID is the main piece that changes.
I have it setup like this (you wouldn’t need to edit the code, just change the Product ID in the inspector).
I didn’t see a store ID in the code sample you posted, if you let me know of any other changes or variables you need I can work those in then post the project here for you to use!
EDIT: Ah I see the Store ID is in the javascript at the bottom… I will update the sample to a way to add in the store ID form the inspector!
You’d need to put the store ID in every component, unless you wanted to put that in the global code area manually.
Anyway, here’s what I have - let me know if this is okay and I’ll post the project up!
This looks perfect, how can I get the code. I tried copying it form the screenshot but it did not work.
- Create a new custom component.
- Copy the following code and paste it in the Template area of your new Custom Component.
@if(edit)
<div class="text-md pt-6 flex text-center justify-center">
Product ID: {{productID}} from Store: {{storeID}}
</div>
<div class="text-xs text-black-100 pb-6 flex text-center justify-center">
Replaced with Ecwid product when previewed or published
</div>
@else
<div class="ecsp ecsp-SingleProduct-v2 ecsp-SingleProduct-v2-centered ecsp-Product ec-Product-{{productID}}" itemtype="http://schema.org/Product" data-single-product-id="{{productID}}">
<div class="ecsp-title" itemprop="name" style="display:none;" content="GB24 STARTER KIT"></div>
<div customprop="options"></div>
<div customprop="qty"></div>
<div customprop="addtobag"></div>
</div>
@endif
- Copy the following code and paste it in the Properties area of your custom component.
{
"groups": [{
"title": "Ecwid Settings",
"properties": [
{
"title": "Store ID:",
"id": "storeID",
"text": {
"default": "Your Store ID",
"subtitle": "Ecwid Store ID, e.g. 9999999"
}
}
,
{
"title": "Product ID",
"id": "productID",
"text": {
"default" : "Your Product",
"subtitle" : "e.g. 610948373",
}
},
]
}]
}
- All done — Your Ecwid custom component is ready for use!
Let me know how you get on.
Aloha Dan,
This did not work as it seems to be missing the Javascript that is needed to run things in Ecwid. I pasted the Javascript from the original code into the Javascript section of the custom component, but I couldn’t figure out how to add the STORE ID into the script.
The other thing that is going wrong is that somehow adding the custom component is breaking the grid that the two items are placed into. Normally, they are in a two column grid, but when the component is added it becomes a single component. Plus there is a huge amount of whitespace above the product component.
UPDATE: I figured out why the grid was being messed up there was a missing </div>, which once added fixed the problem.
If you need the real store ID to test this let me know.
I did a lot more playing around with this trying to get it to work. it definitely appears that the scripts need to be present in order for things to work correctly. I added them to the custom component, but the components still do not work.
However, if I add one of my original custom HTML components with the ecwid code to the page, then the custom components work correctly. I’m assuming this is due to the presence of the Javascript in the Ecwid code.
I probably did something wrong when I added the scripts to the custom component. So I’ll wait to see what guidance you can provide on how the scripts should be included.
I think more information on adding scripts would be good, example etc.
The easiest way to add a store to “any” web site could be Cartloom’s Site Embeds. Just paste in a simple snippet, and viola!
Example site built in RW and using aforementioned “snippet”.
Can you send me your project (via Elements Cloud), with the working code you had pasted in. I can then use that to create you the customer component and get it working in your project!
Aloha Dan,
Here is the link to the project - elementsapp://downloadDocument/61S9cIxrnSrn
The test case is on the Catalog page with the first two items using the custom component.
Hmm, do you have the page with the working code that you posted a screenshot?
It would be better if I could take that code and create the custom component from it…
@handshaper ah-ha! I have it working now, you were just missing the javascript. I also added another property for Product Name.
Here’s the updated project - elementsapp://downloadDocument/0VrNlHKsSZbM
Let me know if you need anything else!
That is exciting. For some reason I don’t seem to be able to get this project downloaded and running. It does the download and then gets stuck saying it is “Preparing Document.”
Any thoughts on wht it won’t download fully?
same for me