Some questions to the Snipcart Plugin

1

Hi

Please exuse me if my questions sound to stupid to you.

Installation
I try to understand how to install the Snipcart Plugin for Kirby (installinstructions see here).

Under “Install” there is “Download” and “Composer”.
Do I have to do the Download- AND the Composer-Method or just using one of both methods?

I tried both.

When I use Composer, in which directory do I have to run it? In the root or the plugin folder?
I tried both and it generats extrafolders like “vendor” (with alot of files inside) and so on. But the Download-Method does not contain this folder, why? Shoudn’t both methods be equal?
It confuses me alot.

What is the correct installation-method?

Usage
Cartsnippet:
<?= snippet('cart/init') ?>

When I use the Download-Install-Method then there is no init.php file anywhere ergo this snippet code will not work. Or does automatically use cart/cart-init.php instead?
Edit: I just found the explanationin index.php of the Plugin:
cart/init' => __DIR__ . '/snippets/snipcart/cart/cart-init.php

What are the other snippets for? I see that they just replace some lines of code. They are not real timesaver, I guess. Just another kind of organisation of the code, right?
If yes, what is the real benefit of this Plugin?

In which file do I have to put the “code” for “Options”? In /site/config/config.php?

Why is there so mutch vue.js in the Plugin?
Where is it used?

Can somebody please fill my knowledge-gaps? :slight_smile:

Kind regards

2

It’s either - or, not both.

Composer would usually be the preferred method if you use Composer for you complete setup. Otherwise you can just download the zip and put the unzipped plugin folder into your /site/plugins or install as submodule via Git.

If you want to install with composer, don’t do it in the project root, otherwise you will end up with a second Kirby installation and your site will stop running.

Yes.

That’s for the Panel part of the Plugin. The Panel is a Vue app.

3

Thanks pixelijn for you quick and nice answer.

What I will never understand is, why developers tend to create so minimalistic documentations.
A few words more would have answered so many questions and saved SO mutch time for newbies like me :slight_smile:
My guess is, they wanna keep their knowledge rare and precious :wink:

The word “or” between “Download” and “Composer” would have answered the first question.
The line /site/config/config.php would have answered the “Options”-question.

I’m still trying to find out how to use that Panelview, to me the most interesting part of the Plugin.
I wanna list all the orders which are in the order listing of the dashboard in snipcart.
How can I do that?

4

There is a dedicated panel view you can access using the menu at the top of the screen on the left hand side of the black bar. Press the little hamburger and choose Snipcart from the drop down list and you will see something like this:

snipcart-dashboard
snipcart-dashboard1424×834 117 KB

5

Ah great, thanks for that hint!

Shouldn’t this been mentioned in the documentation?
Because for me as a newbie this is not so obvious :wink:

6

In an ideal world, it would. But keep in mind that many devs create such plugins because they have a need themselves or do it in their sparetime, and then make it available to the public. They invest a lot of time and effort to produce the code. There is not always time to come up with extensive documentation in such circumstances.

If you want to help out to make it easier for others, why not make a PR with your suggested changes? Get involved! Give back! Buy a coffee for the devs.

7

I would love to help, if I can.
What is a PR? Personal request? If yes, where?

I’ve come across some other basic questions:

image
image822×146 9.17 KB

Where is this.$api defined? Maybe you use Axios somewhere but I can’t find it.

I guess the path 'snipcart/orders' of the get request is defined here:

image
image1506×637 49.2 KB

But what means (:all) (1)?
And where is $params (2) defined?

I would like to do a put request to update an order.
How can I do that?

8

A PR request is when you use github to make changes to someone elses project and then submit a “Pull Request” which basically you means you would like me to review and merge your modifications into the plugin so that everyone gets that update going forward.

this.$api is how the Vue components communicate with the Kirby PHP API, which is working in tandem with a custom route in this case. This is a Kirby feature, and not something specific to my plugin. The plugin communicates with a couple of different endpoints in the Snipcart API and gets the response back as JSON from Snipcart. (:all) is the param which in the the example above is “orders”. Basically the Vue component hits the custom route via www.yourdomain.com/snipcart/orders using PHP and passes a valid JSON response through to the Vue component so that it can work with it.

You can read more about Kirby routes here.

The plugin currently only reads data from Snipcart, it currentlly does not go the other way to update Snipcart from the panel, but if you are able to add that functionality, feel free to do so and submit a PR.

9

@jimbobrjames thanks for that additional information.

I the documentation of Kirby I can only find a remote::get function (which you also use in your Plugin).
But how can I define a put request to the Snipcart API?

10

Remote::request() is the general method, you pass the method in the parameter array.

Example: Is There a 'Kirby-Way' to Send a POST Request? - #2 by texnixe

11

@texnixe thanks for that hint.

Based on that I tried to add a route for a post request:

// Updating order
          [
              'pattern' => 'snipcart/orders/(:all)',
              'action'  => function ($param) {
                $apisecretkey = option('hashandsalt.kirby-snipcart.snipcartlive') === true ? option('hashandsalt.kirby-snipcart.apisecretlive') : option('hashandsalt.kirby-snipcart.apisecrettest');
                $snipcart = [];
                $request = Remote::request('https://app.snipcart.com/api/'. $param, [
                  'headers' => [
                      'Accept:' . 'application/json',
                      'Authorization: Basic ' . base64_encode($apisecretkey . ':')
                  ],
                  'method'  => 'POST',
                  'data'    => json_encode($snipcart)
                  ]
                );
                if ($request->code() === 200) {
                    $snipcart = $request->json();
                }
                return $snipcart;
              }
            ],

What is the syntax to transmit data from Javascript to that PHP Route?
I tried something like that …

let data = {status: "Delivered"}    
fetch('snipcart/orders/4376ead3-9e80-4172-ad9b-27eb2e8edaf4',
          {
          body: data,
        }
        )
          .then(response => response.json())
          .then(data => console.log(data));

Goes header, method, body, data into the Route or into the Fetch request?

12

Your route is a GET route, not a route that listens to a POST request, but then your fetch request is also a GET request and not a POST request, so you cannot send data with it. In both cases, to make your route listen to POST requests, you have to set the method property. And to make your fetch request a POST request, you also have to set the method.

13

But in my route the method is POST not GET.

What is right method to POST data to the Snipcart API from the vue.js-component perspective?
Javascript fetch > PHP route > Snipcart API
or
Javascript fetch > Snipcart API?

In the end the Snipcart API listens to CURL and if I understand it right, the Kirby remote::request handels CURL automatically?

Example:

curl https://app.snipcart.com/api/orders/c7af6278-1c06-411d-b009-22a839efda75 -X PUT \
-H "Content-Type: application/json" \
-H "Accept: application/json" -u {YOUR_API_KEY}: \
-d "{'status': 'Delivered'}"
14

Oh, right, I overlooked that, nevertheless, your fetch request is not a post request.

Remote is a wrapper around curl, yes.

15

Yes I know that I did not define the Method property in the Javascript fetch request because I assumed that it will be appendet by the route.

I tried now directly with Javascript:

let data = {status: "Processed"}
    fetch('https://app.snipcart.com/api/orders/SOMETOKEN',
      {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }
    )
      .then(response => response.json())
      .then(data => console.log(data));
  }

But I get a CORS-Error.

That means I have to solve it via the PHP route, right?

16

Sorry, I feel completly lost here.
Can somebody please guide me to the right direction?

All I wanna know is how to update an order with Javascript (via the Kirby PHP route).

17

I’m missing the part where you do something with the data you send to your route…, instead you send $snipcart when you do the remote request, but that variable is only assigned an empty array.

18

I agree, these are unfinished codesnippets.

The question is, how do I transmit the data from the Javascript code to the PHP route (see snippets above)?
Or in other words: How can I put some data into $snipcart via Javascript?

19

I actually think it would make sense to send the request directly from your JavaScript without the route detour, and sort out the CORS issue instead.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Inside the route, you would get the data you sent to the route with

$data = kirby()->request()->body();