Update to 5.1.0

Author: DrJulik

src/css/utilities/colors.css

@@ -103,11 +103,19 @@
   .color__border-transparent {
     border-color: transparent;
   }
+  /* .color__border-transparent-sides {
+    border-left-color: transparent;
+    border-right-color: transparent;
+  } */
 
   /* - divider 1 */
   .color__border-divider-1 {
     border-color: var(--color__border-divider-light-1);
   }
+  /* .color__border-divider-1-sides {
+    border-left-color: var(--color__border-divider-light-1);
+    border-right-color: var(--color__border-divider-light-1);
+  } */
 
   /* - divider 2 */
   .color__border-divider-2 {
@@ -123,6 +131,10 @@
   .color__border-selected-1 {
     border-color: var(--color__border-selected-light-1);
   }
+  /* .color__border-selected-1-sides {
+    border-left-color: var(--color__border-selected-light-1);
+    border-right-color: var(--color__border-selected-light-1);
+  } */
 
   /* - selected 2 */
   .color__border-selected-2 {

src/entrypoints/styles.css

@@ -208,4 +208,4 @@ html {
 }
 .shopify-payment-button__more-options {
   @apply !color__bg-overlay-1 px-6 py-2;
-}
+}

src/ts/bsl.ts

@@ -14,6 +14,7 @@ declare global {
     Shopify: IShopify;
     app: () => AppInterface;
     __initialData: AppInterface;
+    webkitAudioContext: any
   }
 }
 

src/ts/cart/cart.ts

@@ -152,8 +152,9 @@ export const cart = {
     sellingPlanId: number,
     quantity: number,
     openCart: boolean,
-    properties: HTMLCollectionOf<HTMLInputElement>
-  ) {
+    giftCardRecipient: boolean,
+    productHandle: string
+    ) {
     if(this.enable_audio) {
       this.playSound(this.click_audio);
     }
@@ -163,6 +164,8 @@ export const cart = {
     let propertiesArr = [];
     let propertiesObj;
 
+    let properties =  document.getElementsByClassName(`custom-input_${productHandle}`) as  HTMLCollectionOf<HTMLInputElement>;
+
     if (properties) {
       for (const property of properties) {
         propertiesArr.push([property.name, property.value]);
@@ -172,14 +175,43 @@ export const cart = {
       }
     }
 
+    // gift card recipient
+      let recipientCheckbox =  document.querySelector(`#recipient-checkbox`) as HTMLInputElement;
+      let recipientObj;
+      if(giftCardRecipient && recipientCheckbox.checked) {
+      let recipientName =  document.querySelector(`#recipient-name`) as HTMLInputElement;
+      let recipientEmail =  document.querySelector(`#recipient-email`) as HTMLInputElement;
+      let recipientMessage =  document.querySelector(`#recipient-message`) as HTMLInputElement;
+
+      // throw error if name or email are empty
+      if(!recipientName.value || !recipientEmail.value) {
+        this.error_title = "Error",
+        this.error_message = "Please fill out name and email of gift card recepient",
+        this.show_alert = true;
+        this.cart_loading = false;
+        return;
+      }
+
+      recipientObj = {
+        "Recipient email": recipientEmail.value,
+        "Recipient name": recipientName.value,
+        "Message": recipientMessage.value,
+        "__shopify_send_gift_card_to_recipient": "on",
+      }
+
+    }
+
     // Update formData if sellingPlanId is available
     if (sellingPlanId == 0) {
       formData = {
         items: [
           {
             id: variantID,
             quantity: quantity,
-            properties: propertiesObj,
+            properties: {
+              ...propertiesObj,
+              ...recipientObj
+            },
           },
         ],
       };

src/ts/collections/collections.ts

@@ -128,10 +128,11 @@ export const collections = {
   // Call section render API with data from filter
   fetchAndRenderCollection: function (filterData: FormData) {
     // Go back to top
-    var element = document.getElementById("js:top");
-    if (element) {
-      element.scrollIntoView();
-    }
+    var collectionTop = document.getElementById("js:top").offsetTop;
+    window.scrollTo({ top: collectionTop, behavior: 'smooth'});
+
+    // close filters
+    this.filter_popup = false;
 
     // Loop through form data and build url
     let filterUrl = this.buildUrlFilter(filterData);