README

该仓库包含

• 用于在开发堆栈上运行WooCommerce的所有基本插件；
• 用于扩展WooCommerce功能的附加插件；
• 涉及购买流程和产品卡片页面的附加营销功能；

使用方法

从终端定位到要安装插件的项目文件夹，并输入以下命令

composer require jumprock_packages/jumprock-woocommerce

开发

为了能够在本地开发插件，需要以开发模式安装插件。

介绍

在测试文件夹中存在多个docker化的wordpress实例。因此，可以在这些实例之一中安装插件以测试其功能。按照常规启动项目。

Docker Compose

在测试项目的docker-compose.yml文件中，需要向容器wordpress的卷中添加一个新卷。这应该将本地插件文件夹与容器内wordpress中的插件文件夹进行映射。注意缩进

示例

/Users/fabiopoliti/dev/jumpgroup/jumprock_packages/:/Users/fabiopoliti/dev/jumpgroup/jumprock_packages/

  wordpress:
    build:
      context: .
      dockerfile: ./Dockerfile
    container_name: ${APP_NAME}-wordpress
    networks:
      - web-network
    volumes:
      - ./:/var/www/html:rw,cached
      - ./docker/config/php.ini:/usr/local/etc/php/conf.d/php.ini
      - /Users/fabiopoliti/dev/jumpgroup/jumprock_packages/:/Users/fabiopoliti/dev/jumpgroup/jumprock_packages/
    labels:
      - traefik.docker.network=web-network
    restart: unless-stopped
    depends_on:
      - mysql

安装插件

确保在测试项目的composer.json文件中存在指向插件文件夹的path类型仓库，位于指向packagist的composer类型仓库之后。

请注意

类型为path的仓库的url必须是绝对路径，而不是相对路径。以下示例使用了绝对路径来指定类型为path的仓库。

"repositories": [
    ...,
    {
        "type": "path",
        "url": "/Users/fabiopoliti/dev/jumpgroup/jumprock_packages/*",
        "options": {
            "symlink": true
        }
    },
    ...
]

接下来，从终端定位到上述仓库的测试项目文件夹，并输入以下命令

composer require "jumprock_packages/jumprock-woocommerce @dev"

这将安装插件的开发版本，并允许在本地修改它，因为插件作为符号链接安装。

Gitignore Development Plugin Folder

为了避免将插件文件夹标记为git未追踪，需要将其添加到git忽略的文件和文件夹列表中。这需要对每个测试项目都做。

# Plugins
web/app/mu-plugins/jumprock-woocommerce

源代码文件夹 [WIP]

AddOptionPage.php

该类“AddOptionPage”在“JumpGroup\Woocommerce”命名空间中定义了静态方法“init”。当调用时，注册WordPress的“init”动作钩子，并将其与匿名函数关联。

在WordPress初始化过程中，匿名函数被执行。检查“acf_add_options_page”函数是否存在，它是Advanced Custom Fields (ACF)库的一部分。如果该函数存在，则使用ACF添加一个选项页面。

选项页面名为"Configurazioni elementi Woocommerce"，slug为woocommerce-elements-config。

AddWhatsappButton.php

类AddWhatsappButton提供了一种方法，可以在WooCommerce产品的卡片中添加自定义的WhatsApp按钮。

使用方法

1. 确保已安装并激活了Advanced Custom Fields (ACF)插件。
2. 通过调用类AddWhatsappButton的init()方法来初始化功能

短代码

该类提供了一个短代码jump_whatsapp_button，可以用于在产品卡片中显示WhatsApp按钮。

方法

init() init()方法在插件启动时调用，并注册acf/init动作和短代码[jump_whatsapp_button]来处理WhatsApp按钮。

whatsapp_button_shortcode() 当在产品内容中使用 jump_whatsapp_button 短代码时，会调用 whatsapp_button_shortcode 方法。此方法从 ACF（Advanced Custom Fields）的个性化字段（wts_phone、wts_link_text、wts_btn_text、wts_image）中检索一些值，并使用这些值来构建按钮代码。

只有当电话号码、图片和产品名称都可用时，才会构建 WhatsApp 按钮。按钮的 HTML 代码作为方法的返回值。

createAcf() 方法 createAcf 使用 ACF 库定义一组个性化字段。只有当 acf_add_local_field_group 函数可用时，才会添加字段组。定义的个性化字段包括电话号码、链接文本、按钮文本和图片。这些字段可以在由 AddOptionPage.php 文件创建的 配置元素 Woocommerce 页面 中进行配置。

样式

按钮样式必须插入到使用 mu-plugin 的网站的子主题样式表中。以下是一个适用于按钮的默认 CSS 样式：

.Whatsapp {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.Whatsapp__Btn {
    color: #575A5C !important;
    background: transparent;
    padding: 20px;
    font-weight: bold;
    font-size: 18px;
    padding: 15px 25px 15px 35px;
    font-family: "Acre", Sans-serif;
}

.Whatsapp__Btn:hover {
    color: #575A5C !important;
}

.Whatsapp__Avatar {
    margin-right: -1.5rem;
    z-index: 1;
}

.Whatsapp__Avatar img {
    height: 18px;
    width: 18px;
}

AddProductAvailability

AddProductAvailability 类负责添加短代码并集成 Advanced Custom Fields (ACF) 以在 WooCommerce 网站上显示产品的可用性。

使用方法

1. 将 AddProductAvailability 类的文件包含到您的项目中。
2. 通过调用 AddProductAvailability 类的 init() 方法来初始化此功能。

短代码

此类提供了一个 jump_product_availability_box 短代码，可用于在元素框中显示产品的可用性。

方法

init() 此方法通过附加到必要的 WordPress 动作来初始化功能。

product_availability_box_shortcode() 此方法生成用于显示产品可用性框的 HTML 输出。从 ACF 选项页面检索可用性框文本。如果存在文本，则生成可用性框的 HTML。

createAcf() 此方法创建所需的 ACF 字段组。将 "text" 参数注册为文本字段。在 woocommerce-elements-config 选项页面中配置参数。

样式

框的样式必须插入到使用 mu-plugin 的网站的子主题样式表中。以下是一个适用于按钮的默认 CSS 样式：

.BoxProductAvailability {
    margin-top: 1rem; 
    margin-bottom: 1rem; 
    margin-left: 13rem;
    display: flex;
    gap: 1rem;
}

AddProductTags

AddProductTags 类负责添加短代码并集成 Advanced Custom Fields (ACF) 以在 WooCommerce 网站上显示产品的标签。

使用方法

1. 将 AddProductTags 类的文件包含到项目中。
2. 通过调用 AddProductTags 类的 init() 方法来初始化此功能。

短代码

此类提供了一个 [jump_product_tags] 短代码，可用于在前端显示产品标签。

方法

init() 此方法通过附加到必要的 WordPress 动作来初始化功能。

product_tags_shortcode() 此方法生成用于显示产品标签的 HTML 输出。检索与当前帖子关联的产品标签并检查 ACF 选项页面中的 tag_has_link 字段的值。根据值，为每个标签生成适当的 HTML。如果 tag_has_link 的值为 "yes"，则产品页面中的标签将是可点击的，并将指向标签存档页面。

createAcfOptionPage() 此方法创建所需的 ACF 字段组。将 tag_has_link 字段注册为单选按钮，具有 "Yes" 和 "No" 选项。默认值设置为 "Yes"。字段组可在 woocommerce-elements-config 选项页面中进行配置。

createAcfProductTagPage() 此方法向每个产品标签添加 ACF 图像类型。注册 tag_image 字段。根据值，在标签的 HTML 中将显示或隐藏图像。需要上传一个 23x23px 的 svg 文件。

样式

标签的样式必须插入到使用 mu-plugin 的网站子主题样式表中。以下是一个可应用的默认 CSS 样式。

.TagWrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.TagWrapper__Image {
    font-family: "Acre", Sans-serif;
    display: inline-block;
    margin-bottom: -0.5rem;
    margin-right: 0.3rem;
    height: 42px;
    /* position: relative;
    flex: 0 0 13rem; */
    padding-right: 0rem;
    font-weight: 600;
}

.TagWrapper__Image img {
    display: inline-block;
    width: 40px;
    height: auto;
    object-fit: cover;
    padding: 4px 4px 4px 0px;
    border-radius: 50%;
}

.TagWrapper__Image::after {
    content: attr(data-title);
    font-size: 0.8em;
    padding: 2.5px 10px;
    background: #FFEEE4;
    color: #EC7556;
    border: 1px solid #FFEEE4;
    border-radius: 32px;
    text-align: left;
    /* position: absolute;
    top: 9px;
    left: 25px;
    z-index: -1; */
    padding: 8px 24px;
}

未来改进

• 可以插入标签的解释性图片