Popup для изображений опций

Автор: | 19.02.2019

Версия ocStore 2.3.0.2.3 стандартная сборка

Срочно понадобилось для изображений опций увеличивать изображения при нажатии. Для этого можно воспользоваться плагином magnific-popup, который в стандартной сборке уже подключен в карточке товара, в файле catalog\view\theme\default\template\product\product.tpl:

...
$this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js');
$this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css');
...

В этом файле после строки

$product_option_value_data[] = array(

добавляем

'imageforgallery' => $option_value['image'] ? $this->model_tool_image->resize($option_value['image'], 500, 500) : '',

то есть изображение с нужным нам размером.
В файле \catalog\controller\product\product.php строки:

<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<?php if ($option_value['image']) { ?>
<img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />

заменяем на:

<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<?php if ($option_value['image']) { ?>
<a class="options-gallery" href="<?php echo $option_value['imageforgallery']; ?>">
<img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" /> 
</a>
<?php } ?>

и в самом конце перед

<?php echo $footer; ?>

добавляем скрипт:
<script>
    $(document).ready(function()
    {
    $('.options-gallery').magnificPopup(
    {
    type: 'image',
     gallery: {enabled: true},
     removalDelay: 500,
     mainClass: 'mfp-fade'
     });
     });
</script>

Данный подход можно использовать для создания галереи в любом месте сайта.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *