Skip to content

Commit

Permalink
fix(storefront): BCTHEME-384 When default option is out of stock add …
Browse files Browse the repository at this point in the history
…to cart button does not populate for in stock options
  • Loading branch information
BC-tymurbiedukhin committed Jan 18, 2021
1 parent c169162 commit 318b258
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 50 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Changelog

## Draft
- Fixed case when default option is out of stock add to cart button does not populate for in stock options. [#1955](https://github.com/bigcommerce/cornerstone/pull/1955)
- Carousel buttons do not receive focus. [#1937](https://github.com/bigcommerce/cornerstone/pull/1937)
- Empty cart message not read by screen reader. [#1935](https://github.com/bigcommerce/cornerstone/pull/1935)
- No tooltips provided for carousel buttons. [#1934](https://github.com/bigcommerce/cornerstone/pull/1934)
Expand Down
6 changes: 6 additions & 0 deletions assets/js/theme/common/product-details-base.js
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,12 @@ export default class ProductDetailsBase {
} else if (typeof (data.bulk_discount_rates) !== 'undefined') {
viewModel.$bulkPricing.html('');
}

const addToCartWrapper = $('#add-to-cart-wrapper');

if (addToCartWrapper.is(':hidden') && data.purchasable) {
addToCartWrapper.show();
}
}

/**
Expand Down
4 changes: 1 addition & 3 deletions templates/components/amp/products/product-options.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@
{{{dynamicComponent 'components/products/options'}}}
{{/each}}
</div>
{{#if product.can_purchase}}
{{> components/products/add-to-cart}}
{{/if}}
{{> components/products/add-to-cart}}
<div class="loadingOverlay"></div>
</form>
</div>
Expand Down
90 changes: 46 additions & 44 deletions templates/components/products/add-to-cart.html
Original file line number Diff line number Diff line change
@@ -1,47 +1,49 @@
{{#if theme_settings.show_product_quantity_box}}
<div class="form-field form-field--increments">
<label class="form-label form-label--alternate"
for="qty[]">{{lang 'products.quantity'}}</label>
<div class="form-increment" data-quantity-change>
<button class="button button--icon" data-action="dec">
<span class="is-srOnly">{{lang 'products.quantity_decrease'}}</span>
<i class="icon" aria-hidden="true">
<svg>
<use xlink:href="#icon-keyboard-arrow-down"/>
</svg>
</i>
</button>
<input class="form-input form-input--incrementTotal"
id="qty[]"
name="qty[]"
type="tel"
value="{{#if product.min_purchase_quantity}}{{product.min_purchase_quantity}}{{else}}1{{/if}}"
data-quantity-min="{{product.min_purchase_quantity}}"
data-quantity-max="{{product.max_purchase_quantity}}"
min="1"
pattern="[0-9]*"
aria-live="polite">
<button class="button button--icon" data-action="inc">
<span class="is-srOnly">{{lang 'products.quantity_increase'}}</span>
<i class="icon" aria-hidden="true">
<svg>
<use xlink:href="#icon-keyboard-arrow-up"/>
</svg>
</i>
</button>
</div>
</div>
{{/if}}
<div id="add-to-cart-wrapper" {{#unless product.can_purchase}}style="display: none"{{/unless}}>
{{#if theme_settings.show_product_quantity_box}}
<div class="form-field form-field--increments">
<label class="form-label form-label--alternate"
for="qty[]">{{lang 'products.quantity'}}</label>
<div class="form-increment" data-quantity-change>
<button class="button button--icon" data-action="dec">
<span class="is-srOnly">{{lang 'products.quantity_decrease'}}</span>
<i class="icon" aria-hidden="true">
<svg>
<use xlink:href="#icon-keyboard-arrow-down"/>
</svg>
</i>
</button>
<input class="form-input form-input--incrementTotal"
id="qty[]"
name="qty[]"
type="tel"
value="{{#if product.min_purchase_quantity}}{{product.min_purchase_quantity}}{{else}}1{{/if}}"
data-quantity-min="{{product.min_purchase_quantity}}"
data-quantity-max="{{product.max_purchase_quantity}}"
min="1"
pattern="[0-9]*"
aria-live="polite">
<button class="button button--icon" data-action="inc">
<span class="is-srOnly">{{lang 'products.quantity_increase'}}</span>
<i class="icon" aria-hidden="true">
<svg>
<use xlink:href="#icon-keyboard-arrow-up"/>
</svg>
</i>
</button>
</div>
</div>
{{/if}}

<div class="alertBox productAttributes-message" style="display:none">
<div class="alertBox-column alertBox-icon">
<icon glyph="ic-success" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
<div class="alertBox productAttributes-message" style="display:none">
<div class="alertBox-column alertBox-icon">
<icon glyph="ic-success" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
</div>
<p class="alertBox-column alertBox-message"></p>
</div>
<p class="alertBox-column alertBox-message"></p>
{{#or customer (if theme_settings.restrict_to_login '!==' true)}}
<div class="form-action" role="status" aria-live="polite">
<input id="form-action-addToCart" data-wait-message="{{lang 'products.adding_to_cart'}}" class="button button--primary" type="submit"
value="{{#if product.pre_order}}{{lang 'products.pre_order'}}{{else}}{{lang 'products.add_to_cart'}}{{/if}}">
</div>
{{/or}}
</div>
{{#or customer (if theme_settings.restrict_to_login '!==' true)}}
<div class="form-action" role="status" aria-live="polite">
<input id="form-action-addToCart" data-wait-message="{{lang 'products.adding_to_cart'}}" class="button button--primary" type="submit"
value="{{#if product.pre_order}}{{lang 'products.pre_order'}}{{else}}{{lang 'products.add_to_cart'}}{{/if}}">
</div>
{{/or}}
4 changes: 1 addition & 3 deletions templates/components/products/product-view.html
Original file line number Diff line number Diff line change
Expand Up @@ -235,9 +235,7 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
<span data-product-stock>{{product.stock_level}}</span>
</label>
</div>
{{#if product.can_purchase}}
{{> components/products/add-to-cart}}
{{/if}}
{{> components/products/add-to-cart}}
{{#if product.out_of_stock}}
{{#if product.out_of_stock_message}}
{{> components/common/alert/alert-error product.out_of_stock_message}}
Expand Down

0 comments on commit 318b258

Please sign in to comment.