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 :-)