Shop related question (another one)

[Tobias_L]

(Sorry for the long read.)

I read about the Kirby Shopify plugin and the Kirby Snipcart plugin. They seem to be solid plugins for creating a cart and linking it to the payment services.

However I cannot find any documentation that they’re actually displaying the orders within the Kirby panel. The products yes, but not a list with all the orders including the customer’s address, order number and order sent status?

Snipcart or Shopify would be fine but there would be 2 separate logins and 2 different admin dashboards (Kirby + Snipcart) to see ALL the order information (address, name etc.) which is not userfriendly at all.

My hopefully still-to-be-client told me they don’t want to use another CMS solution (like the WooCommerce Wordpress plugin or Grav/Statamic). We also looked into the Kirby Merx plugin, it’s quite solid as well, but unfortunately it doesn’t feature a cart and it’s too complex to actually develop a cart and link it to the plugin by ourselves without any security concerns.

Long story short: maybe someone has managed to actually display the Snipcard/Shopify products and the order infos within the Kirby panel? If someone came up with a Snipcart/Shopify etc. plugin which displays the order-information within the Kirby panel and wants to sell it, we’d be glad to pay for it since we don’t want to lose the customer.

Thanks for any tips!

[texnixe]

@Tobias_L

but unfortunately it doesn’t feature a cart

What do you mean it doesn’t feature a cart? It does!? A shop without a cart would be rather useless unless you sell only one item.

[jimbobrjames]

My Snipcart plugin has a panel view that shows all orders, the most popular product and the number of abandoned cards. It also shows the full order history underneath. It also shows active discount codes and how many times they have been used:

The plugin also has a custom field you can put in the page blueprint that will show you the total sales of that product from right within the panel.

The table in the Order list could be modified to show more info, i just didnt want to clutter it up with much. If you fork the plugin, you should be able to add the extra columns of data that you would like, and doing so would require a little Vue.js knowledge.

[Tobias_L]

That’s a misunderstanding, I meant an Ajaxed frontend cart like Shopify or Snipcard out of the box.

[Tobias_L]

Ohh, nice, thanks! Somehow I missed that feature completely, don’t know why. : /
I thought it only features product creation and no further order details.

I read about custom “Panel-Vue-views” but I just started with Vue – do you think it would be very difficult to show the customer’s name and shipping address in addition to product creation? (The main goal is to avoid a second dashboard wherever possible, like the Snipcard dashboard.)

[Tobias_L]

From what I read in the Snipcard docs, the actual products can just simply be simple Kirby pages because only the data-attributes in the buy buttons are important? So that doesn’t actually need to be handled by your plugin. (?)

[jimbobrjames]

@Tobias_L

I just started with Vue – do you think it would be very difficult to show the customer’s name and shipping address in addition to product creation?

Its fairly straight forward… .if you look at this file…

HashandSalt/kirby3-snipcart/blob/master/src/components/dashboard/components/orders.vue

You just need to map a couple more columns and recompile the js

So you see how the final one uses shippingAddressCountry… if you copy that a couple of times you will be able to add the other parts of the address, and another for the customers name.

        {
          name: "address",
          label: "Ship to",
          field: "shippingAddressCountry",
          align: "right",
          width: "ship"
        }

If you take a look at the snipcart docs, it will tell you the names of the different bits of info:

API: orders

So something like this will get you postcode in that table in the panel

        {
          name: "postcode",
          label: "Postcode",
          field: "shippingAddressPostalCode",
          align: "right",
          width: "postcode"
        }

[Tobias_L]

Oh wow!
Thanks a lot for the mini-tutorial! I’ll try it soon.

I thought I’d have to write x other components, but adding a couple of variables seems quite manageable.

Thanks again and have a nice new year!

[jimbobrjames]

@Tobias_L

From what I read in the Snipcard docs, the actual products can just simply be simple Kirby pages because only the data-attributes in the buy buttons are important? So that doesn’t actually need to be handled by your plugin.

Thats true, you can simply add the snipcart JS to the page and wire up some fields to the data attributes. However that wont get you the panelview ike in the image above and you would need to login to Snipcart to see the order information.

[Tobias_L]

Hm, I’m not sure if I understand correctly (sorry for the silly questions), in Snipcart I can’t add products anyways, from what I understand. So I’d have to use Kirby for that anyways, which is actually a good thing to avoid multiple dashboards. Maybe I don’t get the work/userflow though.

Wouldn’t it be:

1. Implement the Snipcart JS in the frontend
2. Create products as pages in Kirby, containing price, name etc.
3. Hook the price, name etc. up to the data-attributes on the buy button
4. Sell something via the buy button
5. Fetch the sold products via the Snipcart API and displaying them in the Kirby panel

[jimbobrjames]

Yes, thats right, except for point number 5. My plugin does this for you. The plugin also contains a route that gets all the various infos from Snipcart - you can use this route to do other things too if you wished.

Bascially Snipcart works the opposite way to Shopify. With Shopify, you create the products within the Shopify control panel and then pull them in to the Kirby site via the Shopify API. This is a bit more complex to set up because you need to set up webhooks, so that when a change is made in Shopify, that change gets pushed to the Kirby site which will flush the cache and cause the pages to be rebuilt - the Shopify plugin turns the data from Shopify into Kirby virutal pages, so although you will be able to see those products in the Panel, all the fields will be read only. You need to log in to Shopify to change any of that stuff.

Snipcart works in the reverse way and is, in my opionion, the most flexible. When you add stuff to the basket, and buy it, Snipcarts server crawls back to your page, finds the buy button and the data attributes to verify that it was a legitamete order for security. You do not need to setup products and product imagery within Snipcart - you can do all that from Kirby, because all that information gets sent to Snipcart when the buy button is pressed.

So basically with Snipcart, you have Kirby telling Snipcart all about the products. With Shopify, its the reverse, and you will need two logins if you pick Shopify, becasue all the products and product photos are all stored on Shopifies server.

If you are selling digital goods with Snipcart, you do need to login to Snipcart and upload those. From there you can put the ID into a field in Kirby to allow the download to be bought. Apart from that you can do all the product stuff 100% in Kirby.

I hope that makes sense.

[Tobias_L]

Thanks for the very in-depth description and explanation! How nice of you

Didn’t get that Shopify would be read-only in the panel, that’s a major drawback.

I will definitely look into your plugin then. Yeah Snipcart seems to be the much better option in this case plus I read in the docs, the checkout/cart is very customisable.

Thanks again!

[possible]

Hello James,
i am reading this and wonder if it would be also possible to control the stock with your plugin. If i would enter a quantity of a product, could there be a hook that reduces that quantity with every successful transaction?
This would make your plugin not only a payment tool but also a stock management tool…

[jimbobrjames]

Yes thats possible in theory. The Product end point in the api contains stock levels https://docs.snipcart.com/v3/api-reference/products and Snipcart does support hooks, so you could connect one up and have kirby alter a field after a sale.

[possible]

thanks james,
would that mean i would have to manage products on the snipcart side? if so, i was more thinking of updating the stock at kirby after snipcart has done the transaction successful.
Is there a way to report back to kirby afterwards?
I’ve seen it in merx, thats why i thought it would be really elegant to manage the product side in kirby and only the payments in snipcart…

[Alain]

If I understand it right, then I can define a custom snipcart order listing in the kirby-panel with custom orderfields?

Example:
I would like to expand my orders with a custom shipping-date-field.
The goal is to sort all orders by shipping-date.
In the snipcart-dashboard itself it is not possible to customize the order listing but in the panel of kirby it would be possible, right?

[Alain]

How can I transpile the code?

I tried
npm run build

Got this:
> @ build C:\Users\Admin\Documents\VisualStudioCode\kirby\site\plugins\kirby3-snipcart
> parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./

Der Befehl "parcel" ist entweder falsch geschrieben oder
konnte nicht gefunden werden.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build: `parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Admin\AppData\Roaming\npm-cache\_logs\2021-01-06T20_15_14_372Z-debug.log

What is parcel?

[jimbobrjames]

Building depends on Parcel which handles the actual bundling up. You can see more here https://parceljs.org/getting_started.html

There is some guidance on it in the Kirby documentation (the plugin was made using the offical Kirby pluginkit)

Plugin setup for Panel plugins

[jimbobrjames]

Keep in mind that if you installed via composer, you will likely loose your edits next time you run composer update, becuase this updates the plugin to a new version if there is one available. For now, just keep a copy your edits somewhere so you can easily pop them back.

In an ideal world, id like to make it possible edit the required columns from the kiby config or some other easy method that did not require rebuilding the javascript. Unfourtunatly its difficult to please everyone with the kind of data that should be in that table by default. I currently have no idea how to make that happen.

The plugin uses the excellent table component from @distantnative so perhaps he might be able to give me a hint here.

[Alain]

Thanks jimbobrjames, it works.

How can I output a customFields value in der orderlist?
It works when I output it in the console, but not in the header of the table.

\site\plugins\kirby3-snipcart\src\components\dashboard\components\orders.vue