Merge pull request #12 from adobe/new-features-plp

New features PLP

README.md

@@ -122,6 +122,20 @@ const storeDetails = {
         displaySearchBox: true,
         displayOutOfStock: true,
         allowAllProducts: false,
+        currentCategoryUrlPath?: string;
+        categoryName: '', // name of category to display
+        displaySearchBox: false, // display search box
+        displayOutOfStock: '', // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
+        displayMode: '', // "" for search || "PAGE" for category search
+        locale: '', //add locale for translations
+        priceSlider: false, //enable slider for price - EXPERIMENTAL, default is false
+        imageCarousel: false, //enable multiple image carousel - EXPERIMENTAL, default is false
+        listview: false; //add listview as an option - EXPERIMENTAL, default is false
+        optimizeImages: true, // optimize images with Fastly
+        imageBaseWidth: 200,
+        resolveCartId?: resolveCartId // Luma specific addToCart method. Enabled with the extension
+        refreshCart?: refreshCart // Luma specific addToCart method. Enabled with the extension
+        addToCart?: (sku, options, quantity)=>{} // custom add to cart callback function. Called on addToCart action
       },
       context: {
         customerGroup: 'CUSTOMER_GROUP_CODE',
@@ -185,6 +199,8 @@ You can add your own variables to [tokens.css](./src/styles/tokens.css). Further
 
 ### Have tailwind only apply to the nested widget
 
+Now default behavior:
+
 Follow the [tailwind nesting documentation](https://tailwindcss.com/docs/using-with-preprocessors#nesting). Your [postcss.config](./postcss.config.js) will look like this:
 
 ```

dev-template.html

@@ -68,14 +68,28 @@
         displaySearchBox: true, // display search box
         displayOutOfStock: true,
         allowAllProducts: false,
+        // currentCategoryUrlPath?: '', // current category url path
+        // categoryName: '', // name of category to display
+        // displaySearchBox: false, // display search box
+        // displayOutOfStock: '', // "1" will return from php escapeJs and boolean is returned if called from data-service-graphql
+        // displayMode: '', // "" for search || "PAGE" for category search
+        // locale: '', //add locale for translations
+        // priceSlider: false, //enable slider for price - EXPERIMENTAL, default is false
+        // imageCarousel: false, //enable multiple image carousel - EXPERIMENTAL, default is false
+        // listview: false; //add listview as an option - EXPERIMENTAL, default is false
+        // optimizeImages: true, // optimize images with Fastly
+        // imageBaseWidth: 200,
+        // resolveCartId?: resolveCartId, // Luma specific addToCart method. Enabled with the extension
+        // refreshCart?: refreshCart, // Luma specific addToCart method. Enabled with the extension
+        // addToCart?: (sku, options, quantity)=>{} // custom add to cart callback function. Called on addToCart action
       },
       context: {
         customerGroup: '',
       },
       apiKey: '',
       environmentType: '',
       // searchQuery: 'search_query', // Optional: providing searchQuery will override 'q' query param
-      // route: ({ sku }) => {
+      // route: ({ sku, urlKey  }) => {
       //   const storeConfig = JSON.parse(
       //     document
       //       .querySelector("meta[name='store-config']")

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@adobe/storefront-product-listing-page",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "license": "Apache-2.0",
   "typings": "./dist/@types/index.d.ts",
   "engines": {

postcss.config.js

@@ -1,8 +1,9 @@
 module.exports = {
   plugins: [
     require('postcss-import'),
-    require('tailwindcss'),
+    require('tailwindcss/nesting'),
     require('autoprefixer'),
+    require('tailwindcss'),
     require('cssnano'),
   ],
 };

src/Intro.stories.mdx

@@ -7,3 +7,4 @@ import { h } from "preact";
 # Product Listing Widget
 
 This storybook outlines the different components used to create the Storefront Product Listing Widget
+

src/api/fragments.ts

@@ -41,6 +41,7 @@ const ProductView = `
             __typename
             sku
             name
+            inStock
             url
             urlKey
             images {
@@ -86,6 +87,7 @@ const ProductView = `
                         title
                         ... on ProductViewOptionValueSwatch {
                             id
+                            inStock
                             type
                             value
                         }
@@ -122,6 +124,12 @@ const Product = `
         product {
             __typename
             sku
+            description {
+                html
+            }
+            short_description{
+                html
+            }
             name
             canonical_url
             small_image {

src/api/graphql.ts

@@ -0,0 +1,16 @@
+const graphqlEndpoint = `${window.origin}/graphql`;
+
+async function getGraphQL(query = '', variables = {}, store = '') {
+  const response = await fetch(graphqlEndpoint, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Store: store },
+    body: JSON.stringify({
+      query,
+      variables,
+    }),
+  }).then((res) => res.json());
+
+  return response;
+}
+
+export { getGraphQL };

src/api/mutations.ts

@@ -0,0 +1,33 @@
+const CREATE_EMPTY_CART = `
+  mutation createEmptyCart($input: createEmptyCartInput) {
+    createEmptyCart(input: $input)
+  }
+`;
+
+const ADD_TO_CART = `
+  mutation addProductsToCart(
+    $cartId: String!
+    $cartItems: [CartItemInput!]!
+  ) {
+      addProductsToCart(
+        cartId: $cartId
+        cartItems: $cartItems
+      ) {
+          cart {
+            items {
+              product {
+                name
+                sku
+              }
+              quantity
+            }
+          }
+          user_errors {
+            code
+            message
+          }
+      }
+  }
+`;
+
+export { ADD_TO_CART, CREATE_EMPTY_CART };

src/api/queries.ts

@@ -107,13 +107,14 @@ const REFINE_PRODUCT_QUERY = `
         $sku: String!
     ) {
         refineProduct(
-            optionIds: $optionIds 
+            optionIds: $optionIds
             sku: $sku
         ) {
             __typename
             id
             sku
             name
+            inStock
             url
             urlKey
             images {
@@ -176,8 +177,25 @@ const REFINE_PRODUCT_QUERY = `
     }
 `;
 
+const GET_CUSTOMER_CART = `
+    query customerCart {
+        customerCart {
+            id
+            items {
+            id
+            product {
+                name
+                sku
+            }
+            quantity
+            }
+        }
+    }
+`;
+
 export {
   ATTRIBUTE_METADATA_QUERY,
+  GET_CUSTOMER_CART,
   PRODUCT_SEARCH_QUERY,
   QUICK_SEARCH_QUERY,
   REFINE_PRODUCT_QUERY,

src/api/search.ts

@@ -79,7 +79,7 @@ const getProductSearch = async ({
 
   variables.filter.push(defaultFilters); //add default visibility filter
 
-  const displayInStockOnly = displayOutOfStock !== '1';
+  const displayInStockOnly = displayOutOfStock != '1'; // '!=' is intentional for conversion
 
   const inStockFilter = {
     attribute: 'inStock',

src/components/AddToCartButton/AddToCartButton.stories.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
+import { action } from '@storybook/addon-actions';
+import { AddToCartButton } from '../AddToCartButton';
+
+<Meta
+  title="PLP/AddToCartButton"
+  component={AddToCartButton}
+  parameters={{
+    layout: 'centered',
+  }}
+/>
+
+export const Template = (args) => <AddToCartButton {...args} />;
+
+# AddToCartButton
+
+```
+import { AddToCartButton } from '../AddToCartButton'
+```
+
+<Canvas>
+  <Story
+    name="AddToCartButton"
+    args={{
+      onClick: action('onClick'),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

src/components/AddToCartButton/AddToCartButton.test.tsx

@@ -0,0 +1,28 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { render } from '@testing-library/preact';
+
+import { AddToCartButton } from './AddToCartButton';
+
+describe('WidgetSDK - UIKit/AddToCartButton', () => {
+  test('renders', () => {
+    const { container } = render(
+      <AddToCartButton
+        onClick={() => {
+          return;
+        }}
+      />
+    );
+
+    const elem = container.querySelector('.ds-sdk-add-to-cart-button');
+
+    expect(!!elem).toEqual(true);
+  });
+});

src/components/AddToCartButton/AddToCartButton.tsx

@@ -0,0 +1,34 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+import { FunctionComponent } from 'preact';
+
+import CartIcon from '../../icons/cart.svg';
+
+export interface AddToCartButtonProps {
+  onClick: (e: any) => any;
+}
+export const AddToCartButton: FunctionComponent<AddToCartButtonProps> = ({
+  onClick,
+}: AddToCartButtonProps) => {
+  return (
+    <div className="ds-sdk-add-to-cart-button">
+      <button
+        className="flex items-center justify-center text-white text-sm rounded-full h-[32px] w-full p-sm"
+        style={{
+          'background-color': `#464646`,
+        }}
+        onClick={onClick}
+      >
+        <CartIcon className="w-[24px] pr-4" />
+        Add To Cart
+      </button>
+    </div>
+  );
+};

src/components/AddToCartButton/index.ts

@@ -0,0 +1,11 @@
+/*
+Copyright 2024 Adobe
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file in
+accordance with the terms of the Adobe license agreement accompanying
+it.
+*/
+
+export * from './AddToCartButton';
+export { AddToCartButton as default } from './AddToCartButton';