将所选的产品变体数据传递到联系表7查询表中 [英] Pass the chosen product variations data into Contact Form 7 enquiry form
问题描述
在WooCommerce中，我使用联系表7和产品信息请求插件可在单个产品页面内添加表单，因为我需要一种功能，该功能允许用户发送有关产品的查询请求(认为是简单的联系表单).
With WooCommerce, I use Contact Form 7 and Product Info Request plugins to add a form inside a single product pages, because I need a functionality that allow users to send an enquiry request about products (thought simple contact form).
您可以理解以下屏幕截图:
You can understand seeing this screenshot:
我所有的产品都是带有(来自属性)的变体形式的可变产品.
All my product are variable product with variations (from attributes).
有什么方法可以让客户检索选定的变体并通过联系表7发送给它?
Is there any way to retrieve the selected variations by the customer and send it via contact form 7?
例如:
用户选择黑色和大小s，然后填写表格，并在发送电子邮件时，除了接收经典信息(名称，电子邮件等)之外，我还收到选择的属性(在这种情况下为 black 和 s )
User select the color black and size s, then fill the form and when the email is send, in addition to Receive the classic information (name, email ecc..) I receive also the attribute selected (in this case black and s)
推荐答案
更新:添加了WC 3+兼容性
我已经对其进行了测试，它不会发送与所选变体有关的任何数据，因为它只是在购物车"按钮下方(在单个产品页面中)输出所选的联系表.另外，此插件自两年多以来没有更新过，因此有些过时了.
I have tested it and it will not send any data related to chosen variations, because it is just outputting the selected contact form below add-to-cart button (in single products pages). Additionally this plugin hasn't been updated since more than 2 years, so it's some kind of outdated.
新功能:一种可行的解决方案
我已经找到了以下相关答案: 产品在联系表7中命名WooCommerce
它说明了如何在产品标签中设置联系表单7简码，以及如何在电子邮件中显示所选的产品标题.
It explains how to set a contact form 7 shortcode in a product tab and displaying the chosen product title in the email.
因此，从这个答案中，我已经转换了代码，可以像插件所做的那样使用它(就在添加到购物车按钮的下面).
So from this answer I have transposed the code, to use it just as the plugin was doing (just below the add to cart button).
在此示例/答案中，我已在产品2的可变产品属性中设置了产品变体: Color 和 Size .
Here in this example/answer I have set in my variable product 2 attributes for the product variations: Color and Size.
这是我将在代码中使用的表单的设置 Contact form 7 :
This are my settings Contact form 7 for the form that I will use in my code:
<label> Your Name (required)
[text* your-name] </label>
<label> Your Email (required)
[email* your-email] </label>
<label> Subject (required)
[text* your-subject class:product_name] </label>
<label> Your Message
[textarea your-message] </label>
[submit "Send"]
[text your-product class:product_details]
在这里，我添加了此文本字段 [text your-product class:product_details] .因此您还需要在邮件正文"内的邮件"设置标签中添加 [your-product] 标签，以在电子邮件中获取该邮件:
Here I have add this text field [text your-product class:product_details]. so you will need to add also in your "mail" settings tab [your-product] tag inside the "message body", to get that in your email:
From: [your-name] <[your-email]>
Subject: [your-subject]
Product: [your-product]
Message Body:
[your-message]
--------------
This e-mail was sent from a contact form 7
钩在 woocommerce_after_add_to_cart_form 操作钩中的PHP代码自定义功能:
The PHP code custom funtion hooked in woocommerce_after_add_to_cart_form action hook:
add_action( 'woocommerce_after_add_to_cart_form', 'product_enquiry_custom_form' );
function product_enquiry_custom_form() {
global $product, $post;
// Set HERE your Contact Form 7 shortcode:
$contact_form_shortcode = '[contact-form-7 id="382" title="form"]';
// compatibility with WC +3
$product_id = method_exists( $product, 'get_id' ) ? $product->get_id() : $product->id;
$product_title = $post->post_title;
// The email subject for the "Subject Field"
$email_subject = __( 'Enquire about', 'woocommerce' ) . ' ' . $product_title;
foreach($product->get_available_variations() as $variation){
$variation_id = $variation['variation_id'];
foreach($variation['attributes'] as $key => $value){
$key = ucfirst( str_replace( 'attribute_pa_', '', $key ) );
$variations_attributes[$variation_id][$key] = $value;
}
}
// Just for testing the output of $variations_attributes
// echo '<pre>'; print_r( $variations_attributes ); echo '</pre>';
## CSS INJECTED RULES ## (You can also remve this and add the CSS to the style.css file of your theme
?>
<style>
.wpcf7-form-control-wrap.your-product{ opacity:0;width:0px;height:0px;overflow: hidden;display:block;margin:0;padding:0;}
</style>
<?php
// Displaying the title for the form (optional)
echo '<h3>'.$email_subject.'</h3><br>
<div class="enquiry-form">' . do_shortcode( $contact_form_shortcode ) . '</div>';
## THE JQUERY SCRIPT ##
?>
<script>
(function($){
<?php
// Passing the product variations attributes array to javascript
$js_array = json_encode($variations_attributes);
echo 'var $variationsAttributes = '. $js_array ;
?>
// Displaying the subject in the subject field
$('.product_name').val('<?php echo $email_subject; ?>');
////////// ATTRIBUTES VARIATIONS SECTION ///////////
var $attributes;
$('td.value select').blur(function() {
var $variationId = $('input[name="variation_id"]').val();
// console.log('variationId: '+$variationId);
if (typeof $variationId !== 'undefined' ){
for(key in $variationsAttributes){
if( key == $variationId ){
$attributes = $variationsAttributes[key];
break;
}
}
}
if ( typeof $attributes !== 'undefined' ){
// console.log('Attributes: '+JSON.stringify($attributes));
var $attributesString = '';
for(var attrKey in $attributes){
$attributesString += ' ' + attrKey + ': ' + $attributes[attrKey] + ' — ';
}
$('.product_details').val( 'Product <?php echo $product_title; ?> (ID <?php echo $product_id; ?>): ' + $attributesString );
}
});
})(jQuery);
</script>
<?php
}
代码会出现在您活动的子主题(或主题)的function.php文件或任何插件文件中.
您将确切了解该插件使用该附加功能所做的工作:
You will get exactly what the plugin was doing with that additionals features:
- 自定义产品标题，作为邮件的主题.
- 其他字段(将被隐藏)中所选的变体属性名称标签+值.
- A custom product title, as subject of the mail.
- The selected variation attributes Name label + values in the additional fiels (that will be hidden).
这是我的测试服务器上的屏幕截图:
Here are the screen shoots from my test server:
具有选定属性的产品:
The product with the selected attributes:
我在表单上得到的内容(我不会隐藏特殊文本字段来向您显示jQuery提取的数据):
What I get on the form (I dont hide the special text field to show you the pulled data by jQuery):
如您所见，您将获得需要通过电子邮件发送的数据……
一旦我选择了产品的属性并填写了表单的其他字段，当我提交此表单时，我会收到以下电子邮件消息:
Once I have selected the attributes of the product and filled the other fields of the form, when I submit this form I get, this email message:
From: John Smith <j.smith@themain.com>
Subject: Enquire about Ship Your Idea
Product: Product Ship Your Idea (ID 40): Color: black — Size: 12 —
Message Body:
I send this request about this very nice product … I send this request about this very nice product …
--
This e-mail was sent from a contact form 7
所以一切都按预期工作，这是经过测试的有效示例答案.
这篇关于将所选的产品变体数据传递到联系表7查询表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
