Merge pull request #12595 from openminder/master

Update Shopify Buy v0.4.2 Typings
This commit is contained in:
Yui
2016-11-10 14:33:10 -08:00
committed by GitHub
2 changed files with 268 additions and 192 deletions
+12 -12
View File
@@ -5,7 +5,7 @@
============================================================ */
let client = ShopifyBuy.buildClient({
apiKey: 'bf081e860bc9dc1ce0654fdfbc20892d',
myShopifyDomain: 'embeds',
domain: 'embeds',
appId: '6'
});
@@ -34,7 +34,7 @@ client.fetchProduct('3614436099').then(function (fetchedProduct : ShopifyBuy.Sho
product = fetchedProduct;
var selectedVariant : ShopifyBuy.Shopify.ProductVariantModel = product.selectedVariant;
var selectedVariantImage : any = product.selectedVariantImage;
var currentOptions : ShopifyBuy.Shopify.Option[] = product.options;
var currentOptions : ShopifyBuy.Shopify.ProductOptionModel[] = product.options;
var variantSelectors = generateSelectors(product);
$('.variant-selectors').html(""+variantSelectors);
@@ -51,7 +51,7 @@ client.fetchProduct('3614436099').then(function (fetchedProduct : ShopifyBuy.Sho
/* Generate DOM elements for variant selectors
============================================================ */
function generateSelectors(product : ShopifyBuy.Shopify.ProductModel) {
var elements = product.options.map(function(option : ShopifyBuy.Shopify.Option) {
var elements = product.options.map(function(option : ShopifyBuy.Shopify.ProductOptionModel) {
var optionsHtml = option.values.map(function(value : any) {
return '<option value="' + value + '">' + value + '</option>';
});
@@ -127,7 +127,7 @@ function attachOnVariantSelectListeners(product : ShopifyBuy.Shopify.ProductMode
var $element : any = $(event.target);
var name : string = $element.attr('name');
var value : string = $element.val();
product.options.filter(function(option : ShopifyBuy.Shopify.Option) {
product.options.filter(function(option : ShopifyBuy.Shopify.ProductOptionModel) {
return option.name === name;
})[0].selected = value;
@@ -172,7 +172,7 @@ function buyButtonClickHandler(evt : any) {
evt.preventDefault();
var id : string | number = product.selectedVariant.id;
var quantity : number;
var cartLineItem : ShopifyBuy.Shopify.CartLineItem = findCartItemByVariantId(id);
var cartLineItem : ShopifyBuy.Shopify.CartLineItemModel = findCartItemByVariantId(id);
quantity = cartLineItem ? cartLineItem.quantity + 1 : 1;
@@ -188,7 +188,7 @@ function updateQuantity(fn : Function, variantId : string | number) {
return (variant.id === variantId);
})[0];
var quantity : number;
var cartLineItem : ShopifyBuy.Shopify.CartLineItem = findCartItemByVariantId(variant.id);
var cartLineItem : ShopifyBuy.Shopify.CartLineItemModel = findCartItemByVariantId(variant.id);
if (cartLineItem) {
quantity = fn(cartLineItem.quantity);
updateVariantInCart(cartLineItem, quantity);
@@ -218,7 +218,7 @@ function fieldQuantityHandler(evt : any) {
var variant : ShopifyBuy.Shopify.ProductVariantModel = product.variants.filter(function (variant : ShopifyBuy.Shopify.ProductVariantModel) {
return (variant.id === variantId);
})[0];
var cartLineItem : ShopifyBuy.Shopify.CartLineItem = findCartItemByVariantId(variant.id);
var cartLineItem : ShopifyBuy.Shopify.CartLineItemModel = findCartItemByVariantId(variant.id);
var quantity : number = evt.target.value;
if (cartLineItem) {
updateVariantInCart(cartLineItem, quantity);
@@ -267,7 +267,7 @@ function findCartItemByVariantId(variantId : string | number) {
============================================================ */
function addOrUpdateVariant(variant : ShopifyBuy.Shopify.ProductVariantModel, quantity : number) {
openCart();
var cartLineItem : ShopifyBuy.Shopify.CartLineItem = findCartItemByVariantId(variant.id);
var cartLineItem : ShopifyBuy.Shopify.CartLineItemModel = findCartItemByVariantId(variant.id);
if (cartLineItem) {
updateVariantInCart(cartLineItem, quantity);
@@ -280,7 +280,7 @@ function addOrUpdateVariant(variant : ShopifyBuy.Shopify.ProductVariantModel, qu
/* Update details for item already in cart. Remove if necessary
============================================================ */
function updateVariantInCart(cartLineItem : ShopifyBuy.Shopify.CartLineItem, quantity : number) {
function updateVariantInCart(cartLineItem : ShopifyBuy.Shopify.CartLineItemModel, quantity : number) {
var variantId : string | number = cartLineItem.variant_id;
var cartLength : number = cart.lineItems.length;
cart.updateLineItem(cartLineItem.id, quantity).then(function(updatedCart : ShopifyBuy.Shopify.CartModel) {
@@ -311,7 +311,7 @@ function addVariantToCart(variant : ShopifyBuy.Shopify.ProductVariantModel, quan
openCart();
cart.addVariants({ variant: variant, quantity: quantity }).then(function() {
var cartItem : ShopifyBuy.Shopify.CartLineItem = cart.lineItems.filter(function (item : ShopifyBuy.Shopify.CartLineItem ) {
var cartItem : ShopifyBuy.Shopify.CartLineItemModel = cart.lineItems.filter(function (item : ShopifyBuy.Shopify.CartLineItemModel ) {
return (item.variant_id === variant.id);
})[0];
var $cartItem = renderCartItem(cartItem);
@@ -332,7 +332,7 @@ function addVariantToCart(variant : ShopifyBuy.Shopify.ProductVariantModel, quan
/* Return required markup for single item rendering
============================================================ */
function renderCartItem(lineItem : ShopifyBuy.Shopify.CartLineItem) {
function renderCartItem(lineItem : ShopifyBuy.Shopify.CartLineItemModel) {
var lineItemEmptyTemplate = $('#CartItemTemplate').html();
var $lineItemTemplate = $(lineItemEmptyTemplate);
var itemImage = lineItem.image.src;
@@ -401,6 +401,6 @@ function updateCartTabButton() {
/* Set previously focused item for escape handler
============================================================ */
function setPreviousFocusItem(item : ShopifyBuy.Shopify.CartLineItem) {
function setPreviousFocusItem(item : ShopifyBuy.Shopify.CartLineItemModel) {
previousFocusItem = item;
}
+256 -180
View File
@@ -1,4 +1,4 @@
// Type definitions for shopify-buy
// Type definitions for shopify-buy 0.4.2
// Project: http://shopify.github.io/js-buy-sdk/api/
// Definitions by: Martin Köhn <https://github.com/openminder>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -7,39 +7,54 @@
* The JS Buy SDK is a lightweight library that allows you to build ecommerce into any website.
* It is based on Shopify’s API and provides the ability to retrieve products and collections from your shop,
* add products to a cart, and checkout.
* It can render data on the client side or server. This will allow you to add ecommerce functionality to any
* website or javascript application. This is helpful if you already have a website and need to add ecommerce
* or only need a simple buy button on your site.
*/
declare namespace ShopifyBuy {
/**
* Create a ShopClient. This is the main entry point to the SDK.
*/
export function buildClient(configAttrs : Shopify.Config) : Shopify.ShopClient
export function buildClient(configAttrs: Shopify.Config): Shopify.ShopClient
/**
* Internal Image description
*/
interface Image {
id : string|number
src : string
position : number
product_id : string
variant_ids : Array<string>
created_at : string
updated_at : string
id: string | number
created_at: string
position: number
updated_at: string
product_id: string
src: string
variant_ids: Array<string>
}
interface ImageVariant {
name: string,
dimensions: string,
src: string
}
interface OptionValue {
name: string,
option_id: string | number,
value: any
}
/**
* Internal BaseModel class
*/
class BaseModel {
constructor( attrs: any, metaAttrs: any )
constructor(attrs: any, metaAttrs: any)
attrs : any
attrs: any
serializer: any
adapter: any
shopClient: any
}
var NO_IMAGE_URI : string;
var NO_IMAGE_URI: string;
/**
* This namespace contains all globally accessible classes
@@ -49,89 +64,31 @@ declare namespace ShopifyBuy {
/**
* Base Shopify Client config object
*/
interface Config
{
interface Config {
/**
* Your api client's public token.
* An API Key for your store. Documentation how to get an API Key:
* https://help.shopify.com/api/sdks/js-buy-sdk/getting-started#api-key
*/
apiKey: string
/** The app whose listings the client will be using.
* If you are just modifying a buy button, the buy-button's app id is.
* Otherwise, obtain the app id of the app you're modifying or extending.
/**
* Typically will be 6 which is the Buy Button App Id. For more info on App Id see:
* https://help.shopify.com/api/sdks/js-buy-sdk/getting-started#app-id
*/
appId: string
/** You shop's myshopify.com domain. */
myShopifyDomain: string
/**
* Your shop's full myshopify.com domain. For example: embeds.myshopify.com
*/
domain: string
}
/**
* Cart item, that should be added to the card
*/
interface CartModelItem {
variant : Shopify.ProductVariantModel
quantity : number
}
class CartLineItem extends BaseModel {
constructor()
/**
* Line item unique ID
*/
id : string|number
/**
* Images associated with product.
*/
image : Image
/**
* Product title
*/
title: string
/**
* ID of selected variant
*/
variant_id: string|number
/**
* Title of selected variant
*/
variant_title: string
/**
* Number of selected items
*/
quantity : number
/**
* Variant weight in grams
*/
grams: number
/**
* ID of selected product
*/
product_id: string|number
/**
* Price of variant, formatted as currency
*/
price: string
/**
* Compare at price for variant formatted as currency.
*/
compare_at_price: string
/**
* Calculated price for the number of variant in card
*/
line_price: string
variant: Shopify.ProductVariantModel
quantity: number
}
/**
@@ -142,95 +99,53 @@ declare namespace ShopifyBuy {
/**
* Config data to be used throughout all API interaction
*/
constructor( config? : Config )
constructor(config?: Config)
/**
* Creates a CartModel instance, optionally including attrs.
* Creates a CartModel instance.
*/
createCart(attrs? : any) : Promise<CartModel>
createCart(): Promise<CartModel>
/**
* Updates an existing CartModel instance and persists it to localStorage.
* This function will return an Array of collections from your store
*/
updateCart(attrs? : any) : Promise<CartModel>
fetchAllCollections(): Promise<Array<any>>
/**
* This function will return an Array of products from your store
*/
fetchAllProducts(): Promise<Array<ProductModel>>
/**
* Retrieve a previously created cart by its key.
*/
fetchCart(id : string) : Promise<CartModel>
fetchCart(id: string): Promise<CartModel>
/**
* Fetch one collection by its ID.
*/
fetchCollection(id : string|number) : Promise<any> //TODO: Find declaration for Collection
fetchCollection(id: string | number): Promise<any>
/**
* Fetch one product by its ID.
*/
fetchProduct(id: string|number) : Promise<ProductModel>
fetchProduct(id: string | number): Promise<ProductModel>
/**
* Fetches a list of collections matching a specified query.
*/
fetchQueryCollections(query? : any) : Promise<Array<any>>
fetchQueryCollections(query?: any): Promise<Array<any>>
/**
* Fetches a list of products matching a specified query.
*/
fetchQueryProducts(query? : any) : Promise<Array<ProductModel>>
}
/**
* Class for cart model
*/
class CartModel extends BaseModel {
constructor()
fetchQueryProducts(query?: any): Promise<Array<ProductModel>>
/**
* Get checkout URL for current cart
* This method looks up a reference in localStorage to the most recent cart.
* If one is not found, creates one. If the cart the reference points to doesn't exist,
* create one and store the new reference.
*/
checkoutUrl : string
/**
* get ID for current cart
*/
id : string|number
/**
* Get current line items for cart
*/
lineItems : Array<CartLineItem>
/**
* Get current subtotal price for all line items
*/
subtotal: string
/**
* Gets the sum quantity of each line item
*/
lineItemCount : number
/**
* Add items to cart. Updates cart's lineItems
*/
addVariants(item : CartModelItem, nextItem? : Array<CartModelItem>) : Promise<CartModel>
/**
* Remove all line items from cart
*/
clearLineItems() : Promise<CartModel>
/**
* Remove line item from cart
*/
removeLineItem(id : string|number) : Promise<CartModel>
/**
* Update line item quantity
*/
updateLineItem(id : string|number, quantitiy : number ) : Promise<CartModel>
fetchRecentCart(): Promise<CartModel>
}
@@ -241,20 +156,20 @@ declare namespace ShopifyBuy {
constructor()
/**
* A product description.
*/
description: string
/**
* Product unique ID
*/
id : string|number
id: string | number
/**
* All images associated with product.
* An Array of Objects that contain meta data about an image including src of the images.
*/
images : Array<Image>
/**
* Product title
*/
title: string
images: Array<Image>
/**
* All variants of a product.
@@ -262,24 +177,34 @@ declare namespace ShopifyBuy {
variants: Array<ProductVariantModel>
/**
* Get array of options with nested values. Useful for creating UI for selecting options.
* Get an array of ProductOptionModels. ProductOptionModels can be used to define
* the currently selectedVariant from which you can get a checkout url (ProductVariantModel.checkoutUrl)
* or can be added to a cart (CartModel.createLineItemsFromVariants).
*/
options : Array<Option>
options: Array<ProductOptionModel>
/**
* Retrieve variant for currently selected options
* Retrieve variant for currently selected options. By default the first value in each option is selected
* which means selectedVariant will never be null. With a selectedVariant you can
* create checkout url (ProductVariantModel.checkoutUrl) or
* it can be added to a cart (CartModel.createLineItemsFromVariants).
*/
selectedVariant : ProductVariantModel
selectedVariant: ProductVariantModel
/**
* Retrieve image for currently selected variantImage
* Retrieve image for currently selected variantImage.
*/
selectedVariantImage : Image
selectedVariantImage: Image
/**
* Retrieve currently selected option values.
* A read only Array of Strings represented currently selected option values. eg. ["Large", "Red"]
*/
selections : Option
selections: Array<string>
/**
* The product title
*/
title: string
}
/**
@@ -290,49 +215,67 @@ declare namespace ShopifyBuy {
constructor()
/*
* Checkout URL for purchasing variant with quantity.
* Get a checkout url for a specific product variant.
* You can optionally pass a quantity.
* If no quantity is passed then quantity will default to 1.
*/
checkoutUrl( quantitiy : number ) : string
checkoutUrl(quantitiy: number): string
/**
* Compare at price for variant formatted as currency.
* Variant in stock. Always true if inventory tracking is disabled.
*/
compareAtPrice : string
available: boolean
/**
* Variant weight in grams
* Compare at price for variant. The compareAtPrice would be the price of the
* product previously before the product went on sale.
*/
grams : number
compareAtPrice: string
/**
* Price of variant, formatted according to shop currency format string. For instance "$10.00"
*/
formattedPrice: string
/**
* Variant weight in grams. If no weight is defined grams will be 0.
*/
grams: number
/**
* Variant unique ID
*/
id : string|number
id: string | number
/**
* Image for variant
*/
image : Image
image: Image
/**
* Image variants available for a variant.
*/
imageVariant: Array<ImageVariant>
/**
* Option values associated with this variant, ex {name: "color", value: "Blue"}
*/
optionValues : Array<Option>
optionValues: Array<OptionValue>
/**
* Price of variant, formatted as currency
* Price of the variant. The price will be in the following form: "10.00"
*/
price : string
price: string
/**
* ID of product variant belongs to
*/
productId : string|number
productId: string | number
/**
* Title of product variant belongs to
*/
productTitle : string
productTitle: string
/**
* Title of variant
@@ -343,7 +286,7 @@ declare namespace ShopifyBuy {
/**
* Class for product option
*/
class Option extends BaseModel {
class ProductOptionModel extends BaseModel {
constructor()
@@ -353,16 +296,149 @@ declare namespace ShopifyBuy {
name: string
/**
* get/set selected option value (ex. "Large").
* Setting this will update the selected value on the model.
* Throws {Error} if setting selected to value that does not exist for option
* get/set the currently selected option value with one of the values from the ProductOptionModel/values array.
* For instance if the option values array had the following ["Large", "Medium", "Small"] setting selected to be
* "Large", "Medium", or "Small" would be valid any other value would throw an Error.
*/
selected : string
selected: string
/**
* possible values for selection
* an Array possible values for option. For instance if this option
* is a "Size" option an example value for values could be: ["Large", "Medium", "Small"]
*/
values : Array<any>
values: Array<any>
}
/**
* Class for cart model
*/
class CartModel extends BaseModel {
constructor()
/**
* Remove all line items from cart
*/
clearLineItems(): Promise<CartModel>
/**
* Add items to cart. Updates cart's lineItems
*/
addVariants(item: CartModelItem, nextItem?: Array<CartModelItem>): Promise<CartModel>
/**
* Add items to the cart. Updates cart's lineItems based on variants passed in.
*/
createLineItemsFromVariants(...items: CartModelItem[] ): Promise<CartModel>
/**
* Remove a line item from cart based on line item id
*/
removeLineItem(id: string | number): Promise<CartModel>
/**
* Update a line item quantity based on line item id
*/
updateLineItem(id: string | number, quantitiy: number): Promise<CartModel>
/**
* Force update of cart model on server. This function will only be used in advanced
* situations and does not need to be called explicitly to update line items.
* It is automatically called after createLineItemsFromVariants, updateLineItem,
* removeLineItem, and removeLineItem
*/
updateModel(): Promise<CartModel>
/**
* Get checkout URL for current cart
*/
checkoutUrl: string
/**
* get ID for current cart
*/
id: string | number
/**
* Gets the total quantity of all line items. Example: you've added two variants
* with quantities 3 and 2. lineItemCount will be 5.
*/
lineItemCount: number
/**
* Get an Array of CartLineItemModel's
*/
lineItems: Array<CartLineItemModel>
/**
* Get current subtotal price for all line items.
* Example: two items have been added to the cart that cost $1.25 then the subtotal will be 2.50
*/
subtotal: string
}
class CartLineItemModel extends BaseModel {
constructor()
/**
* Compare at price for variant. The compareAtPrice would be the price of the product
* previously before the product went on sale.
* If no compareAtPrice is set then this value will be null. An example value: "5.00".
*/
compare_at_price: string
/**
* Variant's weight in grams. If no weight is set then 0 is returned.
*/
grams: number
/**
* A line item ID.
*/
id: string | number
/**
* Variant's image.
*/
image: Image
/**
* The total price for this line item. For instance if the variant costs 1.50 and you have a
* quantity of 2 then line_price will be 3.00.
*/
line_price: string
/**
* Price of the variant. For example: "5.00".
*/
price: string
/**
* ID of variant's product.
*/
product_id: string | number
/**
* Count of variants to order.
*/
quantity: number
/**
* Product title of variant's parent product.
*/
title: string
/**
* ID of line item variant.
*/
variant_id: string | number
/**
* Title of variant.
*/
variant_title: string
}
@@ -370,6 +446,6 @@ declare namespace ShopifyBuy {
}
declare module "ShopifyBuy" {
declare module "shopify-buy" {
export = ShopifyBuy
}