README

此插件允许您通过添加“在WhatsApp下单”和“在WhatsApp分享”按钮到您的网站来在WhatsApp上放置订单并与WhatsApp联系人分享产品。使用“在WhatsApp下单”按钮，用户可以直接将订单发送到供应商的WhatsApp号码。使用“在WhatsApp分享”，用户可以通过WhatsApp与家人和朋友分享产品的详细信息。

需求

Order On WhatsApp插件运行所需的前提条件是

安装/激活Craft Commerce插件。
Craft CMS版本3.1或更高。
PHP版本7.2.5或更高。

安装

您可以从插件商店或使用Composer安装此插件。

从插件商店

转到项目控制面板中的插件商店并搜索“在WhatsApp下单”。然后点击其模态窗口中的“安装”按钮。

使用Composer

打开您的终端并运行以下命令

# go to the project directory
cd /path/to/my-project

# tell Composer to load the plugin
composer require zealousweb/order-on-whatsapp

# tell Craft to install the plugin
./craft install/plugin order-on-whatsapp

插件的主要功能

在您的WhatsApp账户上接受订单。
在商店（列表）页面、产品详情页面、购物车页面和结账页面等各个页面都有WhatsApp下单功能。
为您的WhatsApp按钮添加自定义文本。
为您的WhatsApp按钮添加自定义颜色。
将此功能应用于特定产品类型/所有产品。

常规设置

国家代码
在设置页面上，将有一个包含所有国家和其代码的下拉菜单。您必须选择您的国家代码。

WhatsApp号码
您必须在此处输入您的WhatsApp号码。可以是个人或商业号码。

WhatsApp按钮设置

按钮上的文本
您可以从这里自定义按钮的文本。按钮上的默认文本将是“在WhatsApp下单”。

按钮的背景颜色
您可以从这里自定义按钮的颜色。按钮的默认颜色设置为森林绿（‘#228B22’）。

按钮文本的颜色
您可以从这里自定义按钮上文字的颜色。文字的默认颜色设置为白色（‘#FFFFFF’）。

应用于所有产品
如果您想在每个产品上都有按钮，请勾选此框。如果您已经勾选此框，“应用于特定产品”功能将禁用。

应用于特定产品
如果您想在特定产品类型上有按钮，可以从这里选择这些产品类型。

要使按钮出现在特定页面上，您必须从设置页面进行检查。例如，如果您想使按钮出现在列表页面上，您必须勾选“显示在商店页面上”。

分享按钮设置

按钮上的文本
您可以从这里自定义按钮的文本。按钮上的默认文本将是“在WhatsApp分享”。

按钮的背景颜色
您可以从这里自定义按钮的颜色。按钮的默认颜色设置为绿豆绿（‘#275d43’）。

按钮文本的颜色
您可以从这里自定义按钮上文字的颜色。文字的默认颜色设置为白色（‘#FFFFFF’）。

应用于所有产品
如果您想在所有产品上都有按钮，请勾选此框。如果您已经勾选此框，“应用于特定产品”功能将禁用。

应用于特定产品
如果您想在特定产品类型上有按钮，可以从这里选择这些产品类型。

要使按钮出现在特定页面上，您必须从设置页面进行检查。例如，如果您想使按钮出现在列表页面上，您必须勾选“显示在商店页面上”。

用法

要将“在WhatsApp下单”和“在WhatsApp分享”按钮包含到您的网站中，您必须在您的twig文件中包含以下按页面列出的代码。此代码将在相同的位置生成按钮。HTML中添加了一些类，供您自定义设计使用。

产品列表页面

您可以将以下代码添加到“产品列表”页面上的产品循环中。您需要通过替换“”字符串来传递产品ID。要获取产品图片的链接并显示在WhatsApp消息中，您需要传递图片的URL。

{% set productId = <Pass Product Id> %}
{% set productImage = <Pass Image Url> %}
{% hook 'whatsapp-order-product-list' %}  // For order on WhatsApp button
{% hook 'whatsapp-share-product-list' %}  // For share on WhatsApp button

以下是在您 twig 文件中添加上述代码以获取按钮的示例代码。

{% for key,data in product_list %}
     <div class="product-details">
        {{ data.title }} </br>
        <p><b>Price:</b> {{ data.defaultPrice }}</p></br>
        {% set productId = data.id %}
        {% set productImage = data.productImage.one().url %}
        {% hook  'whatsapp-order-product-list' %}
        {% hook 'whatsapp-share-product-list' %}
     </div>
{% endfor %}

注意：产品详情页面的链接将不会在WhatsApp消息中提供。

产品详情页面

您可以将以下代码添加到“产品详情”页面。您需要通过替换“”字符串来传递产品ID。要获取产品图片的链接并显示在WhatsApp消息中，您需要传递图片的URL。

{% set productId = <Pass Product Id> %}
{% set productImage = <Pass Image Url> %}
{% hook 'whatsapp-order-product-list' %}  // For order on WhatsApp button
{% hook 'whatsapp-share-product-list' %}  // For share on WhatsApp button

以下是在您 twig 文件中添加上述代码以获取按钮的示例代码。

{% for key,data in product_list %}
     <div class="product-details">
        {{ data.title }} </br>
        <p><b>Price:</b> {{ data.defaultPrice }}</p></br>
        {% set productId = data.id %}
        {% set productImage = data.productImage.one().url %}
        {% hook  'whatsapp-order-product-list' %}
        {% hook 'whatsapp-share-product-list' %}
     </div>
{% endfor %}

注意：产品详情页面的链接将在WhatsApp消息中提供。

购物车页面

您可以将以下代码添加到您想要显示“WhatsApp按钮”的“购物车”页面。

{% hook 'whatsapp-order-product-cart' %}

注意：产品详情页面的链接将不会在WhatsApp消息中提供。

结账页面

您可以将以下代码添加到“结账”页面。

{% hook 'whatsapp-order-checkout-button' %}

您可以将此行代码放在结账页面表单标签的结尾上方。

由 ZealousWeb 提供

zealousweb / order-on-whatsapp

维护者

详细信息