[ODE-23] Added shop pay button component (#14)

Signed-off-by: Youness Idbakkasse <[email protected]>
odestry · Oct 11, 2023 · 7595e90 · 7595e90
1 parent 788bc76
commit 7595e90
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -34,6 +34,7 @@ You can navigate these snippets by using the table below.
 | [Tools](#tools) | [Metaobject detector](#metaobject-detector) | A way to detect the current metaobject on the metaobject template without relying on dynamic ressources.
 | [Meta](#meta) | [Social share](#social-share) | A small snippet to render all necessary meta tags for social sharing and page previews on socials. |
 | [UI](#ui) | [Image](#image) | A powerful, less opinionated image snippet built on top of evergreen web technologies for Shopify storefronts. |
+| [UI](#ui) | [Shop pay button](#shop-pay-button) | Pure liquid dynamic Shop pay button for express checkout. |
 | [SEO](#seo) | [Schema website](#schema-website) | Renders the schema.org website JSON-LD for Site Name. |
 | [SEO](#seo) | [Schema organization](#schema-organization) | Renders the schema.org JSON-LD for Brand and Organization. |
 | [SEO](#seo) | [Schema article](#schema-article) | Renders the schema.org JSON-LD for a blog post or an article. |
@@ -259,6 +260,18 @@ And then set this on the snippet class default value:
   ...
 ```
 
+### Shop pay button
+
+Pure liquid dynamic Shop pay button for express checkout.
+
+Copy code from [this file](./ui/shop-pay-button.liquid).
+
+```liquid
+{% render 'shop-pay-button' variant: variant: product.selected_or_first_available_variant %}
+```
+
+This snippet is based on the [Shopify web component](https://shopify.dev/docs/custom-storefronts/additional-sdks/web-components#buy-with-shop-pay-component).
+
 ## Contributing
 
 We'd love your help! Please read our [contributing guide](https://github.com/odestry/.github/blob/main/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements.

diff --git a/ui/shop-pay-button.liquid b/ui/shop-pay-button.liquid
@@ -0,0 +1,32 @@
+{% comment %}
+  Renders a shop pay button for express checkout.
+
+  Accepts:
+    - variant: {object} first selected product variant. (required)
+
+  Usage:
+    {% render 'shop-pay-button' variant: product.variants.first %}
+{% endcomment %}
+
+{% if variant and variant != empty %}
+  <a
+    href="{{ routes.cart_url | append: '/' | append: variant.id | append: ':1?payment=shop_pay' }}"
+    class="inline-flex items-center justify-center gap-1 h-11 px-8 rounded-sm bg-[#5a31f4] text-white font-sans font-medium cursor-pointer no-underline disabled:opacity-50 disabled:cursor-not-allowed"
+    aria-label="{{ 'Buy with Shop Pay' }}"
+  >
+    <span aria-hidden="true">{{ 'Buy with' }}</span>
+    <svg
+      height="20"
+      width="85"
+      viewBox="0 -2 341 81"
+      fill="none"
+      aria-hidden="true"
+      preserveAspectRatio="xMidYMid"
+      focusable="false"
+      role="presentation"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill="#ffffff" fill-rule="evenodd" d="M227.297 0c-6.849 0-12.401 5.472-12.401 12.223v55.59c0 6.75 5.552 12.222 12.401 12.222h101.06c6.849 0 12.401-5.472 12.401-12.222v-55.59c0-6.75-5.552-12.223-12.401-12.223h-101.06Zm17.702 55.892v-14.09h8.994c8.217 0 12.586-4.542 12.586-11.423s-4.369-11-12.586-11h-14.788v36.513h5.794Zm0-31.084h7.664c5.319 0 7.932 2.154 7.932 5.758 0 3.605-2.518 5.758-7.695 5.758h-7.901V24.808Zm31.796 31.833c4.417 0 7.314-1.92 8.644-5.197.38 3.652 2.613 5.524 7.457 4.26l.048-3.885c-1.948.187-2.328-.515-2.328-2.528v-9.55c0-5.617-3.752-8.94-10.686-8.94-6.84 0-10.782 3.37-10.782 9.08h5.32c0-2.714 1.947-4.353 5.367-4.353 3.609 0 5.272 1.545 5.224 4.214v1.217l-6.127.655c-6.887.749-10.686 3.324-10.686 7.818 0 3.698 2.659 7.209 8.549 7.209Zm1.187-4.213c-2.992 0-4.179-1.592-4.179-3.184 0-2.153 2.47-3.136 7.314-3.698l3.8-.421c-.238 4.12-3.04 7.303-6.935 7.303Zm32.555 5.29c-2.422 5.804-6.317 7.536-12.396 7.536h-2.613V60.48h2.803c3.324 0 4.939-1.03 6.697-3.979l-10.782-24.95h5.984l7.695 18.21 6.839-18.21h5.842l-10.069 26.167Z" clip-rule="evenodd"/><path fill="#fff" d="M29.514 35.18c-7.934-1.697-11.469-2.36-11.469-5.374 0-2.834 2.392-4.246 7.176-4.246 4.207 0 7.283 1.813 9.546 5.363.171.274.524.369.812.222l8.927-4.447a.616.616 0 0 0 .256-.864c-3.705-6.332-10.55-9.798-19.562-9.798-11.843 0-19.2 5.752-19.2 14.898 0 9.714 8.96 12.169 16.904 13.865 7.944 1.697 11.49 2.36 11.49 5.373 0 3.014-2.584 4.436-7.742 4.436-4.763 0-8.297-2.15-10.433-6.321a.63.63 0 0 0-.843-.274L6.47 52.364a.623.623 0 0 0-.278.843c3.535 7.006 10.785 10.947 20.47 10.947 12.334 0 19.787-5.658 19.787-15.088s-9.001-12.169-16.935-13.865v-.021ZM77.353 16.036c-5.062 0-9.536 1.77-12.75 4.92-.203.19-.534.053-.534-.221V.622a.62.62 0 0 0-.63-.622h-11.17a.62.62 0 0 0-.63.622v62.426a.62.62 0 0 0 .63.621h11.17a.62.62 0 0 0 .63-.621V35.664c0-5.289 4.11-9.345 9.653-9.345 5.542 0 9.557 3.972 9.557 9.345v27.384a.62.62 0 0 0 .63.621h11.17a.62.62 0 0 0 .63-.621V35.664c0-11.505-7.646-19.618-18.356-19.618v-.01ZM118.389 14.255c-6.065 0-11.767 1.823-15.847 4.467a.618.618 0 0 0-.202.833l4.922 8.292c.182.295.566.4.865.22a19.82 19.82 0 0 1 10.262-2.78c9.749 0 16.914 6.785 16.914 15.75 0 7.64-5.734 13.297-13.006 13.297-5.926 0-10.037-3.403-10.037-8.207 0-2.75 1.185-5.005 4.271-6.596a.607.607 0 0 0 .246-.864l-4.645-7.754a.632.632 0 0 0-.759-.264c-6.225 2.276-10.593 7.755-10.593 15.109 0 11.126 8.981 19.428 21.507 19.428 14.629 0 25.147-9.998 25.147-24.338 0-15.372-12.237-26.603-29.066-26.603l.021.01ZM180.098 15.951c-5.649 0-10.689 2.055-14.373 5.68a.313.313 0 0 1-.534-.222v-4.362a.62.62 0 0 0-.63-.621H153.68a.62.62 0 0 0-.63.621v62.331a.62.62 0 0 0 .63.622h11.169a.62.62 0 0 0 .631-.622v-20.44c0-.274.331-.41.533-.231 3.674 3.371 8.532 5.342 14.096 5.342 13.102 0 23.321-10.463 23.321-24.054 0-13.592-10.23-24.054-23.321-24.054l-.011.01Zm-2.103 37.54c-7.454 0-13.103-5.847-13.103-13.58 0-7.734 5.638-13.582 13.103-13.582 7.464 0 13.091 5.753 13.091 13.581 0 7.829-5.553 13.581-13.102 13.581h.011Z"/>
+    </svg>
+  </a>
+{% endif %}