{"_id":"@brave-agency/gocart","_rev":"1-76df0bb20cc6d3089de01891176eec75","name":"@brave-agency/gocart","dist-tags":{"latest":"1.0.9"},"versions":{"1.0.9":{"name":"@brave-agency/gocart","version":"1.0.9","description":"goCart.js - Complete Shopify Ajax cart from Bornfight","keywords":["shopify","ajax","cart","drawer"],"homepage":"","repository":{"type":"","url":""},"license":"MIT","author":{"name":"Bornfight","email":"hello@bornfight.com","url":"https://www.bornfight.com/"},"main":"build/index.js","scripts":{"build":"node scripts/build.js","coverage":"node scripts/test.js --coverage --watchAll=false","demo":"node scripts/demo.js","postinstall":"node bin/postinstall","prepare":"npm run build","start":"node scripts/start.js","test":"node scripts/test.js"},"babel":{"plugins":[["@babel/plugin-proposal-class-properties"]],"presets":["@babel/preset-env","@babel/preset-react"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"eslintConfig":{"extends":"react-app"},"jest":{"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts","!src/lib/index.js","!src/demo/index.js","!src/utils/**","!src/**/*.d.ts","!**/tests/**"],"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"modulePaths":[],"roots":["/src"],"setupFiles":["react-app-polyfill/jsdom"],"setupFilesAfterEnv":[],"testEnvironment":"jest-environment-jsdom-fourteen","testMatch":["/src/**/__tests__/**/*.{js,jsx,ts,tsx}","/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"transform":{"^.+\\.(js|jsx|ts|tsx)$":"/node_modules/babel-jest","^.+\\.css$":"/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|ts|tsx|css|json)$)":"/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"]},"dependencies":{"@shopify/theme-currency":"^3.1.0","form-serialize":"^0.7.2","node-sass":"^4.14.1","whatwg-fetch":"^3.4.1"},"devDependencies":{"@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/preset-env":"^7.12.1","@babel/preset-react":"^7.12.1","@svgr/webpack":"4.3.2","@typescript-eslint/eslint-plugin":"1.13.0","@typescript-eslint/parser":"1.13.0","babel-eslint":"10.0.3","babel-jest":"^24.8.0","babel-loader":"8.0.6","babel-plugin-named-asset-import":"^0.3.6","babel-preset-react-app":"^9.1.2","camelcase":"^5.2.0","case-sensitive-paths-webpack-plugin":"2.2.0","css-loader":"3.2.0","dotenv":"8.1.0","dotenv-expand":"4.2.0","eslint":"^6.8.0","eslint-config-react-app":"^5.2.1","eslint-loader":"3.0.1","eslint-plugin-flowtype":"3.13.0","eslint-plugin-import":"2.18.2","eslint-plugin-jsx-a11y":"6.2.3","eslint-plugin-react":"7.15.0","eslint-plugin-react-hooks":"^2.5.1","file-loader":"4.2.0","fs-extra":"8.1.0","html-webpack-plugin":"4.0.0-beta.8","identity-obj-proxy":"3.0.0","is-wsl":"^2.2.0","jest":"24.9.0","jest-environment-jsdom-fourteen":"0.1.0","jest-resolve":"24.9.0","jest-watch-typeahead":"0.4.0","mini-css-extract-plugin":"0.8.0","miragejs":"^0.1.40","optimize-css-assets-webpack-plugin":"5.0.3","pnp-webpack-plugin":"1.5.0","postcss-flexbugs-fixes":"4.1.0","postcss-loader":"3.0.0","postcss-normalize":"8.0.1","postcss-preset-env":"6.7.0","postcss-safe-parser":"4.0.1","react":"^16.14.0","react-app-polyfill":"^1.0.6","react-dev-utils":"^9.0.3","react-dom":"^16.14.0","resolve":"1.12.0","resolve-url-loader":"3.1.0","sass-loader":"7.3.1","semver":"6.3.0","style-loader":"1.0.0","terser-webpack-plugin":"2.1.2","ts-pnp":"1.1.4","url-loader":"2.1.0","webpack":"4.41.0","webpack-dev-server":"3.8.1","webpack-manifest-plugin":"2.1.2","workbox-webpack-plugin":"4.3.1"},"gitHead":"32b306b689f8167f832628c53fc078dcc052ed83","_id":"@brave-agency/gocart@1.0.9","_nodeVersion":"10.20.1","_npmVersion":"6.14.4","dist":{"integrity":"sha512-oGgAFuJxnZJ9LaGRREkK8XAqSq1XdQO5VyM4BzkJ2Z6kpmqe66RWAO6fv6pjcyjoSgIV1UaLJab6qF+yvmPKjg==","shasum":"094576e8ea9f862502af7c08e4294920fc57a1f9","tarball":"https://registry.npmjs.org/@brave-agency/gocart/-/gocart-1.0.9.tgz","fileCount":19,"unpackedSize":186275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0MYICRA9TVsSAnZWagAA3KcP/j+QG02cchB+WcT6wgqQ\nj67uOitWKj6st+Rs0V3cUTb0fngz0WDxv1SO4ZSDgGdzfd0w3ZHsP9iHa4eM\ndW5opioV3Us+4AWLGcOjVF511/RX4ZglPfFHTJ6XEoqDDpxP1e882UzPgYuG\nH/PnXYeTzKUtXNgMiyILS1p1lCBZiAjD7VBBQIv+i7e7ZF1Eei/WWlCR4pBA\nWxfeaCCdgtiQi3cJB+8m2F7qP1zUekDe5hLivRyjoZ2d54bx3Aht/8r4UWDY\nrv72mzO4zPZ87lAIQObpmGXaT9uaDFA1ZUlSEQNlC7sp953NkJQWvnz6IDJa\nT2Nv88uFpA2oMibSlgOrcE/e4KqwAdSHB4JIuVaRFkW/gLZXN3W+JNFjC8FV\nhmT4Y7c9b7/3vaFQfnKLejHClTOO2BFCp41UcYIGWI6Rb7z9w8guEHV78cMV\ndBwtjOuxVPu2RRJWo8VFoptJZPr4iQX50EGFV9nR+XS43i7zRCJrAlEekKv/\nwxq5WTBOJW5ZeHc6GMFKB6gAwj4dD+bO0Jt/mjdPt4FgsWFur2nDCrlR1VsC\n1wSQEk4jB3JzThI906XuxyXzYBj2V5YSnPCMNlfh0dYCrLbkDpJOEVFgGA0Y\nuzE21nbpA//HknnfOv4SXfWLAkK4mSPYmBjf3XWRcNdv2G3xDdDB9+X1O8b3\nWie4\r\n=Ruwg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1DE2IarTisrtBxjOObaAdCdG2OO9VTuYSmUiIt6/F3AiEAxBRQXk3acr89U81XuGhWcovBylhq3H9A1uva1Q0t+sE="}]},"_npmUser":{"name":"brave-agency","email":"sam@brave.agency"},"directories":{},"maintainers":[{"name":"brave-agency","email":"sam@brave.agency"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gocart_1.0.9_1607517703953_0.8401108726929927"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-09T12:41:43.918Z","1.0.9":"2020-12-09T12:41:44.104Z","modified":"2022-04-04T20:27:02.545Z"},"maintainers":[{"name":"brave-agency","email":"sam@brave.agency"}],"description":"goCart.js - Complete Shopify Ajax cart from Bornfight","keywords":["shopify","ajax","cart","drawer"],"repository":{"type":"","url":""},"author":{"name":"Bornfight","email":"hello@bornfight.com","url":"https://www.bornfight.com/"},"license":"MIT","readme":"

\n \n

\n\n___\n\n[![npm version](https://badge.fury.io/js/%40bornfight%2Fgocart.svg)](https://badge.fury.io/js/%40bornfight%2Fgocart)\n![GitHub last commit](https://img.shields.io/github/last-commit/bornfight/gocart.js)\n![npm](https://img.shields.io/npm/dm/@bornfight/gocart)\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/bornfight/goCart.js/issues)\n[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n\n# goCart.js \n\nA complete Shopify Ajax cart solution written in vanilla JS. This plugin includes Ajax cart drawer, Ajax mini cart, add to cart modal, and error modal. \nPlugin by [Bornfight](https://www.bornfight.com/) front-end team.\n\n## :video_game: Demo\n\n- All products\n\n[https://ajax-cart-plugin-npm-test.myshopify.com/collections/all/](https://ajax-cart-plugin-npm-test.myshopify.com/collections/all/)\n\n- Product with one variant\n\n[https://ajax-cart-plugin-npm-test.myshopify.com/products/classic-leather-jacket](https://ajax-cart-plugin-npm-test.myshopify.com/products/classic-leather-jacket)\n\n- Product with multiple variants\n\n[https://ajax-cart-plugin-npm-test.myshopify.com/products/classic-varsity-top](https://ajax-cart-plugin-npm-test.myshopify.com/products/classic-varsity-top)\n\n \n## :muscle: Features\n\n- Cart drawer (with left or right direction)\n- Mini cart (cart flying under cart button)\n- Success modal when product was added to cart with CTA buttons to continue shopping (optional)\n- Error modal (when Ajax request fails)\n- Control of products inside opened cart (remove, add or subtract quantity) \n- See all product information inside opened cart (image, title, variant)\n- Written in vanilla JS (no Jquery needed) \n- Barebones (only minimal styles are included) \n\n## :hammer: Getting Started \n \nCompiled code can be found in the `build` directory. The `src` directory contains development code. \n \n### 1. Install plugin \n \n```\nnpm i @bornfight/gocart\n``` \n\n### 2. Import goCart.js to your theme JS\n\n```\nimport GoCart from '@bornfight/gocart';\n```\n\nOr if you are not using any module bundler you can import goCart.js manually. Add `index.js` file from `build` folder (you can also rename it) to your theme `assets` folder.\n\nThen just include the goCart.js inside `theme.liquid` file, best right before closing of `` tag.\n\n```\n{{ 'gocart.js' | asset_url | script_tag }}\n```\n \n### 3. Import CSS/SCSS styles \n \nTake the CSS file from `build` folder and include it in your Shopify theme. \n\nIf you are using SCSS you can find the SCSS file inside `src` folder: `src/lib/scss/go-cart.scss`. \n \nYou can also simply include it from `node_modules` like this: \n \n```\n@import \"~@bornfight/gocart/src/lib/scss/go-cart\";\n``` \n \n### 4. Include `go-cart.liquid` file as section \n \nTake the `go-cart.liquid` file from `src/lib/` and put it in `sections` folder of your Shopify theme. \n\nThis file contains all elements that make goCart.js \n\nTo make goCart.js elements visible (drawer, modals) you need to include it in your `theme.liquid` file. `theme.liquid` file is the main file of your theme, so if a section is included inside of it will be visible on all pages. \n \nTo do so insert this code: \n```\n{%- section 'go-cart' -%}\n``` \ninside `theme.liquid` file, best right before closing of `` tag. \n \n### 5. Edit product.liquid section \n \nInside your product template (if you use section inside product template then open product section) find the form to add product to cart. \n \nThis will probably look similar to this: \n \n``` \n
...... \n``` \n \nYou will need to add identifier to that form which goCart.js uses to add products to cart. Replace this code with this (just adding the ID): \n \n``` \n\n ``` \n \nInside that same form, find 'Add to cart' button, which user presses when he wants to add product to cart. \n \nThis will probably look similar to this:\n \n``` \n \n``` \n \nYou will need to add class to that button that goCart.js uses to prevent standard behavior and to add to cart with Ajax (just adding the class). \n \n``` \n \n``` \n \n### 6. Replace your cart button with goCart button\n\nTake the `go-cart-button.liquid` file from `src/lib/` and put it in `snippets` folder of your Shopify theme. \n\nThis file contains goCart elements that make cart button with number of items inside cart.\n \nLocate the file that contains your cart button. Usually this will be inside `header.liquid` section. \n\nInside your file just include goCart button as a snippet instead your old cart button like this: \n\n`{%- include \"go-cart-button\" -%}` \n\nThere is no need to have two cart buttons so you can completely remove your old cart button.\n \n### 7. Init the plugin \n\n```\nconst goCart = new GoCart();\n```\n\nor for manual installations, init inside `theme.liquid` file, right after including the goCart.js script from assets.\n\n```\n\n```\n\nYou should have something like this:\n\n```\n{{ 'gocart.js' | asset_url | script_tag }}\n\n\n```\n \n## :airplane: Options\n```\n{\n cartMode: 'drawer', //drawer or mini-cart \n drawerDirection: 'right', //cart drawer from left or right\n displayModal: false, //display success modal when adding product to cart\n moneyFormat: '${{amount}}', //template for money format when displaying money\n}\n```\n\n## :moneybag: Currency options\n\nPrice is converted to money with Shopify's `theme-currency` script. You can check it out here:\n\n[https://github.com/Shopify/theme-scripts/blob/master/packages/theme-currency/README.md](https://github.com/Shopify/theme-scripts/blob/master/packages/theme-currency/README.md) \n\nDefault currency is Dollar ($). If your shop uses different currency you can change the output of money inside goCart.js with `moneyFormat` option.\n\nOptions accepts template for Shopify's `theme-currency` script. \n\n```\n{\n moneyFormat: '${{amount}}'\n}\n```\n\nThis will print `$50.00`.\n\nChanging the template you can change how your money is displayed, so: \n\n```\n{\n moneyFormat: '€{{amount}}'\n}\n```\n\nwill print `€50.00`, and \n\n```\n{\n moneyFormat: '{{amount}} HRK'\n}\n```\n\nwill print `50.00 HRK`.\n\n## :question: Drawer and mini cart modes\n\ngoCart.js has two cart modes - drawer and mini cart. Drawer is mode where cart comes from left or right outside of the visible viewport. Mini cart mode flies under the cart button (cart icon) in header. Both are very popular these days and you can change the cart layout with goCart.js within seconds. If you are using Drawer mode and you are keen on performance, you can even remove the mini cart liquid code from `go-cart-button.liquid`. Liquid code for the mini cart mode is between the mini cart commented code inside that file: \n\n```\n\n...\n\n```\n\nOr if you are using only mini cart and you are keen on performance you can remove the cart drawer liquid code from `go-cart.liquid`. Liquid code for the cart drawer mode is between the cart drawer commented code inside that file: \n\n```\n\n...\n\n```\n\n## :globe_with_meridians: Browser Compatibility \n \ngoCart.js works in all modern browsers, IE11 and above is supported. \n \n## :white_check_mark: License\n\nMIT License\n","readmeFilename":"README.md"}