@shopify/theme-product
A library that helps developers work with the Product object within Shopify Themes
Last updated 2 months ago by shopify-dep .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @shopify/theme-product 
SYNC missed versions from official npm registry.

@shopify/theme-product

Getting Started

Theme Scripts can be used in any theme project. To take advantage of semantic versioning and easy updates, we recommend using NPM or Yarn to include them in your project:

yarn add @shopify/theme-product

and then import the functions you wish to use through ES6 imports:

import * as product from '@shopify/theme-product';

If you prefer not to use a package manager, you can download the latest version of Theme Product and include it in your project manually from the following links:

These files make Theme Product accessible via the Shopify.theme.product global variable.

Usage

theme-product.js helps developers work with and navigate a Shopify product object. A common use is find a product variant based on a selection of product options, e.g. the variant of a t-shirt which is size S and color black.

Product object

When using the following methods, make sure your product JSON object is valid. Usually it is the Product object generated from Liquid. Note: The JSON generated from Liquid is different from the conventional {{ json }} filter due to some properties not being exposed.

{
    "id": 520670707773,
    "title": "Aircontact 75 + 10",
    "vendor": "tauclothes",
    "variants": [
        {
            "id": 6908023078973,
            "product_id": 520670707773,
            "title": "36 / Black",
            "option1": "36",
            "option2": "Black",
            "options": ["36", "Black"]
            ...
        },
        {
            "id": 6908198682685,
            "product_id": 520790016061,
            "title": "37 / Black",
            "option1": "37",
            "option2": "Black",
            "options": ["37", "Black"]
            ...
        }
    ],
    "options": [
        {
            "id": 967657816125,
            "product_id": 675815555133,
            "name": "Size",
            "position": 1,
            "values": [
                "36",
                "37"
            ]
            ...
        },
        {
            "id": 967657848893,
            "product_id": 675815555133,
            "name": "Color",
            "position": 2,
            "values": [
                "Black"
            ]
            ...
        }
    ],
    "images": [
        {
            "id": 2004809744445,
            "product_id": 520670707773,
            "variant_ids": []
            ...
        }
    ],
    "image": {
        "id": 2004809744445,
        "product_id": 520670707773,
        "variant_ids": []
        ...
    }
}

getVariantFromId(product, value)

Find a variant with a matching ID in the project JSON and return it.

  • product: Product JSON object. Usually it is the Product object generated from Liquid. Note: The JSON generated from Liquid is different from the conventional {{ json }} filter due to some properties not being exposed.

  • value: Product ID (e.g. 6908023078973)


getVariantFromSerializedArray(product, collection)

Find a variant which matches a collection of name and values (like what is returned by jQuery's serializeArray() method) and return it.

  • product: Product JSON object. Usually it is the Product object generated from Liquid. Note: The JSON generated from Liquid is different from the conventional {{ json }} filter due to some properties not being exposed.

  • collection: Object with 'name' and 'value' keys

[
  {
    name: 'Size',
    value: '36'
  },
  {
    name: 'Color',
    value: 'Black'
  }
];

getVariantFromOptionArray(product, options)

Find a matching variant using an array of option values and return it.

  • product: Product JSON object. Usually it is the Product object generated from Liquid. Note: The JSON generated from Liquid is different from the conventional {{ json }} filter due to some properties not being exposed.

  • options: List of submitted values

['36', 'Black'];

Current Tags

  • 1.0.0-alpha.1                                ...           alpha (2 years ago)
  • 3.0.3                                ...           latest (2 months ago)

12 Versions

  • 3.0.3                                ...           2 months ago
  • 3.0.2                                ...           2 months ago
  • 3.0.1                                ...           2 months ago
  • 3.0.0                                ...           7 months ago
  • 2.0.5                                ...           8 months ago
  • 2.0.4                                ...           9 months ago
  • 1.0.0                                ...           a year ago
  • 1.0.0-alpha.7                                ...           a year ago
  • 1.0.0-alpha.6                                ...           2 years ago
  • 1.0.0-alpha.3                                ...           2 years ago
  • 1.0.0-alpha.2                                ...           2 years ago
  • 1.0.0-alpha.1                                ...           2 years ago
Downloads
Today 0
This Week 24
This Month 25
Last Day 12
Last Week 1
Last Month 14
Dependencies (0)
None
Dev Dependencies (6)

Copyright 2014 - 2016 © taobao.org |