Merge pull request #2592 from bigcommerce/BACK-469

bc-apostoliuk · web-flow · commit f34af7ea8cca · 2026-02-12T13:17:29.000+02:00
feat(backorders): BACK-469 add backorder availability prompt on PDP
diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss
@@ -216,6 +216,13 @@
     }
 }
 
+// Details - Product backorder message
+// -----------------------------------------------------------------------------
+
+.productView-backorder-availability-prompt {
+    margin-left: spacing("half");
+}
+
 
 // Details - Product Information
 // -----------------------------------------------------------------------------
diff --git a/templates/components/products/backorder-availability-prompt.html b/templates/components/products/backorder-availability-prompt.html
@@ -0,0 +1,7 @@
+{{#if show_prompt}}
+    {{#if available_to_sell '>' 0}}
+        {{#if available_for_backorder '>' 0}}
+            <span class="productView-backorder-availability-prompt">({{prompt}})</span>
+        {{/if}}
+    {{/if}}
+{{/if}}
diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -247,6 +247,7 @@ <h2 class="productView-brand">
                     <label class="form-label form-label--alternate">
                         {{lang 'products.current_stock'}}
                         <span data-product-stock>{{product.stock_level}}</span>
+                        {{> components/products/backorder-availability-prompt show_prompt=product.show_backorder_availability_prompt prompt=product.backorder_availability_prompt available_to_sell=product.available_to_sell available_for_backorder=product.available_for_backorder}}
                     </label>
                 </div>
                 {{> components/products/add-to-cart with_wallet_buttons=true}}

Original file line number	Diff line number	Diff line change
`@@ -216,6 +216,13 @@`
`216`	`216`	`}`
`217`	`217`	`}`
`218`	`218`
	`219`	`+// Details - Product backorder message`
	`220`	`+// -----------------------------------------------------------------------------`
	`221`	`+`
	`222`	`+.productView-backorder-availability-prompt {`
	`223`	`+ margin-left: spacing("half");`
	`224`	`+}`
	`225`	`+`
`219`	`226`
`220`	`227`	`// Details - Product Information`
`221`	`228`	`// -----------------------------------------------------------------------------`