bigcommerce / stencil-cli

BigCommerce Stencil emulator for local theme development
https://developer.bigcommerce.com/stencil-docs
BSD 4-Clause "Original" or "Old" License
103 stars 140 forks source link

fix: STRF-11856 - Filter list of channels from getStoreChannels() to storefront channels #1180

Closed bc-jz closed 3 months ago

bc-jz commented 3 months ago

What?

Filter the response from getStoreChannels() in theme-api-client.js by channel type. Only include storefront channels.

This change was requested by users of stencil-cli who were finding that the list of URLs given when running stencil start or stencil push included choices that are not valid. Specifically any channel that is not a "storefront" channel is not a valid choice as there is no template to display, for example on a marketplace channel that connects to facebook there is no storefront to display.

We are going to filter the list of choices we present to be specifically storefront channels. The changes in this PR are utilized by: stencil-start.js stencil-push.js stencil-pull.js stencil-download.js

Implementation details In order to support filtering the channels we needed to add an additional v3 api call (/v3/channels).

Previously the getStoreChannels() in theme-api-client.js was making a call to GET /v3/sites and returning this entire list as possible channels. This output looks like:

{
            "id": 1000,
            "url": "https://jznewuitest.mybigcommerce.com",
            "channel_id": 1,
            ...
        },
       {
            "id": 1003,
            "url": "https://store-z4zn3wo-1565458.mybigcommerce.com",
            "channel_id": 1565458,
            ...
        }

The url seen above is what we list when asking for a channel selection but not all of the "sites" seen above are storefront channels. In order to get that information we needed to add a GET to /v3/channels which will give back results like:

{
            "id": 1,
            "name": "TESttt",
            "platform": "bigcommerce",
            "type": "storefront",
            ...
            "is_listable_from_ui": true,
            "is_enabled": true,
            "is_visible": true,
            "status": "active"
        },
      {
            "id": 1565458,
            "name": "facebookAnalytics-0",
            "platform": "facebook",
            "type": "marketing",
            ...
            "is_listable_from_ui": false,
            "is_enabled": true,
            "is_visible": false,
            "status": "connected"
        }

I am filtering the list of sites we receive by the channel ids that have a type of storefront. It looks like maybe I could also filter by channels that have "is_listable_from_ui": true.

Tickets / Documentation

Screenshots (if appropriate)

I added a couple marketplace channels to my test store. Here is an example of how stencil start looks when using current master:

Screenshot 2024-04-04 at 10 44 47 AM

The last two choices seen above are my marketplace channels. With the channels in this PR we will start filtering to only return channels with a type of storefront. These are the results with my changes:

Screenshot 2024-04-04 at 11 25 27 AM

All three of the above output URLs are storefront channels.

Here is an example of positive results with the stencil push command as well:

Screenshot 2024-04-04 at 2 08 59 PM

stencil pull

Screenshot 2024-04-04 at 2 09 48 PM

stencil download

Screenshot 2024-04-04 at 2 10 39 PM

cc @bigcommerce/storefront-team

github-actions[bot] commented 3 months ago

:tada: This PR is included in version 7.4.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket: