My example used the V5 Cartloom snippet. It’s the last one in the list of snippets in the product editor.
Either will work, just needs tweaking. But yes a set components with more options for styling should be developed.
Maybe not available in the free version, not sure.
@Doobox I’d gladly pay for a set of components that would allow for some tweaking and the entry of the product ID. Also one for adding a View Cart button to the page.
I did not use the advanced versions of the snippets from Cartloom.
Here we go. An unofficial Cartloom component. (Not affiliated with Cartloom, just my own personal Cart of choice).
The component gives you a drop zone where you must place a standard Elements button (so you can style the button any way you like).
The Component has three modes:
You must provide your Cartloom username in all modes. This is not private. It’s normally your Cartloom username for login, and also the first part of your Cartloom store url eg:
you.cartloom.com
Where “you” is what you need to provide as the username.
Product ID you retrieve from Your Cartloom admin for each product.
Add to Cart mode, is self explanatory.
View Cart mode, also self explanatory.
Quick Buy mode, takes the visitor straight to checkout to purchase the product.
Even you you haven’t signed up to Cartloom, Your free to test the component using my settings above 
Download the component here: http://www.garysimpson.co.uk/vault/temp-sharing/shared-components/Cartloom.elementsdevpack.zip
Wow, this is awesome and is going to save me creating a massive number of custom components for each of my products.
I’ll give it a test run and report back.
@Doobox I tried this and it works great for certain cases, but not the one I need. Below is a screenshot showing what I need to display. It also shows the trigger required by your component above the stuff displayed by my Cartloom snippet.
I can see a use for this but because I have options that need to be collected to make the purchase I would need to display the product as shown.
Would it be possible to add this as another option to your component?
Show me the cartoon snippet you used to produce that before you tried the component.
@handshaper I think all you need for what your doing is a reusable HTML component.
That’s easy enough for you to create your self.
In the template area put:
{{snippet}}
In hooks put:
const transformHook = (rw) => {
rw.setProps({
node: rw.node
})
}
exports.transformHook = transformHook;
In properties put:
{
"groups": [{
"title": "Snippets",
"properties": [{
"title": "Cartloom Snippet",
"id": "snippet",
"responsive": false,
"textArea": {
"default": "",
"subtitle": "Paste your cartloom snippet here"
}
}]
}]
}
That’s it now you can reuse that html component for all your snippets.
It gives you a text area in the settings to paste a snippet.
Here is what I was using in the example.
<!--// CartLoom v5 Snippet for CNC F8 QUAD //-->
<script data-cartloom-buy="211175" data-cartloom-type="styled">
if (typeof Cartloom === "undefined") {
var Cartloom = {};
(function(){
var script = document.createElement("script");
script.src = "https://username.cartloom.com/v5/cart.js";
document.body.appendChild(script);
})();
}
</script>
<noscript>
<a href="https://username.cartloom.com/v5/cart/quickbuy/211175" target="_blank">BUY NOW</a>
</noscript>
I’ll try your idea of the text area to paste the snippet into. Although it seems it would be more convenient to have the component ask for the username and product ID as the rest of the snippet never seems to change.
Yes, so you just need to create one html component as I showed you above, that you can re-use for all your products. Just paste the entire script into the text area you new html component provides.
.
OK, I tried this approach and it works just fine.
I’m going to see if I can figure out to create a component that would take just the ID of the product. Made a few attempts but they have not worked yet.
Make a copy of mine you downloaded. Crack it open (right click > show package contents), or just drop it on your code editors icon. See how it was done. You’ll find there’s lots you could leave out if its just for your own use.
@Doobox Will give it a go. I have simple version working that just takes the product ID. User name is hard coded for now.
Thanks for all your help, much appreciated.
@Doobox Thanks for all your help I finally got it figured out and now have a custom Cartloom component that takes the username and product ID as settings. Works like a charm.
Much appreciated. Truly the “Power of Elements.”
I’m still in the early process of working out how to set up a new e-commerce site, so wondering if you or others have plans to develop those components you’ve been working on for shopping cart integrations as products for the marketplace.
I have written a set of Vibracart Pro components for Elements. If any VCpro users would like to try them out please contact me via my support system.