[COM-33946]: Data subscription option id attribute (#55)

* add data subscription option id attribute to Subscribe button * add data-subscription-option-id attribute
Squarespace · Apr 4, 2024 · 5acef3b · 5acef3b
1 parent 79657a7
commit 5acef3b
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 1 deletion.
diff --git a/core/src/main/resources/com/squarespace/template/plugins/platform/add-to-cart-btn.html b/core/src/main/resources/com/squarespace/template/plugins/platform/add-to-cart-btn.html
@@ -7,9 +7,12 @@
 {.var @addToCartText localizedStrings.productAddToCartText}
 {.var @subscribeText localizedStrings.productSubscribeText}
 {.var @isSubscribable @content.isSubscribable}
+{.var @productSubscriptionOptions structuredContent.productSubscriptionOptions}
+{.var @subsOTPOptionsCount structuredContent.productSubscriptionOptions|count}
+{.eval @hasProductSubsOptionAndIsSubscribable = @subsOTPOptionsCount && @isSubscribable}
 
 <div class="sqs-add-to-cart-button-wrapper" data-animation-role="button">
-  <div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button sqs-button-element--primary {.if @fieldsFormId && @fieldsForm}use-form{.end}" role="button" tabindex="0" data-dynamic-strings data-collection-id="{collectionId}" data-item-id="{id}" data-product-type="{@productType}" data-use-custom-label="{@useCustom}" {.if @isSubscribable}data-is-subscription="{@isSubscribable}" {.end}data-original-label="{.if @useCustom && @customButton}{@customButton|htmlattr}{.or}{.if @isSubscribable}{.if @subscribeText}{@subscribeText|htmlattr}{.or}Subscribe{.end}{.or}{.if @addToCartText}{@addToCartText|htmlattr}{.or}Add To Cart{.end}{.end}{.end}" {.if @fieldsFormId && @fieldsForm}data-form="{@fieldsForm|json|htmlattr}"{.end}>
+  <div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button sqs-button-element--primary {.if @fieldsFormId && @fieldsForm}use-form{.end}" role="button" tabindex="0" data-dynamic-strings data-collection-id="{collectionId}" data-item-id="{id}" data-product-type="{@productType}" data-use-custom-label="{@useCustom}" {.if @isSubscribable}data-is-subscription="{@isSubscribable}" {.end}data-original-label="{.if @useCustom && @customButton}{@customButton|htmlattr}{.or}{.if @isSubscribable}{.if @subscribeText}{@subscribeText|htmlattr}{.or}Subscribe{.end}{.or}{.if @addToCartText}{@addToCartText|htmlattr}{.or}Add To Cart{.end}{.end}{.end}" {.if @fieldsFormId && @fieldsForm}data-form="{@fieldsForm|json|htmlattr}"{.end}{.if @hasProductSubsOptionAndIsSubscribable}data-subscription-option-id="{@productSubscriptionOptions.0.id}"{.end}>
     <div class="sqs-add-to-cart-button-inner">{.if @useCustom && @customButton}{@customButton|htmltag}{.or}{.if @isSubscribable}{.if @subscribeText}{@subscribeText|htmltag}{.or}Subscribe{.end}{.or}{.if @addToCartText}{@addToCartText|htmltag}{.or}Add To Cart{.end}{.end}{.end}</div>
   </div>
 </div>
diff --git a/core/src/test/resources/com/squarespace/template/plugins/platform/f-add-to-cart-btn-10.html b/core/src/test/resources/com/squarespace/template/plugins/platform/f-add-to-cart-btn-10.html
@@ -0,0 +1,27 @@
+:JSON
+{
+  "item": {
+    "id": "560c37c1a7c8465c4a71d99a",
+    "collectionId": "560c37c1a7c8465c4a71d99b",
+    "structuredContent": {
+      "productType": "2",
+      "useCustomAddButtonText": false,
+      "isSubscribable": true,
+      "productSubscriptionOptions" : []
+    }
+  },
+  "localizedStrings": {
+    "productSubscribeText": "SUBSCRIBE"
+  }
+}
+
+:TEMPLATE
+{item|add-to-cart-btn}
+
+:OUTPUT
+<div class="sqs-add-to-cart-button-wrapper" data-animation-role="button">
+  <div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button sqs-button-element--primary " role="button" tabindex="0" data-dynamic-strings data-collection-id="560c37c1a7c8465c4a71d99b" data-item-id="560c37c1a7c8465c4a71d99a" data-product-type="2" data-use-custom-label="false" data-is-subscription="true" data-original-label="SUBSCRIBE" >
+    <div class="sqs-add-to-cart-button-inner">SUBSCRIBE</div>
+  </div>
+</div>
+
diff --git a/core/src/test/resources/com/squarespace/template/plugins/platform/f-add-to-cart-btn-8.html b/core/src/test/resources/com/squarespace/template/plugins/platform/f-add-to-cart-btn-8.html
@@ -0,0 +1,38 @@
+:JSON
+{
+  "item": {
+    "id": "560c37c1a7c8465c4a71d99a",
+    "collectionId": "560c37c1a7c8465c4a71d99b",
+    "structuredContent": {
+      "productType": "2",
+      "useCustomAddButtonText": false,
+      "isSubscribable": true,
+      "productSubscriptionOptions" : [{
+        "id" : "2e0c2fbe-bc48-4a5e-9e0f-bb939576a0aa",
+        "percentageDiscount" : 0,
+        "subscriptionPlan" : {
+          "billingPeriod" : {
+            "value" : 1,
+            "unit" : "WEEK"
+          },
+          "planVersionId" : "d6803d89-82b8-49a3-ab6d-d9a16c93b5a8",
+          "numBillingCycles" : 0
+        }
+      }]
+    }
+  },
+  "localizedStrings": {
+    "productSubscribeText": "SUBSCRIBE"
+  }
+}
+
+:TEMPLATE
+{item|add-to-cart-btn}
+
+:OUTPUT
+<div class="sqs-add-to-cart-button-wrapper" data-animation-role="button">
+  <div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button sqs-button-element--primary " role="button" tabindex="0" data-dynamic-strings data-collection-id="560c37c1a7c8465c4a71d99b" data-item-id="560c37c1a7c8465c4a71d99a" data-product-type="2" data-use-custom-label="false" data-is-subscription="true" data-original-label="SUBSCRIBE" data-subscription-option-id="2e0c2fbe-bc48-4a5e-9e0f-bb939576a0aa">
+    <div class="sqs-add-to-cart-button-inner">SUBSCRIBE</div>
+  </div>
+</div>
+
diff --git a/core/src/test/resources/com/squarespace/template/plugins/platform/f-add-to-cart-btn-9.html b/core/src/test/resources/com/squarespace/template/plugins/platform/f-add-to-cart-btn-9.html
@@ -0,0 +1,35 @@
+:JSON
+{
+  "item": {
+    "id": "560c37c1a7c8465c4a71d99a",
+    "collectionId": "560c37c1a7c8465c4a71d99b",
+    "structuredContent": {
+      "productType": "2",
+      "useCustomAddButtonText": false,
+      "isSubscribable": false,
+      "productSubscriptionOptions" : [{
+        "id" : "2e0c2fbe-bc48-4a5e-9e0f-bb939576a0aa",
+        "percentageDiscount" : 0,
+        "subscriptionPlan" : {
+          "billingPeriod" : {
+            "value" : 1,
+            "unit" : "WEEK"
+          },
+          "planVersionId" : "d6803d89-82b8-49a3-ab6d-d9a16c93b5a8",
+          "numBillingCycles" : 0
+        }
+      }]
+    }
+  }
+}
+
+:TEMPLATE
+{item|add-to-cart-btn}
+
+:OUTPUT
+<div class="sqs-add-to-cart-button-wrapper" data-animation-role="button">
+  <div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button sqs-button-element--primary " role="button" tabindex="0" data-dynamic-strings data-collection-id="560c37c1a7c8465c4a71d99b" data-item-id="560c37c1a7c8465c4a71d99a" data-product-type="2" data-use-custom-label="false" data-original-label="Add To Cart" >
+    <div class="sqs-add-to-cart-button-inner">Add To Cart</div>
+  </div>
+</div>
+
diff --git a/core/src/test/resources/com/squarespace/template/plugins/platform/f-product-checkout-1.html b/core/src/test/resources/com/squarespace/template/plugins/platform/f-product-checkout-1.html
@@ -58,6 +58,9 @@
 
 
 
+
+
+
 <div class="sqs-add-to-cart-button-wrapper" data-animation-role="button">
   <div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button sqs-button-element--primary " role="button" tabindex="0" data-dynamic-strings data-collection-id="" data-item-id="560c37c1a7c8465c4a71d99a" data-product-type="" data-use-custom-label="" data-original-label="Add To Cart" >
     <div class="sqs-add-to-cart-button-inner">Add To Cart</div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -58,6 +58,9 @@






		<div class="sqs-add-to-cart-button-wrapper" data-animation-role="button">
		<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button sqs-button-element--primary " role="button" tabindex="0" data-dynamic-strings data-collection-id="" data-item-id="560c37c1a7c8465c4a71d99a" data-product-type="" data-use-custom-label="" data-original-label="Add To Cart" >
		<div class="sqs-add-to-cart-button-inner">Add To Cart</div>
Expand Down