Setting up Swym wishlist code for the hydrogen store

Install packages if using npm

npm i axios uuid

if using yarn

yarn add axios uuid

Add these variable in your .env file

VITE_STOREFRONT_TOKEN = <YOUR_SWYM_REST_API_KEY>
VITE_STORE_DOMAIN = <STORE_DOMAIN>

VITE_STOREFRONT_TOKEN

You can get this from swym-admin

VITE_STORE_DOMAIN

Your Shopify's store domain. For example alkis-boutique.myshopify.com

It includes code for wishlist components and other important functions.

1. Copy the utility folder

Go to src/swym and paste folder in root/src

2. Copy the wishlist components folder

Go to src/components/wishlist and paste this folder in root/src/components

3. Add API endpoints

Copy api/generateRegid, api/getCustomerAccessToken and api/validateSync in root/src/routes/api

4. Export wishlist component

In root/src/componenets/index.js add export * from './wishlist/index';

5. Update your swym.config.js

In src/swym/swym.config.js update your store details

Get Swym endpoint from : Swym API Endpoint
Get pid from : pid
Get accessToken from : Rest API Key

NOTE: if accessToken (Rest API Key ) is not genrated click on Genrate Key to genrate new.

const SWYM_CONFIG = {
    accessToken:'<SWYM_ACCEES_TOKEN>',
    swymEndpoint: 'Add your Endpoint - Available from Swym Dashboard Settings',
    pid: 'Add your PID Here - Available from Swym Dashboard Settings',
    defaultWishlistName: 'My Wishlist',
    alertTimeOut: 5000,
    swymSharedURL: 'swym/shared-wishlist', // this 'swym' can be updated to any folder name for custom implementation
    swymSharedMediumCopyLink: 'copylink',
};

export default SWYM_CONFIG;

6. Adding important icons

in src/components/elements/Icon.jsx add

export function IconTick() {
  return (
    <span className="bg-green-100 text-green-800 text-sm font-semibold inline-flex items-center p-1.5 rounded-full dark:bg-gray-700 dark:text-blue-400">
      <svg
        aria-hidden="true"
        className="w-3.5 h-3.5"
        fill="currentColor"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fillRule="evenodd"
          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
          clipRule="evenodd"
        ></path>
      </svg>
      <span className="sr-only">Icon description</span>
    </span>
  );
}

export function IconHeart(props) {
  return (
    <svg
      className="heart"
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="15"
      viewBox="0 0 16 15"
    >
      <g id="heart" fill="none" strokeMiterlimit="10">
        <path
          d="M8,15,6.84,13.937C2.72,10.1,0,7.6,0,4.5A4.386,4.386,0,0,1,4.4,0,4.7,4.7,0,0,1,8,1.717,4.7,4.7,0,0,1,11.6,0,4.386,4.386,0,0,1,16,4.5c0,3.106-2.72,5.6-6.84,9.441Z"
          stroke="none"
        />
        <path
          d="M 8 13.64373970031738 L 8.48186206817627 13.20225715637207 L 8.644049644470215 13.05103969573975 C 12.47146034240723 9.482660293579102 15 7.125249862670898 15 4.49590015411377 C 15 3.53331995010376 14.65030956268311 2.645900011062622 14.01533985137939 1.997089982032776 C 13.38607025146484 1.3541100025177 12.52828979492188 1 11.60000038146973 1 C 10.53046035766602 1 9.472579956054688 1.506360054016113 8.770179748535156 2.354510068893433 L 8.000020027160645 3.284480094909668 L 7.22983980178833 2.354520082473755 C 6.527400016784668 1.506360054016113 5.469510078430176 1 4.400000095367432 1 C 3.471709966659546 1 2.613929986953735 1.3541100025177 1.984660029411316 1.997089982032776 C 1.349689960479736 2.645900011062622 1 3.53331995010376 1 4.49590015411377 C 1 7.125249862670898 3.528589963912964 9.482709884643555 7.356080055236816 13.05115985870361 L 7.518139362335205 13.2022590637207 L 8 13.64373970031738 M 8 15 L 6.839849948883057 13.9370698928833 C 2.719919919967651 10.09539031982422 0 7.601950168609619 0 4.49590015411377 C 0 1.9617600440979 1.919919967651367 -8.881784197001252e-16 4.400000095367432 -8.881784197001252e-16 C 5.799960136413574 -8.881784197001252e-16 7.119880199432373 0.653980016708374 8 1.71668004989624 C 8.880080223083496 0.653980016708374 10.19995975494385 -8.881784197001252e-16 11.60000038146973 -8.881784197001252e-16 C 14.08008003234863 -8.881784197001252e-16 16 1.9617600440979 16 4.49590015411377 C 16 7.601990222930908 13.28003978729248 10.09543037414551 9.160149574279785 13.9370698928833 L 8 15 Z"
          stroke="none"
          fill="#000"
        />
      </g>
    </svg>
  );
}

export function IconDelete() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
      />
    </svg>
  );
}

Getting swym regid

regid is swym token that you will need to send in each swym API call

1. After login we need to create/sync regid

src/components/account/AccountLoginForm.client.jsx

const savedSwymLocalStorage = getSwymLocalStorage();
if (savedSwymLocalStorage && savedSwymLocalStorage.regid) {
    // we will sync activities done by anonymous regid with useremail
    callValidateSyncRegidAPI({
      useremail: email,
      regid: savedSwymLocalStorage.regid,
    });
  } else {
    callGenrateRegidAPI({
      useremail: email,
    });
  }

2. Clear swym localstorage on logout

Import and call deleteSwymLocalStorage inside your logout function. This will clear stored regied and session-id

deleteSwymLocalStorage()

Import swym WishlistButton component

import {WishlistButton} from '../wishlist/WishlistButton';

place it at desired location.

...
    <WishlistButton
    selectedVariant={selectedVariant}
    productData={productData}
    />
...

1. Creating Wishlist Page

create src/routes/[handle]/wishlist.server.jsx and add

import {Seo} from '@shopify/hydrogen';
import {PageHeader, Section, CartDetails, WishlistPage} from '~/components';
import {Layout} from '~/components/index.server';

export default function  Wishlist() {
  return (
    <Layout>
      <Seo type="page" data={{title: 'Cart'}} />
      <Section className="max-w-7xl mx-auto">
        <WishlistPage layout="page" />
      </Section>
    </Layout>
  );
}

2. Add Wishlist option to navbar

add wishlist in nav bar in src/components/global/Layout.server.jsx.

headerMenu.items.push({
      id: 'WishlistPlus',
      resourceId: null,
      tags: [],
      title: 'Wishlist',
      type: 'WISHLIST',
      url: '',
      items: [],
      isExternal: true,
      target: '_self',
      to: '/swym/wishlist', // this 'swym' can be updated to any folder name for custom implementation
  })

NOTE:

You can edit title as well as the name ‘swym' in the ‘to'(pathname).

Create src/routes/[handle]/shared-wishlist.server.jsx and add

import {Seo} from '@shopify/hydrogen'; 
import {Section} from '~/components';
import {Layout} from '~/components/index.server';
import {ShareWishlistPage} from '../../components/index';

export default function sharedWishlist() {
  return (
    <Layout>
      <Seo type="page" data={{title: 'Shared Wishlist'}} />
      <Section className="max-w-7xl mx-auto">
        <ShareWishlistPage layout="page" />
      </Section>
    </Layout>
  );
}