
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
FooCart is widget written with TypeScript that display Cart for Products on any HTML page.
FooCart is widget written with TypeScript that display Cart for Products on any HTML page.
The strong sides of widget is:
EMAIL_ADDRESS
to yours email address and press Publish > Deploy as web app and copy App URLFor embed widget to any website page please add following code where you need replace APP_URL with App URL from previous section:
<div
id="foocart"
data-price-template="${price}"
data-lang="en"
data-complete-url="APP_URL"
></div>
<script src="https://unpkg.com/foocart/dist/index.js" defer crossorigin="anonymous"></script>
where:
Attribute | Default value | Meaning |
---|---|---|
id | foocart | Required. ID of element that contain FooCart widget. |
data-complete-url | - | Required. URL of Google Spreadsheet Items Table Script. |
data-lang | en | Optional. Language of Cart. Available: en , ua , ru . |
data-price-template | ${price} | Optional. Price template for all prices in cart. |
Then you ready to add Add to Cart Button. For this please add following code:
<a
href="/apple-iphone-12-pro.html"
data-foocart-price="1099"
data-foocart-url="https://foocart.project//apple-iphone-12-pro.html"
data-foocart-name="Apple iPhone 12 Pro"
data-foocart-image="https://i.citrus.ua/imgcache/size_500/uploads/shop/8/d/8d515e4a0b98bb5c151a628aada312a2.jpg"
>Apple iPhone 12 Pro</a>
where:
Attribute | Default value | Meaning |
---|---|---|
data-foocart-url | - | URL of item is the page where item description located. |
data-foocart-name | innerText of element | Name of item. |
data-foocart-id | hash of URL and Name | ID of item is specific number or string that could identify the item. |
data-foocart-price | 0 | Price of item. |
data-foocart-image | - | URL of item image that will be displayed in the cart. |
For get access to FooCart API please use FooCart Callback that could be defined as:
<script>
window.__foocartCallback = function(cart) {
// Add new item
cart.addItem({
id: '10',
name: 'Foo',
price: 10
});
};
</script>
then you can use API Methods for Add, Remove items from the cart.
Method | Arguments | Returns | Meaning |
---|---|---|---|
addItem(item) | item: { id: string | number, name: string, url: string, count: number, image: string, price: number } | Item | Add item to cart. If item with the same ID is exists - then we just increase count of this item. |
addItemCount(itemId, count=1) | itemId: string | number count: number | - | Add item count that already exists in cart. If item with ID is not present in cart - it will do nothing. |
removeItem(itemId) | itemId: string | number | - | Remove item by ID. If item is not present in cart - it will do nothing. |
removeItemCount(itemId, count=1) | itemId: string | number count: number | - | Remove item count by ID. If item count is less than zero - it will set count to 1. If item with ID is not present in cart - it will do nothing. |
removeAllItems() | - | - | Remove all items. Cart became empty. |
getItems() | - | Array | Just return array of items. |
setSection(sectionId) | sectionId: enum(button, cart, order, complete) | - | Display specific cart section. |
getTotalPrice() | - | number | Just return total price of all items. |
FAQs
FooCart is widget written with TypeScript that display Cart for Products on any HTML page.
We found that foocart demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.