Skip to content
This repository was archived by the owner on Apr 29, 2019. It is now read-only.

Commit 3b27605

Browse files
srenonrostyslav-hymon
srenon
authored and
rostyslav-hymon
committed
Issues #10559 -Extend swatch using mixins
For Magento 2.2
1 parent a1f3e7f commit 3b27605

File tree

5 files changed

+84
-48
lines changed

5 files changed

+84
-48
lines changed

‎app/code/Magento/Catalog/Pricing/Render/FinalPriceBox.php

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,8 @@ protected function wrapResult($html)
115115
{
116116
return '<div class="price-box ' . $this->getData('css_classes') . '" ' .
117117
'data-role="priceBox" ' .
118-
'data-product-id="' . $this->getSaleableItem()->getId() . '"' .
118+
'data-product-id="' . $this->getSaleableItem()->getId() . '" ' .
119+
'data-price-box="product-id-' . $this->getSaleableItem()->getId() . '"' .
119120
'>' . $html . '</div>';
120121
}
121122

‎app/code/Magento/Catalog/Test/Unit/Pricing/Render/FinalPriceBoxTest.php

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,8 @@ public function testRenderMsrpEnabled()
246246

247247
//assert price wrapper
248248
$this->assertEquals(
249-
'<div class="price-box price-final_price" data-role="priceBox" data-product-id="">test</div>',
249+
'<div class="price-box price-final_price" data-role="priceBox" data-product-id="" ' .
250+
'data-price-box="product-id-">test</div>',
250251
$result
251252
);
252253
}

‎app/code/Magento/ConfigurableProduct/Block/Product/View/Type/Configurable.php

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ class Configurable extends \Magento\Catalog\Block\Product\View\AbstractView
6767
/**
6868
* @var Format
6969
*/
70-
private $localeFormat;
70+
protected $localeFormat;
7171

7272
/**
7373
* @var Session
@@ -211,9 +211,6 @@ public function getJsonConfig()
211211
$store = $this->getCurrentStore();
212212
$currentProduct = $this->getProduct();
213213

214-
$regularPrice = $currentProduct->getPriceInfo()->getPrice('regular_price');
215-
$finalPrice = $currentProduct->getPriceInfo()->getPrice('final_price');
216-
217214
$options = $this->helper->getOptions($currentProduct, $this->getAllowProducts());
218215
$attributesData = $this->configurableAttributeData->getAttributesData($currentProduct, $options);
219216

@@ -223,17 +220,7 @@ public function getJsonConfig()
223220
'currencyFormat' => $store->getCurrentCurrency()->getOutputFormat(),
224221
'optionPrices' => $this->getOptionPrices(),
225222
'priceFormat' => $this->localeFormat->getPriceFormat(),
226-
'prices' => [
227-
'oldPrice' => [
228-
'amount' => $this->localeFormat->getNumber($regularPrice->getAmount()->getValue()),
229-
],
230-
'basePrice' => [
231-
'amount' => $this->localeFormat->getNumber($finalPrice->getAmount()->getBaseAmount()),
232-
],
233-
'finalPrice' => [
234-
'amount' => $this->localeFormat->getNumber($finalPrice->getAmount()->getValue()),
235-
],
236-
],
223+
'prices' => $this->getPrices(),
237224
'productId' => $currentProduct->getId(),
238225
'chooseText' => __('Choose an Option...'),
239226
'images' => $this->getOptionImages(),
@@ -248,6 +235,32 @@ public function getJsonConfig()
248235

249236
return $this->jsonEncoder->encode($config);
250237
}
238+
239+
/**
240+
* Get product prices for configurable variations
241+
*
242+
* @return array
243+
* @since 100.2.0
244+
*/
245+
protected function getPrices()
246+
{
247+
$currentProduct = $this->getProduct();
248+
249+
$regularPrice = $currentProduct->getPriceInfo()->getPrice('regular_price');
250+
$finalPrice = $currentProduct->getPriceInfo()->getPrice('final_price');
251+
252+
return [
253+
'oldPrice' => [
254+
'amount' => $this->localeFormat->getNumber($regularPrice->getAmount()->getValue()),
255+
],
256+
'basePrice' => [
257+
'amount' => $this->localeFormat->getNumber($finalPrice->getAmount()->getBaseAmount()),
258+
],
259+
'finalPrice' => [
260+
'amount' => $this->localeFormat->getNumber($finalPrice->getAmount()->getValue()),
261+
],
262+
];
263+
}
251264

252265
/**
253266
* Get product images for configurable variations

‎app/code/Magento/Swatches/Block/Product/Renderer/Listing/Configurable.php

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,26 @@ public function getJsonConfig()
6666
$this->unsetData('allow_products');
6767
return parent::getJsonConfig();
6868
}
69+
70+
/**
71+
* Composes configuration for js price format
72+
*
73+
* @return string
74+
*/
75+
public function getPriceFormatJson()
76+
{
77+
return $this->jsonEncoder->encode($this->localeFormat->getPriceFormat());
78+
}
79+
80+
/**
81+
* Composes configuration for js price
82+
*
83+
* @return string
84+
*/
85+
public function getPricesJson()
86+
{
87+
return $this->jsonEncoder->encode($this->getPrices());
88+
}
6989

7090
/**
7191
* Do not load images for Configurable product with swatches due to its loaded by request

‎app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,38 @@
44
* See COPYING.txt for license details.
55
*/
66
?>
7-
<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
8-
<div class="swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>"></div>
9-
<script>
10-
require([
11-
'jquery',
12-
'jquery/ui',
13-
'Magento_Swatches/js/swatch-renderer',
14-
'Magento_Swatches/js/catalog-add-to-cart',
15-
'priceBox'
16-
], function ($) {
17-
var jsonConfig = <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>;
18-
19-
$('.swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>').SwatchRenderer({
20-
selectorProduct: '.product-item-details',
21-
onlySwatches: true,
22-
enableControlLabel: false,
23-
numberToShow: <?= /* @escapeNotVerified */ $block->getNumberSwatchesPerProduct() ?>,
24-
jsonConfig: jsonConfig,
25-
jsonSwatchConfig: <?= /* @escapeNotVerified */ $block->getJsonSwatchConfig() ?>,
26-
mediaCallback: '<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>'
27-
});
28-
29-
var dataPriceBoxSelector = '[data-role=priceBox]',
30-
dataProductIdSelector = '[data-product-id=<?= $block->escapeHtml($block->getProduct()->getId()) ?>]',
31-
priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);
7+
<?php
8+
/** @var $block \Magento\Swatches\Block\Product\Renderer\Listing\Configurable */
9+
$productId = $block->getProduct()->getId();
10+
?>
11+
<div class="swatch-opt-<?= /* @escapeNotVerified */ $productId ?>"
12+
data-role="swatch-option-<?= /* @escapeNotVerified */ $productId ?>"></div>
3213

33-
priceBoxes.priceBox({
34-
'priceConfig': {
35-
priceFormat: jsonConfig.priceFormat,
36-
prices: jsonConfig.prices
14+
<script type="text/x-magento-init">
15+
{
16+
"[data-role=swatch-option-<?= /* @escapeNotVerified */ $productId ?>]": {
17+
"Magento_Swatches/js/swatch-renderer": {
18+
"selectorProduct": ".product-item-details",
19+
"onlySwatches": true,
20+
"enableControlLabel": false,
21+
"numberToShow": <?= /* @escapeNotVerified */ $block->getNumberSwatchesPerProduct(); ?>,
22+
"jsonConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig(); ?>,
23+
"jsonSwatchConfig": <?= /* @escapeNotVerified */ $block->getJsonSwatchConfig(); ?>,
24+
"mediaCallback": "<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>"
3725
}
38-
});
39-
});
26+
}
27+
}
4028
</script>
29+
30+
<script type="text/x-magento-init">
31+
{
32+
"[data-role=priceBox][data-price-box=product-id-<?= /* @escapeNotVerified */ $productId ?>]": {
33+
"priceBox": {
34+
"priceConfig": {
35+
"priceFormat": <?= /* @escapeNotVerified */ $block->getPriceFormatJson(); ?>,
36+
"prices": <?= /* @escapeNotVerified */ $block->getPricesJson(); ?>
37+
}
38+
}
39+
}
40+
}
41+
</script>

0 commit comments

Comments
 (0)