[Pre-analyse] Image placeholder sur les aperçus de magasin

FC_images_shop.md

Problème :

Sur le front FC, tous les magasins actuellement référencés ont la même photo par défaut (images/store.jpg), chaque magasin devrait avoir sa propre photo.

Transit de données

La route /aide/nos-librairies/$id (app/routes/_main.aide.nos-librairies.$id.tsx) affiche correctement le détail d'une librairie, photos incluses. Ces infos proviennent de Magento (query CmsPageByIdentifierQuery).

Pour le store locator, a route /nos-librairies est utilisée (app/routes/_main.nos-librairies.tsx).

Chaque item (librairie) est affiché dans l'atome StoreLocatorListItem. Effectivement, les photos affichent un placeholder codé en dur.

    <div className="store-locator-shop-list-item__image">
        <img src={"images/store.jpg"} alt={shop.label ?? ""} />
    </div>

Les infos des magasins sont obtenues dans les queries imbriquées : LoadAllStoreParcelShops > AvailableParcelShopDataFragment > AvailableParcelShopFragment.

La query AvailableParcelShopFragment :

fragment AvailableParcelShopFragment on ParcelShop {
  id
  type
  code
  id_relais
  url
  label
  postcode
  city
  country_code
  distance
  longitude
  latitude
  address
  hours {
    monday {
      ...OpeningClosingMorningAfternoonFragment
    }
    tuesday {
      ...OpeningClosingMorningAfternoonFragment
    }
    wednesday {
      ...OpeningClosingMorningAfternoonFragment
    }
    thursday {
      ...OpeningClosingMorningAfternoonFragment
    }
    friday {
      ...OpeningClosingMorningAfternoonFragment
    }
    saturday {
      ...OpeningClosingMorningAfternoonFragment
    }
    sunday {
      ...OpeningClosingMorningAfternoonFragment
    }
  }
}

Côté types, dans le schéma GraphQL :

export type ParcelShop = {
  __typename?: 'ParcelShop';
  address: Maybe<Scalars['String']['output']>;
  city: Maybe<Scalars['String']['output']>;
  code: Maybe<Scalars['String']['output']>;
  country_code: Maybe<Scalars['String']['output']>;
  distance: Maybe<Scalars['String']['output']>;
  hours: Maybe<ParcelShopWeek>;
  id: Maybe<Scalars['String']['output']>;
  id_relais: Maybe<Scalars['String']['output']>;
  label: Maybe<Scalars['String']['output']>;
  latitude: Maybe<Scalars['String']['output']>;
  longitude: Maybe<Scalars['String']['output']>;
  postcode: Maybe<Scalars['String']['output']>;
  type: Maybe<Scalars['String']['output']>;
  url: Scalars['String']['output'];
};

ParcelShop est surchargé dans l'extension Checkout (extensions/checkout/graphql/ShippingMethods/index.ts).

// index.ts
   type ParcelShop {
      id: String
      type: String
      code: String
      id_relais: String
      url: String!
      label: String
      postcode: String
      city: String
      country_code: String
      distance: String
      longitude: String
      latitude: String
      address: String
      hours: ParcelShopWeek
    }
// resolvers.ts
    ParcelShop: {
    url: async ({ path }: { path: string }, __: never, ___: InternalResolverContextType) => {
      return "/" + path;
    }

Constat : Il n'y a pas de référence à une photo ni dans la query, ni dans les types.

Pistes de travail

Il faudrait ajouter l'image à la query de bout en bout (en commençant par identifier la donnée en back et l'exposer).

• Rassembler les images
• Les héberger
• Créer les champs en BDD
• Indexer
• MAJ l'extension Checkout et la query
• Afficher l'image dans l'atome