RockCommerce Progress

[bernhard]

I got great input from @BrendonKoz and @monollonom (and others) in the thread about RockCalendar development, so I thought I'd start a thread for RockCommerce too, as this module is finally taking shape 🚀

Today I implemented automatic image changing when a color option of the product is changed. This is so great, I had to share that!!! 😍

Now what is so great about this? The implementation!

It will work with ANY frontend. Really. No matter if you are using Tailwind, UIkit, Bootstrap, whatever. All you have to do is to add a simple hook:

// set image according to selected option
ProcessWire.addHookAfter("RcVariationOption::enable", (event) => {
  // get the RcVariationOption instance
  const option = event.object;

  // get the image number from client input that is stored in rc-image attribute
  const image = parseInt(option.$rcattr("rc-image"));
  if (isNaN(image)) return;

  // find the thumbnail link and click it
  const index = image - 1;
  const link = document.querySelector(
    ".shop-gallery [uk-slideshow-item='" + index + "'] a"
  );
  if (link) link.click();
});

Isn't that JavaScript code, you might ask? YES! 😎 I have totally refactored the JS implementation over the last week so that RockCommerce now uses the powerful concepts of Hooks that we know from PHP but in the JS world!! (See Let's bring hooks to JavaScript)

I am in contact with Ryan to add this to the core once it is tested more. But so far it is really a pleasure to work with on both sides: First, when developing RockCommerce all I had to do to make the above shown hook possible is to make the enable() method of the RcVariationOption hookable by simply renaming it to ___enable()

Second, it's also great for anybody using this module, as you can not only LISTEN to those events but you can also totally change the return value or even completely replace it's implementation.

For example this is what I use to show custom prices based on the taxrate of the user visiting the website:

ProcessWire.addHookAfter("RcProduct::priceTotal", (event) => {
  // get the money object
  // it's not a float, because 0.1 + 0.2 !== 0.3 in binary world!
  const money = event.return;

  // return the initial price plus the added tax
  event.return = money.times(1 + RockCommerce.getTaxrate() / 100);
});

I've only been working with this new concept for a few days, but I already love it and can't believe I haven't implemented before!

The next part to tackle is the cart 🤯😅 I'll keep you posted!

PS: Anybody having an e-commerce project coming up or anybody interested in beta testing? Let's get in touch!

[gebeer]

11 hours ago, bernhard said:

PS: Anybody having an e-commerce project coming up or anybody interested in beta testing? Let's get in touch!

Indeed, I do. And I'd be very interested to try your module

[Sanyaissues]

I'm interested too! 

[bernhard]

Just wrapped up an epic RockCommerce meeting! 🤓💻

We dove so deep into nerd talk, I think I saw binary code floating by at one point. Pretty sure we accidentally invented three new programming languages and a quantum computer while we were at it.

Big thanks to everyone for their feedback and help! 🙂 

Stay tuned, fellow wire-processors! This community rocks! 🎸 😎

[Sanyaissues]

Thanks and nice to meet you both @gebeer and @bernhard! RockCommerce looks so promising, it really feels like the procceswire way to do e-commerce.
 

[Jonathan Lahijani]

@bernhard Would love to chat about RockCommerce.  I have my own internal ecommerce system that I've built with PW so I've walked this path as well and can offer some insights.

[gebeer]

9 hours ago, Sanyaissues said:

Thanks and nice to meet you both @gebeer and @bernhard! RockCommerce looks so promising, it really feels like the procceswire way to do e-commerce.
 

Thank you for joining. I agree, RockCommerce looks promising and gives developers lots of freedom on how to implement things. Just the way PW devs love it :-)

[wbmnfktr]

How will payment work here in the module?
Will payment providers already be available through the module itself?

[bernhard]

Hey @wbmnfktr thx you for your question.

The first version will work with mollie.com, as this is the service I'm using.

After checkout RockCommerce will contact mollie and create a payment link. Then RockCommerce will send the customer to the payment page, which looks like this: https://www.mollie.com/checkout/select-method/6FCyMPgi83

After payment Mollie will redirect back to RockCommerce and RockCommerce will change the payment status of the order. Everything else is up to the developer and can be done via hooks (eg create an invoice or send an email or send data to a CRM system etc.)

So RockCommerce will support any payment method that mollie supports and the client can just select the payment methods he wants on their dashboard:

I think the process should be the same with stripe or others, but I'm not sure and @Sanyaissues will look into this. Or if you have experience with that let's connect!

9 minutes ago, wbmnfktr said:

Will payment providers already be available through the module itself?

Not sure what you mean? The customer will have to create an account at mollie.com (or stripe or whatever is requested in the future)

Does that make sense?

[wbmnfktr]

Ok, this already answers all my questions. And yes, that makes sense.
Using mollie already seems to be everything necessary - as they provide access to/through all major credit cards, Apple and Google Pay, and PayPal as well.

Big plus: they are from the Netherlands, therefore EU.

I was worried I had to connect PayPal, Stripe, and/or similar on my own. But with mollie... 👍🏻

 

Just another question: At what point would you consider RockCommerce be useful for a project, at which amount of products or what sales volume per year?

Asking for clients like small barber shops and similar, or a fitness coach with sport courses?

[bernhard]

39 minutes ago, wbmnfktr said:

Big plus: they are from the Netherlands, therefore EU.

Yes, that's one of the reasons I chose them over Stripe 🙂 But for developers outside of the EU I think adding other providers should be simple enough, but that's just guessing at the moment. Maybe @Jonathan Lahijani can tell me more when we meet.

39 minutes ago, wbmnfktr said:

Just another question: At what point would you consider RockCommerce be useful for a project, at which amount of products or what sales volume per year?

Asking for clients like small barber shops and similar, or a fitness coach with sport courses?

Puh... that's a little tough question 😄 The short answer is: I think RockCommerce should be great for any kind of shop.

The longer answer:

RockCommerce is built in a way that it provides all the tools that you need to cover all the necessary steps that you need for e-commerce:

• Product pages
  • Product pages
  • add to cart button
• a cart
• a checkout

BUT: These pages have to be built by the developer. So there will not be any predefined cart page, no predefined checkout, no predefined product layout. Nothing (on the frontend, of course!). Just the tools to make building that very easy and enjoyable.

I think this is what @Sanyaissues and @gebeer meant when they said "the processwire way to do e-commerce" (what I nice statement, thank you!!!)

So RockCommerce will get everything in place on the backend so that we as a developer can build the shop on the frontend the way we want. Using Bootstrap, using UIkit, using TailwindCSS, whatever.

Easy Example:

This is all you need to display items that are in the cart:

<template x-for='item in items'>
  <div><!-- x-for must have one root element! -->
    <h3 x-text='item.title'></h3>
    <div>Amount: <span x-text='item.amount'></span></div>
    <div>Variation: <span x-text='item.variation'></span></div>
  </div>
</template>

And this is all you need to add a product to the cart:

<a @click.prevent="addToCart">Add To Cart</a>

Want to show the cart count anywhere on your page?

<div rc-cart-count>0</div>

And you can customize that 100% to your needs - just keep the AlpineJS attributes like "x-text" or @click and you'll be fine 😎

So why is that related to your question? It's still some work and that work has to be done and that work has to be paid, after all. So there might be a "break even" in terms of project size or budget. But from a technical point of view I don't think that there are shops that are too small for RockCommerce or that are too big. RockCommerce should scale with your needs just like ProcessWire does.

But the number of products? Should not really matter, if you know how to deal with that number on the frontend.

Sales volume per year? Well... Your work to implement it and the RockCommerce one-time license fee has to be covered, that's it.

There will be limitations in terms of features, of course. For example coupon codes are not implemented yet (but it's built to support them) and there is no inventory management at the moment (though you could add a textfield to every product that shows something like "available within 1-3 days / 1 week / sold-out ").

I think for smaller shops this can be a great opportunity, because you can create extremely light weight and efficient, well integrated processes. No bloated shop interface with 100 distracting informations or popups or slowly loading pages. You only add what you really need.

The ProcessWire way 🙂 

At least that's what I try! 😇

[PWaddict]

@bernhard Mollie is supported ONLY on 32 countries and half of them are required to have a minimum sales volume. You will instantly exclude potential customers from many countries including USA. More info here.

Stripe is supported on 50 countries and PayPal on more than 200. I think it will be better if you create a system with external payment modules where the RockCommerce clients will be able to use your ready-made payment modules for Mollie, Stripe, PayPal or they can create their own for any other payment provider.

I don't know if Mollie supports it but PayPal and Stripe supports seamless integration too. The user completes the payment without leaving the client's website which is by far the best solution. I'm still a Padloper 1 user and created my own modules to do that for PayPal and Stripe (I haven't released it yet).

[wbmnfktr]

That's a great outlook and scope for this module I can wrap my head around. The ProcessWire way of doing things is great, yet the heavy lifting is done by the module already - see mollie and parts for cart and checkout pages.

I will have to look into this again for sure.

[bernhard]

13 minutes ago, PWaddict said:

I think it will be better if you create a system with external payment modules where the RockCommerce clients will be able to use your ready-made payment modules for Mollie, Stripe, PayPal or they can create their own for any other payment provider.

Better than what? It's already built that way... And the first module is RockMollie, but as I said this doesn't need to be the only one and others should be easy to add.

14 minutes ago, PWaddict said:

I don't know if Mollie supports it but PayPal and Stripe supports seamless integration too. The user completes the payment without leaving the client's website which is by far the best solution. I'm still a Padloper 1 user and created my own modules to do that for PayPal and Stripe (I haven't released it yet).

It would be great if you can explain how that works!

[PWaddict]

21 minutes ago, bernhard said:

Better than what? It's already built that way... And the first module is RockMollie, but as I said this doesn't need to be the only one and others should be easy to add.

That's great.

21 minutes ago, bernhard said:

It would be great if you can explain how that works!

Stripe Seamless Integration
Stripe Payment Element

PayPal Seamless Integration
PayPal Standard Checkout
PayPal Advanced Checkout
 

[Jonathan Lahijani]

I've integrated Stripe Payment Elements with my system which we can discuss @bernhard. Stripe is hugely popular in the US and it's probably the easiest to work with.

[PWaddict]

2 minutes ago, Jonathan Lahijani said:

I've integrated Stripe Payment Elements with my system which we can discuss @bernhard. Stripe is hugely popular in the US and it's probably the easiest to work with.

Yep, Stripe is easier because it has way much better documentation than PayPal. 

@bernhard You will probably get more help by checking out my PayPal module than looking at the PayPal documentation.

[Jonathan Lahijani]

It was a pleasure speak with you today @bernhard.  For the others wondering, we mainly talked about "rabbit hole" you can go down with ecommerce and how there has to be a line drawn between what one gets with a fresh installation vs. what one must build on their own.  Basically, how turn-key the solution is and how that relates to the target audience the system would be for.

[bernhard]

Thx @Jonathan Lahijani same here. Good summary. It was a very interesting talk indeed! I have lot's of things to think about. Maybe RockRabbit would have been a better name, but now it is too late 😄 

[bernhard]

Hey @Jonathan Lahijani just wanted to thank, because even though I'm sure that was not your intention, you made me remember and try out FieldsetPage. This will not only be very helpful for RockCommerce and for RockSettings, it is also a great way to make things that are under control of RockMigrations extendable by users/developers 😎

It also led to a knew PR that I just submitted: https://github.com/processwire/processwire/pull/306

Like it if you like it 😄 

[Sanyaissues]

I spent the last two days going back and forth between FieldtypeRepeater and FieldtypeCombo for some fields, but FieldsetPage was exactly what I was looking for! I wish I had discovered it earlier 🤦‍♂️  Thanks @bernhard!

[bernhard]

Ever had to check a vat number for correctness?

The official docs from the EU suck: https://ec.europa.eu/taxation_customs/vies/#/technical-information

There are many services that provide an API, but as far as I understand they just try to make money of the bad information provided by the EU...

It's simple and free though to check vat numbers:

$client = new SoapClient('http://ec.europa.eu/taxation_customs/vies/checkVatService.wsdl');
bd($client->checkVat(['countryCode' => 'AT', 'vatNumber' => 'Uxxxxxx']));

Never used SoapClient before. That's a cool tool!

[Sanyaissues]

Playing with the new toy! 🚀👕

 

 

 

[zoeck]

Hello Bernhard,

I have a question about RockCommerce.
I think I actually need exactly the possibilities that RockCommerce offers, i.e. ordering items and offering a price with information etc.

But the customer should not pay for it.
That sounds strange, but I would like to use the shop for an internal self-service portal 😉 

Is that possible?

[bernhard]

Hey @zoeck thx for your question!

Sure 🙂 RockCommerce is built like ProcessWire. You have several modules that help you build what you need, but you need to put your pieces together yourself. That means more work upfront, but you can build exactly what you need. Just like building a website with ProcessWire - you don't need pagination? Don't add it to your site...

You don't need payment? Just don't add that step to RockCommerce. But it sounds like the product and cart functionality plus the (multi-step) checkout via RockForms could save you a ton of time already. Nonetheless please be sure to check the minimum requirements in terms of all possible features like shipping, variations, stock keeping etc. and check if RockCommerce supports all that (yet).

BTW: We'll launch my first real-world RockCommerce project today 😍🔥 I'll then try to work on the docs to make it as easy to understand and use as possible! Official launch should then be end of November. If you need something earlier let me know.

Hey @Sanyaissues that looks great! Didn't even think to display the cart side by side with the products but great to see that you are able to use the module in your own way!! 🙂