cartwidget

Package Protection Service (pps)

This package allows us to have a custom widget with auto-generating logic to handle the current behavior that exists on current customer sites.

This is a very useful and dynamic solution with scalable and maintainable code. The current status of this widget and the different ways that the client has to install it on their sites will be shown below.

Installation

For local purposes, I recommend using ngrok to allow a public tunnel to point to localhost and use it as a separate host.

In other ways, you'll be able to use the following URL

https://cdn.jsdelivr.net/npm/cartwidget/dist/pps-widget.js

Manual snippet

theme.liquid

...
  <script src="https://cdn.jsdelivr.net/npm/cartwidget/dist/pps-widget.js"></script>
</body>

In any .liquid page in your site, you'll be able to put the following.

<div class="cart__footer">
  <!-- Or any location you want -->
  <pps-widget></pps-widget>
  ...
</div>

Our package will try to find this custom tag to insert widget content.

Auto-generation feature

To use auto generation feature you'll need to follow the next steps.

theme.liquid

...
  <script
    src="https://cdn.jsdelivr.net/npm/cartwidget/dist/pps-widget.js"
    arguments="autoinstall;"
    pps
  ></script>
</body>

And that's it!

NOTE: Make sure the theme that you want to install, it is supported by widget.

• List with supported themes coming soon.

Run Locally

Clone the project

  git clone [e-mail]:packageprotection/cartwidget.git

Go to the project directory

  cd cartwidget/

Install dependencies

  npm install

Start the development generation (watcher enabled)

  npm start

Build a production version

  npm run build

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

WIDGET_IDENTIFIER is a string identifier, can be any name you want. I recommend use the official name: pps-widget.

NODE_ENV can be development or production.

STORE_API_URL can be use to force a redirect URL for every Fetch.resolve request.

Authors

• @HersonCastillo