Shopkit commerce plugin

I’m seriously itching to build a themes marketplace for Kirby with this. It feels so… natural!

1 Like

how can i modify the slider. i will change the circles to left/right images as image layer. were can i find the javascript things?

The photo slider doesn’t use any JavaScript :wink:

The markup is under site/plugins/shopkit/snippets/slider.php.

You can see the CSS rules for the slider in line 324 of the Sass file. This will need to be compiled to a shopkit.css file if you make any changes.

The slider is not set up for a right-left arrow right now; it only works by clicking the desired thumbnail.

Please reply here if you need any help making that change.

1 Like

Hi everyone!
I’m wondering if is it possible to add products to the cart but don’t redirecting the page to the cart.
Any help?
Regards!

The “Buy” button is a form that points to the Cart page.

The Cart controller receives this form’s information and uses it to update the cart.

So this is something that is quite built-in to the way Shopkit works. You could theoretically move the controller logic to the product.php controller, and just have the form post to itself. But that would definitely break during the next update.

There is some discussion about my intention behind this decision here: https://github.com/samnabi/shopkit/issues/81

Without getting into the UX discussion: You could make it an option to redirect back to the product after it has been added in the cart controller. Then there’s no need to add the code to the product controller.

3 Likes

Some great work has gone into this Sam, hope you’re getting some license purchases for all your effort :slight_smile:

I’m no developer and after looking into trying to re-skin a shop locally, I’m currently thinking shopkit may be a bit too complex for my needs.

A couple of questions:

  1. Is there some way I may be missing of being able to re-skin the visual style/layout of shopkit – a CSS override file for example, removing the need to hack into the multiple standard files? (Also, I don’t use sass, so it’s all the more complex to me on how to tackle this…)

  2. Is there a way of adding select options for products – multiple sizes/prices in one single dropdown, the selected option then being added to basket with a buy button? (Avoiding the need for listing the same item multiple times for the options, or multiple option buy buttons on a product page…)

Apologies if these are dumb questions, as mentioned I’m no pro developer and just trying to figure out if I can use this without driving myself mad with code issues.

Many thanks.
Marcus

I have just added a new page to the Docs that describes how styling and CSS works in Shopkit: http://shopkit.samnabi.com/docs/changing-shop-styles. The good news is you don’t need to worry about the Sass files! Let me know if you have any further questions about that.

No, there isn’t a way to do this. The product page intentionally has multiple Buy buttons, so that the user only has to deal with a smaller subset on information at a time. If you wanted all variant/option combinations in a single dropdown, you would have to create a custom product.php template to override the one that comes with Shopkit.

There are no dumb questions! It’s important for me to explain how Shopkit works when things aren’t quite clear. And it helps me to populate the Docs too…

1 Like

For me, it makes sense to have multiple options in a single dropdown. That’s what the majority of shopping sites use, and what I would like to achieve here – without fiddling around with the shopkit core, controllers etc if at all possible…

I’ve no problems creating a custom template. But, could you/anyone possibly point me in the right direction regarding getting the variant select option information to work with the add to cart/buy button, and the cart.

Here’s my basic form and select code:

<form action="<?= url('shop/cart') ?>" method="post">
	<input type="hidden" name="action" value="add">
	<input type="hidden" name="id" value="<?= $page->uri() ?>">

	<select name="size">
		<option value="Size" selected="selected">Size</option>
		<option value="5.00">Size 1 - £5.00</option>
		<option value="10.00">Size 2 - £10.00</option>
		<option value="15.00">Size 3 - £15.00</option>
	</select>

	<button type="submit" name="submit">Add to cart</button>
</form>

Aside from this, I’ve no idea what php code/anchors to use and where to place them in order to pull the variant elements from the product text file, or get this working with the cart.

Any help or advice will be greatly appreciated – and help one way or the other in deciding if I can use shopkit or not.

Cheers.

So after a lot of fiddling with the default shopkit product page, I’ve managed to get multiple variant options displaying in a single select option dropdown. I’m no expert, this may or may not be the best/right way to do it, I’m just trying to get this working as I require the function to make kirby/shopkit a viable solution for my shop.

Here’s the current code:

<form method="post" action="<?= url('shop/cart') ?>">

	<!-- Hidden fields -->
	<input type="hidden" name="action" value="add">
	<input type="hidden" name="id" value="<?= $page->uri() ?>">

	<select name="size">
		<option value="Size" selected="selected">Size</option>

<?php if (count($variants)) { ?>
<?php foreach ($variants as $variant) { ?>
<?php if ($variant->hasOptions) { ?>
<?php foreach (str::split($variant->options()) as $option) { ?>
		<option value="<?= str::slug($option) ?>"><?= str::ucfirst($option) ?></option>
<?php } ?>
<?php } ?>
<?php } ?>
<?php } ?>

	</select>

	<button <?php e(inStock($variant),'','disabled') ?> type="submit" name="submit">Add to cart</button>
	
</form>

I have a feeling the following line of code removed from hidden fields is crucial in transferring the variant options data to cart, but it also breaks the page with the above setup (perhaps as it’s not inside the foreach $variants code?):

<input type="hidden" name="variant" value="<?= str::slug($variant->name()) ?>">

The problem: the button attempts to add to cart but does not display the relevant selected/variant price or sku, the cart remains blank. Any pointers on where I’m going wrong here?

Am I wasting my time here, is this more complex to achieve than I realise – extra hacking required in core files etc?!

If anyone can advise that would be great, as I’m sure others would also benefit from having this as a shopkit option.

Many thanks.

Hi!
Anyone has experienced this in the cart page when uploading to ftp?

Call to undefined function mime_content_type() in [...]site/plugins/shopkit/templates/cart.php".

Any idea? Thanks in advance

Please see the response here. Short answer is that some PHP builds don’t include the mime_content_type() function. I’ve marked it as a bug.

1 Like

Thank you sam. You are the best. Finally I could update to the last version of shopkit. Amazing update!
Best regards.

@samnabi Me again, sorry for bother you.
I can’t understand how Downloadable products work. I’ve uploaded the file, and configured it on the product. But, How can I test if the customer is getting the file. I’m trying to recreate the situation using “pay later” function, but nothing happens. Should I expect an email? In the user Orders page under the quantity info it says “Download Expired”.

Thanks in advance!

EDIT
I think that leaving the “Number of days to allow downloads” field in blank is not working. Result in 0.

By the way, a much more bigger problem is that the link to the downloadable product via the “Order” page have an url that allows to deduce the possible location of other products and illegally download them

Your code is on the right track, but as you rightly mentioned, not all the relevant information is being transferred to the Cart.

Let’s take a step back and look at how Shopkit adds a product to the Cart. The Cart controller looks for an id value passed from the form, or if there isn’t an id value, it creates one by gluing together uri::variant::option.

The standard Shopkit template passes along uri, variant, and option, leaving the controller to glue it together with :: strings.

Note: This has nothing to do with the :: operator in PHP, it’s just an arbitrary string that is unlikely to show up in a page URI or variant/option name, so it can be reliably used to glue strings together.

Anyway, you want a single dropdown list, which means we have to glue the three strings together and pass them to the Cart controller as an id value.

Here’s a template that does exactly that. You can save it as /site/templates/product.php to override the default Shopkit one.

1 Like

Sorry, this is a bug. The orders.php template wasn’t properly handling the blank expiry date. I have fixed this in the dev branch.

If you want to hotfix this immediately, update Line 66 of /site/plugins/shopkit/templates/orders.php to reflect this code.

1 Like

Thanks for your help there Sam. I’ll have a play with the template and see how it works.

hej sam, and other.
i run the shopkit copy and before i start to push it live, i would deactivate the base64 stuff for images. For my shop i would use the images for pinterest and facebook. it doesnt work with the base64 encoding stuff. How can i change this? Thanks for help

Thanks for the feedback, Sven. I have opened an issue on image rendering to discuss this: https://github.com/samnabi/shopkit/issues/91

Version 1.1.1 is here :taco:

  • Bug fixes
    • More reliable staff notification emails
    • More reliable download links
    • More reliable discount calculations
    • Better calculation for updateStock() function
    • Remove reliance on mime_content_type() for gateway logos
    • Include shipping in Stripe gateway calculations
    • Fix typo in German language file
    • Add page text to cart.php template
    • Fix broken variables on process.php for PayPal gateway
    • Only show “From” in price button if there is more than one variant
  • Design and UI
    • Improved admin layout for discount codes & gift certificates
  • Enable panel installation from browser
  • Use default language instead of hardcoded en for updating order files on confirmation
  • Add Spanish language option
  • Full seller and buyer address info on PDF invoices

Download it here: https://github.com/samnabi/shopkit/releases/tag/v1.1.1

Save 50% on bulk licenses

There’s still time to save 50% off orders of 5 or more licenses. Just use the discount code KIRBYANDLOVE at the Shopkit shop.

2 Likes