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.
Related
Stencil provides access the Custom Fields of a Product in a template file as documented in Product Other Details
{{product.custom_fields}}
{{#each custom_fields}}
<li>{{name}}: {{{value}}}</li>
{{/each}}
How do I access the MetaFields that are created in the Product API
POST /catalog/products/{product_id}/metafields?
Product metafields aren't currently surfaced as a Stencil property. Their original purpose was to store metadata against the product object for backend apps (data like shipping origin for ShipperHQ), so they're available via the REST API but not exposed on the front end. If you wanted to access metafields on the frontend, you could build out middleware (using a serverless function, for example) to call the API and pipe that data to the storefront.
It would be good for us to understand your use case better though. Do you want to display metafield values in the template, or base some kind of frontend logic around their values?
While one cannot natively display product metafields in Stencil, there is an app in the Bigcommerce marketplace that allows one do to so. The app also lets one view, create, update, and delete metafields for products, categories, variants, and brands. You can export metafields and import them with a csv file. The app is not free, however, there is a 7 day free trial. This answer is to give an alternative solution to the problem mentioned.
I have an active running shopify store, I need to upgrade it to a new theme.
First need to add pages and products in the new theme in development phase which should only go into the new theme that I am working on to develop and should not disturb the existing store. When all the product and pages for the new development theme are done I would expect to publish it.
What would be the best approach to go with this?
As currently when I go to customize the other theme it doesn't let me add specific products/ pages for that theme only.
Long story short, you can't.
If you like products to be visible to a specific theme only you will need to create a separate dev store or create hidden product ( not visible to the Online Store channel ).
For the pages is not a big problem since if you don't link ( and your search don't look for pages as well ) to them it will be hard to someone to enter then.
This is a common issue - youre doing an overhaul but don't want to disturb current business. Sure on Plus this is made easy ( If you are on plus, ask your MSM for a new dev shop and use the Transporter app ) but for non-plus stores, it can be a headache.
There's no cut and dry answer but here are some ways to get the job done.
Create your dev theme and start doing your work there, as you're doing.
For pages, as mentioned by drip's answer, don't link them and you should be fine. If you don't want search engines to index these while you're working on them, you can also add some liquid logic to your layout/theme.liquid and add the pages you don't want and have it add a meta no-index tag.
If your products are being completely reformatted, i.e. new description formats and such, create one product that has the new formatting, then export your CSV and add the new formatting in there. If you do this, be sure to export again and update your inventory values in your newly formatted sheet since they have likely changed since your export and when your new product formatting is done.
If you have new products you want to hide - give them a special product type, lets say hidden. In your smart collection rules - Type allows a 'not equal to' so set that there and also use the same no-index meta so google isn't indexing them until your ready.
Main things are - your new content can be 'live' in Shopify but if there's no where on site to link to it, its pretty safe unless someone guesses the url. then just make sure you add a band-aid so Google doesn't index them. This can also be extended to your sites search, a bit more work there but 100% doable.
The last bits that are 'always on' like your navigation - that you map all out and hustle on. Or make a new nav with a new handle and use that.
Best of luck! Have done many massive overhauls of sites and product data all while the site is live, just need to use a little finesse to work around some of the things specific to Shopify.
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
We are wanting to add custom product attributes to a BigCommerce store using API so that the main global product page will have the custom product attributes for cigars in our case.
Below are the product attributes so you get an idea on what it will include. We need the ability to have these attribute fields in the admin so when we add or import products they will be populated manually or automatically on the import.
County, Wrapper, Binder, Package, Size, Strength, Shape.
An example of those customs fields you can see on this other website.
http://www.thecigarstore.com/Cigars/Rocky-Patel/Rocky-Patel-Sun-Grown-Toro.htm
This is BigCommerce's API page on this.
http://developer.bigcommerce.com/docs/api/v2/resources/products/custom_fields
As mentioned here, this seems to be a bug in the API. I am not sure what are Bigcommerce plans to fix it, but I imagine there's plenty of people waiting to be fixed.
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