BigCommerce - Custom Checkout (Adding Field to Cart) - bigcommerce

I am doing some work for a client who uses BigCommerce Stencil Theme and I am pretty new to BC. Until now most of my work with them has been basic theme formatting and styling.
They are asking if I can add checkboxes next to items in cart to indicate an alternative delivery system, and then add a field to address for a hotel room. It seems like built into BC checkout customization you can add fields to addresses so that doesn't seem like an issue, but I'm not so sure about the checkboxes. I would imagine I would need access to the underlying PHP to make this happen which doesn't seem possible. Is this accurate? If not, how might I go about doing this?
I see that I can add the checkboxes themselves to the template files, but as far as sending any data with the checkout I don't know how I'd go about doing this.

For the hotel room address field, you are correct that the simplest solution would be to use the built-in custom address field feature.
For the checkbox/alternate delivery system, we're close to releasing a new Checkout JS SDK that will give you the ability to create a completely custom checkout experience. The SDK is basically a Javascript wrapper for our Storefront Checkout API and it includes operations for checkout actions (like creating a new shipping consignment for an alternate delivery method).
The Checkout SDK doesn't give you access to the underlying PHP; instead, it allows you to create your own frontend using React or whatever framework you prefer. The logic for custom checkout steps would exist in your frontend, and you would send your data to the checkout via the BC Checkout API.
https://stencil.bigcommerce.com/docs/customizing-checkout

Related

Shopify: custom scripts in the checkout to execute web requests

I've a client that wants certain clients to buy with Store Credit. The amount of credit is stored in their external ERP system. My idea was to create a manual custom payment, show this payment method for users with a certain customer tag and add some scripts in the checkout in order to execute a web request and get how much credit the client has at that moment and do some validations (don't let them order if the checkout is bigger than the credit) in order to let them complete the order or not.
The only link I've found basically says:
With a few exceptions, Shopify Scripts are not capable of input/output. This means that scripts can't execute web requests or database calls, and can't get input from a user. Source: https://help.shopify.com/en/manual/checkout-settings/script-editor/limitations#input-output
The client is aware they need to upgrade to Shopify Plus, but I can't find examples or any information that indicates this idea is doable.
I don't think Shopify Script is the solution in this case. (You can't make any outside call inside a script)
If you plan to use Shopify Plus you can modify checkout.liquid. You can create an app that has an endpoints that
Tells you how many points the customer has
Redeems X points and returns a discount code
Having that you can put a javascript that when checking out insert a button to redeem the points and if it's clicked you call the api and apply the discount.
To apply dynamically a coupon at checkout this is a working piece of code.
document.querySelector("#checkout_reduction_code").value = YOUR_CODE;
document.querySelector(".field__input-btn.btn").disabled = false;
document.querySelector(".field__input-btn.btn").click();
Other solution is to use Shopify Functions (https://shopify.dev/api/functions). This is a new feature that is availble in preview and lets you customize the checkout experience. I don't have experience with that but I suppose you can do something similar.

Shopify Gatsby checkout

If you've ever watched Trevor Harmon's talk on Gatsby and Shopify, he does explain the integration between both.
Basically, in Shopify, all you need is
Shopify partner account (for someone aiming to test this)
Bogus gateway for payments
Create new private app in Shopify. Storefront API, and select the boxes to read product tags and read customer tags.
Create products. Options - size, color, ... Variance - combination of options.
Now, to pull data to Gatsby one needs the plugin gatsby-source-shopify and allShopifyProduct has variants with shopifyID and that's what one wants to use.
Then, for the checkout, he mentions shopify-buy plugin. Thing is, I couldn't find such plugin.
Found one with similar name called gatsby-plugin-shopify-buy but it has
a slightly different name (In Gatsby plugins already noticed there's people giving similar names to some good ones as a way to get people to use them) and different methods, so that's not the one.
How should I implement the checkout then?
This js-buy-sdk plugin is the one you were looking for. For the checkout you'd need something like this
// Create an empty checkout
client.checkout.create().then((checkout) => {
// Do something with the checkout
console.log(checkout);
});
Is that what you are looking for gatsby-plugin-shopify-buy?
According to the documentation, the context passed to the StoreContext.Consumer or as the prop storeContext to withStoreContext child components.

Shopify custom forms using liquid

I would like customers to complete a custom survey so we can gauge which product is most right for them.
My idea is to use a form to collect the customers answers and run a function to determine the product they need.
Is this possible using a shopify theme?
I am very confused on integrating custom logic into a theme
If the logic for the survey is written in Javascript and the function that determines the product is written in Javascript it will be possible.
To be more precise if you don't use the Shopify forms logic, but custom code everything it will be possible but it will require a lot of configuration depending of the survey length.
But things like sending a custom email to the customers or something in those line will not be possible with Shopify (only if you use a third party App for custom forms logic).

Test multiple-product purchase with sandbox PayPal

I have a webshop and im almost there, but I have a number of items for purchase which are downloadable content. I fixed so when a user has paid they are redirected to my pdt.php where they get a receipt, Now I written code for also displaying content if the item-id are == something. Now I wanna make a sandbox/test-purchase of all products that are downloadable ontent which are 28. I can create 28 buttons and have the id 1-28 but that seems stupid. How can I do this easier?
Check out the cart upload command method of sending transaction data to PayPal. It's similar to standard buttons except that you'll include all items in a single form.
Alternatively, if you're familiar with web service API's I'd recommend using the Express Checkout API. This gives you more freedom over your checkout and provides more advanced features as well.

Shopify API: Create a Promotion?

Using the Shopify API, is there a way to creation promotions for your store? If not, is there a way to programmatically create promotions in Shopify? (short of using CURL posts to the admin)
That is, I can create a promotion by hand using the admin and navigating to the Promotions and clicking the Add a discount code link. I'd like to be able to do the same thing programmatically, or to know for certain this isn't possible. I don't see any obvious method on the api list, but it seems like something should be an API method.
Unfortunately they don't allow it... I resorted to creating an interface to do so, though:
https://github.com/MartinAmps/Shopify-Private-APIs
Hope it helps
Edit
I also created a blog post about it.
There is no way to create discounts via the API.
If you want we have made an application that can be used to create discount codes.
Otherwise you can use a tool like Mechanize to automate coupon creation for you, but keep in mind theres a good chance that any time in the future it will break since we don't make any promises to keep our admin the same in the future. Any changes have a good chance of breaking whatever script you'd end up writing.
The Price Rules API is now public and allow any app to create price rules and discount codes.
https://help.shopify.com/api/price-rules
If you're familiar with Rails or you're already using ActiveResource for your Shopify API calls, then you can drop in this modified version of Discount < ActiveResource::Base https://gist.github.com/choonkeat/09a56da222f506e627c5