yarn add shopify-buy<\/em><\/strong><\/code><\/pre>\n\n\n\n<\/em><\/strong> <\/em><\/strong>OR<\/em><\/strong><\/p>\n\n\n\nWith NPM:<\/p>\n\n\n\n
npm install shopify-buy<\/em><\/strong><\/code><\/pre>\n\n\n\nHow to Use the Plugin<\/strong>:<\/h4>\n\n\n\nNote- <\/strong>We will create a separate file for Shopify functions, and <\/p>\n\n\n\nWe have named it shopifyServices.js.<\/strong><\/p>\n\n\n\n2. Initializing the Client<\/strong>:<\/h3>\n\n\n\nIf your Shopify store supports various languages, Storefront API can return the translated resource types and fields. <\/p>\n\n\n\n
Import Library in Your App Code-<\/strong><\/li><\/ol>\n\n\n\nimport Client from 'shopify-buy';\n<\/code><\/pre>\n\n\n\nInitializing the Client<\/strong><\/li><\/ol>\n\n\n\n\/\/ Initializing a client to return content in the store's \nprimary language\nconst client = Client.buildClient({\n domain: 'your-shop-name.myshopify.com',\n storefrontAccessToken: 'your-storefront-access-token'\n});\n<\/code><\/pre>\n\n\n\n Note- domain:<\/strong> will be your Shopify domain<\/p><\/blockquote>\n\n\n\nstorefrontAccessToken:<\/strong> This will be the Storefront access token<\/p>\n\n\n\n3. Fetching Products<\/strong><\/h3>\n\n\n\nFetch All Products in Your Shop<\/strong><\/li><\/ol>\n\n\n\n\/\/ Fetch all products in your shop\n \nexport async function fetchAllProducts() {\n \n return client.collection.fetchAll();\n}\n<\/code><\/pre>\n\n\n\nYou can fetch all the products by accessing this function,<\/p>\n\n\n\n
var products = await fetchAllProducts(); \n<\/code><\/pre>\n\n\n\nFetch Single Product by Id<\/strong><\/li><\/ol>\n\n\n\n\/\/ Fetch a single product by ID\n \nconst productId = 'gid:\/\/shopify\/Product\/7857989384';\n \nexport async function fetchSingleProduct() {\n \n return client.product.fetch(productId);\n}\n<\/code><\/pre>\n\n\n\n4. Fetching Collections<\/strong>:<\/h3>\n\n\n\n\/\/ Fetch all collections, including their products\nexport async function fetchCollections() {\n \n return client.product.fetchAllWithProducts();\n}\n<\/code><\/pre>\n\n\n\nFetch Single Collection by ID<\/strong><\/h4>\n\n\n\n\/\/ Fetch a single collection by ID, including its products\nexport async function fetchCollectionById() {\n \/\/collectId which do you want to fetch\n const collectionId = 'gid:\/\/shopify\/Collection\/369312584';\n \n return client.product.fetchWithProducts(collectionId);\n}\n<\/code><\/pre>\n\n\n\n5. Creating Empty Checkout<\/strong>:<\/h3>\n\n\n\n\/\/ Create an empty checkout\nexport async function createCheckout() {\n \n return client.checkout.create();;\n}\n<\/code><\/pre>\n\n\n\n6. Updating Checkout Attributes<\/strong>:<\/h3>\n\n\n\n\/\/ Updating checkout attributes\nexport async function updateAttributes() {\n const checkoutId = 'gid:\/\/shopify\/Checkout\/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8';\n const input = {customAttributes: [{key: \"MyKey\", value: \"MyValue\"}]};\n return client.checkout.updateAttributes(checkoutId, input);\n}\n<\/code><\/pre>\n\n\n\n7. Adding Line Items:<\/strong><\/h3>\n\n\n\n\/\/ Adding Line Items\nexport async function addLineItems() {\n const checkoutId = 'gid:\/\/shopify\/Checkout\/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8'; \/\/ ID of an existing checkout\n const lineItemsToAdd = [\n {\n variantId: 'gid:\/\/shopify\/ProductVariant\/29106064584',\n quantity: 5,\n customAttributes: [{key: \"MyKey\", value: \"MyValue\"}]\n }\n ];\n return client.checkout.addLineItems(checkoutId, lineItemsToAdd);\n}\n<\/code><\/pre>\n\n\n\n8. Updating Line Items<\/strong>: <\/h3>\n\n\n\n\/\/ Updating Line Items\nexport async function updateLineItems() {\n const checkoutId = 'gid:\/\/shopify\/Checkout\/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8'; \/\/ ID of an existing checkout\n const lineItemsToUpdate = [\n {\n id: 'gid:\/\/shopify\/CheckoutLineItem\/194677729198640?checkout=e3bd71f7248c806f33725a53e33931ef',\n quantity: 2\n }\n ];\n \n return client.checkout.updateLineItems(checkoutId, lineItemsToUpdate);\n}\n<\/code><\/pre>\n\n\n\n9. Removing Line Items<\/strong>: <\/h3>\n\n\n\n\/\/ Removing Line Items\n \nexport async function removeLineItems() {\n const checkoutId = 'gid:\/\/shopify\/Checkout\/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8'; \/\/ ID of an existing checkout\n const lineItemIdsToRemove = [\n 'gid:\/\/shopify\/CheckoutLineItem\/194677729198640?checkout=e3bd71f7248c806f33725a53e33931ef',\n 'gid:\/\/shopify\/CheckoutLineItem\/194688829198640?checkout=e3bd71f7248c806f33725a53e3345gtd'\n ];\n return client.checkout.removeLineItems(checkoutId, lineItemIdsToRemove);\n}\n<\/code><\/pre>\n\n\n\n10. Fetching Checkout: <\/strong><\/h3>\n\n\n\n\/\/ Fetching a Checkout\n \nexport async function fetchCheckout() {\n const checkoutId = 'gid:\/\/shopify\/Checkout\/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8'; \/\/ ID of an existing checkout\n \n return client.checkout.fetch(checkoutId);\n}\n<\/code><\/pre>\n\n\n\n11. Adding a Discount<\/strong>: <\/h3>\n\n\n\n\/\/ Adding a Discount\n \nexport async function addDiscount() {\n const checkoutId = 'gid:\/\/shopify\/Checkout\/e3bd71f7248c806f33725a53e33931ef?key=47092e448529068d1be52e5051603af8'; \/\/ ID of an existing checkout\n const discountCode = 'best-discount-ever';\n return client.checkout.addDiscount(checkoutId, discountCode);\n}\n<\/code><\/pre>\n\n\n\n12. Removing a Discount<\/strong>:<\/h3>\n\n\n\n