vuestorefront / shopify Goto Github PK

Hey there,

Sorry if this is the wrong place to ask questions. I'm impressed by the work you did so far. May I ask if I'm looking to use the Api client and composables packages for my customised UI theme, how do I process to embed them into my codebase? I understand it's a WIP project, just trying to play around with it, and see is there anything I can help to build.

Thanks

I've got the basic integration working with sample data loaded in Shopify, but when I try running yarn generate there are a lot of errors, and the static site is missing many pages and sections.

Note, the site seems to work fine when running as yarn dev.

example error messages from yarn generate.

ERROR  [VSF][error] useCart/load connect ECONNREFUSED 127.0.0.1:80                                                     14:46:00

  at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16) (repeated 3 times)


 ERROR  [VSF][error] useProduct/relatedProducts/search connect ECONNREFUSED 127.0.0.1:80                                14:46:00

  at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16)

I've opened up all the permissions for the Shopify private app too.

While working with eCommerce-integration-boilerplate repo, added request headers(storeFront domain & APItoken) in /theme/nuxt.config.js API part @vue-storefront/shopify/nuxt and access it in "/api-client/src/index.ts" for establish connection purpose.

console the context in api-client/src/api/getCategory/index.ts, it showing repeated information as highlighted below.. may be it should be removed from the context

current Setup
--------------------
import { apiClientFactory } from '@vue-storefront/core';
import getProduct from './api/getProduct';
import getCategory from './api/getCategory';
import Client from 'shopify-buy';

const defaultSettings = {};

const onSetup = (settings) => ({
config: {
...defaultSettings,
...settings
},
client: Client.buildClient(settings.api)
});

Sample output [console.log(context)]:

{ api:
{ domain: 'your-shopify-store.myshopify.com',
storefrontAccessToken: '984797hkbdfjbjxugsa78t8udjjdb' },
i18n: { useNuxtI18nConfig: true },
config:
{ api:
{ domain: 'your-shopify-store.myshopify.com',
storefrontAccessToken: '984797hkbdfjbjxugsa78t8udjjdb' },
i18n: { useNuxtI18nConfig: true } },
client:
Client {
graphQLClient:
Client {
typeBundle: [Object],
classRegistry: [ClassRegistry],
fetcher: [Function: fetcher] },
product: ProductResource { graphQLClient: [Client] },
collection: CollectionResource { graphQLClient: [Client] },
shop: ShopResource { graphQLClient: [Client] },
checkout: CheckoutResource { graphQLClient: [Client] },
image: ImageResource { graphQLClient: [Client] },
config:
Config {
storefrontAccessToken: '984797hkbdfjbjxugsa78t8udjjdb',
domain: ''your-shopify-store.myshopify.com',
apiVersion: '2020-07' } } }

What is the motivation for adding/enhancing this feature?

To fix the cart sidebar toggle

What are the acceptance criteria

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

Expected Behavior

Build process would complete without errors

Actual Behavior

Compilation of theme module results in the following error

 FATAL  The "id" argument must be of type string. Received type boolean (false)                                                               10:43:20

  at new NodeError (node:internal/errors:329:5)
  at validateString (node:internal/validators:129:11)
  at Module.require (node:internal/modules/cjs/loader:989:3)
  at require (node:internal/modules/cjs/helpers:92:18)
  at useRawSource (node_modules/@vue-storefront/nuxt/lib/modules/raw-sources-loader.js:8:17)
  at node_modules/@vue-storefront/nuxt/lib/modules/raw-sources-loader.js:20:79
  at Array.map (<anonymous>)
  at ModuleContainer.VueStorefrontPerformanceModule (node_modules/@vue-storefront/nuxt/lib/modules/raw-sources-loader.js:20:64)
  at ModuleContainer.VueStorefrontNuxtModule (node_modules/@vue-storefront/nuxt/lib/module.js:90:20)
  at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:34)

Possible Solution

The issue appears to trace back to the custom plugin from Vue-Storefront via this file packages/theme/node_modules/@vue-storefront/nuxt/lib/modules/raw-sources-loader.js. I was able to resolve the issue by commenting line 20, which is seeking to populate an option specific to the environment. Candidly, I am not a fan of how VSF is doing this, and am proposing a change to some of these files via that repository.

Here is the revised file, with line 20 commented

const log = require('../helpers/log');
const isProduction = require('../helpers/isProduction');
const resolveDependency = require('../helpers/resolveDependency');

module.exports = function VueStorefrontPerformanceModule (options) {
  const useRawSource = (packageName) => {
    const pkgPath = resolveDependency(`${packageName}/package.json`);
    const pkg = require(pkgPath);

    if (pkg.module) {
      this.extendBuild(config => {
        config.resolve.alias[pkg.name + '$'] = resolveDependency(`${packageName}/${pkg.module}`);
      });
    }

    this.options.build.transpile.push(packageName);
    log.info(`Using raw source/ESM for ${pkg.name}`);
  };

 //options.useRawSource[isProduction(options) ? 'prod' : 'dev'].map(package => useRawSource(package));
};

Steps to reproduce

1. Fork project / current release
2. Run commands to build api-client, then composables
3. Run command yarn dev:theme
4. Console will display error

What version of shopify integration are you using?

1.0.6

What version of Node.js are you using?

v16.13.0

What browser (and version) are you using?

Chrome

What operating system (and version) are you using?

MacOS

Relevant log output

See error description above, includes console output

Code of Conduct

• I agree to follow this project's Code of Conduct

How the project can be improved?

Provide developers incremental tools that will proactively ....

• Provide them warning messages generated during the build
• Provide them detailed insights if / when a circular dependency is detected
• Provide a progress element that will allow the develop to view that the build is progressing, and which allows for improved debugging to validate what is being processed
• Provide the build process the ability to augment the build output with nodePolyfills
• Provide the build process the ability to utilize core-js polyfills and babel transpiling as part of build process
• Provide developers ability to utilize typescript transformations as part of the build process
• Provide developers a visual output of the typecoverage once the build completes
• Provide developers the ability to view the type coverage within a browser

What are the acceptance criteria?

• Ability for a developer to be able to set specific configurations based on the output format specified within rollup
• Ability for a developer to view the progress of the rollup build
• Ability for a developer to have access to effective debugging tools and console messages as part of the rollup build

Additional information

• The current setup is a "minimal configuration" approach, which is not necessarily bad, but I feel the added feature will make the overall build process and related developer activities more useful.

Code of Conduct

• I agree to follow this project's Code of Conduct

What is the motivation for adding / enhancing this feature?

Fix initial mess up images bug of product gallery using sfGallery storefront UI component. Slider not applying at the very first load of PDP

What are the acceptance criteria

• It should work smoothly and apply slider as desired. So UX will not messed on PDP
• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

Additional information

https://github.com/vuestorefront/shopify/blob/master/packages/theme/pages/Product.vue

Expected Behavior

i run it by :
sudo yarn start --max_old_space_size=3096

Actual Behavior

in 2 or 3 hours, it will be killed by follow issue
<--- Last few GCs --->

[8537:0x4dfe310] 44483799 ms: Mark-sweep (reduce) 1944.7 (2005.5) -> 1943.9 (2006.0) MB, 3499.1 / 0.1 ms (average mu = 0.285, current mu = 0.005) allocation failure scavenge might not succeed
[8537:0x4dfe310] 44487316 ms: Mark-sweep (reduce) 1945.0 (2006.0) -> 1944.2 (2006.5) MB, 3158.1 / 0.1 ms (average mu = 0.205, current mu = 0.102) allocation failure scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
1: 0xb02ec0 node::Abort() [/usr/bin/node]
2: 0xa181fb node::FatalError(char const*, char const*) [/usr/bin/node]
3: 0xced88e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/bin/node]
4: 0xcedc07 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/bin/node]
5: 0xea5ea5 [/usr/bin/node]
6: 0xeb557d v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/bin/node]
7: 0xeb827e v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/bin/node]
8: 0xe793e2 v8::internal::Factory::AllocateRaw(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/usr/bin/node]
9: 0xe73d0c v8::internal::FactoryBasev8::internal::Factory::AllocateRawArray(int, v8::internal::AllocationType) [/usr/bin/node]
10: 0xe8913a v8::internal::Handlev8::internal::PropertyArray v8::internal::Factory::CopyArrayAndGrowv8::internal::PropertyArray(v8::internal::Handlev8::internal::PropertyArray, int, v8::internal::AllocationType) [/usr/bin/node]
11: 0x1083af5 v8::internal::JSObject::MigrateToMap(v8::internal::Isolate*, v8::internal::Handlev8::internal::JSObject, v8::internal::Handlev8::internal::Map, int) [/usr/bin/node]
12: 0x10a5581 v8::internal::LookupIterator::ApplyTransitionToDataProperty(v8::internal::Handlev8::internal::JSReceiver) [/usr/bin/node]
13: 0x10c4e0b v8::internal::Object::AddDataProperty(v8::internal::LookupIterator*, v8::internal::Handlev8::internal::Object, v8::internal::PropertyAttributes, v8::Maybev8::internal::ShouldThrow, v8::internal::StoreOrigin) [/usr/bin/node]
14: 0x107b721 v8::internal::JSObject::CreateDataProperty(v8::internal::LookupIterator*, v8::internal::Handlev8::internal::Object, v8::Maybev8::internal::ShouldThrow) [/usr/bin/node]
15: 0x1084423 v8::internal::JSReceiver::SetOrCopyDataProperties(v8::internal::Isolate*, v8::internal::Handlev8::internal::JSReceiver, v8::internal::Handlev8::internal::Object, v8::internal::PropertiesEnumerationMode, v8::base::ScopedVector<v8::internal::Handlev8::internal::Object > const*, bool) [/usr/bin/node]
16: 0x11ffc5b v8::internal::Runtime_CopyDataProperties(int, unsigned long*, v8::internal::Isolate*) [/usr/bin/node]
17: 0x15e7879 [/usr/bin/node]
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[ec2-user@ip-172-31-31-70 shopify]$
[ec2-user@ip-172-31-31-70 shopify]$

Possible Solution

No response

Steps to reproduce

No response

What version of shopify integration are you using?

main branch

What version of Node.js are you using?

v16.13.0

What browser (and version) are you using?

96.0.4664.55

What operating system (and version) are you using?

linux

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

How the project can be improved?

This will improve support with the customQuery of @vue-storefront/core and allows easy way to add queries for the Shopify storefront API.

What are the acceptance criteria?

• Testing should be added
• Testing on the creation of apollo client should be passed

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

What is the motivation for adding/enhancing this feature?

Fix breadcrumbs tree generation for the categories page

What are the acceptance criteria

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

Expected Behavior

UI should be consistent for all integrations similarly to Commercetools and other integrations https://demo-ct.vuestorefront.io/

Actual Behavior

UI is different than in other integrations. It can be caused by the old version of Storefront UI, custom components or anything else. It was observed after creating project from shopify-template

Possible Solution

It can be caused by the old version of Storefront UI, custom components or anything else. It was observed after creating project from shopify-template

Steps to reproduce

Generate project from vsf-init and choose shopify template.

What version of shopify integration are you using?

2.3.3

What version of Node.js are you using?

14.0.0

What browser (and version) are you using?

chrome

What operating system (and version) are you using?

macOS

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

┆Issue is synchronized with this Jira Task by Unito

┆Issue is synchronized with this Jira Zadanie by Unito

Expected Behavior

The listed version of the peer dependency @nuxtjs/composition-api would be correct.

Actual Behavior

The peer dependency is listed as @nuxtjs/[email protected], but that version does not exist. As a side note, given the default behavior of the yarn package manager does not support the installation / maintenance of peerDependencies, have you considered exposing this as a devDependency instead?

"peerDependencies": {
    "@nuxtjs/composition-api": "1.2.4"
  },

The latest version of the dependency is @nuxtjs/[email protected]

Possible Solution

Update the peer dependency as

"peerDependencies": {
    "@nuxtjs/composition-api": "^0.30.0"
  },

Steps to reproduce

View the package.json at packages/composables/package.json

What version of shopify integration are you using?

1.0.6

What version of Node.js are you using?

15

What browser (and version) are you using?

Chrome

What operating system (and version) are you using?

MacOS

Relevant log output

N/A

Code of Conduct

• I agree to follow this project's Code of Conduct

How the project can be improved?

This will help project to keep updated with the fixes and other advantages that has been done with dependent packages

What are the acceptance criteria?

• At least no more outdated core packages
• Build is success

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

What is the motivation for adding/enhancing this feature?

Render chosen variant information for the variable product on PDP

What are the acceptance criteria

When user choose the variant for the variable product, the chosen data should be passed and render the product information from the variant

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

Additional information

https://shopify-pwa-beta.aureatelabs.com/p/Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzUzMjg4NTExNDA3Njg=/classic-dress
https://imgur.com/AASvhuO

Expected Behavior

a product expected to show in product page. However, when I navigated to product page, I have received an error.

Actual Behavior

This product could not be found

Possible Solution

No response

Steps to reproduce

It is just strange initial setup with given domain and token together with sample data
product_template.csv

What version of shopify integration are you using?

1.0.0

What version of Node.js are you using?

7.6.0

What browser (and version) are you using?

Chrome

What operating system (and version) are you using?

Windows

Relevant log output

GET http://172.25.240.1:3001/p/Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzY4MTExODI1OTYyNzY=/example-t-shirt 404 (Not Found)

Code of Conduct

• I agree to follow this project's Code of Conduct

What is the motivation for adding/enhancing this feature?

Implement useSearch composable and enable search

What are the acceptance criteria

When a user enters a keyword, the search result will be highlighted

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

What is the motivation for adding/enhancing this feature?

Replaced for loop and passed the entire graph model instead of a specific product, which minimize the search for variant by attributes crashes

What are the acceptance criteria

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

What is the motivation for adding/enhancing this feature?

Shopify does not support a hierarchy structure for categories. As there is no subcategory concept there. We are using the term category for the Shopify collection.

What are the acceptance criteria

• Should work without expecting items, and always should work with the 1st level (parent category)
• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

Additional information

• https://github.com/vuestorefront/shopify/blob/master/packages/composables/src/getters/productGetters.ts

What is the motivation for adding/enhancing this feature?

Enabled the login modal and sign in feature

What are the acceptance criteria

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

What is the motivation for adding/enhancing this feature?

To make the useCart composable compatible with Shopify Storefront API, to support add to cart feature with VSF Next. Add the product(s) to the Shopify store using Storefront Checkouts API and retrieve it on the frontend cart panel.

What are the acceptance criteria

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

Additional information

https://github.com/DivanteLtd/vue-storefront/tree/next/packages/boilerplate/composables/src/useCart

What is the motivation for adding / enhancing this feature?

To resolve page break due to get product description getter error could not fetch _desctiption of undefined, while accessing product detail page very first time from the category page.

What are the acceptance criteria

• Should work without any break as after changing product from the match with section, it works as desired
• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

Additional information

• https://github.com/vuestorefront/shopify/blob/master/packages/composables/src/getters/productGetters.ts

How the project can be improved?

It is only possible to add one item at a time utilizing the Composables from the Vuestorefront Shopify integrations.

Reference : https://docs.vuestorefront.io/shopify/guide/use-cart.html#api

This bring an incoveniance the moment we want to add multiple item before doing anything else.

It would be interesting if it was possible to add another composable, such as addItems taking an array of Product instead of a single Product.

What are the acceptance criteria?

• Takes an array of object in parameters
• Is asynchronous
• Is possible to wait for every item to be added to the cart before continuing the execution
• Push errors, just like the addItem method
• Push results, just like the addItem method

Additional information

Here an exemple of workaround we currently use in our project :

  const addItems = (items: any[]): Promise<AddItemResolveType> => {
    loading.value = true;
    return new Promise((resolve) => {
      items.reduce((p, product, index) => {
        return p.then(async () => {
          await addItem({ product, quantity: 1 });
          if (error.value.addItem) {
            errors.value.push(product);
          } else {
            result.value.push(product);
          }
          if (hasLoopOverAllItems(items, index)) {
            loading.value = false;
            resolve({ result: result.value, errors: errors.value });
          }
        });
      }, Promise.resolve());
    });
  };

An exemple of use case would be :

• Opening a side panel as a Buy modal
• Checking multiple item to add to the cart
• Clicking on a "add to cart" button
• Waiting for items to be added
• Closing the Buy Modal to bring up the Cart when addItems is complete

Opening a feature suggestion is a first for me. My apologies if any information is missing.

Code of Conduct

• I agree to follow this project's Code of Conduct

┆Issue is synchronized with this Jira Zadanie by Unito

I would like to help you with this integration, but i dont have any store in shopify. Is there demo store/api that I can use for development?

What is the motivation for adding/enhancing this feature?

In order to fetch the variable product variation data on a single product page, map graphModel fields

What are the acceptance criteria

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

What is the motivation for adding/enhancing this feature?

To fetch the products for a specific category by category slug/id on the category page

What are the acceptance criteria

To route the request somehow, so we can use different API methods like fetch, fetchAll, fetchWithProducts, fetchByHandle with single endpoint. eg. return await context.$shopify.api.getCategory(params, customQuery);

so, we can pass something in parameter, which identifies the request and route the call and retrieve the expected result.

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

Expected Behavior

If returning to frontend site after successful checkout - the old cart should be cleared and a new cart created

Actual Behavior

The old cart is pulled based on the session cookie - and users are unable to add items to the cart or checkout until the session cookie is cleared

Possible Solution

No response

Steps to reproduce

No response

What version of shopify integration are you using?

Newest

What version of Node.js are you using?

Newest

What browser (and version) are you using?

Firefox

What operating system (and version) are you using?

Linux

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Expected Behavior

Should build successfully and run a dev server.

Actual Behavior

ERROR in ./.nuxt/router.js Module not found: Error: Can't resolve '../pages/ResetPassword.vue' in '/media/rohan/WORK/tinkering/vue-store-shopify/.nuxt' @ ./.nuxt/router.js 127:24-129:3 @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi ./.nuxt/client.js

Possible Solution

No response

Steps to reproduce

1. Create a new project with vsf init and select shopify integration.
2. Install node dependencies yarn and run the dev server yarn dev

What version of shopify integration are you using?

1.0.0

What version of Node.js are you using?

14.17.5

What browser (and version) are you using?

Brave Version 1.28.105 Chromium: 92.0.4515.131 (Official Build) (64-bit)

What operating system (and version) are you using?

Pop!_OS 21.04 64 bit

Relevant log output

ERROR in ./.nuxt/router.js
Module not found: Error: Can't resolve '../pages/ResetPassword.vue' in '/media/rohan/WORK/tinkering/vue-store-shopify/.nuxt'
 @ ./.nuxt/router.js 127:24-129:3
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

 FATAL  Nuxt build error                                                                                                                                           12:37:43

  at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:2127:21)
  at processTicksAndRejections (internal/process/task_queues.js:95:5)
  at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:2076:5)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:327:5)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:110:7)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:413:7)


   ╭─────────────────────────────╮
   │                             │
   │   ✖ Nuxt Fatal Error        │
   │                             │
   │   Error: Nuxt build error   │
   │                             │
   ╰─────────────────────────────╯

error Command failed with exit code 1.

Code of Conduct

• I agree to follow this project's Code of Conduct

Expected Behavior

No response

Actual Behavior

display the web page server error, in backend, the server display some error log
ERROR Cannot read properties of null (reading 'sku') 02:31:03

at Object.getItemSku (src/getters/cartGetters.ts:53:0)
at server.js:17841:1987
at a.ve [as _l] (/home/ec2-user/work/jizhan/ui/shopify/node_modules/vue/dist/vue.runtime.common.prod.js:6:15953)
at a.CartSidebarvue_type_template_id_30531c26_render (_theme/components/CartSidebar.vue)
at /home/ec2-user/work/jizhan/ui/shopify/node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:16:12483
at qt (/home/ec2-user/work/jizhan/ui/shopify/node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:16:11840)
at a.r.render (/home/ec2-user/work/jizhan/ui/shopify/node_modules/@vue/composition-api/dist/vue-composition-api.common.prod.js:16:12454)
at a.t._render (/home/ec2-user/work/jizhan/ui/shopify/node_modules/vue/dist/vue.runtime.common.prod.js:6:35346)
at /home/ec2-user/work/jizhan/ui/shopify/node_modules/vue-server-renderer/build.prod.js:1:70854
at processTicksAndRejections (node:internal/process/task_queues:96:5)

Possible Solution

No response

Steps to reproduce

No response

What version of shopify integration are you using?

main branch

What version of Node.js are you using?

v16.13.0

What browser (and version) are you using?

96.0.4664.55

What operating system (and version) are you using?

linux

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

https://github.com/vuestorefront/ecommerce-integration-boilerplate

What is the motivation for adding/enhancing this feature?

Fetch and render the product information through Shopify storefront API (eg. Product cover image, title, link to a single page) on the category page

What are the acceptance criteria

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

Additional information

https://shopify.github.io/js-buy-sdk/#fetching-products
https://github.com/DivanteLtd/vue-storefront/tree/next/packages/boilerplate/api-client/src/api/getProduct

Expected Behavior

Compilation will be successful on initial run

Actual Behavior

Compilation fails due to missing dependencies.

1. Middleware compilation fails, cannot find @vue-storefront/shopify-api/server
2. Theme package fails, cannot find "axios"
3. Theme package fails, cannot find "@vue-storefront/core which is required by files in the packages/theme/composables directory

Possible Solution

1. @vue-storefront/shopify-api as a dependency to the theme package
2. Add axios as a dependency to the theme package
3. Add @vue-storefront/core as a devDependency to the theme package

Steps to reproduce

Build theme package for v1.06

What version of shopify integration are you using?

1.06

What version of Node.js are you using?

16.13.0

What browser (and version) are you using?

Chrome

What operating system (and version) are you using?

MacOS

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Expected Behavior

Compilation and startup of front end would be completed without error

Actual Behavior

Startup of project results in error ""cannot import outside of a module"

This is caused by the fact that the storefront-ui package is NOT built and given that cjs cannot utilize the import statement from legacy EMCA

Possible Solution

Add the module "storefront-ui" to the transpile option under the build configuration in the nuxt.js file

Resulting code will look like this

    transpile: ['vee-validate/dist/rules', 'storefront-ui'],
    plugins: [
      new webpack.DefinePlugin({
        'process.VERSION': JSON.stringify({
          // eslint-disable-next-line global-require
          version: version0.version,
          lastCommit: process.env.LAST_COMMIT || ''
        })
      })
    ],

Alternative Solution####
Attempt to utilize the import as a nuxt module approach, which was recently published. Have not tried this yet personally, but is a viable option

Steps to reproduce

Attempt to run command yarn dev:theme and note vue strart up issue

What version of shopify integration are you using?

1.06

What version of Node.js are you using?

16.13.0

What browser (and version) are you using?

Chrome

What operating system (and version) are you using?

MacOS

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

What is the motivation for adding/enhancing this feature?

To fix ejs module dependency required by the NUXT-theme-module

What are the acceptance criteria

Resolve the "can not find ejs module" error

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• [X ] YES
• NO

Additional information

Describe the Bug

After running the project created from the VueStorefront CLI (npx @vue-storefront/cli init), I get the following error when navigating to the product detail page:

You may have an infinite update loop in a component render function.

[Vue warn]: You may have an infinite update loop in a component render function.

found in

---> <Product>
       <Nuxt>
         <DefaultLayout> at layouts/default.vue
           <Root>

The page loads very slowly because of this infinite loop.

The problem appears to be related to line 111 in this file /pages/Product.vue

-> ln 111
:set="(atttLbl = o)"

Current behavior

No response

Expected behavior

The code generated out of the box from the CLI should not have any warnings, errors or performance issues.

Steps to reproduce

1. Run a fresh project created by the VueStoreFront CLI
2. Navigate to the product detail page for any product
3. It will be slow and show the above warning in the chrome dev tools

What version of Vue Storefront are you using?

2.4.2

What version of Node.js are you using?

12.22.5

What browser (and version) are you using?

chrome

What operating system (and version) are you using?

masOs

Relevant log output

No response

Able to fix / change the documentation?

• Yes
• No

Code of Conduct

• I agree to follow this project's Code of Conduct

┆Issue is synchronized with this Jira Zadanie by Unito

Expected Behavior

No compilations will be displayed / occur during build process

Actual Behavior

When user builds the theme package, using command yarn dev:theme there is a compilation error that results in an error message ```module not found "@nuxtjs/composition-api", which then lists vue-storefront/shopify-api and the vue-storefront/core packages.

When I checked the transitive package(s) from vue-storefront/core, it appears that that they are now listing the @nuxtjs/composition-api package as a peer vs dependency, which means that it is not being passed down the api-client package.

Possible Solution

To remediate the issue, I attempted to add the dependency to the theme package so that it could be effectively used via the nuxt.js configuration, but that did not preval. The only way I was able to resolve the issue in my local was to add the @nuxtjs/composition-api package as a dependency of the vue-storefront/api package.

Steps to reproduce

1. Install the latest vue-storefront/shopify release
2. Run commands to build api-client, then the composables package.
3. Ensure the other compilation issues are remediated as previously described in bug92, bug93
4. Run command to build the theme yarn dev:theme and observe the error

What version of shopify integration are you using?

1.06

What version of Node.js are you using?

16.13.0

What browser (and version) are you using?

Chrome

What operating system (and version) are you using?

MacOS

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Expected Behavior

No response

Actual Behavior

'page not found' will be shown

Possible Solution

No response

Steps to reproduce

do not click on the check box exactly to reproduce it. Click on the 'terms and conditions' text

What version of shopify integration are you using?

latest

What version of Node.js are you using?

12

What browser (and version) are you using?

firefox

What operating system (and version) are you using?

mac

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Expected Behavior

We should have little to zero no error with types

Actual Behavior

Lint run is throwing a bunch of error with relation to rules selected for the types

Possible Solution

No response

Steps to reproduce

Run lint locally or in CI environment

What version of shopify integration are you using?

1.0.2

What version of Node.js are you using?

14.18.1

What browser (and version) are you using?

Chrome

What operating system (and version) are you using?

Windows

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

What is the motivation for adding/enhancing this feature?

To fetch the variable product attributes on a single product page in order to make a selection and add to cart variation

What are the acceptance criteria

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

How the project can be improved?

This will help protect and encourage user to create their own variables on a .env file.
This will create a seamless instruction on how to setup initially the theme package of this web application.

What are the acceptance criteria?

• Should be able to get the environment variables set from a file or from environment itself
• Documentation is updated

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

What is the motivation for adding / enhancing this feature?

Implement useContent to support CMS module in VSF Next. Fetch CMS pages of Shopify and render on frontend.

What are the acceptance criteria

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

Additional information

https://github.com/DivanteLtd/vue-storefront/tree/next/packages/shopify/composables/src/composables/useContent
https://github.com/DivanteLtd/vue-storefront/tree/next/packages/shopify/api-client/src/api/content

What is the motivation for adding/enhancing this feature?

To enable existing Shopify store customers to login via the storeFront (VSFNext)

What are the acceptance criteria

When a user clicks on my account user icon, a modal popup will allow them to log in by authenticating users using Shopify API

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

Additional information

https://shopify.dev/docs/storefront-api/reference/customers/customeraccesstokencreate

Expected Behavior

Build process would execute without a warning

Actual Behavior

The following warning is produced when a rollup build is run that utilizes the rollup-plugin-typescript2

Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

Possible Solution

Upgrade to the version 0.31.0

Steps to reproduce

1. Run the build using the incremental configurations submitted via this commit to generate the warning

What version of shopify integration are you using?

1.06

What version of Node.js are you using?

16.13.0

What browser (and version) are you using?

Chrome

What operating system (and version) are you using?

MacOS

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Current behavior

With Shopify integration, have a product with 2 options: Size, Color
VSF doesn't show Color (neither with just 1 color, nor when multiple colors are set)

Expected behavior

Show Color option(s), similar to Size

Steps to reproduce the issue

Have a product on Shopify with Size & Color options

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you handle fixing this bug by yourself?

• YES
• NO

Which Release Cycle state this refers to? Info for developer. (doesn't apply to Next)

Pick one option.

Current https://github.com/vuestorefront/vue-storefront

Environment details

• Browser: Chrome
• OS: Linux
• Node: 14
• Code Version: https://github.com/vuestorefront/vue-storefront as of now

Additional information

How the project can be improved?

Remove deprecated core-js dependency

What are the acceptance criteria?

• As a developer I want to be able to build the app and view as few dependency warnings / issues as possible
• As a developer I want to be able to leverage the benefits and features provided by core-js v3.x

Additional information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

What is the motivation for adding/enhancing this feature?

To enable the custom graphQL queries with all required fields. eg. extract the collection inform from the product, which is not available in the optimized version (see https://imgur.com/FIaeywN)

What are the acceptance criteria

To make the export possible from the Shopify buy SDK for typescript, in order to use the custom query and retrieve the fields which are not available in the optimized version (

)

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

Additional information

https://github.com/Shopify/js-buy-sdk#expanding-the-sdk

What is the motivation for adding / enhancing this feature?

implement available filters from facets. However, need Shopify API to implement it. Right now, no API available for filters.

What are the acceptance criteria

Display available filters at PLP and make it functional to filter the products list

• ...

Version of Vue Storefront

• Vue Storefront
• Vue Storefront Next

Can you complete this feature request by yourself?

• YES
• NO

┆Issue is synchronized with this Jira Zadanie by Unito