diff --git a/shopify-buy/shopify-buy-tests.ts b/shopify-buy/shopify-buy-tests.ts index 3d8d1f5988..23dd7b3c68 100644 --- a/shopify-buy/shopify-buy-tests.ts +++ b/shopify-buy/shopify-buy-tests.ts @@ -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 ''; }); @@ -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; } diff --git a/shopify-buy/shopify-buy.d.ts b/shopify-buy/shopify-buy.d.ts index 18c9358b3b..9de8249804 100644 --- a/shopify-buy/shopify-buy.d.ts +++ b/shopify-buy/shopify-buy.d.ts @@ -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 // 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 - 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 + } + + 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 + createCart(): Promise /** - * 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 + fetchAllCollections(): Promise> + + /** + * This function will return an Array of products from your store + */ + fetchAllProducts(): Promise> /** * Retrieve a previously created cart by its key. */ - fetchCart(id : string) : Promise + fetchCart(id: string): Promise /** * Fetch one collection by its ID. */ - fetchCollection(id : string|number) : Promise //TODO: Find declaration for Collection + fetchCollection(id: string | number): Promise /** * Fetch one product by its ID. */ - fetchProduct(id: string|number) : Promise + fetchProduct(id: string | number): Promise /** * Fetches a list of collections matching a specified query. */ - fetchQueryCollections(query? : any) : Promise> + fetchQueryCollections(query?: any): Promise> /** * Fetches a list of products matching a specified query. */ - fetchQueryProducts(query? : any) : Promise> - - } - - /** - * Class for cart model - */ - class CartModel extends BaseModel { - - constructor() + fetchQueryProducts(query?: any): Promise> /** - * 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 - - /** - * 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) : Promise - - /** - * Remove all line items from cart - */ - clearLineItems() : Promise - - /** - * Remove line item from cart - */ - removeLineItem(id : string|number) : Promise - - /** - * Update line item quantity - */ - updateLineItem(id : string|number, quantitiy : number ) : Promise + fetchRecentCart(): Promise } @@ -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 - - /** - * Product title - */ - title: string + images: Array /** * All variants of a product. @@ -262,24 +177,34 @@ declare namespace ShopifyBuy { variants: Array /** - * 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