woocommerce/fancy 产品设计师的结帐部分中的多个缩略图
Multiple thumbnails in checkout section on woocommerce/fancy product designer
在我的 Woocommerce 网站中,用户可以通过 Fancy product designer 插件设计最多 6 个不同的图片。我正在尝试在结帐页面中输出购物车商品上的用户缩略图,而不是只显示一张产品图片。
Website 我正在努力使这成为可能。
(示例照片)
class-wc-cart.php
$dom = new DOMDocument;
libxml_use_internal_errors(true);
$dom->loadHTML( $thumbnail );
$xpath = new DOMXPath( $dom );
libxml_clear_errors();
$doc = $dom->getElementsByTagName("img")->item(1);
$src = $xpath->query(".//@src");
$srcset = $xpath->query(".//@srcset");
// custom image from customer
foreach ( $src as $s ) {
$s->nodeValue = $fpd_data['fpd_product_thumbnail'];
}
foreach ( $srcset as $s ) {
$s->nodeValue = $fpd_data['fpd_product_thumbnail'];
}
return $dom->saveXML( $doc );
我使用 foreach 循环访问来自高级产品设计师的图像。但这就像它只是在我结帐时列出了第一张图片。
不知道是否可行,或者我应该在 woocommerce 的 class-wc-cart.php
文件中使用另一种方法。
class-wc-product.php
//the additional form fields
public function add_product_designer_form() {
global $post;
$product_settings = new FPD_Product_Settings($post->ID);
if( $product_settings->show_designer() ) {
?>
<input type="hidden" value="<?php echo esc_attr( $post->ID ); ?>" name="add-to-cart" />
<input type="hidden" value="" name="fpd_product" />
<input type="hidden" value="" name="fpd_product_thumbnail[]" />
<input type="hidden" value="<?php echo isset($_GET['cart_item_key']) ? $_GET['cart_item_key'] : ''; ?>" name="fpd_remove_cart_item" />
<?php
if( !fpd_get_option('fpd_wc_disable_price_calculation') )
echo '<input type="hidden" value="" name="fpd_product_price" />';
do_action('fpd_product_designer_form_end', $product_settings);
}
}
在代码中有一个函数“after_product_designer”,我在其中添加了一些 jquery 代码以获取应该 post 来自 FPD 的多个 fpd_thumbnails。
它在 if(order.product != false)
var values = [];
if(<?php echo fpd_get_option('fpd_cart_custom_product_thumbnail'); ?>) {
// $cartForm.find('input[name="fpd_product_thumbnail"]').val(dataURL); (OLD/Original)
$('input[name="fpd_product_thumbnail[]"]').each(function(){ // NEW
values.push($(this).val(dataURL));
});
}
1) 您应该向 WP.SE
询问与 WP 相关的问题
2) 您的解决方案应在代码下方(添加 functions.php
并根据您的需要进行修改):
// Product thumbnail in checkout
add_filter( 'woocommerce_cart_item_thumbnail', 'product_thumbnail_in_checkout', 200, 3 );
function product_thumbnail_in_checkout( $thumbnail, $cart_item, $cart_item_key )
{
$use_product_thumb = false; //true or false
if (array_key_exists('fpd_data', $cart_item))
{
$thumbnail =""; //clear existing thumb
if ($use_product_thumb)
{
$fp = json_decode( stripslashes($cart_item['fpd_data']['fpd_product']) , true);
foreach($fp['product'] as $each)
{
$thumb = $each["thumbnail"];
$thumbnail .= '<img src="'.$thumb.'" style="width:50px; float:left; margin:5px;" />';
}
}
else{
$thumbnail = '<img src="'.$cart_item['fpd_data']['fpd_product_thumbnail'].'" style="float: left; margin: 5px; width: 200px; max-width: 550px;" />';
}
}
return $thumbnail;
}
我找到了一个解决方案,可以从精美的产品设计师那里提取 base64 图像,并在我的结帐中列出。它们都以某种方式组合在一个垂直的 base64 文件中。还没有找到解决方案。但这与本主题无关。
变化:
class-wc-product.php 并将 fancyProductDesigner.viewInstances[0].toDataURL
更改为 fancyProductDesigner.getProductDataURL
这会在一个数据 URL 中创建所有视图。如 FPD jquery documentation 中所述,不同的视图将位于彼此下方。
变化:
class-wc-order.php 函数 add_order_item_meta 到下面的代码。
public function add_order_item_meta( $item_id, $item ) {
$fpd_data = null;
if( isset( $item->legacy_values['_fpd_data'] ) ) // WC 3.0+
$fpd_data = $item->legacy_values['_fpd_data'];
else if( isset( $item['_fpd_data'] ) ) // WC <3.0
$fpd_data = $item['_fpd_data'];
if( !is_null($fpd_data) ) {
wc_add_order_item_meta( $item_id, '_fpd_data', $fpd_data);
}
}
这就是我的解决方案。
在我的 Woocommerce 网站中,用户可以通过 Fancy product designer 插件设计最多 6 个不同的图片。我正在尝试在结帐页面中输出购物车商品上的用户缩略图,而不是只显示一张产品图片。
Website 我正在努力使这成为可能。
class-wc-cart.php
$dom = new DOMDocument;
libxml_use_internal_errors(true);
$dom->loadHTML( $thumbnail );
$xpath = new DOMXPath( $dom );
libxml_clear_errors();
$doc = $dom->getElementsByTagName("img")->item(1);
$src = $xpath->query(".//@src");
$srcset = $xpath->query(".//@srcset");
// custom image from customer
foreach ( $src as $s ) {
$s->nodeValue = $fpd_data['fpd_product_thumbnail'];
}
foreach ( $srcset as $s ) {
$s->nodeValue = $fpd_data['fpd_product_thumbnail'];
}
return $dom->saveXML( $doc );
我使用 foreach 循环访问来自高级产品设计师的图像。但这就像它只是在我结帐时列出了第一张图片。
不知道是否可行,或者我应该在 woocommerce 的 class-wc-cart.php
文件中使用另一种方法。
class-wc-product.php
//the additional form fields
public function add_product_designer_form() {
global $post;
$product_settings = new FPD_Product_Settings($post->ID);
if( $product_settings->show_designer() ) {
?>
<input type="hidden" value="<?php echo esc_attr( $post->ID ); ?>" name="add-to-cart" />
<input type="hidden" value="" name="fpd_product" />
<input type="hidden" value="" name="fpd_product_thumbnail[]" />
<input type="hidden" value="<?php echo isset($_GET['cart_item_key']) ? $_GET['cart_item_key'] : ''; ?>" name="fpd_remove_cart_item" />
<?php
if( !fpd_get_option('fpd_wc_disable_price_calculation') )
echo '<input type="hidden" value="" name="fpd_product_price" />';
do_action('fpd_product_designer_form_end', $product_settings);
}
}
在代码中有一个函数“after_product_designer”,我在其中添加了一些 jquery 代码以获取应该 post 来自 FPD 的多个 fpd_thumbnails。
它在 if(order.product != false)
var values = [];
if(<?php echo fpd_get_option('fpd_cart_custom_product_thumbnail'); ?>) {
// $cartForm.find('input[name="fpd_product_thumbnail"]').val(dataURL); (OLD/Original)
$('input[name="fpd_product_thumbnail[]"]').each(function(){ // NEW
values.push($(this).val(dataURL));
});
}
1) 您应该向 WP.SE
询问与 WP 相关的问题2) 您的解决方案应在代码下方(添加 functions.php
并根据您的需要进行修改):
// Product thumbnail in checkout
add_filter( 'woocommerce_cart_item_thumbnail', 'product_thumbnail_in_checkout', 200, 3 );
function product_thumbnail_in_checkout( $thumbnail, $cart_item, $cart_item_key )
{
$use_product_thumb = false; //true or false
if (array_key_exists('fpd_data', $cart_item))
{
$thumbnail =""; //clear existing thumb
if ($use_product_thumb)
{
$fp = json_decode( stripslashes($cart_item['fpd_data']['fpd_product']) , true);
foreach($fp['product'] as $each)
{
$thumb = $each["thumbnail"];
$thumbnail .= '<img src="'.$thumb.'" style="width:50px; float:left; margin:5px;" />';
}
}
else{
$thumbnail = '<img src="'.$cart_item['fpd_data']['fpd_product_thumbnail'].'" style="float: left; margin: 5px; width: 200px; max-width: 550px;" />';
}
}
return $thumbnail;
}
我找到了一个解决方案,可以从精美的产品设计师那里提取 base64 图像,并在我的结帐中列出。它们都以某种方式组合在一个垂直的 base64 文件中。还没有找到解决方案。但这与本主题无关。
变化:
class-wc-product.php 并将 fancyProductDesigner.viewInstances[0].toDataURL
更改为 fancyProductDesigner.getProductDataURL
这会在一个数据 URL 中创建所有视图。如 FPD jquery documentation 中所述,不同的视图将位于彼此下方。
变化: class-wc-order.php 函数 add_order_item_meta 到下面的代码。
public function add_order_item_meta( $item_id, $item ) {
$fpd_data = null;
if( isset( $item->legacy_values['_fpd_data'] ) ) // WC 3.0+
$fpd_data = $item->legacy_values['_fpd_data'];
else if( isset( $item['_fpd_data'] ) ) // WC <3.0
$fpd_data = $item['_fpd_data'];
if( !is_null($fpd_data) ) {
wc_add_order_item_meta( $item_id, '_fpd_data', $fpd_data);
}
}
这就是我的解决方案。