Gadgetto

@Robin Ssorry, the behavior I described is only true when using InputfieldButton. InputfieldSubmit has no surrounding <a></a> tags. Your hint only works with InputfieldSubmit.

This doesn't work as expected because it only disables the <button> element. But ProcessWire embeds the <button> element within an <a> tag and a click will follow the href nevertheless. Additionally the button element doesn't look disabled... I think InputfieldSubmit and it's siblings renders a strange kind of html. <button> within <a></a> is not valid HTML5 and could lead to unexpected behavior. I already filed an issue on GitHub but Ryan told its intended an can't be changed.

If you only need/want to render the Snipcart anchors/buttons then you could do it by simply using php and ProcessWire output (but for example handling VAT splitting and multi currency will be another thing). For all other things I listed above, SnipWire will do the job for you.

SnipWire integrates the Snipcart dashboard into your ProcessWire backend SnipWire installs all necessary fields for setting up your products editor (> 22 different fields) it automatically generates the necessary Snipcart anchor markup based on those fields SnipWire provides an easy way to integrate the Snipcart shopping cart into your project (including cart button, customer profile, login, logout, ...) provides sample templates to setup your online shop. handles and calculates all of the different VAT handlings worldwide handles multi currency process refunds right from your ProcessWire back-end process abandoned carts and send messages to customers right from the ProcessWire back-end provides hookable ProcessWire events for orders, customer registration, ... ... How would you handle the custom data attributes markup without an engine generating it? If you only have a handful products this might be possible by writing the markup by hand but if your client should be able to manage a shop, SnipWire is the best way to do it. As a sample - how would you do this manually? <button class="snipcart-add-item uk-button uk-button-primary" title="Add to cart" aria-label="Add item to cart" data-item-name="Festish Wet Warmer" data-item-id="1713" data-item-price='{"usd":"22.20","eur":"19.90"}' data-item-url="http://domain.com/snipcart-shop/festish-wet-warmer/" data-item-description="A short product description..." data-item-image="http://domain.com/site/assets/files/1713/beer2.65x65-hidpi.jpg" data-item-categories="Beer" data-item-metadata='{"id":1713,"created":1563363120,"modified":1580402487,"published":1563363120,"created_users_id":41,"modified_users_id":41}' data-item-quantity="1" data-item-quantity-step="1" data-item-stackable="true" data-item-taxable="true" data-item-taxes="10% VAT" data-item-has-taxes-included="true" data-item-shippable="true"> <span uk-icon="icon: cart"></span> Add to cart </button> I probably don’t get your message, but as an experienced developer you should get the benefit.

@Ben Sayers: Hey Ben, that's what I meant - simply including _uikit.php won't do the job. The whole templates are built using UIKit CSS framework. You'll need to write your own templates for product overview and product-details. If you have a look at the two sample templates which are installed by SnipWire installer, you will see how it works. Please have a look at the comments in the php files. I currently don't have the time to write sample code based on your rendering method. But if you are familiar with ProcessWire development this should be an easy job. Having a look at the snipcart-shop template, all in all, that's all you need: (please note this is a quick composition of the required code and might not fully work. And you need to use your own CSS classes based on your framework) <!-- The content element holds your products catalogue. --> <div id="content"> <?php $products = page()->children('limit=9'); echo productOverview($products); ?> </div> <?php /** * Render a shop product overview * * @param PageArray $products * @return string * */ function productOverview(PageArray $products) { if (!$products->count) return ''; $out = '<div class="product>'; foreach ($products as $product) { // We use the first image in snipcart_item_image field for demo $imageMedia = ''; if ($image = $product->snipcart_item_image->first()) { $productImageMedium = $image->size(600, 0, array('quality' => 70)); $imageDesc = $productImageMedium->description ? $productImageMedium->description : $product->title; $imageMedia = '<img src="' . $productImageMedium->url . '" alt="' . $imageDesc . '">'; } else { $imageMedia = '<div title="' . __('No product image available') . '">' . ukIcon('image', array('ratio' => 3)) . // you need to use your own image output function here because ukIcon is based on UIKit CSS '</div>'; } // This is the part where we render the Snipcart anchor (buy button) // with all data-item-* attributes required by Snipcart. // The anchor method is provided by MarkupSnipWire module and can be called // via custom API variable: $snipwire->anchor() $options = array( 'label' => ukIcon('cart'), // use your own image output function 'class' => 'button button-primary', 'attr' => array('aria-label' => __('Add item to cart')), ); $anchor = wire('snipwire')->anchor($product, $options); // Get the formatted product price. // The getProductPriceFormatted method is provided by MarkupSnipWire module and can be called // via custom API variable: $snipwire->getProductPriceFormatted() $priceFormatted = wire('snipwire')->getProductPriceFormatted($product); $out .= '<a href="' . $product->url . '">' . '<div class="product-detail">' . '<div class="media-top">' . $imageMedia . '</div>' . '<div class="card-body">' . '<h3 class="card-title">' . $product->title . '</h3>' . '<p>' . $product->snipcart_item_description . '</p>' . '</div>' . '<div class="card-footer">' . $anchor . '<span class="align-right text-primary">' . $priceFormatted . '</span>' . '</div>' . '</div>' . '</a>'; } $out .= '</div>'; return $out; } ?>

You'll need to have a look at the snipcart-shop and snip cart-product templates and modify them so they use the preferred rendering method.

Thanks for jumping in @Jan Romero! This will work but can have side effects.

Compared to v2, there is still one feature missing in v3 of Snipcart: Recurring subscriptions As soon as v3 is feature complete I'll starting development on v3 support.

Hi @Jozsef Snipcart is definitely not for everyone. We use it for customers who need to launch their store very fast and don't have a lot of products. Are you sure that other free/open source solutions are really free? We have developed some e-commerces sites in the past and the cost of setup and integration of those open source shop systems are very high. And 3 out of 5 shop systems we tested had huge problems when it comes to rounding. Fixing these things cost $$$. This quickly puts the cost of the Snipcart system into perspective. Snipcart is a very stable system and you don't have to bother with those things as it simply works.

This is not yet supported by SnipWire directly. I first need to create a special field type which offers alternate price list creation. This feature is already on my todo list!

No problem. Snipcart’s behavior is a little bit weird in some places. I’ll need to add some hints in module settings to make it more clear.

The PayPal gateway view is correct! If you use PayPal you won't get a credit card form on Snipcart checkout.

Sorry, I don't know why it's not working for you. I can't reproduce this problem. I tried it in 2 different installations and it works like expected. As I understand, it works in Test environment and when you switch to Live in Snipcart it doesn't!? Did you check all settings on Snipcart side? Which payment gateway did you configure in Snipcart?

@fruid Hi, could you please provide more infos? Which PW version, which PHP version? Which SnipWire version? There is no SnipWire v3 or v2. The latest version is 0.8.7. If you mean the Snipcart version 3 - then it's not supported yet.

SnipWire will support Snipcart API V3 when it’s feature complete. There are only a few left so I think it wont last long until we can start migrating SnipWire to API V3. Currently missing features: Recurring subscriptions Discounts by an alternate price list Custom validation

Hey, thanks for your compliment! ?

Hi @michelangelo, could you please post bug reports on GitHub: https://github.com/gadgetto/SnipWire/issues?q=is%3Aopen+is%3Aissue And please include the complete configuration of your currency (screenshot?) from within Snipcart. Questions and suggestions regarding SnipWire are OK here, but it's very hard to follow bug reports in this forum...

A demo would be a bit tricky as it would require a valid Snipcart account. No final live project on my side so far ... I'm sure there are some developers here which already have a Snipcart shop to show. ?

Yep! And thanks for your kind words! I have many ideas for upcoming features and to improve the quality of SnipWire.

PayPal is directly supported by Snipcart. You need to have a look into your Snipcart dashboard under „Payment Gateway“.

The products from your product pages will be added to the Snipcart dashboard when you save a product page within ProcessWire. But this will only work if your site is reachable from web. So within a MAMP system it doesn't work unless you provide a way to redirect requests to your internal MAMP server.

You need to go to your Snipcart dashboard: https://app.snipcart.com/dashboard and work through the setup steps there. After this configure SnipWire and it should work. Especially the "Configure your domains" part is important to tell Snipcart where it can find your product pages to allow the Snipcart crawler to verify your products.

UPDATE 2020-07-03 SnipWire 0.8.7 (beta) released! This update fixes some small bugs and adds an indicator for TEST mode: Added ProcessWire notice to flag SnipWire TEST mode Updated exchangerates API to handle unsupported currencies All modules and class files are now using ProcessWire's classLoader Fixed badges display when no refunds possible (in order details - refunds form) Fixed a page select problem with custom cart fields

This is not yet implemented, sorry. But it’s on my list and it will be the next feature to be added. @LostKobrakai @fruid Sorry for my stupidity, this is already implemented in a rudimentary way. You need to add the preinstalled field snipcart_item_custom_fields to your products template. This is a textarea where you can add custom configuration options for your product by using the data-item-custom*-* syntax described here: https://docs.snipcart.com/v2/configuration/custom-fields#product-custom-fields Sample code: data-item-custom1-name="Print label" data-item-custom1-required="true" data-item-custom2-name="Size" data-item-custom2-options="Small|Medium|Large" data-item-custom2-value="Medium" data-item-custom3-name="Gift" data-item-custom3-options="true|false" As I said - this is a rudimentary way to add options to your products. As this method only allows to select/change product options after they are added to the cart, I need to find a reliable way to generate those data-item-custom*-* tags from regular ProcessWire fields so they can be selected directly on the product detail page.

This is possible by using SnipWires built in hookable event handler methods! All hookable event handler methods will return an array containing payload Snipcart sent to your endpoint. An "order completed" event also holds the detailed customers data, which can be used to generate/update a PW user. How to use the hookable event handler methods (sample): $webhooks->addHookAfter('handleOrderCompleted', function($event) { $payload = $event->return; $userRaw = $payload['user']; // <-- will hold the neccessary data for creating a PW user // ... your code here ... }); PLEASE NOTE: those hooks will currently only work when placed in init.php or init() or ready() module methods! Here is a full sample of a payload content you will get when an order is completed (look at the "user" part!):