spree_frontend 4.2.3.1 → 4.3.0.rc2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 76b7b2ed88530e5f7b5e500d8278b7b7ac329d9332fb6e62b59ca9829a4e846d
-  data.tar.gz: 843dbe747db1c41d3d69946d98232bc0d8a64d566451ae05366221addf3a7a2e
+  metadata.gz: b0686959b81f2872072ce65f56070281fdb154c6db90eacbf0d808ccffe1d949
+  data.tar.gz: 371ab9c42ce368957f7866a255d0a2a5bd045e40d1965a8e7855df531bdbbd25
 SHA512:
-  metadata.gz: c1edeaf15d88a7e3417666e4d07154468d672e18032c2b53197475f19b9bee5d61660027e4ea1ae8342b9bbe8889567622ed89846e39ffd3dc7fd3d26f9af503
-  data.tar.gz: 215319181ac46593f4e82b82716518c425fa9c9eb48a34e4bfa6d5159cbd1c168df62b5156c14240cc3bb2ac667cc04274ffea627782f1a1b1cc13498eea3fed
+  metadata.gz: 7bed7de505ec70cca2f0f3e10117335848e15e81f95a6cde330816a31b382a768133ffe752f112193db9f4d102a11a27bc99b2b4c04c2fb2d897e60c5ff86264
+  data.tar.gz: a611221576b26d8707bfe08a33630fa1f0fea69343751716cfb22bbd82705eb01ebb83f28423ea2a4aee711dc61f0efb258faefd3c43db18440e73e0d4c446be

data/Rakefile

@@ -11,5 +11,5 @@ task default: :spec
 desc "Generates a dummy app for testing"
 task :test_app do
   ENV['LIB_NAME'] = 'spree/frontend'
-  Rake::Task['common:test_app'].invoke
+  Rake::Task['common:test_app'].execute( { install_storefront: true, install_admin: false } )
 end

data/app/assets/config/spree_frontend_manifest.js

@@ -0,0 +1,4 @@
+//= link_tree ../images
+//
+//= link spree/frontend/all.js
+//= link spree/frontend/all.css

data/app/assets/images/card-image.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-image" viewBox="0 0 16 16">
+  <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+  <path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54A.505.505 0 0 1 1 12.5v-9a.5.5 0 0 1 .5-.5h13z"/>
+</svg>

data/app/assets/images/file-image.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-image" viewBox="0 0 16 16">
+  <path d="M8.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+  <path d="M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v8l-2.083-2.083a.5.5 0 0 0-.76.063L8 11 5.835 9.7a.5.5 0 0 0-.611.076L3 12V2z"/>
+</svg>

data/app/assets/images/image.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-image" viewBox="0 0 16 16">
+  <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+  <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/>
+</svg>

data/app/assets/images/noimage/plp.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 180 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.32046,0,0,0.32046,7.99036,6.23638)">
+        <path d="M193.937,171.926C184.475,171.926 173.361,167.573 168.554,160.362C167.504,159.01 167.053,157.509 167.053,155.856C167.053,151.802 170.808,148.347 174.862,148.347C176.966,148.347 178.919,149.397 180.87,151.652C183.874,155.405 188.23,157.208 193.937,157.208C204.001,157.208 209.858,151.351 209.858,145.192C209.858,138.585 203.249,134.078 194.99,131.074C186.729,128.071 177.866,125.216 172.01,117.857C169.156,114.102 167.654,109.598 167.654,104.04C167.654,88.57 180.57,79.558 194.99,79.558C204.601,79.558 215.115,84.814 220.372,92.775C221.123,93.977 221.573,95.328 221.573,96.98C221.573,101.185 217.968,104.49 213.763,104.49C211.51,104.49 209.558,103.288 207.756,100.886C204.601,96.529 200.396,94.277 194.99,94.277C187.178,94.277 182.673,98.633 182.673,104.04C182.673,109.598 189.282,113.352 197.542,116.356C205.803,119.511 214.665,122.665 220.522,130.624C223.376,134.68 224.877,139.485 224.877,145.192C224.877,161.263 210.61,171.926 193.937,171.926ZM250.97,193.166C250.97,197.832 247.51,200.691 243.447,200.691C239.384,200.691 235.923,197.832 235.923,193.166L235.923,111.909C235.923,94.003 250.368,79.558 268.275,79.558C286.183,79.558 300.627,94.003 300.627,111.909L300.627,139.749C300.627,157.654 286.183,172.1 268.275,172.1C261.504,172.1 255.786,169.993 250.97,165.63L250.97,193.166ZM250.97,139.749C250.97,149.378 258.644,157.053 268.275,157.053C277.905,157.053 285.579,149.378 285.579,139.749L285.579,111.909C285.579,102.279 277.905,94.605 268.275,94.605C258.644,94.605 250.97,102.279 250.97,111.909L250.97,139.749ZM358.379,100.963C356.404,100.963 354.583,100.203 352.913,98.533L352.609,98.229C349.725,95.953 346.539,94.738 342.743,94.738C333.787,94.738 328.321,100.963 328.321,113.258L328.321,163.81C328.321,168.516 324.83,171.4 320.731,171.4C316.631,171.4 313.14,168.516 313.14,163.81L313.14,113.258C313.14,94.283 323.918,79.558 342.743,79.558C350.027,79.558 358.832,82.897 363.843,87.907C365.361,89.576 366.12,91.247 366.12,93.219C366.12,97.319 362.477,100.963 358.379,100.963ZM436.715,122.363C436.715,126.419 433.261,129.872 429.206,129.872L387.15,129.872L387.15,139.636C387.15,148.646 395.863,156.907 405.926,156.907C411.933,156.907 416.739,154.956 420.495,151.2C422.145,148.946 424.098,147.746 426.501,147.746C430.558,147.746 434.313,151.2 434.313,155.254C434.313,158.259 432.66,160.211 430.858,162.013C424.7,168.622 416.289,171.926 405.926,171.926C388.353,171.926 372.13,157.509 372.13,139.636L372.13,111.849C372.13,93.977 386.551,79.557 404.423,79.557C422.296,79.557 436.715,93.977 436.715,111.849L436.715,122.363ZM421.696,114.853L421.696,111.849C421.696,102.236 414.035,94.578 404.423,94.578C394.81,94.578 387.15,102.236 387.15,111.849L387.15,114.853L421.696,114.853ZM511.723,122.363C511.723,126.419 508.269,129.872 504.214,129.872L462.16,129.872L462.16,139.636C462.16,148.646 470.871,156.907 480.934,156.907C486.941,156.907 491.749,154.956 495.503,151.2C497.155,148.946 499.106,147.746 501.511,147.746C505.566,147.746 509.321,151.2 509.321,155.254C509.321,158.259 507.669,160.211 505.866,162.013C499.708,168.622 491.298,171.926 480.934,171.926C463.361,171.926 447.138,157.509 447.138,139.636L447.138,111.849C447.138,93.977 461.559,79.557 479.431,79.557C497.305,79.557 511.723,93.977 511.723,111.849L511.723,122.363ZM496.704,114.853L496.704,111.849C496.704,102.236 489.043,94.578 479.431,94.578C469.819,94.578 462.16,102.236 462.16,111.849L462.16,114.853L496.704,114.853Z" style="fill:rgb(0,102,204);fill-rule:nonzero;"/>
+        <path d="M57.551,159.794C57.551,165.5 52.927,170.124 47.221,170.124C41.516,170.124 36.892,165.5 36.892,159.794C36.892,154.088 41.516,149.464 47.221,149.464C52.927,149.464 57.551,154.088 57.551,159.794" style="fill:rgb(0,102,204);fill-rule:nonzero;"/>
+        <path d="M100.978,159.794C100.978,165.5 96.352,170.124 90.648,170.124C84.943,170.124 80.319,165.5 80.319,159.794C80.319,154.088 84.943,149.464 90.648,149.464C96.352,149.464 100.978,154.088 100.978,159.794" style="fill:rgb(0,102,204);fill-rule:nonzero;"/>
+        <path d="M94.443,139.135L43.428,139.135C39.331,139.135 35.639,136.666 34.075,132.879L20.637,100.346L10.119,100.346C4.531,100.346 0,95.815 0,90.227C0,84.639 4.531,80.108 10.119,80.108L27.406,80.108C31.503,80.108 35.195,82.578 36.758,86.364L50.196,118.897L87.742,118.897L101.569,86.278C103.751,81.131 109.69,78.733 114.836,80.91C119.98,83.092 122.384,89.03 120.203,94.176L103.76,132.965C102.174,136.705 98.506,139.135 94.443,139.135" style="fill:rgb(0,102,204);fill-rule:nonzero;"/>
+        <path d="M105.747,46.537C101.875,42.505 95.47,42.376 91.439,46.248L78.842,58.342L78.842,10.12C78.842,4.53 74.313,0.001 68.723,0.001C63.135,0.001 58.605,4.53 58.605,10.12L58.605,58.106L46.482,46.297C42.479,42.399 36.072,42.481 32.173,46.485C28.273,50.489 28.357,56.895 32.36,60.795L61.663,89.336C61.797,89.467 61.941,89.582 62.08,89.703C62.154,89.768 62.225,89.835 62.3,89.898C62.645,90.181 63.002,90.439 63.373,90.671C63.425,90.702 63.481,90.731 63.534,90.764C63.898,90.982 64.272,91.175 64.656,91.344C64.691,91.359 64.721,91.38 64.757,91.395C64.781,91.406 64.805,91.413 64.828,91.422C65.058,91.518 65.291,91.6 65.526,91.678C65.612,91.707 65.697,91.741 65.783,91.767C66.013,91.836 66.247,91.891 66.48,91.944C66.573,91.966 66.666,91.994 66.759,92.011C66.993,92.058 67.228,92.089 67.464,92.118C67.557,92.129 67.648,92.149 67.742,92.157C68.058,92.189 68.374,92.204 68.691,92.204C68.701,92.204 68.711,92.206 68.722,92.206L68.723,92.206C68.75,92.206 68.778,92.202 68.804,92.202C69.1,92.2 69.396,92.187 69.69,92.159C69.864,92.143 70.038,92.11 70.21,92.085C70.355,92.063 70.501,92.048 70.645,92.02C70.851,91.981 71.055,91.925 71.258,91.874C71.366,91.845 71.476,91.824 71.582,91.793C71.792,91.731 71.996,91.655 72.202,91.579C72.3,91.543 72.402,91.513 72.5,91.473C72.696,91.394 72.887,91.302 73.08,91.21C73.185,91.16 73.291,91.115 73.393,91.062C73.568,90.97 73.737,90.868 73.908,90.766C74.024,90.696 74.143,90.63 74.257,90.556C74.406,90.458 74.551,90.349 74.696,90.243C74.825,90.148 74.955,90.055 75.081,89.954C75.207,89.851 75.329,89.74 75.451,89.631C75.545,89.548 75.642,89.473 75.733,89.386L105.457,60.845C109.488,56.974 109.618,50.568 105.747,46.537" style="fill:rgb(153,204,0);fill-rule:nonzero;"/>
+        <path d="M70.287,208.737C60.149,208.737 49.575,204.919 38.207,197.286C33.568,194.171 32.332,187.884 35.447,183.245C38.563,178.607 44.849,177.371 49.49,180.485C67.208,192.383 77.219,189.517 87.633,181.039C91.967,177.511 98.341,178.163 101.869,182.497C105.396,186.832 104.744,193.206 100.409,196.733C90.579,204.736 80.662,208.737 70.287,208.737" style="fill:rgb(153,204,0);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(0.723327,0,0,0.716405,24.4284,25.3505)">
+        <g transform="matrix(9.26626,0,0,9.26626,16.011,72.835)">
+            <path d="M6.002,5.5C6.002,6.323 5.325,7 4.502,7C3.679,7 3.002,6.323 3.002,5.5C3.002,4.677 3.679,4 4.502,4C5.325,4 6.002,4.677 6.002,5.5Z" style="fill:rgb(125,125,125);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(9.26626,0,0,9.26626,16.011,72.835)">
+            <path d="M1.5,2C0.677,2 -0,2.677 0,3.5L0,12.5C0,13.323 0.677,14 1.5,14L14.5,14C15.323,14 16,13.323 16,12.5L16,3.5C16,2.677 15.323,2 14.5,2L1.5,2ZM14.5,3C14.774,3 15,3.226 15,3.5L15,9.5L11.225,7.553C11.033,7.457 10.8,7.495 10.648,7.646L6.938,11.356L4.278,9.584C4.081,9.453 3.816,9.479 3.648,9.646L1.002,12L1.002,12.54C1.001,12.527 1,12.513 1,12.5L1,3.5C1,3.226 1.226,3 1.5,3L14.5,3Z" style="fill:rgb(125,125,125);fill-rule:nonzero;"/>
+        </g>
+    </g>
+    <g transform="matrix(1.89682,0,0,1.89682,-1.5642,-167.039)">
+        <text x="18.181px" y="200.157px" style="font-family:'Arial-BoldMT', 'Arial', sans-serif;font-weight:700;font-size:12px;fill:rgb(0,102,204);">NO IMAGE</text>
+    </g>
+</svg>

data/app/assets/javascripts/spree/api/main.js

@@ -0,0 +1,36 @@
+//= require spree
+
+var SpreeAPI = {
+  oauthToken: null, // user Bearer token to authorize operations for the given user
+  orderToken: null // order token to authorize operations on current order (cart)
+}
+
+SpreeAPI.Storefront = {}
+SpreeAPI.Platform = {}
+
+// API routes
+Spree.routes.api_v2_storefront_cart_create = Spree.pathFor('api/v2/storefront/cart')
+Spree.routes.api_v2_storefront_cart_add_item = Spree.pathFor('api/v2/storefront/cart/add_item')
+Spree.routes.api_v2_storefront_cart_apply_coupon_code = Spree.pathFor('api/v2/storefront/cart/apply_coupon_code')
+
+// helpers
+SpreeAPI.handle500error = function () {
+  alert('Internal Server Error')
+}
+
+SpreeAPI.prepareHeaders = function (headers) {
+  if (typeof headers === 'undefined') {
+    headers = {}
+  }
+
+  // if signed in we need to pass the Bearer authorization token
+  // so backend will recognize that actions are authorized in scope of this user
+  if (SpreeAPI.oauthToken) {
+    headers['Authorization'] = 'Bearer ' + SpreeAPI.oauthToken
+  }
+
+  // default headers, required for POST/PATCH/DELETE requests
+  headers['Accept'] = 'application/json'
+  headers['Content-Type'] = 'application/json'
+  return headers
+}

data/app/assets/javascripts/spree/api/storefront/cart.js

@@ -0,0 +1,49 @@
+//= require spree/api/main
+
+SpreeAPI.Storefront.createCart = function (successCallback, failureCallback) {
+  fetch(Spree.routes.api_v2_storefront_cart_create, {
+    method: 'POST',
+    headers: SpreeAPI.prepareHeaders()
+  }).then(function (response) {
+    switch (response.status) {
+      case 422:
+        response.json().then(function (json) { failureCallback(json.error) })
+        break
+      case 500:
+        SpreeAPI.handle500error()
+        break
+      case 201:
+        response.json().then(function (json) {
+          SpreeAPI.orderToken = json.data.attributes.token
+          successCallback()
+        })
+        break
+    }
+  })
+}
+
+SpreeAPI.Storefront.addToCart = function (variantId, quantity, options, successCallback, failureCallback) {
+  fetch(Spree.routes.api_v2_storefront_cart_add_item, {
+    method: 'POST',
+    headers: SpreeAPI.prepareHeaders({ 'X-Spree-Order-Token': SpreeAPI.orderToken }),
+    body: JSON.stringify({
+      variant_id: variantId,
+      quantity: quantity,
+      options: options
+    })
+  }).then(function (response) {
+    switch (response.status) {
+      case 422:
+        response.json().then(function (json) { failureCallback(json.error) })
+        break
+      case 500:
+        SpreeAPI.handle500error()
+        break
+      case 200:
+        response.json().then(function (json) {
+          successCallback(json.data)
+        })
+        break
+    }
+  })
+}

data/app/assets/javascripts/spree/frontend/checkout/payment.js

@@ -27,11 +27,29 @@ Spree.ready(function ($) {
       if ($(CARD_NUMBER_SELECTOR).length > 0 &&
           $(CARD_EXPIRATION_SELECTOR).length > 0 &&
           $(CARD_CODE_SELECTOR).length > 0) {
+        var cardCodeCleave;
+        var updateCardCodeCleave = function (length) {
+          if (cardCodeCleave) cardCodeCleave.destroy()
+
+          cardCodeCleave = new Cleave(CARD_CODE_SELECTOR, {
+            numericOnly: true,
+            blocks: [length]
+          })
+        }
+
+        updateCardCodeCleave(3)
+
         /* eslint-disable no-new */
         new Cleave(CARD_NUMBER_SELECTOR, {
           creditCard: true,
           onCreditCardTypeChanged: function (type) {
             $('.ccType').val(type)
+
+            if (type === 'amex') {
+              updateCardCodeCleave(4)
+            } else {
+              updateCardCodeCleave(3)
+            }
           }
         })
         /* eslint-disable no-new */
@@ -39,11 +57,6 @@ Spree.ready(function ($) {
           date: true,
           datePattern: ['m', 'Y']
         })
-        /* eslint-disable no-new */
-        new Cleave(CARD_CODE_SELECTOR, {
-          numericOnly: true,
-          blocks: [3]
-        })
       }
 
       $('input[type="radio"][name="order[payments_attributes][][payment_method_id]"]').click(function () {

data/app/assets/javascripts/spree/frontend/checkout.js

@@ -59,3 +59,19 @@ Spree.ready(function () {
 
   return Spree.Checkout
 })
+
+$('.js-remove-credit-card').click(function() {
+  if (confirm(Spree.translations.credit_card_remove_confirmation)) {
+    return $.ajax({
+      async: false,
+      method: 'DELETE',
+      url: Spree.routes.api_v2_storefront_destroy_credit_card(this.dataset.id),
+      dataType: 'json',
+      headers: {
+        'Authorization': 'Bearer ' + SpreeAPI.oauthToken
+      }
+    }).done(function() {
+      location.reload();
+    })
+  }
+})

data/app/assets/javascripts/spree/frontend/currency.js

@@ -29,15 +29,17 @@ document.addEventListener('turbolinks:load', function(event) {
 // fix back button issue with different currency set
 // invalidate page if cached page has different currency then the current one
 document.addEventListener('turbolinks:load', function(event) {
-  if (SPREE_CURRENCY === SPREE_DEFAULT_CURRENCY) {
-    var regexAnyCurrency = new RegExp('currency=')
-    if (event.data.url.match(regexAnyCurrency) && !event.data.url.match(SPREE_CURRENCY)) {
-      Spree.setCurrency(SPREE_CURRENCY)
-    }
-  } else {
-    var regex = new RegExp('currency=' + SPREE_CURRENCY)
-    if (!event.data.url.match(regex)) {
-      Spree.setCurrency(SPREE_CURRENCY)
+  if (typeof (SPREE_DEFAULT_CURRENCY) !== 'undefined' && typeof (SPREE_CURRENCY) !== 'undefined') {
+    if (SPREE_CURRENCY === SPREE_DEFAULT_CURRENCY) {
+      var regexAnyCurrency = new RegExp('currency=')
+      if (event.data.url.match(regexAnyCurrency) && !event.data.url.match(SPREE_CURRENCY)) {
+        Spree.setCurrency(SPREE_CURRENCY)
+      }
+    } else {
+      var regex = new RegExp('currency=' + SPREE_CURRENCY)
+      if (!event.data.url.match(regex)) {
+        Spree.setCurrency(SPREE_CURRENCY)
+      }
     }
   }
 })

data/app/assets/javascripts/spree/frontend/locale.es6

@@ -0,0 +1,13 @@
+document.addEventListener('turbolinks:load', () => {
+  const localeSelect = document.querySelectorAll('select[name=switch_to_locale]')
+
+  if (localeSelect.length) {
+    localeSelect.forEach((element) => {
+      element.addEventListener('change', () => {
+        Spree.clearCache()
+        Spree.showProgressBar()
+        element.form.submit()
+      })
+    })
+  }
+})

data/app/assets/javascripts/spree/frontend/views/spree/home/product_carousels.js

@@ -23,13 +23,13 @@ Spree.loadCarousel = function (element, div) {
 }
 
 Spree.loadsCarouselElements = function () {
-  $('div[data-product-carousel]').each(function (_index, element) { Spree.loadCarousel(element, this) })
+  $('div[data-product-carousel-taxon-id]').each(function (_index, element) { Spree.loadCarousel(element, this) })
 }
 
 document.addEventListener('turbolinks:load', function () {
-  var homePage = $('body#home')
+  var carouselPresent = $('div[data-product-carousel-taxon-id]')
 
-  if (homePage.length) {
+  if (carouselPresent.length) {
     // load Carousels straight away if they are in the viewport
     Spree.loadsCarouselElements()
 

data/app/assets/javascripts/spree/frontend/views/spree/products/index.js

@@ -99,13 +99,4 @@ Spree.ready(function ($) {
     $('.plp-overlay-ul-li').removeClass('plp-overlay-ul-li--active')
     $(this).addClass('plp-overlay-ul-li--active');
   });
-
-  $('.plp-overlay-buttons .done-btn').click(function (event) {
-    if (window.URLSearchParams) {
-      event.preventDefault();
-      var searchParams = new URLSearchParams(location.search);
-      searchParams.delete('menu_open');
-      setNewUrl(searchParams);
-    }
-  });
 });

data/app/assets/javascripts/spree/frontend/views/spree/products/price_filters.es6

@@ -0,0 +1,46 @@
+Spree.ready(function() {
+  class PriceRangeFilter {
+    constructor(inputsContainer, filterButton) {
+      this.inputsContainer = inputsContainer
+      this.filterButton = filterButton
+
+      this.priceInputs = inputsContainer.querySelectorAll('input')
+      this.minPriceInput = inputsContainer.querySelector('input[name="min_price"]')
+      this.maxPriceInput = inputsContainer.querySelector('input[name="max_price"]')
+    }
+
+    handlePriceChange() {
+      this.priceInputs.forEach((priceInput) => {
+        priceInput.addEventListener('change', () => {
+          this.updatePricesForFiltering(
+            parseInt(this.minPriceInput.value) || 0,
+            parseInt(this.maxPriceInput.value) || 'Infinity'
+          )
+        })
+      })
+    }
+
+    updatePricesForFiltering(minPrice, maxPrice) {
+      const formattedPriceRange = `${minPrice}-${maxPrice}`
+      const url = new URL(this.filterButton.href)
+
+      url.searchParams.set('price', formattedPriceRange)
+      this.filterButton.href = `${url.pathname}${url.search}`
+    }
+  }
+
+  // we have 2 elements for filtering prices - desktop and mobile
+  const desktopElement = document.getElementById('filterPriceRangeDesktop')
+  if (desktopElement) {
+    const desktopFilterButton = desktopElement.querySelector('a')
+    const desktopPriceRangeFilter = new PriceRangeFilter(desktopElement, desktopFilterButton)
+    desktopPriceRangeFilter.handlePriceChange()
+  }
+
+  const mobileElement = document.getElementById('filterPriceRangeMobile')
+  if (mobileElement) {
+    const mobileFilterButton = document.getElementById('filterProductsButtonMobile')
+    const mobilePriceRangeFilter = new PriceRangeFilter(mobileElement, mobileFilterButton)
+    mobilePriceRangeFilter.handlePriceChange()
+  }
+});

data/app/assets/javascripts/spree/frontend.js

@@ -10,6 +10,7 @@
 //= require spree/api/main
 //= require ./lazysizes.config
 //= require lazysizes.min
+//= require accounting.min
 //= require turbolinks
 //= require spree/frontend/account
 //= require spree/frontend/api_tokens
@@ -29,6 +30,7 @@
 //= require spree/frontend/views/spree/products/description
 //= require spree/frontend/views/spree/products/index
 //= require spree/frontend/views/spree/products/modal_carousel
+//= require spree/frontend/views/spree/products/price_filters
 //= require spree/frontend/views/spree/shared/carousel
 //= require spree/frontend/views/spree/shared/carousel/single
 //= require spree/frontend/views/spree/shared/carousel/swipes
@@ -46,6 +48,7 @@ Spree.routes.api_tokens = Spree.pathFor('api_tokens')
 Spree.routes.ensure_cart = Spree.pathFor('ensure_cart')
 Spree.routes.api_v2_storefront_cart_apply_coupon_code = Spree.localizedPathFor('api/v2/storefront/cart/apply_coupon_code')
 Spree.routes.api_v2_storefront_cart_remove_coupon_code = function(couponCode) { return Spree.localizedPathFor('api/v2/storefront/cart/remove_coupon_code/' + couponCode) }
+Spree.routes.api_v2_storefront_destroy_credit_card = function(id) { return Spree.localizedPathFor('api/v2/storefront/account/credit_cards/' + id) }
 Spree.routes.product = function(id) { return Spree.localizedPathFor('products/' + id) }
 Spree.routes.product_related = function(id) { return Spree.localizedPathFor('products/' + id + '/related') }
 Spree.routes.product_carousel = function (taxonId) { return Spree.localizedPathFor('product_carousel/' + taxonId) }

data/app/assets/javascripts/spree.js

@@ -0,0 +1,78 @@
+//= require jsuri
+function Spree () {}
+
+Spree.ready = function (callback) {
+  return jQuery(document).on('page:load turbolinks:load', function () {
+    return callback(jQuery)
+  })
+}
+
+Spree.mountedAt = function () {
+  return window.SpreePaths.mounted_at
+}
+
+Spree.adminPath = function () {
+  return window.SpreePaths.admin
+}
+
+Spree.pathFor = function (path) {
+  var locationOrigin = (window.location.protocol + '//' + window.location.hostname) + (window.location.port ? ':' + window.location.port : '')
+
+  return this.url('' + locationOrigin + (this.mountedAt()) + path, this.url_params).toString()
+}
+
+Spree.localizedPathFor = function(path) {
+  if (typeof (SPREE_LOCALE) !== 'undefined' && typeof (SPREE_CURRENCY) !== 'undefined') {
+    var fullUrl = new URL(Spree.pathFor(path))
+    var params = fullUrl.searchParams
+    var pathName = fullUrl.pathname
+
+    params.set('currency', SPREE_CURRENCY)
+
+    if (pathName.match(/api\/v/)) {
+      params.set('locale', SPREE_LOCALE)
+    } else {
+      pathName = (this.mountedAt()) + SPREE_LOCALE + '/' + path
+    }
+    return fullUrl.origin + pathName + '?' + params.toString()
+  }
+  return Spree.pathFor(path)
+}
+
+Spree.adminPathFor = function (path) {
+  return this.pathFor('' + (this.adminPath()) + path)
+}
+
+Spree.url = function (uri, query) {
+  if (uri.path === void 0) {
+    // eslint-disable-next-line no-undef
+    uri = new Uri(uri)
+  }
+  if (query) {
+    $.each(query, function (key, value) {
+      return uri.addQueryParam(key, value)
+    })
+  }
+  return uri
+}
+
+Spree.ajax = function (urlOrSettings, settings) {
+  var url
+  if (typeof urlOrSettings === 'string') {
+    return $.ajax(Spree.url(urlOrSettings).toString(), settings)
+  } else {
+    url = urlOrSettings['url']
+    delete urlOrSettings['url']
+    return $.ajax(Spree.url(url).toString(), urlOrSettings)
+  }
+}
+
+Spree.routes = {
+  states_search: Spree.pathFor('api/v1/states'),
+  apply_coupon_code: function (orderId) {
+    return Spree.pathFor('api/v1/orders/' + orderId + '/apply_coupon_code')
+  },
+  cart: Spree.pathFor('cart')
+}
+
+Spree.url_params = {}