Skip to content

C
coconva2118
Commit e3ff7c5c authored by Kapil Kumar's avatar Kapil Kumar
Browse files
Options

Updating chnages of image canvas details.

parent 3889e683
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 4 deletions
app/design/frontend/Sm/shop4u/Magento_Catalog/templates/product/view/gallery.phtml
View file @ e3ff7c5c
...@@ -33,6 +33,9 @@ $breakpoints = $_config->getProductDetail('breakpoints_width'); ...@@ -33,6 +33,9 @@ $breakpoints = $_config->getProductDetail('breakpoints_width');
<style type="text/css"> <style type="text/css">
.image_error {
border: 3px solid red !important;
}
.loader { .loader {
border: 16px solid #f3f3f3; /* Light grey */ border: 16px solid #f3f3f3; /* Light grey */
...@@ -78,6 +81,60 @@ $product = $objectManager->get('Magento\Catalog\Model\Product')->load($currentPr ...@@ -78,6 +81,60 @@ $product = $objectManager->get('Magento\Catalog\Model\Product')->load($currentPr
if (!empty($product->getCustomAttribute('image_canvas_area'))) { if (!empty($product->getCustomAttribute('image_canvas_area'))) {
$imageOptions = $product->getCustomAttribute('image_canvas_area')->getValue(); $imageOptions = $product->getCustomAttribute('image_canvas_area')->getValue();
//$imageOptions = "200X300:0X0,100X50:250X0,100X50:250X100"; //$imageOptions = "200X300:0X0,100X50:250X0,100X50:250X100";
?>
<script type="text/javascript">
var userImages = {};
var userImageList = {};
require([
'jquery',
], function ($) {
'use strict';
jQuery('#product-addtocart-button').on('click', function() {
var error = false;
jQuery('.user_image_canvas').each(function() {
var imageId = jQuery(this).find('.image_identifire').val();
console.log("this", this, jQuery(this).find('.cr-overlay').length, imageId);
if (jQuery(this).find('.cr-overlay').length <= 0) {
jQuery('.image-upload-custom' + imageId).addClass('image_error');
error = true;
} else {
var imageCancas = jQuery(this).find('.cr-overlay');
userImages[imageId] = {
image: null,
imageHeight: null,
imageWidth: null,
canvasHeight: null,
canvasWidth: null,
left:0,
top: 0
};
userImages[imageId].imageHeight = imageCancas.css('height');
userImages[imageId].imageWidth = imageCancas.css('width');
userImages[imageId].canvasHeight = jQuery(this).find('.cr-viewport').css('width');
userImages[imageId].canvasWidth = jQuery(this).find('.cr-viewport').css('width');
userImages[imageId].top = imageCancas.css('top');
userImages[imageId].left = imageCancas.css('left');
userImages[imageId].image = userImageList[imageId];
console.log("userImages", userImages);
}
});
if (error) {
alert("Please upload all canvas images");
}
jQuery('.product-custom-option').each(function() {
if (jQuery(this).parents('.field').find('.label').text().trim().toLowerCase().indexOf('canvas') > 0) {
if (!error) {
jQuery(this).val(JSON.stringify(userImages));
} else {
jQuery(this).val("");
return false;
}
}
});
});
});
</script>
<?php
$imageOptions = explode(",", $imageOptions); $imageOptions = explode(",", $imageOptions);
foreach ($imageOptions as $optionKey => $option) { foreach ($imageOptions as $optionKey => $option) {
$dimension = explode(':', $option); $dimension = explode(':', $option);
...@@ -85,7 +142,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -85,7 +142,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
$xy = explode('X', $dimension[1]); $xy = explode('X', $dimension[1]);
$path = str_ireplace('/index.php', '/', $_SERVER['SCRIPT_NAME']); $path = str_ireplace('/index.php', '/', $_SERVER['SCRIPT_NAME']);
?> ?>
<div style="width: <?php echo $hv[0]; ?>px;height: <?php echo $hv[1]; ?>px; <div class="user_image_canvas" style="width: <?php echo $hv[0]; ?>px;height: <?php echo $hv[1]; ?>px;
position: absolute;z-index: 9999; position: absolute;z-index: 9999;
margin-left: <?php echo $xy[0]; ?>px; margin-top: <?php echo $xy[1]; ?>px;"> margin-left: <?php echo $xy[0]; ?>px; margin-top: <?php echo $xy[1]; ?>px;">
<button class="removeBut" id="image_remove_<?php echo $optionKey; ?>" style=" <button class="removeBut" id="image_remove_<?php echo $optionKey; ?>" style="
...@@ -98,7 +155,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -98,7 +155,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
">X</button> ">X</button>
<form name="image_form_<?php echo $optionKey; ?>" id="image_form_<?php echo $optionKey; ?>" action="<?php echo $path; ?>shop4u/index/index" method="post" target="my_iframe" enctype="multipart/form-data"> <form name="image_form_<?php echo $optionKey; ?>" id="image_form_<?php echo $optionKey; ?>" action="<?php echo $path; ?>shop4u/index/index" method="post" target="my_iframe" enctype="multipart/form-data">
<input type="file" name="file" id="imgupload<?php echo $optionKey; ?>" style="display:none"/> <input type="file" name="file" id="imgupload<?php echo $optionKey; ?>" style="display:none"/>
<input type="hidden" name="image_identifire" value="<?php echo $optionKey; ?>"> <input type="hidden" name="image_identifire" class="image_identifire" value="<?php echo $optionKey; ?>">
<input type="hidden" name="image_width" value="<?php echo $hv[0]; ?>"> <input type="hidden" name="image_width" value="<?php echo $hv[0]; ?>">
<input type="hidden" name="image_heigth" value="<?php echo $hv[1]; ?>"> <input type="hidden" name="image_heigth" value="<?php echo $hv[1]; ?>">
<input type="hidden" name="image_x" value="<?php echo $xy[0]; ?>"> <input type="hidden" name="image_x" value="<?php echo $xy[0]; ?>">
...@@ -107,12 +164,12 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -107,12 +164,12 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
</form> </form>
<script> <script>
var valJson = {}; var valJson = {};
require([ require([
'jquery', 'jquery',
], function ($) { ], function ($) {
'use strict'; 'use strict';
setTimeout(function () { setTimeout(function () {
var IT = setInterval(function(){ var IT = setInterval(function(){
var src3 = jQuery('img.fotorama__img').attr('src'); var src3 = jQuery('img.fotorama__img').attr('src');
...@@ -153,6 +210,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -153,6 +210,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
function imageHolder<?php echo $optionKey; ?>(status, message, imageUrl) { function imageHolder<?php echo $optionKey; ?>(status, message, imageUrl) {
if (status) { if (status) {
userImageList[<?php echo $optionKey; ?>] = imageUrl;
require([ require([
'jquery', 'jquery',
'Croppie' 'Croppie'
...@@ -160,6 +218,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) { ...@@ -160,6 +218,7 @@ if (!empty($product->getCustomAttribute('image_canvas_area'))) {
if (jQuery('#imgupload<?php echo $optionKey; ?>').length) { if (jQuery('#imgupload<?php echo $optionKey; ?>').length) {
jQuery('#image_remove_<?php echo $optionKey; ?>').show(); jQuery('#image_remove_<?php echo $optionKey; ?>').show();
jQuery('.image-upload-custom<?php echo $optionKey; ?>').html(""); jQuery('.image-upload-custom<?php echo $optionKey; ?>').html("");
jQuery('.image-upload-custom<?php echo $optionKey; ?>').removeClass('image_error');
//jQuery('.image-upload-custom<?php echo $optionKey; ?>').append("<img src='" + imageUrl + "' style='width:100%; height:100%'>"); //jQuery('.image-upload-custom<?php echo $optionKey; ?>').append("<img src='" + imageUrl + "' style='width:100%; height:100%'>");
var imgSpl = imageUrl.split('/'); var imgSpl = imageUrl.split('/');
......
app/design/frontend/Sm/shop4u/Magento_Checkout/templates/cart/item/default.phtml 0 → 100644
View file @ e3ff7c5c
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/** @var $block \Magento\Checkout\Block\Cart\Item\Renderer */
$_item = $block->getItem();
$product = $_item->getProduct();
$isVisibleProduct = $product->isVisibleInSiteVisibility();
/** @var \Magento\Msrp\Helper\Data $helper */
$helper = $this->helper('Magento\Msrp\Helper\Data');
$canApplyMsrp = $helper->isShowBeforeOrderConfirm($product) && $helper->isMinimalPriceLessMsrp($product);
?>
<tbody class="cart item">
<tr class="item-info">
<td data-th="<?= $block->escapeHtml(__('Item')) ?>" class="col item">
<?php if ($block->hasProductUrl()):?>
<a href="<?= /* @escapeNotVerified */ $block->getProductUrl() ?>"
title="<?= $block->escapeHtml($block->getProductName()) ?>"
tabindex="-1"
class="product-item-photo">
<?php else:?>
<span class="product-item-photo">
<?php endif;?>
<?= $block->getImage($block->getProductForThumbnail(), 'cart_page_product_thumbnail')->toHtml() ?>
<?php if ($block->hasProductUrl()):?>
</a>
<?php else: ?>
</span>
<?php endif; ?>
<div class="product-item-details">
<strong class="product-item-name">
<?php if ($block->hasProductUrl()):?>
<a href="<?= /* @escapeNotVerified */ $block->getProductUrl() ?>"><?= $block->escapeHtml($block->getProductName()) ?></a>
<?php else: ?>
<?= $block->escapeHtml($block->getProductName()) ?>
<?php endif; ?>
</strong>
<?php if ($_options = $block->getOptionList()):?>
<dl class="item-options">
<?php foreach ($_options as $_option) : ?>
<?php $_formatedOptionValue = $block->getFormatedOptionValue($_option) ?>
<dt><?= $block->escapeHtml($_option['label']) ?></dt>
<?php if (stripos($_option['label'], 'Image Canvas') <= 0) { ?>
<dd>
<?php if (isset($_formatedOptionValue['full_view'])): ?>
<?= /* @escapeNotVerified */ $_formatedOptionValue['full_view'] ?>
<?php else: ?>
<?= $block->escapeHtml($_formatedOptionValue['value'], ['span']) ?>
<?php endif; ?>
</dd>
<?php } ?>
<?php endforeach; ?>
</dl>
<?php endif;?>
<?php if ($messages = $block->getMessages()): ?>
<?php foreach ($messages as $message): ?>
<div class="cart item message <?= /* @escapeNotVerified */ $message['type'] ?>"><div><?= $block->escapeHtml($message['text']) ?></div></div>
<?php endforeach; ?>
<?php endif; ?>
<?php $addInfoBlock = $block->getProductAdditionalInformationBlock(); ?>
<?php if ($addInfoBlock): ?>
<?= $addInfoBlock->setItem($_item)->toHtml() ?>
<?php endif;?>
</div>
</td>
<?php if ($canApplyMsrp): ?>
<td class="col msrp" data-th="<?= $block->escapeHtml(__('Price')) ?>">
<span class="pricing msrp">
<span class="msrp notice"><?= /* @escapeNotVerified */ __('See price before order confirmation.') ?></span>
<?php $helpLinkId = 'cart-msrp-help-' . $_item->getId(); ?>
<a href="#" class="action help map" id="<?= /* @escapeNotVerified */ ($helpLinkId) ?>" data-mage-init='{"addToCart":{"helpLinkId": "#<?= /* @escapeNotVerified */ $helpLinkId ?>","productName": "<?= /* @escapeNotVerified */ $product->getName() ?>","showAddToCart": false}}'>
<span><?= /* @escapeNotVerified */ __("What's this?") ?></span>
</a>
</span>
</td>
<?php else: ?>
<td class="col price" data-th="<?= $block->escapeHtml(__('Price')) ?>">
<?= $block->getUnitPriceHtml($_item) ?>
</td>
<?php endif; ?>
<td class="col qty" data-th="<?= $block->escapeHtml(__('Qty')) ?>">
<div class="field qty">
<label class="label" for="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty">
<span><?= /* @escapeNotVerified */ __('Qty') ?></span>
</label>
<div class="control qty">
<input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty"
name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]"
data-cart-item-id="<?= $block->escapeHtml($_item->getSku()) ?>"
value="<?= /* @escapeNotVerified */ $block->getQty() ?>"
type="number"
size="4"
title="<?= $block->escapeHtml(__('Qty')) ?>"
class="input-text qty"
data-validate="{required:true,'validate-greater-than-zero':true}"
data-role="cart-item-qty"/>
</div>
</div>
</td>
<td class="col subtotal" data-th="<?= $block->escapeHtml(__('Subtotal')) ?>">
<?php if ($canApplyMsrp): ?>
<span class="cart msrp subtotal">--</span>
<?php else: ?>
<?= $block->getRowTotalHtml($_item) ?>
<?php endif; ?>
</td>
</tr>
<tr class="item-actions">
<td colspan="4">
<div class="actions-toolbar">
<?= /* @escapeNotVerified */ $block->getActions($_item) ?>
</div>
</td>
</tr>
</tbody>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment