Snipcart plugin: add to cart button nothing happens on test click

[Hdrhdr]

Hi, I have the latest snipcart plugin installed, test api keys in my config.php all good there. i have a blueprint for my products but it’s not called product (i am selling publications, so it’s called ‘publication.yml’). and i have the product page itself where i pasted the ‘add to cart’ snippet. in the ‘publication.yml’ blueprint i have my custom fields, and then i translate those fields to the ‘data-item-name’ and other product categories for snipcart in my add-to-cart code. but i don’t think that’s the right move? but when i try to lead it to the blueprint field, it says array-to-string error.

note: in the class css i still kept ‘snipcart-add-item’ but also my own tailwind classes.

<button class="snipcart-add-item border-2 border-brown rounded-full p-2 text-brown"
                data-item-id="<?= $page->sku() ?>"
                data-item-price="<?= $page->digital() ?>"
                data-item-url="<?= Url::path($page->url(), true, false); ?>"
                data-item-name="<?= $page->name() ?>">
                          Add to cart
</button>

the question is, what are the next steps? i don’t see anything happen after i click ‘add to cart’, even though a test interaction should happen, right? what am i missing? thank you!

[distantnative]

Have you added all parts as outlined by the plugin docs, e.g. this snippet? GitHub - HashandSalt/kirby3-snipcart: A Snipcart plugin for Kirby CMS

[Hdrhdr]

i’ve added this

<?= snippet('cart/init') ?>

before the closing body tag,

and i’ve added only the ‘add to cart’ button
but not the checkout summary

i did the config.php with apikeys too

[distantnative]

Pinging @jimbobrjames

[jimbobrjames]

Snipcart is Vue based. It picks up data attributes in the HTML. Dd you include the javascript library in the footer as per the docs?

Cart/init snipet should have done that tho. They change the version rapidly of the JS library, I cant keep up. Maybe manually adjust the library version to the current and see if it flies.

[Hdrhdr]

yep, i included the cart/init snippet to load the js library, included in the footer

<?= snippet('cart/init') ?>


</body>

[jimbobrjames]

Can you maybe share your whole page setup?

[Hdrhdr]

sure, this is my blueprint ‘publication.yml’ where i should store all the product info, right

title: Publication

columns:
  main:
    width: 2/3
    sections:
      fields:
        type: fields
        fields:
          name:
            label: Name
            type: text
            required: true
          description:
            label: Description
            type: textarea
            size: medium
          preorder:
            label: Pre-order price
            type: text
          digital:
            label: Price digital
            type: text
          pricepd:
            label: Price print and digital
            type: text
          other:
            label: Other price
            type: text
          info:
            label: Important notice about the price
            type: info
            text: |
                Other price is a price that may include another item added besides print and digital copy of the zine
          pages:
            label: Page amount
            type: text
          cover:
            label: Cover type
            type: text
          paper:
            label: Paper type
            type: text
          size:
            label: Publication size
            type: text
          sku:
            label: SKU
            type: text
          downloads: 
            label: Downloads
            type: files
            extends: files/document
          related:
            label: Related Pages
            type: pages
            query: site.find('community')
                
  sidebar:
    width: 1/3
    sections:
      files:
        type: files
        extends: files/image
        label: Images

and then here’s an excerpt of some code on my actual page template for publication (i.e. publication.php):

  <!--Publication-->
                          
                    <div class=" flex flex-col lg:pl-32 lg:pr-64 sm:ml-0 mx-auto w-fit">
                          
                    <!--Title!-->
                    <div class="flex font-sans-serif text-brown text-3xl font-medium">
                    <?= $page->title() ?>
                    </div>

                    <!--Images!-->

                    <div class="mt-10 flex flex-col"> 
                          <?php if($image = $page->image()): ?>
                        <figure>
                            <a href="<?= $image->url() ?>">
                            <img src="<?= $image->url() ?>"
                            class="hover:bg-periwinkle hover:shadow-2xl hover:shadow-periwinkle hover:rounded-xl
                            mx-auto object-cover" alt="">
                            </a>
                        </figure>
                    <?php endif ?> </div>

                    <!--Other images!-->


                    <!--Description!-->
                    <div class="flex font-sans-serif font-light text-4xl lg:text-lg lg:leading-[1.5rem] text-brown mt-10 max-w-[100%]">
                        <?= $page->description() ?>   </div>
                    </div>

                    <!--Right Sidebar: Prices-->

                    <div class="hidden right-[max(0px,calc(40%-30rem))] w-32 lg:block lg:fixed">

                     <div class="flex flex-col">

                        <!--Digital-->
                        <div class="flex flex-col">
                        <p class="font-sans-serif text-xl text-brown">€6 Digital</p>
                        <a class="" href="">
                           
                         <!--Snipcart button test-->
                       <button class="snipcart-add-item border-2 border-brown rounded-full p-2 text-brown"
                            data-item-id="<?= $page->sku() ?>"
                            data-item-price="<?= $page->digital() ?>"
                            data-item-url="<?= Url::path($page->url(), true, false); ?>"
                            data-item-name="<?= $page->name() ?>">
                            Add to cart
                            </button>

where the last piece of code is the Add to cart button, which is based on the add to cart snippet included with the plugin… and i tried to change it to adapt to my blueprint above. does that make sense?

what should in general happen when this functions properly? like i should just be able to add this button code and connect it to the blueprint and then it should appear in the frontend? i am a bit lost on the next steps after the plugin is installed…

[jimbobrjames]

To be frank… you dont actually need my plugin. Snipcart is just a Vue based javascript include that picks up on data attributes on a buy button, as per the snipcart docs.

My plugin just hooks into the Snipcart API and brings back sales data and info on discount codes and previous sales. Theres also a custom field for showing how much a product has sold in the panel. If you are not botherered with all that. you can just add the JS and wire up a button according to the snipcart docs.

[jimbobrjames]

Ive looked through the code you posted and nothing jumps out at me as wrong. Do you have a publicly accesable URL for this yet?

[Hdrhdr]

ah i see… thanks for the explanation! i thought somehow the plugin helps install snipcart but i somehow didn’t put 2 and 2 together cause now it makes sense that i can actually load the Snipcart library on its own. i will try to load the JS from snipcart now

[jimbobrjames]

@Hdrhdr

data-item-url="<?= Url::path($page->url(), true, false); ?>"

Well ok … that. Why not jiust $page->url()

[jimbobrjames]

So minimal setup … in the demokit…https://zone1.trykirby.com/swvaeM1b/shop#/

[Hdrhdr]

i don’t have a publicly accessible URL yet unfortunately

is there another way to view the demokit because i try to open the link and it says

Access to this demo instance is not allowed from your IP address.

You are accessing this demo instance from an IP address that differs from the one that was used to create the instance. Access to the demo from different IP addresses is blocked for security reasons.

[jimbobrjames]

Oh i forgot… it sets it up randomly. That was just for me for the front end. But you can see the source code on github demokit/content/3_shop at main · getkirby/demokit · GitHub

[jimbobrjames]

You can get your own front end demo if you go here and hit the start demo button Try | Kirby CMS

[jimbobrjames]

But i will patch up my plugin. theres obvisouly a blip there.

[Hdrhdr]

thanks so much for everything, i will try to look at the demokit and compare and also go through the Snipcart docs again to find what i’m missing

[jimbobrjames]

Thats ok My plugin just brings in some stats from the Snipcart API into a custom panel view as knd of dashboard. Its just highest selling product… total sales… last 20 ish transactions. I just did that so i didnt have to log in to Snipcart seperatly.

You can tottally just use Snipcart just by including the JS and setting data attributes up.