Flutter电商集成插件flutter_simple_shopify的使用

flutter_simple_shopify简介

重要提示: 我们很高兴我们的插件已经有一些用户，并且非常感谢那些积极贡献的人。不过，作为维护者的Adam即将在2020年11月2日开始大学学业，因此希望找到一个新的维护者来接手这个项目，因为他的空闲时间将大幅减少，无法像以前那样很好地帮助大家。尽管如此，我仍会尽力投入时间来维护这个包。

这是一个新的Flutter插件，旨在帮助你为Shopify商店创建移动应用程序。请注意，目前该库尚未准备好用于生产环境。然而，我们已经完成了自己的应用开发并使用了这个库。虽然还有一些小问题，但我们建议大家开始使用这个库并尽可能多地报告问题。如果有任何关于使用的问题，请随时通过邮件联系我们。

如何使用

假设你已经在Shopify商店中有一个私有应用。如果还没有，请按照此链接操作。在第6步时，我们建议检查每个API权限，因为某些查询和变更需要对产品标签等对象的权限。

首先配置ShopifyConfig：

void main() {
  ShopifyConfig.setConfig(
      'de16cae1ce0b86260703fccaa6b689a3', // Storefront API访问令牌。
      'exampleShopname.myshopify.com', // 商店URL。
      '2020-04'); // Shopfiy Storefront API版本。
  
  runApp(MyApp());
}

以下是五个可能的实例，每个实例都包含不同的方法，这些方法可以帮助你使用Shopify Storefront API。目标是使从Shopify网站创建移动应用变得更容易。

ShopifyAuth实例

ShopifyAuth shopifyAuth = ShopifyAuth.instance;
Future<ShopifyUser> createUserWithEmailAndPassword({@required String email, @required String password})
Future<void> signOutCurrentUser()
Future<void> sendPasswordResetEmail({@required String email})
Future<ShopifyUser> signInWithEmailAndPassword({@required String email, @required String password})
Future<ShopifyUser> currentUser()

ShopifyStore实例

ShopifyStore shopifyStore = ShopifyStore.instance;
Future<List<Product>> getProductsByIds()
Future<List<Product>> getXProductsAfterCursor(int limit,String startCursor)
Future<List<Product>> getAllProducts()
Future<List<Product>> getNProducts({@required int n, @required SortKey sortKey})
Future<Shop> getShop()
Future<Collection> getFeaturedCollection()
Future<List<Collection>> getAllCollections()
Future<List<Product>> getXProductsAfterCursorWithinCollection(String id, int limit, String startCursor, SortKeyProduct sortKey)
Future<List<Product>> getAllProductsFromCollectionById(String id)
Future<List<Product>> getAllProductsOnQuery(String cursor, SortKeyProduct sortKey, String query)
Future<List<Product>> getXProductsOnQueryAfterCursor(String cursor, int limit, SortKeyProduct sortKey, String query)
Future<List<Metafield>> getMetafieldsFromProduct(String productHandle, {String namespace})

ShopifyCheckout实例

ShopifyCheckout shopifyCheckout = ShopifyCheckout.instance;
Future<Checkout> getCheckoutInfoQuery({String checkoutId})
Future<Checkout> getCheckoutInfoWithAvailableShippingRatesQuery({String checkoutId})
Future<List<Order>> getAllOrders({String customerAccessToken})
Future<void> checkoutLineItemsReplace({String checkoutId, List<Map<String,dynamic>> checkoutLineItems})
Future<void> checkoutCustomerAssociate({String checkoutId, String customerAccessToken}) 
Future<void> checkoutCustomerDisassociate({String checkoutId})
Future<void> checkoutDiscountCodeApply({String checkoutId, String discountCode})
Future<void> checkoutDiscountCodeRemove({String checkoutId})
Future<String> createCheckout()
Future<void> checkoutGiftCardAppend(String checkoutId, List<String> giftCardCodes)
Future<void> checkoutGiftCardRemove(String appliedGiftCardId, String checkoutId)
Future<void> shippingLineUpdate(String checkoutId, String shippingRateHandle)
Future<void> checkoutCompleteFree(String checkoutId)

ShopifyCustomer实例

ShopifyCustomer shopifyCustomer = ShopifyCustomer.instance;
Future<void> customerAddressUpdate({String address1, String address2, String company, String city, String country, String firstName, String lastName, String phone, String province, String zip, String customerAccessToken, id})
Future<void> customerUpdate({String email, String firstName, String lastName, String password, String phoneNumber, String customerAccessToken, bool acceptsMarketing})
Future<void> customerAddressCreate({String address1, String address2, String company, String city, String country, String firstName, String lastName, String phone, String province, String zip, String customerAccessToken})
Future<void> customerAddressDelete({String customerAccessToken, String addressId})

ShopifyBlog实例

ShopifyBlog shopifyBlog = ShopifyBlog.instance;
Future<List<Blog>> getAllBlogs()
Future<Blog> getBlogByHandle(String handle, SortKeyArticle sortKeyArticle)
Future<List<Article>> getXArticlesSorted({int articleAmount, SortKeyArticle sortKeyArticle})

上面展示了顶部的实例及其可能的方法和函数。

开始使用

这个项目是一个Dart包的起点， 一个包含可以轻松共享到多个Flutter或Dart项目的代码模块。

如果你需要开始使用Flutter，请查看我们的在线文档，其中提供了教程、示例、移动开发指南以及完整的API参考。

贡献

任何人都可以贡献并被邀请这样做！ 重要的是：如果你向模型添加了一个新字段，请考虑也向与该模型相关的每个变异/查询中添加此字段。 例如：向Checkout添加一个新的webUrl字段，现在你需要遍历各种查询/变异并搜索“Checkout”，并将webUrl添加到它们中的每一个。 （向模型添加新字段还需要你更新fromJson）

同时，我要感谢迄今为止的所有贡献者！

完整示例

以下是一个完整的示例，展示了如何使用flutter_simple_shopify插件。

import 'package:flutter/material.dart';
import 'package:flutter_simple_shopify/flutter_simple_shopify.dart';
import 'collection_tab.dart';
import 'home_tab.dart';
import 'profile_tab.dart';
import 'search_tab.dart';

void main() {
  ShopifyConfig.setConfig(
    "STOREFRONT-API-ACCESS-TOKEN", // 替换为你的Shopify商店的访问令牌
    "YOUR-SHOPIFY-WEBSITE", // 替换为你的Shopify商店的URL
    "2020-04", // Shopfiy Storefront API版本
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shopify Example',
      theme: ThemeData(primaryColor: Colors.redAccent),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  final _tabs = [
    HomeTab(), // 主页
    CollectionTab(), // 商品集合页面
    SearchTab(), // 搜索页面
    ProfileTab(), // 用户个人资料页面
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _tabs,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: _onNavigationBarItemClick,
        fixedColor: Theme.of(context).primaryColor,
        unselectedItemColor: Colors.black,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
          BottomNavigationBarItem(
              icon: Icon(Icons.category), title: Text("Collections")),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Text("Search")),
          BottomNavigationBarItem(
              icon: Icon(Icons.person), title: Text("Profile")),
        ],
      ),
    );
  }

  void _onNavigationBarItemClick(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}