Webstudio

Log inLog into community

Join the Webstudio community

Updated 4 months ago

Whats wrong here?

Whats wrong here?

At a glance

·

I have a HTML script:
<div class="product">
<h2 class="product-name">Weidehütte Special 2 mit isoliertem Dach, Rädern, Tränke und Solar</h2>
<p class="product-price">19000.99€</p>
<form data-add-to-cart data-product-id="product2">
<input type="number" name="quantity" value="1" min="1">
<button type="submit">Add to Cart</button>
</form>
</div>

I tried to rebuild it in webstudio but the functionality isn´t the same.
I am trying to build a product page and when I use an HTML embed instead of the webstudio components it works.
My page:
https://p-714f1503-079f-438e-8a34-e24eb1ab0a6f.apps.webstudio.is/?authToken=2c5f5dc4-f356-4b38-b55c-74d624e30f8c&mode=preview

B

c

8

39 comments

What exactly isn't same?

That´s what I´m wondering

I think the content on webstudio is the same as the html script

But the page only works with the html

You have an error VM206:6 Uncaught ReferenceError: initializeCart is not defined

There's no function with that name in your javascript modules

There is a cart initialization script
And when I use the same structure but as a html embed it works

Rather than spending too long trying to troubleshoot this, can I ask how you're going to store cart information on here? I'm not sure if this is the kind of system that would work well as an ecommerce platform

Browser

I guess

Okay, well anyway, my first suggestion still stands. Are you missing an external script to load in initializeCart? There's no function in either code snippet

<script>
// Ensure cart is initialized after DOM is loaded
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initializeCart);
} else {
initializeCart();
}
</script>

Check again, I updated the "improved cart script" script. But it still doesn´t do it.
I mean it works with the html embed.
I pasted it below.

It's working fine for me now

the not embed one

Really?

Attachment

Thats the embed

Nope that's the script

Attachment

You see, there is a div called product and an embed called porduct

The embed works but the div doesn´t

It´s the same but the div doesn´t work

try adding the data-add-to-cart attribute to the other

Attachment

That makes it work

It works! Thanks!

Do you have another suggestion to build an ecommerce store with ws?

No sorry, I would just look at an off the shelf option. This feels like it would be an awful lot of work for not much gain. Search open source ecommerce in a language you know

I know german and english 😄

If you persue though in WS please come back and let me see cause I would like to see it

no sorry I meant coding language

No, but seriously I looked into medusa and vendure as a headless ecommerce solution.
But I don´t think I can pull it off alone.

What are you selling. Does it need a cart?

If not look at paypal items payment buttons

I will try with this solution as it stores the data in the browser across pages. Of course sometimes it will happen that a cart may be lost, but I think I have to deal with this later

I need a cart. I have a shop for metal furniture which is running on wordpress at the time and I´d like to move to ws

So likely people will buy more than one item at a time?

Yes, already happening

Also I need a costum checkout and don´t want to pay the payment fees

I mean you could be spending 100+ hours trying to get this to work or get an off the shelf system and be up and runnign straight away. How much is your time worth an hour? Just something to think about

Add a reply

Sign up and join the conversation on Discord

","dateCreated":"2024-09-24T16:11:49.347Z","dateModified":"2024-09-24T16:11:49.347Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":12,"upvoteCount":0},{"@type":"Comment","text":"Check again, I updated the \"improved cart script\" script. But it still doesn´t do it.I mean it works with the html embed. I pasted it below.","dateCreated":"2024-09-24T16:15:02.970Z","dateModified":"2024-09-24T16:15:02.970Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":13,"upvoteCount":0},{"@type":"Comment","text":"It's working fine for me now","dateCreated":"2024-09-24T16:16:24.285Z","dateModified":"2024-09-24T16:16:24.285Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":14,"upvoteCount":0},{"@type":"Comment","text":"the not embed one","dateCreated":"2024-09-24T16:16:36.397Z","dateModified":"2024-09-24T16:16:36.397Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":15,"upvoteCount":0},{"@type":"Comment","text":"Really?","dateCreated":"2024-09-24T16:17:13.208Z","dateModified":"2024-09-24T16:17:13.208Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":16,"upvoteCount":0},{"@type":"Comment","text":"","dateCreated":"2024-09-24T16:17:34.296Z","dateModified":"2024-09-24T16:17:34.296Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":17,"upvoteCount":0},{"@type":"Comment","text":"Thats the embed","dateCreated":"2024-09-24T16:17:51.220Z","dateModified":"2024-09-24T16:17:51.220Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":18,"upvoteCount":0},{"@type":"Comment","text":"Nope that's the script","dateCreated":"2024-09-24T16:18:01.247Z","dateModified":"2024-09-24T16:18:01.247Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":19,"upvoteCount":0},{"@type":"Comment","text":"","dateCreated":"2024-09-24T16:18:25.289Z","dateModified":"2024-09-24T16:18:25.289Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":20,"upvoteCount":0},{"@type":"Comment","text":"You see, there is a div called product and an embed called porductThe embed works but the div doesn´t","dateCreated":"2024-09-24T16:19:33.289Z","dateModified":"2024-09-24T16:19:33.289Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":21,"upvoteCount":0},{"@type":"Comment","text":"It´s the same but the div doesn´t work","dateCreated":"2024-09-24T16:20:17.854Z","dateModified":"2024-09-24T16:20:17.854Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":22,"upvoteCount":0},{"@type":"Comment","text":"try adding the data-add-to-cart attribute to the other","dateCreated":"2024-09-24T16:23:22.175Z","dateModified":"2024-09-24T16:23:22.175Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":23,"upvoteCount":0},{"@type":"Comment","text":"That makes it work","dateCreated":"2024-09-24T16:24:36.670Z","dateModified":"2024-09-24T16:24:36.670Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":24,"upvoteCount":0},{"@type":"Comment","text":"It works! Thanks!","dateCreated":"2024-09-24T16:25:10.317Z","dateModified":"2024-09-24T16:25:10.317Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":25,"upvoteCount":0},{"@type":"Comment","text":"Do you have another suggestion to build an ecommerce store with ws?","dateCreated":"2024-09-24T16:25:50.265Z","dateModified":"2024-09-24T16:25:50.265Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":26,"upvoteCount":0},{"@type":"Comment","text":"No sorry, I would just look at an off the shelf option. This feels like it would be an awful lot of work for not much gain. Search open source ecommerce in a language you know","dateCreated":"2024-09-24T16:26:45.327Z","dateModified":"2024-09-24T16:26:45.327Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":27,"upvoteCount":0},{"@type":"Comment","text":"I know german and english 😄","dateCreated":"2024-09-24T16:27:23.709Z","dateModified":"2024-09-24T16:27:23.709Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":28,"upvoteCount":0},{"@type":"Comment","text":"If you persue though in WS please come back and let me see cause I would like to see it","dateCreated":"2024-09-24T16:27:30.023Z","dateModified":"2024-09-24T16:27:30.023Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":29,"upvoteCount":0},{"@type":"Comment","text":"no sorry I meant coding language","dateCreated":"2024-09-24T16:27:36.846Z","dateModified":"2024-09-24T16:27:36.846Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":30,"upvoteCount":0},{"@type":"Comment","text":"No, but seriously I looked into medusa and vendure as a headless ecommerce solution. But I don´t think I can pull it off alone.","dateCreated":"2024-09-24T16:28:46.954Z","dateModified":"2024-09-24T16:28:46.954Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":31,"upvoteCount":0},{"@type":"Comment","text":"What are you selling. Does it need a cart?","dateCreated":"2024-09-24T16:29:48.555Z","dateModified":"2024-09-24T16:29:48.555Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":32,"upvoteCount":0},{"@type":"Comment","text":"If not look at paypal items payment buttons","dateCreated":"2024-09-24T16:30:01.164Z","dateModified":"2024-09-24T16:30:01.164Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":33,"upvoteCount":0},{"@type":"Comment","text":"I will try with this solution as it stores the data in the browser across pages. Of course sometimes it will happen that a cart may be lost, but I think I have to deal with this later","dateCreated":"2024-09-24T16:30:24.282Z","dateModified":"2024-09-24T16:30:24.282Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":34,"upvoteCount":0},{"@type":"Comment","text":"I need a cart. I have a shop for metal furniture which is running on wordpress at the time and I´d like to move to ws","dateCreated":"2024-09-24T16:31:09.085Z","dateModified":"2024-09-24T16:31:09.085Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":35,"upvoteCount":0},{"@type":"Comment","text":"So likely people will buy more than one item at a time?","dateCreated":"2024-09-24T16:31:34.835Z","dateModified":"2024-09-24T16:31:34.835Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":36,"upvoteCount":0},{"@type":"Comment","text":"Yes, already happening","dateCreated":"2024-09-24T16:33:07.330Z","dateModified":"2024-09-24T16:33:07.330Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":37,"upvoteCount":0},{"@type":"Comment","text":"Also I need a costum checkout and don´t want to pay the payment fees","dateCreated":"2024-09-24T16:33:36.589Z","dateModified":"2024-09-24T16:33:36.589Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"commentCount":0,"comment":[],"position":38,"upvoteCount":0},{"@type":"Comment","text":"I mean you could be spending 100+ hours trying to get this to work or get an off the shelf system and be up and runnign straight away. How much is your time worth an hour? Just something to think about","dateCreated":"2024-09-24T16:48:19.504Z","dateModified":"2024-09-24T16:48:19.504Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/12bc051b-ad2b-4aff-87ac-f6ea7aec0561","name":"8BitRazer","identifier":"12bc051b-ad2b-4aff-87ac-f6ea7aec0561","image":"https://cdn.discordapp.com/avatars/968207416783171594/da2e54c9f12f3be9c70c5c05a129d79d.webp?size=256"},"commentCount":0,"comment":[],"position":39,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/2eb6844c-2c62-4633-8a07-bf984e45632e","name":"cramses.","identifier":"2eb6844c-2c62-4633-8a07-bf984e45632e","image":"https://cdn.discordapp.com/embed/avatars/4.png"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]